@charset "UTF-8";
    @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
p{
  font-size: var(--fs-main);
  color: var(--clr-txt-paragraph);
}
    /* Box sizing rules */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      word-wrap: break-word;
      overflow-wrap: break-word;
      -webkit-tap-highlight-color: transparent;
      tap-highlight-color: transparent;
    }

    /* Remove default margin */
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    figure,
    blockquote,
    dl,
    dd,
    small,
    span {
      margin-block-end: 0;
    }

    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
    ul[role='list'],
    ol[role='list'] {
      list-style: none;
    }

    /* Set core root defaults */
    html:focus-within {
      scroll-behavior: smooth;
    }

    /* Set core body defaults */
    body {
      min-height: 100vh;
      min-height: 100dvh;
      text-rendering: optimizeSpeed;
      line-height: 1.5;
    }

    /* A elements that don't have a class get default styles 
    a:not([class]) {
      text-decoration-skip-ink: auto;
    }*/

    /* Make images easier to work with */
    img,
    picture {
      max-width: 100%;
      display: block;
    }

    /* Inherit fonts for inputs and buttons */
    * {
      font: inherit;
    }

    /* Button Hover Cursor */
    button{
        cursor: url('cursor-pointer.svg'), pointer;
    }

    button,
    input,
    textarea {
        outline: none;
        border: none;
    }

    button:focus,
    button:active,
    input:focus,
    textarea:focus {
        /*outline: none !important;
        border: none !important;*/
    }

    /* Chrome, Safari, Edge ve Opera */
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
      -webkit-appearance: none; /* Hides the spinner buttons */
      margin: 0; /* Removes any default margin */
    }

    /* Firefox */
    input[type=number] {
      -moz-appearance: textfield; /* Makes the input look like a regular text field */
    }


    /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
    @media (prefers-reduced-motion: reduce) {
      html:focus-within {
      scroll-behavior: smooth;
      }
      
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Colours By Their HEX */
    /*  Neutral: #;
        Light: #;
        Dark: #;
    */

    /* Root Elements */
    :root{

        --max-page-width: 1920px; /* Maximum Page Width */

        --ff-main: "Inter", sans-serif;

        
        /* Font Weights */
        --fw-black: 900;
        --fw-extra-bold: 800;
        --fw-bold: 700;
        --fw-semi-bold: 600;
        --fw-medium: 500;
        --fw-regular: 400;
        --fw-light: 300;
        --fw-extra-light: 200;
        --fw-thin: 100;


        /* Font Sizes */
        --fs-main: clamp(.85em, 1.2vw, .96em);
        --fs-h1: clamp(2.8em, 5vw, 4em);
        --fs-h2: clamp(2.5em, 4.5vw, 3.5em);
        --fs-h3: clamp(2.2em, 4vw, 3em);
        --fs-h4: clamp(2em, 3.5vw, 2.5em);
        --fs-h5: clamp(1.7em, 3vw, 2em);
        --fs-h6: clamp(1.4em, 2.5vw, 1.6em);

        --fs-larger: clamp(2.2em, 8vw, 3.5em);
        --fs-xl: clamp(2em, 6vw, 2.8em);
        --fs-l: clamp(1.7em, 4vw, 2.3em);
        --fs-m: clamp(1.4em, 3vw, 1.8em);
        --fs-mm: clamp(1.2em, 2.5vw, 1.5em);
        --ms-sm: clamp(1em, 2vw, 1.1em);
        --fs-s: clamp(1em, 2vw, 1em);
        --fs-ms: clamp(0.8em, 1.5vw, 0.9em);
        --fs-xs: clamp(0.7em, 1.2vw, 0.8em);

        --fs-btn: clamp(1.05em, 2vw, 1.05em);  /* Button Font Size*/

        --fs-input: 15px;  /* Input Font Size */

        --fs-label: 13px;


        /* Background Colors */
        --clr-bg: var(--clr-neutral-light);

        /* Neutral Colors *//*
        --clr-neutral-light: #1A1A1D;
        --clr-neutral-dark: #323232;
        --clr-neutral-gray: #606060;
        --clr-neutral-gray-light: hsl(0, 0%, 83%);
        --clr-neutral-gray-lighter: #DEDEDE;

        --clr-neutral-opacity: #1a1a1d6b;
        
        --clr-warning: hsl(0, 100%, 50%);*/


         /* Neutral Colors */
         --clr-neutral-light: #F2F9FF;
         --clr-neutral-dark: #323232;
         --clr-neutral-gray: #606060;
         --clr-neutral-gray-light: hsl(0, 0%, 83%);
         --clr-neutral-gray-lighter: #DEDEDE;
 
         --clr-neutral-opacity: #ffffffc4;
         
         --clr-warning: hsl(0, 100%, 50%);
 
 
         /* Text Color */
         --clr-txt: #606060;
         --clr-txt-paragraph: #838383;

        /* Form UI Elements Color */
        --form-ui-color: var(--clr-primary);
        --form-ui-hover-color: #ccc;


        /* Dropdown */
        --dropdown-bg: var(--clr-neutral-light);            /* Recommended Color: hsl(0, 0%, 100%) */
        --dropdown-clr: var(--clr-txt);           /* Recommended Color: hsl(0, 0%, 38%)*/
        --dropdown-hover: var(--input-bg-hover);         /* Recommended Color: hsl(0, 0%, 94%) */
        --dropdown-padding: var(--input-padding);       /* Recommended Padding: .85em 1.2em */
        --dropdown-shadow: var(--clr-rgba-gray-softer) 0 0 5px 1px; /* Recommended Shadow: var(--clr-rgba-gray-softer) 0 0 5px 1px */
        --dropdown-alert-clr: var(--clr-txt); /* Recommended Shadow: var(--clr-rgba-gray-softer) 0 0 5px 1px */
        --dropdown-fs: clamp(.85em, 1.2vw, .9em);

        
        /* Modal Styling */
        --modal-bg: #0000003b;               /* Set bg color */
        --modal-blur: blur(5px);               /* Set bg blur */
        --modal-content-bg: ;       /* Set modal bg color */
        --modal-padding: 1em 1.2em 1.4em 1.2em;

        --modal-scale: .95;               /* Set bg color */

        --modal-content-padding: ;  /* Set padding */
        --modal-content-radius: ;   /* Set radius */
        --modal-content-border: ;   /* Set border */
        --modal-content-clr: ;      /* Set color */


        /* Alert Styling */
        --alert-bg: ;               /* Set bg color */
        --alert-clr: ;              /* Set color */
        
        --alert-border: ;           /* Set border */
        --alert-radius: ;           /* Set border radius */
        --alert-padding: ;          /* Set padding */

        
        /* Layout Styling */
        --layout-container-border: 1.5px solid var(--clr-neutral-gray-lighter);
        --layout-container-border-radius: 20px;
        --layout-container-padding: 3em 4em;

        
        --container-hover-color: #e0e0e06e;

        --container-border: 1.5px solid var(--clr-neutral-gray-lighter);
        --container-hover: var(--container-hover-color);

        /* Primary Colors */
        --clr-primary: var(--clr-primary-300);
      
        --clr-primary-100: #93BAF6;
        --clr-primary-200: #649CF2;
        --clr-primary-300: #357DEE;
        --clr-primary-400: #1363DF;
        --clr-primary-500: #1158C5;
        --clr-primary-600: #0F4DAE;
        --clr-primary-700: ;
        --clr-primary-800: ;
        --clr-primary-900: ;

        --clr-primary-lighter: var(--clr-primary-300);
        --clr-primary-darker: var(--clr-primary-400);


         /* Accent Colors */
         --clr-accent-success: #00D80B;
         --clr-accent-danger: #FC4444;
         --clr-accent-warning: #EDE55B;


         /* Aside Colors */
         --aside-bg: #212121; 
         --aside-nav-active-bg: #7676763b;
         --aside-nav-hover-bg: #7676761c;
         --aside-nav-hover-shadow: var(--clr-rgba-gray-soft) 0 2px 5px 2px;
        

        /* Gradient Colors */
        --gradient-primary-y: ;
        --gradient-primary-x: ;
        
        --gradient-btn: ;


        /* Button */
        --btn-border: 2.3px solid var(--clr-primary);

        --btn-bg: var(--clr-primary);
        --btn-bg-hover: var(--clr-primary-darker);
        --btn-txt: var(--clr-neutral-light);
        
        --btn-border-gray: var(--clr-rgba-gray-soft);

        --btn-box-shadow: var(--clr-primary-100) 0 0 0 5px;

        --btn-border-radius-main: 20px;
        --btn-border-radius: 10px;
        --btn-border-radius-smooth: 12px;
        --btn-border-radius-sharp: 5px;

        --btn-border-radius-xl: 24px;
        --btn-border-radius-lg: 20px;
        --btn-border-radius-md: 12px;
        --btn-border-radius-sm: 10px;
        --btn-border-radius-xs: 5px;
        --btn-border-radius-pill: 100vw;
        --btn-border-radius-none: 0;
        
        --btn-padding: .45em 1.2em;


        /* Secondary Button */
        --btn-secondary-bg: transparent;
        --btn-secondary-bg-hover: ;
        --btn-secondary-txt: var(--btn-bg);
        
        --btn-secondary-border-clr: var(--btn-bg);
        --btn-secondary-hover: var(--clr-rgba-gray-softer);


         /* Neutral Button */
         --btn-neutral-bg: var(--clr-neutral-gray-lighter);
         --btn-neutral-bg-hover: var(--clr-neutral-gray-light);
         --btn-neutral-text-clr: var(--clr-txt);
         
         --btn-neutral-border-clr: var(--clr-neutral-gray-lighter);
         --btn-neutral-hover: var(--clr-rgba-gray-softer);


         /* Danger Button */
         --btn-danger-bg: var(--clr-accent-danger);
         --btn-danger-bg-hover: var(--clr-accent-danger-dark);
         --btn-danger-text-clr: var(--clr-neutral-light);


         --btn-add-more-bg: transparent;
         --btn-add-more-text-clr: var(--clr-txt);
         --btn-add-more-border: 2px dashed #bebebe;
         --btn-add-more-border-radius: 8px;
         --btn-add-more-padding: .7em 1em;
         --hover-btn-add-more-bg: var(--clr-rgba-gray-softer);


         --btn-dashboard-btn-bg: transparent;
         --btn-dashboard-btn-border: 1.7px solid #bcbcbc;
         --btn-dashboard-btn-border-radius: 8px;
         --btn-dashboard-btn-text-clr: var(--clr-txt);
         --hover-btn-dashboard-btn-bg: var(--clr-rgba-gray-softer);


         /* Gradient Button */
        --gradient-btn-border-size: ; /* Set the border size of the button */


        /* Input */
        --input-bg-hover: rgba(0,0,0,0.02);         /* Set color */
        
        --input-clr: var(--clr-txt);              /* Set color */

        --input-border: 1.5px solid #dcdcdc;           /* Recommended Border: 1.5px solid #dcdcdc */
        --input-border-radius: 10px;    /* Recommended Radius: 10px */
        --input-padding: .65em 1em;          /* Recommended Padding: .65em 1.2em */
        
        --input-error-fw: var(--fw-medium);    /* Set font weight ( Recommended: var(--fw-regular) );*/
        --input-error-fs: 9px;         /* Set font size ( Recommended: 12px );*/
        --input-error-clr: var(--clr-accent-danger);         /* Set color ( Recommended: hsl(0, 100%, 50%) );*/

        
        /* Input File */
        --input-clr-file: ;         /* Set color ( Recommended: hsl(0, 0%, 34%) );*/
        --input-file-bg-hover: var(--input-bg-hover);    /* Set color ( Recommended: rgba(0,0,0,0.05) );*/


        /* Input Range */
        --input-range-color: #000;            /* Set input range color */
        --input-range-null-color: #afafaf;    /* Set input range color (null) */

        --input-range-bar-size: 8px;            /* Set input range bar size */

        --input-range-thumb-color: #727272;   /* Set input range thumb color */
        --input-range-price-color: #2b2b2b;   /* Set input range price color */

        --input-range-thumb-size: 20px;         /* Set input range thumb size */


        /* Fast Shadows */
        --clr-rgba-gray-much-darker-opacity: rgba(48, 48, 48, 0.9); 
        --clr-rgba-gray-darker-opacity: rgba(48, 48, 48, 0.8); 
        --clr-rgba-gray-much-darker: rgba(0,0,0,0.50); 
        --clr-rgba-gray-med-darker: rgba(0,0,0,0.40); 
        --clr-rgba-gray-darker: rgba(0,0,0,0.20); 
        --clr-rgba-gray: rgba(0,0,0,0.15);
        --clr-rgba-gray-soft: rgba(0,0,0,0.10);
        --clr-rgba-gray-softer: rgba(0,0,0,0.05);

        --clr-gray-darker: hsl(0, 0%, 24%);
        --clr-gray: hsl(0, 0%, 34%);
        --clr-gray-softer: hsl(0, 0%, 40%);
        --clr-gray-much-softer: hsl(0, 0%, 90%);


        /* Transition */
        --transition-shorter: .1s;
        --transition: .3s;
        --transition-longer: .5s;

        /* Animation Transitions*/
        --scale-animation: .3s;
        --opacity-animation: .6s;
        --text-animation: .5s;
        --text-animation-longer: 1s;
        --xl-animation: .5s;
        --xr-animation: .5s;


        --title-max-width: 300px;
        --title-bg: var(--clr-neutral-light);
        --title-border: 1.5px solid #dfdfdf;
        --title-border-radius: 5px;
        --title-shadow: var(--clr-rgba-gray-softer) 0 0 5px 1px;
        --title-padding: .3em .8em;
        --title-fs: 14px;
        --title-fw: var(--fw-regular);
        --title-clr: #9b9b9b;


        --theme-switch-width: 80px;
        --theme-switch-height: 25px;

        --confirmation-effect: 2px solid #93bbf668;

        --chat-bubble-bg: #ffffffa7;
        --chat-bubble-shadow: var(--chat-bubble-clr) 0 2px 5px 1px;
        --chat-bubble-clr: hsl(0, 0%, 90%);
        --chat-bubble-blur: blur(3px);

        --profile-card-bg-1: linear-gradient(-50deg,  var(--clr-primary-600) 40%, var(--clr-primary-200));
        --profile-card-bg-2: linear-gradient(120deg,  var(--clr-primary-600) 40%, var(--clr-primary-200));
        --profile-card-active-bg:  linear-gradient(to left, #ffffff32 40%, #ffffff50);
        --profile-card-active-clr: var(--clr-neutral-light);

        --dashboard-gap: .5em;
        
        --modal-header-gap: .5em;
    }
  
  :root[data-theme="dark"] {
 
         /* Neutral Colors */
         --clr-neutral-light: #1A1A1D;
         --clr-neutral-dark: #323232;
         --clr-neutral-gray: #454545;
         --clr-neutral-gray-light: hsl(0, 0%, 83%);
         --clr-neutral-gray-lighter: #DEDEDE;
 
         --clr-neutral-opacity: #1a1a1d6b;
         
         --clr-warning: hsl(0, 100%, 50%);
 
         --btn-txt: var(--clr-txt);
         --btn-neutral-text-clr: var(--clr-neutral-lightI);
 
         /* Text Color */
         --clr-txt: #ebf2f8;
         --clr-txt-paragraph: rgb(146, 146, 146);
        
        /* Modal Styling */
        --modal-bg: #0000003b;               /* Set bg color */

        --container-hover-color: #0000003b; /* Set bg color */
        
        --btn-neutral-text-clr: var(--clr-neutral-gray);
      
        --clr-primary-100: #93BAF6;
        --clr-primary-200: #649CF2;
        --clr-primary-300: #357DEE;
        --clr-primary-400: #1363DF;
        --clr-primary-500: #1158C5;
        --clr-primary-600: #0F4DAE;


         /* Accent Colors */
         --clr-accent-success: #00D80B;
         --clr-accent-danger: #FC4444;
         --clr-accent-danger-dark: hsl(0, 97%, 53%);
         --clr-accent-warning: #EDE55B;


        /* Input */
        --input-bg-hover: rgba(0,0,0,0.02);         /* Set color */

        --input-border: 1.5px solid #dcdcdc;           /* Recommended Border: 1.5px solid #dcdcdc */


        /* Input Range */
        --input-range-color: #000;            /* Set input range color */
        --input-range-null-color: #afafaf;    /* Set input range color (null) */


        --input-range-thumb-color: #727272;   /* Set input range thumb color */
        --input-range-price-color: #2b2b2b;   /* Set input range price color */



        /* Fast Shadows */
        --clr-rgba-gray-much-darker-opacity: rgba(48, 48, 48, 0.9); 
        --clr-rgba-gray-darker-opacity: rgba(48, 48, 48, 0.8); 
        --clr-rgba-gray-much-darker: rgba(0,0,0,0.50); 
        --clr-rgba-gray-med-darker: rgba(0,0,0,0.40); 
        --clr-rgba-gray-darker: rgba(0,0,0,0.20); 
        --clr-rgba-gray: rgba(0,0,0,0.15);
        --clr-rgba-gray-soft: rgba(0,0,0,0.10);
        --clr-rgba-gray-softer: rgba(0,0,0,0.05);

        --clr-gray-darker: hsl(0, 0%, 24%);
        --clr-gray: hsl(0, 0%, 34%);
        --clr-gray-softer: hsl(0, 0%, 40%);
        --clr-gray-much-softer: hsl(0, 0%, 90%);


        --title-border: 1.5px solid #dfdfdf;
        --title-clr: #9b9b9b;

        --chat-bubble-bg: #202020a7;
        --chat-bubble-shadow: var(--chat-bubble-clr) 0 2px 5px 1px;
        --chat-bubble-clr: hsl(0, 0%, 22%);
        --chat-bubble-blur: blur(3px);

  }
  
  .toggle-slider {
      background: var(--toggle-bg);
  }

    .bg-transition {
      transition: var(--transition) ease-in-out !important;
    }

    *.smooth-transition {
      transition: var(--transition) ease-in-out !important;
    }

    @media screen and (max-width: 768px){
      .bg-transition {
        transition: none !important;
      }
  
      *.smooth-transition {
        transition: none !important;
      }
      
    }

    @media screen and (max-width: 550px){
        :root{
          --container-border: 1px solid var(--clr-neutral-gray-lighter);
        }
      
    }

    /* Header Texts */
    h1{ font-size: var(--fs-h1); font-weight: var(--fw-semi-bold);}
    h2{ font-size: var(--fs-h2); font-weight: var(--fw-semi-bold);}
    h3{ font-size: var(--fs-h3); font-weight: var(--fw-semi-bold);}
    h4{ font-size: var(--fs-h4); font-weight: var(--fw-semi-bold);}
    h5{ font-size: var(--fs-h5); font-weight: var(--fw-semi-bold);}
    h6{ font-size: var(--fs-h6); font-weight: var(--fw-semi-bold);}

    /* Button Styling */
    button:not(.hamburgerBtn, .closeAsideBtn),
    button:not(.hamburgerBtn, .closeAsideBtn)[type="submit"],
    button:not(.hamburgerBtn, .closeAsideBtn)[type="button"],
    input:not(.hamburgerBtn, .closeAsideBtn)[type="button"],
    input:not(.hamburgerBtn, .closeAsideBtn)[type="submit"],
    a.buttonType{
        position: relative;
        overflow: hidden;
        padding: var(--btn-padding);
        cursor: url('cursor-pointer.svg'), pointer;
        transition: var(--transition);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .5em;
        font-weight: var(--fw-normal);
        background-color: var(--btn-bg);
        font-size: var(--fs-btn);
        border-radius: var(--btn-border-radius-pill);
        color: var(--btn-txt);
        border: var(--btn-border);
    }

    /* Button Hover */
    button:not(.hamburgerBtn, .closeAsideBtn):is(:hover,:focus-visible),
    button:not(.hamburgerBtn, .closeAsideBtn)[type="submit"]:is(:hover,:focus-visible),
    button:not(.hamburgerBtn, .closeAsideBtn)[type="button"]:is(:hover,:focus-visible),
    input:not(.hamburgerBtn, .closeAsideBtn)[type="button"]:is(:hover,:focus-visible),
    input:not(.hamburgerBtn, .closeAsideBtn)[type="submit"]:is(:hover,:focus-visible),
    a.buttonType:is(:hover,:focus-visible){
      background-color: var(--btn-bg-hover);
      border-color: var(--btn-bg-hover);
    }

    button:not(.hamburgerBtn, .closeAsideBtn, .transparentBtn, .neutralBtn, .neutralBtn2, .dangerBtn, .dashboardBtn, .addMore):is(:active),
    button:not(.hamburgerBtn, .closeAsideBtn, .transparentBtn, .neutralBtn, .neutralBtn2, .dangerBtn, .dashboardBtn, .addMore)[type="submit"]:is(:active),
    button:not(.hamburgerBtn, .closeAsideBtn, .transparentBtn, .neutralBtn, .neutralBtn2, .dangerBtn, .dashboardBtn, .addMore)[type="button"]:is(:active),
    input:not(.hamburgerBtn, .closeAsideBtn, .transparentBtn, .neutralBtn, .neutralBtn2, .dangerBtn, .dashboardBtn, .addMore)[type="button"]:is(:active),
    input:not(.hamburgerBtn, .closeAsideBtn, .transparentBtn, .neutralBtn, .neutralBtn2, .dangerBtn, .dashboardBtn, .addMore)[type="submit"]:is(:active),
    a.buttonType:is(:focus, :active){
      box-shadow: var(--btn-box-shadow);
    }

    @media screen and (max-width: 550px){
    button:not(.hamburgerBtn, .closeAsideBtn),
    button:not(.hamburgerBtn, .closeAsideBtn)[type="submit"],
    button:not(.hamburgerBtn, .closeAsideBtn)[type="button"],
    input:not(.hamburgerBtn, .closeAsideBtn)[type="button"],
    input:not(.hamburgerBtn, .closeAsideBtn)[type="submit"],
    a.buttonType{
      /*padding-block: .3em;*/  
    }
    }

     /* ---------------- SECONDARY BUTTON --------------- */
     button:is(.secondaryBtn),
     button:is(.secondaryBtn)[type="submit"],
     button:is(.secondaryBtn)[type="button"],
     input:is(.secondaryBtn)[type="button"],
     input:is(.secondaryBtn)[type="submit"]{
       background-color: var(--btn-secondary-bg);
       color: var(--btn-secondary-txt);
       border-color: var(--btn-secondary-border-clr);
     }
 
     button:is(.secondaryBtn, .transparentBtn, .neutralBtn2, .dangerBtn, .dashboardBtn, .addMore):is(:hover,:focus-visible),
     button:is(.secondaryBtn, .transparentBtn, .neutralBtn2, .dangerBtn, .dashboardBtn, .addMore)[type="submit"]:is(:hover,:focus-visible),
     button:is(.secondaryBtn, .transparentBtn, .neutralBtn2, .dangerBtn, .dashboardBtn, .addMore)[type="button"]:is(:hover,:focus-visible),
     input:is(.secondaryBtn, .transparentBtn, .neutralBtn2, .dangerBtn, .dashboardBtn, .addMore)[type="button"]:is(:hover,:focus-visible),
     input:is(.secondaryBtn, .transparentBtn, .neutralBtn2, .dangerBtn, .dashboardBtn, .addMore)[type="submit"]:is(:hover,:focus-visible){
       background-color: var(--btn-secondary-hover);
     }

       /* ---------------- TRANSPARENT BUTTON --------------- */
       button:is(.transparentBtn),
       button:is(.transparentBtn)[type="submit"],
       button:is(.transparentBtn)[type="button"],
       input:is(.transparentBtn)[type="button"],
       input:is(.transparentBtn)[type="submit"]{
         background-color: transparent;
         color: var(--btn-bg);
         border-color: transparent !important;
       }

         /* ---------------- NEUTRAL BUTTON --------------- */
         button:is(.neutralBtn),
         button:is(.neutralBtn)[type="submit"],
         button:is(.neutralBtn)[type="button"],
         input:is(.neutralBtn)[type="button"],
         input:is(.neutralBtn)[type="submit"]{
          background-color: var(--btn-neutral-bg);
          color: var(--btn-neutral-text-clr) !important;
          border-color: var(--btn-neutral-border-clr);
         }

         button:is(.neutralBtn) p,
         button:is(.neutralBtn)[type="submit"] p,
         button:is(.neutralBtn)[type="button"] p,
         input:is(.neutralBtn)[type="button"] p,
         input:is(.neutralBtn)[type="submit"] p{
          color: var(--btn-neutral-text-clr) !important;
         }

         button:is(.neutralBtn):is(:hover,:focus-visible),
         button:is(.neutralBtn)[type="submit"]:is(:hover,:focus-visible),
         button:is(.neutralBtn)[type="button"]:is(:hover,:focus-visible),
         input:is(.neutralBtn)[type="button"]:is(:hover,:focus-visible),
         input:is(.neutralBtn)[type="submit"]:is(:hover,:focus-visible){
           background-color: var(--btn-neutral-bg-hover);
           border-color: transparent;
         }

         /* ---------------- NEUTRAL (2) BUTTON --------------- */
         button:is(.neutralBtn2),
         button:is(.neutralBtn2)[type="submit"],
         button:is(.neutralBtn2)[type="button"],
         input:is(.neutralBtn2)[type="button"],
         input:is(.neutralBtn2)[type="submit"]{
          background-color: transparent;
          color: var(--btn-neutral-text-clr) !important;
          border-color: var(--btn-neutral-border-clr);
         }


         /* ---------------- DANGER BUTTON --------------- */
         button:is(.dangerBtn),
         button:is(.dangerBtn)[type="submit"],
         button:is(.dangerBtn)[type="button"],
         input:is(.dangerBtn)[type="button"],
         input:is(.dangerBtn)[type="submit"]{
          background-color: var(--btn-danger-bg);
          color: var(--btn-danger-text-clr) !important;
          border-color: transparent;
         }

         button:is(.dangerBtn):is(:hover,:focus-visible),
         button:is(.dangerBtn)[type="submit"]:is(:hover,:focus-visible),
         button:is(.dangerBtn)[type="button"]:is(:hover,:focus-visible),
         input:is(.dangerBtn)[type="button"]:is(:hover,:focus-visible),
         input:is(.dangerBtn)[type="submit"]:is(:hover,:focus-visible){
          background-color: hsl(0, 97%, 53%) !important;
           border-color: transparent;
          }


           /* ---------------- ADD MORE BUTTON --------------- */
         button:is(.addMore),
         button:is(.addMore)[type="submit"],
         button:is(.addMore)[type="button"],
         input:is(.addMore)[type="button"],
         input:is(.addMore)[type="submit"]{
          background-color: var(--btn-add-more-bg);
          color: var(--btn-add-more-text-clr) !important;
          border: var(--btn-add-more-border) !important;
          border-radius: var(--btn-add-more-border-radius) !important;
          padding: var(--btn-add-more-padding) !important;
         }

         button:is(.addMore):is(:hover,:focus-visible),
         button:is(.addMore)[type="submit"]:is(:hover,:focus-visible),
         button:is(.addMore)[type="button"]:is(:hover,:focus-visible),
         input:is(.addMore)[type="button"]:is(:hover,:focus-visible),
         input:is(.addMore)[type="submit"]:is(:hover,:focus-visible){
          background-color: var(--hover-btn-add-more-bg);
          }

          button:is(.addMore) img,
          button:is(.addMore)[type="submit"] img,
          button:is(.addMore)[type="button"] img,
          input:is(.addMore)[type="button"] img,
          input:is(.addMore)[type="submit"] img{
            width: 1em;
            height: 1em;
          }



          /* ---------------- DASHBOARD BUTTON --------------- */
         button:is(.dashboardBtn),
         button:is(.dashboardBtn)[type="submit"],
         button:is(.dashboardBtn)[type="button"],
         input:is(.dashboardBtn)[type="button"],
         input:is(.dashboardBtn)[type="submit"]{
          background-color: var(--btn-dashboard-btn-bg);
          color: var(--btn-dashboard-btn-text-clr) !important;
          border: var(--btn-dashboard-btn-border) !important;
          border-radius: var(--btn-dashboard-btn-border-radius) !important;
         }

         button:is(.dashboardBtn):is(:hover,:focus-visible),
         button:is(.dashboardBtn)[type="submit"]:is(:hover,:focus-visible),
         button:is(.dashboardBtn)[type="button"]:is(:hover,:focus-visible),
         input:is(.dashboardBtn)[type="button"]:is(:hover,:focus-visible),
         input:is(.dashboardBtn)[type="submit"]:is(:hover,:focus-visible){
          background-color: var(--hover-btn-dashboard-btn-bg);
          }
   
   

    /* ---------------- GRADIENT BUTTONS --------------- */
    /* ---------------- ONLY BACKGROUND --------------- */
    button:is(.btn_bgG, .btnb_bG),
    button:is(.btn_bgG, .btnb_bG)[type="submit"],
    button:is(.btn_bgG, .btnb_bG)[type="button"],
    input:is(.btn_bgG, .btnb_bG)[type="button"],
    input:is(.btn_bgG, .btnb_bG)[type="submit"]{
      padding: var(--btn-padding);
      border: none;
      outline: none;
      position: relative;
      z-index: 1;
      border-radius: var(--btn-border-radius-sm);
      background: linear-gradient(to right, #00ffa3, #dc1fff);
    }

    button:is(.btn_bgG, .btnb_bG)::before,
    button:is(.btn_bgG, .btnb_bG)[type="submit"]::before,
    button:is(.btn_bgG, .btnb_bG)[type="button"]::before,
    input:is(.btn_bgG, .btnb_bG)[type="button"]::before,
    input:is(.btn_bgG, .btnb_bG)[type="submit"]::before{
      content: "";
      position: absolute;
      inset: var(--gradient-btn-border-size);
      border-radius: calc(var(--btn-border-radius-sm) - var(--gradient-btn-border-size));
      background-color: white;
      z-index: -1;
      transition: var(--transition);
    }

    button:is(.btn_bgG)::before,
    button:is(.btn_bgG)[type="submit"]::before,
    button:is(.btn_bgG)[type="button"]::before,
    input:is(.btn_bgG)[type="button"]::before,
    input:is(.btn_bgG)[type="submit"]::before{
      opacity: 0;
    }
    

    button:is(.btn_bgG):is(:hover,:focus-visible):before,
    button:is(.btn_bgG)[type="submit"]:is(:hover,:focus-visible):before,
    button:is(.btn_bgG)[type="button"]:is(:hover,:focus-visible):before,
    input:is(.btn_bgG)[type="button"]:is(:hover,:focus-visible):before,
    input:is(.btn_bgG)[type="submit"]:is(:hover,:focus-visible):before{
      opacity: 1;
    }

    button:is(.btn_bgG)::after,
    button:is(.btn_bgG)[type="submit"]::after,
    button:is(.btn_bgG)[type="button"]::after,
    input:is(.btn_bgG)[type="button"]::after,
    input:is(.btn_bgG)[type="submit"]::after{
      content: attr(data);
      color: #fff;
      transition: var(--transition);
    }   

    button:is(.btn_bgG):is(:hover,:focus-visible):after,
    button:is(.btn_bgG)[type="submit"]:is(:hover,:focus-visible):after,
    button:is(.btn_bgG)[type="button"]:is(:hover,:focus-visible):after,
    input:is(.btn_bgG)[type="button"]:is(:hover,:focus-visible):after,
    input:is(.btn_bgG)[type="submit"]:is(:hover,:focus-visible):after{
      background: linear-gradient(to left, #00ffa3, #dc1fff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* ---------------- ONLY BORDER --------------- */
    button:is(.btnb_bG):is(:hover,:focus-visible):before,
    button:is(.btnb_bG)[type="submit"]:is(:hover,:focus-visible):before,
    button:is(.btnb_bG)[type="button"]:is(:hover,:focus-visible):before,
    input:is(.btnb_bG)[type="button"]:is(:hover,:focus-visible):before,
    input:is(.btnb_bG)[type="submit"]:is(:hover,:focus-visible):before{
      opacity: 0;
    }

    button:is(.btnb_bG)::after,
    button:is(.btnb_bG)[type="submit"]::after,
    button:is(.btnb_bG)[type="button"]::after,
    input:is(.btnb_bG)[type="button"]::after,
    input:is(.btnb_bG)[type="submit"]::after{
      content: attr(data);
      background: linear-gradient(to left, #00ffa3, #dc1fff);
      -webkit-background-clip: text;
      color: transparent;
      transition: var(--transition);
    }

    button:is(.btnb_bG):is(:hover,:focus-visible):after,
    button:is(.btnb_bG)[type="submit"]:is(:hover,:focus-visible):after,
    button:is(.btnb_bG)[type="button"]:is(:hover,:focus-visible):after,
    input:is(.btnb_bG)[type="button"]:is(:hover,:focus-visible):after,
    input:is(.btnb_bG)[type="submit"]:is(:hover,:focus-visible):after{
      color: #fff;
    }


    /* ---------------- OTHER BUTTONS --------------- */
    button:is(.btnGray, .btnGrayBorderless),
    button:is(.btnGray, .btnGrayBorderless)[type="submit"],
    button:is(.btnGray, .btnGrayBorderless)[type="button"],
    input:is(.btnGray, .btnGrayBorderless)[type="button"],
    input:is(.btnGray, .btnGrayBorderless)[type="submit"]{
      background-color: transparent !important;
      color: var(--clr-rgba-gray-much-darker);
      border-color: var(--btn-border-gray);
    }

    button:is(.btnGrayBorderless),
    button:is(.btnGrayBorderless)[type="submit"],
    button:is(.btnGrayBorderless)[type="button"],
    input:is(.btnGrayBorderless)[type="button"],
    input:is(.btnGrayBorderless)[type="submit"]{
      border-color: transparent;
    }

    button:is(.btnGray, .btnGrayBorderless):is(:hover, :focus-visible),
    button:is(.btnGray, .btnGrayBorderless)[type="submit"]:is(:hover, :focus-visible),
    button:is(.btnGray, .btnGrayBorderless)[type="button"]:is(:hover, :focus-visible),
    input:is(.btnGray, .btnGrayBorderless)[type="button"]:is(:hover, :focus-visible),
    input:is(.btnGray, .btnGrayBorderless)[type="submit"]:is(:hover, :focus-visible){
      background-color: var(--clr-rgba-gray-softer) !important;
    }

    /* Input Styling */
    input:not([type="button"], [type="submit"], [type="range"]),
    textarea,
    .inputSVG{
      display: flex;
      justify-content: start;
      align-items: center;
      resize: none;
      font-size: var(--fs-input);
      caret-color: var(--clr-primary);
      padding: var(--input-padding);
      background-color: var(--clr-neutral-light);
      border: var(--input-border);
      border-radius: var(--input-border-radius);
      color: var(--input-clr);
      transition: var(--transition);
    }

    .inputSVG{
      padding: 0 !important;
    }

    .inputSVG img{
      width: 1em;
      height: 1em;
      margin-right: 1em;
    }

    .inputSVG input{
      background-color: transparent !important;
      border: 0 !important;
      width: 100%;
    }

    /* Input Hover */
    input:not([type="button"], [type="submit"], [type="range"]):hover,
    textarea:hover,
    .inputSVG:hover{ 
      background-color: var(--input-bg-hover);
    }

    /* Input's Placeholder while its active */
    input:not([type="button"], [type="submit"], [type="range"]):is(:focus,:focus-visible)::placeholder,
    textarea:is(:focus,:focus-visible)::placeholder{
      transition: var(--transition);
    }

    input:not([type="button"], [type="submit"], [type="range"]):is(:focus,:focus-visible)::placeholder,
    textarea:is(:focus,:focus-visible)::placeholder{
        color: ;
        opacity: .4;
    }

    /* Input Container Styling */
    .inputDIV,
    .inputDIV :is(input,textarea){
      width: 100%;
    }

    .inputDIV{
      position: relative;
    }
    
    .inputDIV.input-error :is(input, textarea, label, .inputSVG){
      border-color: var(--clr-accent-danger) !important;
      color: var(--clr-accent-danger) !important;
    }
    
    .inputDIV small{
      position: absolute;
      bottom: -1.5em;
      padding-inline: .5em;
      font-size: var(--input-error-fs);
      font-weight: var(--input-error-fw);
      color: var(--input-error-clr);
      transition: var(--transition);
      opacity: 0;
    }

    .inputDIV.input-error small{
      opacity: 1;
    }

    .inputDIV.input-error img{
      animation: inputErrorSVG .6s;
    }

    @keyframes inputErrorSVG {
      0%{
        transform: translateX(0);
        scale: 1;
      }
      33%{
        transform: translateX(2px);
        scale: 1.1;
      }

      66%{
        transform: translateX(-2px);
        scale: 1.1;
      }

      100%{
        transform: translateX(0px);
        scale: 1;
      }
    }

    /* Input Block Styling */
    .input-block{
        display: grid;
        place-items: start;
        gap: .1em;
    }

    .input-block label{
        font-size: var(--fs-label);
        opacity: .8;
        font-weight: var(--fw-regular);
        padding-inline: .45em;
    }

    .input-block :is(input, textarea){
      width: 100%;
    }

   .skeletionLoader {
position: relative !important;
overflow: hidden !important; /* Taşan içeriği gizle *//*
border: 0 !important;
outline: 0 !important;*/
border-color: var(--clr-neutral-light) !important;
outline-color: var(--clr-neutral-light) !important;
border-radius: 10px;
}

.skeletionLoader::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(90deg, #e3e3e3 25%, #f1f1f1 50%, #e3e3e3 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

    

    /*
    <div class="loader-container">
        <div class="loader"></div>
    </div>*/

    /* loader */
    .loader-container{
      position: fixed;
      inset: 0;
      z-index: 1000000;
      min-width: 100%;
      min-height: 100vh;
      min-height: 100dvh;
      display: grid;
      place-items: center;
      background-color: #00000042;
      animation: loader 1.5s infinite;
  }
  
  @keyframes loader {
    0%{
      backdrop-filter: blur(2.8px);
    }
    50%{
      backdrop-filter: blur(5.5px);
    }
    100%{
      backdrop-filter: blur(2.8px);
    }
  }
  
/* HTML: <div class="loader"></div> */
.loader {
  height: 4px;
  width: 150px;
  border-radius: 100vw;
  --c:no-repeat linear-gradient(var(--clr-primary) 0 0);
  background: var(--c),var(--c),var(--clr-neutral-light);
  background-size: 60% 100%;
  animation: l16 3s infinite;
}
@keyframes l16 {
  0%   {background-position:-150% 0,-150% 0}
  66%  {background-position: 250% 0,-150% 0}
  100% {background-position: 250% 0, 250% 0}
}

    /* Scroll Bar */
    @supports(scrollbar-color: red blue){
        *{
            scrollbar-color: var(--clr-primary) var(--clr-neutral-dark);
            scrollbar-width: thin;
        }
    }

    /* Selection Color */
    ::selection{
        background-color: var(--clr-primary-100);
    }

    /*  Controlling the width and height of elements */
    .fit-content{
      width: fit-content;
    }

    .width-50{
      width: 50%;
    }

    .width{
        width: 100%;
    }

    .min-width{
      min-width: 100%;
    }

    .max-width{
      max-width: 100%;
    }

    .height{
        height: 100vh;
        height: 100dvh;
    }

    .min-height{
      min-height: 100vh;
      min-height: 100dvh;
    }

    .max-height{
      max-height: 100vh;
      max-height: 100dvh;
    }

    /* Fast Layouts */
    .flex{
        display: flex;
        align-items: center;
    }

    .wrap{
        flex-wrap: wrap;
    }

    .flex-space{
      display: flex;
      align-items: center;
      justify-content: space-between !important;
    }

    .flex-around{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .flex-center{
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .flex-center-x{
      display: flex;
      align-items: start;
      justify-content: center;
    }

    .flex-center-y{
      display: flex;
      justify-content: start;
      align-items: center;
    }

    .flex-column{
        display: flex;
        flex-direction: column;
    }

    .align-self-top{
        align-self: start;
    }

    .align-self-bottom{
      align-self: end;
    }

    .justify-self-start{
    justify-self: start;
    }

    .justify-self-end{
        justify-self: end;
    }

    .grid{
        display: grid;
    }

    .grid-center{
        display: grid;
        place-items: center;
    }

    .grid2column{
      grid-column: span 2;
    }

    .center-self{
        margin-inline: auto;
        justify-self: center;
    }

    .text-center{
        text-align: center;
    }

    /* Fast Layouts */

    /* Flexbox Utilities */
    .f { display: flex; align-items: center; }

    .fw { flex-wrap: wrap; }
    .fnw { flex-wrap: nowrap; }

    .fsb { display: flex; align-items: center; justify-content: space-between !important; }
    .fsa { display: flex; align-items: center; justify-content: space-around; }
    .fse { display: flex; align-items: center; justify-content: space-evenly; }

    .fst { display: flex; align-items: flex-start; }
    .fend { display: flex; align-items: flex-end; }

    .fc { display: flex; align-items: center; justify-content: center; }
    .fcx { display: flex; align-items: start; justify-content: center; }
    .fcy { display: flex; justify-content: start; align-items: center; }

    .fc-col { display: flex; flex-direction: column; }
    .fc-col-r { display: flex; flex-direction: column-reverse; }
    .fc-row-r { display: flex; flex-direction: row-reverse; }

    .as-start { align-self: start; }
    .as-center { align-self: center; }
    .as-end { align-self: end; }

    .ai-start { align-items: start; }
    .ai-center { align-items: center; }
    .ai-end { align-items: end; }

    .js-start { justify-self: start; }
    .js-center { justify-self: center; }
    .js-end { justify-self: end; }

    .jc-start { justify-content: start; }
    .jc-center { justify-content: center; }
    .jc-end { justify-content: end; }

    .g-sm { gap: 8px; }
    .g-md { gap: 16px; }
    .g-lg { gap: 32px; }

    /* Grid Utilities */
    .gd { display: grid; }
    .gd-center { display: grid; place-items: center; }
    .gd-2c { grid-column: span 2; }
    .gd-3c { grid-column: span 3; }
    .gd-auto { grid-auto-flow: column; }


    .cs { margin-inline: auto; justify-self: center; }

    /* Custom Cursor (Pointer) */
    .cursor{
        cursor: url('cursor-pointer.svg'), pointer;
    }

   /* Font Weights */
    .fw-black { font-weight: var(--fw-black); }
    .fw-extra-bold { font-weight: var(--fw-extra-bold); }
    .fw-bold { font-weight: var(--fw-bold); }
    .fw-semi-bold { font-weight: var(--fw-semi-bold); }
    .fw-medium { font-weight: var(--fw-medium); }
    .fw-regular { font-weight: var(--fw-regular); }
    .fw-light { font-weight: var(--fw-light); }
    .fw-extra-light { font-weight: var(--fw-extra-light); }
    .fw-thin { font-weight: var(--fw-thin); }
    /* Your font may not support some values */

    /* Font Weights (Simplified)*/
    .fw-900 { font-weight: var(--fw-black); }
    .fw-800 { font-weight: var(--fw-extra-bold); }
    .fw-700 { font-weight: var(--fw-bold); }
    .fw-600 { font-weight: var(--fw-semi-bold); }
    .fw-500 { font-weight: var(--fw-medium); }
    .fw-400 { font-weight: var(--fw-regular); }
    .fw-300 { font-weight: var(--fw-light); }
    .fw-200 { font-weight: var(--fw-extra-light); }
    .fw-100 { font-weight: var(--fw-thin); }
    /* Your font may not support some values */

    /* Gaps */
    .g-3  { gap: .3em;  }
    .g-5  { gap: .5em;  }
    .g-7  { gap: .7em;  }
    .g-10 { gap: 1em;   }
    .g-12 { gap: 1.2em; }
    .g-15 { gap: 1.5em; }
    .g-20 { gap: 2em;   }
    .g-25 { gap: 2.5em; }
    .g-30 { gap: 3em;   }
    .g-35 { gap: 3.5em; }
    .g-40 { gap: 4em;   }
    .g-45 { gap: 4.5em; }
    .g-50 { gap: 5em;   }

    /* Paddings */
    .p-5  { padding: .5em; }
    .p-10 { padding: 1em; }
    .p-15 { padding: 1.5em; }
    .p-20 { padding: 2em; }
    .p-25 { padding: 2.5em; }
    .p-30 { padding: 3em; }
    .p-35 { padding: 3.5em; }
    .p-40 { padding: 4em; }
    .p-45 { padding: 4.5em; }
    .p-50 { padding: 5em; }

    .px-5  { padding-inline: .5em; }
    .px-10 { padding-inline: 1em; }
    .px-15 { padding-inline: 1.5em; }
    .px-20 { padding-inline: 2em; }
    .px-25 { padding-inline: 2.5em; }
    .px-30 { padding-inline: 3em; }
    .px-35 { padding-inline: 3.5em; }
    .px-40 { padding-inline: 4em; }
    .px-45 { padding-inline: 4.5em; }
    .px-50 { padding-inline: 5em; }

    .py-5  { padding-block: .5em; }
    .py-10 { padding-block: 1em; }
    .py-15 { padding-block: 1.5em; }
    .py-20 { padding-block: 2em; }
    .py-25 { padding-block: 2.5em; }
    .py-30 { padding-block: 3em; }
    .py-35 { padding-block: 3.5em; }
    .py-40 { padding-block: 4em; }
    .py-45 { padding-block: 4.5em; }
    .py-50 { padding-block: 5em; }

    .pt-5  { padding-top: .5em; }
    .pt-10 { padding-top: 1em; }
    .pt-15 { padding-top: 1.5em; }
    .pt-20 { padding-top: 2em; }
    .pt-25 { padding-top: 2.5em; }
    .pt-30 { padding-top: 3em; }
    .pt-35 { padding-top: 3.5em; }
    .pt-40 { padding-top: 4em; }
    .pt-45 { padding-top: 4.5em; }
    .pt-50 { padding-top: 5em; }

    .pb-5  { padding-bottom: .5em; }
    .pb-10 { padding-bottom: 1em; }
    .pb-15 { padding-bottom: 1.5em; }
    .pb-20 { padding-bottom: 2em; }
    .pb-25 { padding-bottom: 2.5em; }
    .pb-30 { padding-bottom: 3em; }
    .pb-35 { padding-bottom: 3.5em; }
    .pb-40 { padding-bottom: 4em; }
    .pb-45 { padding-bottom: 4.5em; }
    .pb-50 { padding-bottom: 5em; }

    .pr-5  { padding-right: .5em; }
    .pr-10 { padding-right: 1em; }
    .pr-15 { padding-right: 1.5em; }
    .pr-20 { padding-right: 2em; }
    .pr-25 { padding-right: 2.5em; }
    .pr-30 { padding-right: 3em; }
    .pr-35 { padding-right: 3.5em; }
    .pr-40 { padding-right: 4em; }
    .pr-45 { padding-right: 4.5em; }
    .pr-50 { padding-right: 5em; }

    .pl-5  { padding-left: .5em; }
    .pl-10 { padding-left: 1em; }
    .pl-15 { padding-left: 1.5em; }
    .pl-20 { padding-left: 2em; }
    .pl-25 { padding-left: 2.5em; }
    .pl-30 { padding-left: 3em; }
    .pl-35 { padding-left: 3.5em; }
    .pl-40 { padding-left: 4em; }
    .pl-45 { padding-left: 4.5em; }
    .pl-50 { padding-left: 5em; }

    .p-0{ padding:  0!important; }
    .px-0{ padding-inline: 0 !important; }
    .py-0{ padding-block: 0 !important; }
    .pt-0{ padding-top: 0 !important; }
    .pb-0{ padding-bottom: 0 !important; }
    .pr-0{ padding-right: 0 !important; }
    .pl-0{ padding-left: 0 !important; }

    /* Opacity */
    .opacity-10{ opacity: .1; }
    .opacity-20{ opacity: .2; }
    .opacity-30{ opacity: .3; }
    .opacity-40{ opacity: .4; }
    .opacity-50{ opacity: .5; }
    .opacity-60{ opacity: .6; }
    .opacity-70{ opacity: .7; }
    .opacity-80{ opacity: .8; }
    .opacity-90{ opacity: .9; }

    .clr-dark{ color: var(--clr-neutral-dark) !important; }

    .clr-txt{ color: var(--clr-txt) !important; }

    .clr-light{ color: var(--clr-neutral-light) !important; }

    .clr-primary{ color: var(--clr-primary) !important; }

    .clr-primary-h:is(:hover, :focus-visible){ color: var(--clr-primary) !important; }

    .transition{ transition: var(--transition); }

    a{
        text-decoration: none;
        color: var(--clr-txt);
        cursor: url('cursor-pointer.svg'), pointer;
    }

    .transparent-btn,
    a.transparent-a{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        padding: .3em 1em;
        outline: 0;
        border: 0;
        transition: var(--transition);
    }

    /* Fast Blur Effects */
    .blur-5 { filter: blur(5px);  }
    .blur-10{ filter: blur(10px); }
    .blur-15{ filter: blur(15px); }
    .blur-20{ filter: blur(20px); }
    .blur-25{ filter: blur(25px); }
    .blur-30{ filter: blur(30px); }
    .blur-35{ filter: blur(35px); }
    .blur-40{ filter: blur(40px); }
    .blur-45{ filter: blur(45px); }
    .blur-50{ filter: blur(50px); }

    /* Rotate Elements */
    .rotate { scale: -1; }

    /* Fit IMG */
    .img-set{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Dropdown Styling */
    .pureflowcss-dropdown{
      position: relative;
      display: grid;
      min-width: fit-content;
      max-height: fit-content;
      color: var(--dropdown-clr);
      user-select: none;
      font-size: var(--fs-input);
    }

    .pureflowcss-dropdown small{
      font-size: var(--fs-label);
      opacity: .8;
      font-weight: var(--fw-regular);
      padding-inline: .45em;
  }

    .pureflowcss-dropdown label{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--dropdown-bg);
      padding: var(--dropdown-padding);
      gap: .75em;
      border-radius: var(--input-border-radius);
      overflow: hidden;
      border: var(--input-border);
      transition: var(--transition);
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items{
      display: grid;
      place-items: center;
      position: absolute;
      overflow: auto;
      top: 3.5em;
      left: 0;
      min-width: 100%;
      background-color: var(--clr-neutral-light);
      border-radius: 10px;
      border: var(--input-border);
      box-shadow: var(--dropdown-shadow);
      visibility: hidden;
      opacity: 0;
      max-height: 0px;
      transition: var(--transition);
      z-index: 60 !important;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items.show-dropdown-list{
      max-height: 300px;
      top: 4.5em;
      opacity: 1;
      visibility: visible;
      overflow: auto;
    }

    /* Scroll Bar */
    @supports(scrollbar-color: red blue){
      .pureflowcss-dropdown .pureflowcss-dropdown-items{
          scrollbar-color: var(--clr-rgba-gray) var(--clr-neutral-light);
          scrollbar-width: thin;
      }
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items .pureflow-css-dropdown-add-column{
      width: 100%;
    }

     
    

    .pureflowcss-dropdown .pureflowcss-dropdown-items .pureflow-css-dropdown-add-column .pureflowcss-input-container {
      border-bottom: 2px solid var(--clr-rgba-gray-soft);
      width: 100%;
      margin-inline: 1.2em;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items .pureflow-css-dropdown-add-column .pureflowcss-input-container input{
      border: 0;
      width: 100%;
      padding-inline: .5em;
      background-color: transparent;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items .pureflow-css-dropdown-add-column .pureflowcss-input-container button{
      background-color: transparent;
      border-color: transparent;
      height: 100%;
      padding: .5em;
    }

    @media screen and (min-width: 600px){
    .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="med-dropdown-list"]{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding: .3em;
      gap: .5em;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="long-dropdown-list"]{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      padding: .3em;
      gap: .5em;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="longer-dropdown-list"]{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: .3em;
      gap: .5em;
    }

     /* Dropdown list column number */
     .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="med-dropdown-list"] .pureflow-css-dropdown-add-column{
      grid-column: span 2;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="long-dropdown-list"] .pureflow-css-dropdown-add-column{
      grid-column: span 3;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="longer-dropdown-list"] .pureflow-css-dropdown-add-column{
      grid-column: span 4;
    }
    /* You can add more */
  }

    .pureflowcss-dropdown label svg.active-dropdownSvg{
      rotate: 180deg;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items span{
      width: 100%;
      font-size: var(--dropdown-fs);
      display: flex;
      justify-content: start;
      align-items: center;
      gap: .7em;
      text-align: start;
      padding: .85em 1.2em;
      cursor: url('cursor-pointer.svg'), pointer;
      white-space: nowrap;
      transition: var(--transition);
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items .no-match{
      color: var(--dropdown-alert-clr) !important;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items:is([data-type="med-dropdown-list"] ,[data-type="long-dropdown-list"] ,[data-type="longer-dropdown-list"]) span{
      border-radius: 5px;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items:is([data-type="long-dropdown-list"] ,[data-type="longer-dropdown-list"]) span{
      border-radius: 5px;
    }

    .pureflowcss-dropdown label:hover{
      color: var(--clr-gray-darker);
      background-color: var(--dropdown-hover);
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items span:hover{
      background-color: var(--dropdown-hover);
      color: var(--clr-gray-darker);
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items .no-match{
      color: var(--clr-warning);
      white-space: nowrap;
      padding: 1em;
      transform: translateX(10px);
    }
     /* Dropdown Stling Ends */


     /* Özel Checkbox Stilleri */
     .checkbox-container {
      display: block;
      position: relative;
      padding-left: 28px;
      cursor: pointer;
      user-select: none;
  }
  
  .checkbox-container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
  }
  
  .checkmark {
      position: absolute;
      top: 1.4px;
      left: 0;
      height: 20px;
      width: 20px;
      background-color: #eee;
      border-radius: 4px;
      transition: all 0.3s;
  }
  
  .checkbox-container:hover input ~ .checkmark {
      background-color: var(--form-ui-hover-color);
  }
  
  .checkbox-container input:checked ~ .checkmark {
      background-color: var(--form-ui-color);
  }
  
  .checkmark:after {
      content: "";
      position: absolute;
      display: none;
  }
  
  .checkbox-container input:checked ~ .checkmark:after {
      display: block;
  }
  
  .checkbox-container .checkmark:after {
      left: 7px;
      top: 3px;
      width: 6px;
      height: 12px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
  }
  
  /* Özel Radio Buton Stilleri */
  .radio-container {
      display: block;
      position: relative;
      padding-left: 35px;
      cursor: pointer;
      user-select: none;
  }
  
  .radio-container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
  }
  
  .radio-btn {
      position: absolute;
      top: 0;
      left: 0;
      height: 24px;
      width: 24px;
      background-color: #eee;
      border-radius: 50%;
      transition: all 0.3s;
  }
  
  .radio-container:hover input ~ .radio-btn {
      background-color: var(--form-ui-hover-color);
  }
  
  .radio-container input:checked ~ .radio-btn {
      background-color: var(--form-ui-color);
  }
  
  .radio-btn:after {
      content: "";
      position: absolute;
      display: none;
  }
  
  .radio-container input:checked ~ .radio-btn:after {
      display: block;
  }
  
  .radio-container .radio-btn:after {
      inset: 7px;
      border-radius: 100vw;
      background: var(--clr-neutral-light);
  }
  
  /* Özel Switch Stilleri */
  .switch-div{
    user-select: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .switch-container {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
      margin-right: 10px;
      vertical-align: middle;
  }
  
  .switch-container input {
      opacity: 0;
      width: 0;
      height: 0;
  }
  
  .slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background-color: var(--form-ui-hover-color);
      transition: .4s;
      border-radius: 34px;
  }
  
  .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: var(--clr-neutral-light);
      transition: .4s;
      border-radius: 100vw;
  }
  
  input:checked + .slider {
      background-color: var(--form-ui-color);
  }
  
  input:focus + .slider {
      box-shadow: 0 0 1px var(--form-ui-color);
  }
  
  input:checked + .slider:before {
      transform: translateX(26px);
  }
  
  .switch-label {
      vertical-align: middle;
  }
  
  /* Renk Varyasyonları */
  .checkbox input:checked ~ .checkmark,
  .radio input:checked ~ .radio-btn,
   + .slider {
      background-color: var(--form-ui-color);
  }
     

    /* Range Input Stling */
    input[type=range] {
      -webkit-appearance: none;
      width: 100%;
      height: var(--input-range-bar-size);
      background: linear-gradient(to right, var(--input-range-color), var(--input-range-null-color));
      border-radius: 5px;
      outline: none;
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: var(--input-range-thumb-size);
      height: var(--input-range-thumb-size);
      border-radius: 50%;
      background: var(--input-range-thumb-color);
      cursor: url('cursor-pointer.svg'), pointer;
      border: 3px solid var(--clr-bg);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }

    input[type=range]::-moz-range-thumb {
      width: var(--input-range-thumb-size);
      height: var(--input-range-thumb-size);
      border-radius: 50%;
      background: var(--input-range-thumb-color);
      cursor: url('cursor-pointer.svg'), pointer;
      border: 3px solid var(--clr-bg);
    }

    .price-text {
      position: relative;
      margin-top: 30px;
    }

    #priceLabel {
      left: 0;
      position: absolute;
      top: -30px;
      font-size: 16px;
      color: var(--input-range-price-color);
      font-weight: bold;
      transition: left 0.1s ease-in-out;
    }

    .price-range-area p{
      font-size: var(--fs-xs);
      opacity: .9;
    }
    /* Range Input Stling Ends */


    /* File Input Stling */
    .inputfile {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1;
      width: fit-content;
    }

    .inputfile + label {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: .7em;
      color: var(--input-clr-file);
      font-weight: var(--fw-normal-bolder);
      border: var(--input-border);
      border: var(--input-border);
      padding: var(--input-padding);
      border-radius: var(--input-border-radius);
      transition: var(--transition);
      user-select: none;
      font-size: var(--fs-input);
    }

    .inputfile:focus + label,
    .inputfile + label:hover {
      background-color: var(--input-file-bg-hover);
    }

    .inputfile + label * {
      pointer-events: none;
    }
     /* File Input Stling Ends */


    /* Modal Styling starts here*/
    .fullScreenModal{
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      z-index: 999;
      background-color: var(--modal-bg);
      backdrop-filter: var(--modal-blur);

      /* You can set custom animations here */
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: var(--transition);

      /* justify-content: start; */ /* Add this if you want to align the modal to the start */
      /* justify-content: end;*/ /* Add this if you want to align the modal to the end */
      /* align-items: start; */ /* Add this if you want to align the modal to the start */
      /* align-items: end; */ /* Add this if you want to align the modal to the end */
    }

    .show-fullScreenModal{
      opacity: 1;
      visibility: visible;
      pointer-events: inherit;
    }

    .fullScreenModal .modalContent{
      background-color: var(--modal-content-bg);
      padding: var(--modal-content-padding);
      border-radius: var(--modal-content-radius);
      border: var(--modal-content-border);
      color: var(--modal-content-clr);

      /* You can set custom animations here */
      scale: .95;
      transition: var(--transition);

      /* justify-self: stretch; */ /* Add this if you want to stretch the modal (100% width) */
      /* align-self: stretch; */ /* Add this if you want to stretch the modal (100% height) */
    }

    .fullScreenModal .show-modalContent{
      scale: 1;
    }

    /* MODAL STYLING ENDS HERE (don't forget to include the "fullScreenModal.js" file in your HTML, otherwise it won't work) */
    /* Button (or anything) with "active-modal" class required. */


    /* Alert Styling starts here*/
    .alertContainer{
      position: fixed;
      background-color: var(--alert-bg);
      color: var(--alert-clr);
      border: var(--alert-border);
      border-radius: var(--alert-radius);
      padding: var(--alert-padding);
      z-index: 950;
      
      /* You can set custom animations here */
      opacity: 0;
      visibility: 0;
      pointer-events: none;
      transition: .3s;
    }

    .alertContainer.show-alertContainer{
      opacity: 1;
      visibility: 1;
      pointer-events: inherit;
    }

    .alertTop,
    .alertTopRight,
    .alertTopLeft{
      top: 0;
    }

    .alertBottom,
    .alertBottomRight,
    .alertBottomLeft{
      bottom: 0;
    }

    .alertBottomRight,
    .alertTopRight{
      right: 0;
    }

    .alertBottomLeft,
    .alertTopLeft{
      left: 0;
    }

    .alertCenter{
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .alertBottom,
    .alertTop{
      left: 50%;
      transform: translateX(-50%);
    }

    /* ALERT STYLING ENDS HERE (don't forget to include the "alert.js" file in your HTML, otherwise it won't work) */
    /* Button (or anything) with "showAlerts" class required. */

    /*-------------------------------------------------------- SCROLL ANIMATIONS --------------------------------------------------------*/
    /* Text Animation ---------------------------------------------------------------------------------- */
    .add-text-animation{
      transform: translateY(-5px) !important;
      opacity: 0 !important;

      transition: var(--text-animation);
    }

    .text-animation-longer{ 
      transform: translateY(-5px) !important;
      opacity: 0 !important;
      
      transition: var(--text-animation-longer); 
    }

    .add-text-animation.text-animation{
      transform: translateY(0) !important;
      opacity: 1 !important;
    }


    /* Opacity Animation ---------------------------------------------------------------------------------- */
    .add-opacity-animation{
      opacity: 0 !important;
      
      transition: var(--opacity-animation);
    }

    .add-opacity-animation.opacity-animation{
      opacity: 1 !important;
    }


    /* Slide To Left Animation ---------------------------------------------------------------------------------- */
    .add-x-toLeft-animation{
      transform: translateX(-10px) !important;
      opacity: 0 !important;

      transition: var(--xl-animation) ;
    }

    .add-x-toLeft-animation.x-toLeft-animation{
      transform: translateX(0) !important;
      opacity: 1 !important;
    }


    /* Slide To Right Animation ---------------------------------------------------------------------------------- */
    .add-x-toRight-animation{
      transform: translateX(10px) !important;
      opacity: 0 !important;
      
      transition: var(--xr-animation);
    }

    .add-x-toRight-animation.x-toRight-animation{
      transform: translateX(0) !important;
      opacity: 1 !important;
    }


    /* Scale Animation ---------------------------------------------------------------------------------- */
    .add-scale-animation{
      scale: 0 !important;
      opacity: 0 !important;

      transition: var(--scale-animation);
    }

    .add-scale-animation.scale-animation{
      scale: 1 !important;
      opacity: 1 !important;
    }

    @media screen and (max-width: 1000px){
        /* Optimized Scale Animation ---------------------------------------------------------------------------------- */
        .add-scale-animation{
          scale: 0 !important;
          opacity: 0 !important;
        }

        .add-scale-animation.scale-animation{
          scale: 1 !important;
          opacity: 1 !important;
        
        }  
    }



    [data-title] {
      position: relative !important;
    }
    
    [data-title]:after {
      content: attr(data-title) !important;
      background-color: var(--title-bg) !important;
      padding: var(--title-padding) !important;
      color: var(--title-clr) !important;
      font-size: var(--title-fs) !important;
      font-weight: var(--title-fw) !important;
      box-shadow: var(--title-shadow) !important;
      border: var(--title-border) !important;
      border-radius: var(--title-border-radius) !important;
      position: fixed !important;
      top: calc(var(--mouse-y, 0) + 15px) !important;
      left: var(--mouse-x, 0) !important;
      z-index: 99999 !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      max-width: var(--title-max-width) !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      transition: var(--transition) ease !important;
      display: block !important;
    }
    
    [data-title][data-show-tooltip]:after {
      opacity: 1 !important;
      visibility: visible !important;
    }
    
    /* Mobil cihazlarda tamamen gizle */
    @media (hover: none) {
      [data-title]:after {
        display: none !important;
      }
    }






    .dark-mode {
      color: var(--clr-txt);
  }

  body.dark-mode {
    background-color: var(--clr-neutral-light);
}

  .toggle-container *{
    transition: var(--transition) !important;
  }

  .toggle-container {
      position: relative;
      width: var(--theme-switch-width);
      height: calc(var(--theme-switch-height) + 15px);
      border-radius: 100vw;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      border-radius: 100vw;
      overflow: hidden;
  }

  .toggle-input {
      opacity: 0;
      width: 0;
      height: 0;
  }

  .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #87CEEB;
      border-radius: 30px;
      transition: var(--transition);
  }

  .celestial-container {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 30px;
  }

  .sun {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%) translateX(0);
      width: var(--theme-switch-height);
      height: var(--theme-switch-height);
      background: #ffd700;
      border-radius: 100vw;
      transition: var(--transition);
      opacity: 1;
  }

  .moon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%) translateX(40px);
      width: var(--theme-switch-height);
      height: var(--theme-switch-height);
      background: #f0f0f0;
      border-radius: 100vw;
      box-shadow: 0 0 10px 1px #2c2c2c;
      transition: var(--transition);
      opacity: 0;
  }

  .clouds {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: .75;
      transition: var(--transition);
  }

  .cloud {
      position: absolute;
      background: white;
      border-radius: 20px;
      animation: moveCloud 10s linear infinite;
      opacity: 0.9;
  }

  .cloud:nth-child(1) { top: 15px; left: -50px; width: 40px; height: 20px; }
  .cloud:nth-child(2) { top: 1px; left: -50px; width: 30px; height: 15px; animation-delay: 2s; }
  .cloud:nth-child(3) { top: 25px; left: -60px; width: 50px; height: 22px; animation-delay: 4s; }

  .stars {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 0.5s ease;
  }

  .star {
      position: absolute;
      background: white;
      border-radius: 50%;
      animation: twinkle 1.5s infinite;
  }

  /* Toggle aktif olduğunda stiller */
  .toggle-input:checked + .toggle-slider {
      background: #2c2c2c; /* Gece modu arka plan */
  }

  .toggle-input:checked + .toggle-slider .sun {
      opacity: 0;
      transform: translateY(-50%) translateX(-40px);
  }

  .toggle-input:checked + .toggle-slider .moon {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
  }

  .toggle-input:checked + .toggle-slider .clouds {
      opacity: 0;
  }

  .toggle-input:checked + .toggle-slider .stars {
      opacity: 1;
  }

  @keyframes moveCloud {
      from { transform: translateX(0); }
      to { transform: translateX(200px); }
  }

  @keyframes twinkle {
      0% { opacity: 0.3; }
      50% { opacity: 1; }
      100% { opacity: 0.3; }
  }

  .white-s{
    white-space: nowrap;
  }






    /* Page Styling */
    body{
      cursor: url('cursor.svg'), auto;
      font-family: var(--ff-main);
      font-size: var(--fs-main);
      font-weight: var(--fw-normal);
      color: var(--clr-txt);
      background-color: var(--clr-bg);
      margin-inline: auto;
      transition: var(--transition);
    }

    body:not(.dashboard){
      max-width: var(--max-page-width);
    }

    body.noScrollBody{
      max-height: 100vh;
      max-height: 100dvh;
      overflow: hidden;
    }

    main section:not(.no-padding-section){
      padding-block: 8em;
    }



    /* Card Slider Styling */
    section.pureflowcss-card-slider-area{
      display: grid;
      place-items: center;
      gap: 1.5em;
    }

    section.pureflowcss-card-slider-area .card-slider-top{
      padding-inline: 3em;
    }

    /* Header genel ayarlar */
/* Header düzeni */
header {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 2em;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity var(--transition), top var(--transition);
  z-index: 500;
}

header.addEffect{
  opacity: 0 !important;
  top: -1em !important;
}

header.scrolled{
  background-color: var(--clr-neutral-opacity);
  backdrop-filter: blur(5px);
  border-radius: 100vw;
  justify-content: center;
  max-width: fit-content;
  min-width: fit-content;
  white-space: nowrap;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  /*border: 1px solid var(--clr-rgba-gray-softer);*/
}

header.scrolled img.logo{
  display: none;
}

header .headerBlock {
  gap: 2em;
}

header nav{
  position: relative;
  padding-block: 1em;
}

header nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

header nav ul li a {
  position: relative;
  padding-inline: 0.8em;
  padding-block: 1em;
  font-weight: 500;
  transition: var(--transition);
}

header nav ul li a.active-page {
  color: var(--clr-primary);
}

header nav ul li a:not(.active-page){
  opacity: .8;
}

header nav ul li a:not(.active-page):hover{
  opacity: 1;
}

.nav-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: var(--clr-primary);
  transition: var(--transition);
}

header nav ul li.headerArrow{
  position: relative;
}

header nav ul li.headerArrow::before {
  content: '';
  position: absolute;
  top: -3px;
  right: 5px;
  width: 8px;
  height: 8px;
  background-image: url('SVGs/Icons/Arrow/header.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

header .hamburgerBtn{
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
  height: fit-content;
  background-color: #ffffff6a;
  border: 1.7px solid var(--clr-neutral-gray-lighter);
  padding: .7em;
  border-radius: 10px;
  z-index: 505;
}

header .hamburgerBtn::before,
header .hamburgerBtn .bar,
header .hamburgerBtn::after{
  content: '';
  width: 30px;
  height: 2px;
  background-color: var(--clr-neutral-gray);
  transition: var(--transition);
}

header .hamburgerBtn.active .bar{
  width: 60%;
}

header .headerMoreArea{
  position: relative;
}

header .headerMoreArea button.headerMoreMenuBtn{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  width: fit-content;
  height: fit-content;
  background-color: transparent;
  box-shadow: none !important;
  border: 0;
  padding: .7em;
  border-radius: 10px;
  z-index: 505;
}

header .headerMoreArea button.headerMoreMenuBtn::before,
header .headerMoreArea button.headerMoreMenuBtn .dot,
header .headerMoreArea button.headerMoreMenuBtn::after{
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 100vw;
  background-color: var(--clr-neutral-gray);
  transition: var(--transition);
}

header .headerMoreArea .headerMoreMenu{
  position: absolute;
  top: 180%;
  right: 0;
  background-color: var(--clr-neutral-opacity);
  backdrop-filter: var(--modal-blur);
  border-radius: 15px;
  padding: 1em;
  animation: headerMoreMenu 3s ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
  scale: .9;
  visibility: hidden;
  transition: var(--transition);
}

header .headerMoreArea .headerMoreMenu.active{
  opacity: 1;
  pointer-events: inherit;
  scale: 1;
  visibility: visible;
}

@keyframes headerMoreMenu{
  0%{
    box-shadow: inset 0 0 7px hsl(0, 0%, 90%);
  }

  50%{
    box-shadow: inset 0 0 7px hsla(0, 0%, 90%, 0.453);
  }

  100%{
    box-shadow: inset 0 0 7px hsl(0, 0%, 90%);
  }
}

header .switchThemeMobile{
  position: absolute;
  z-index: 900;
  --theme-switch-width: 98px;
  box-shadow: none !important;
  opacity: 0;
  pointer-events: none;
  scale: .5;
  visibility: visible;
  transition: var(--transition);
}

header .switchThemeMobile.active{
  opacity: 1;
  pointer-events: inherit;
  scale: 1;
  visibility: visible;
}

@media screen and (max-width: 650px){
  header .hamburgerBtn{
    display: flex;
  }

  header img.logo,
  header nav .nav-indicator,
  header .headerMoreArea{
    display: none;
  }

  header button.headerButton{
    transition: var(--transition);
  }

  header button.headerButton.active{
    scale: .5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  header{
    position: relative;
    padding: 1.5em;
    --fs-main: clamp(1em, 2vw, 2em);
    user-select: none;
  }

  header .headerBlock{
    width: 100%;
    justify-content: space-between;
  }

  header nav{
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: var(--clr-rgba-gray-darker);
    background-color: var(--modal-bg);
    backdrop-filter: var(--modal-blur);
    z-index: 500;
    padding: 0 !important;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition);
  }

  header nav.active{
    pointer-events: inherit;
    visibility: visible;
    opacity: 1;
  }
  
  header nav ul{
    flex-direction: column;
    width: 100%;
    margin-inline: 1em;
    margin-bottom: 1em;
    background-color: var(--clr-neutral-light);
    border-radius: var(--btn-border-radius-md);
    overflow: hidden;
    padding: 0 !important;

    background-color: var(--clr-neutral-opacity);
    backdrop-filter: blur(10px);
    scale: var(--modal-scale);
    transition: var(--transition);
  }

  header nav ul.active{
    scale: 1;
  }
  
  header nav ul li.headerArrow::before{
    top: 50%;
    transform: translateY(-50%);
    right: 2em;
  }
  
  header nav ul li{
    width: 100%;
    display: flex;
    padding: 0 !important;
  }

  header nav ul li a{
    padding: .5em 1.3em !important;
    width: 100%;
  }

  header nav ul li a:is(:hover,:focus-visible){
    background-color: var(--clr-rgba-gray-softer);
  }
  
  header nav ul li a:first-child{
    padding-top: 1.3em !important;
  }
  
  header nav ul li a:last-child{
    padding-bottom: 1.3em !important;
  }
}



footer{
  margin-top: 8em;
  padding-top: 0 !important;
  padding: 3em 2em;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

footer .footerBlock{
  display: grid;
  place-items: center;
}

footer .footerBlock img.logo{
    width: 9em;
}

footer .footerBlock nav{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  font-weight: var(--fw-medium);
}

footer .footerBlock nav a{
  width: 100%;
}

footer .footerBlockPages nav a:not(.active-page){
  opacity: .5;
  transition: var(--transition);
}

footer .footerBlock nav a:not(.active-page):hover{
  opacity: .8;
}

footer .footerBlockContact p{
  font-size: var(--fs-sm);
  color: var(--clr-primary-400);
  font-weight: var(--fw-medium);
}

footer .footerBlockContact img{
  width: 25px;
}

@media screen and (max-width: 850px){
  footer{
    grid-template-columns: repeat(2, 1fr);
    gap: 5em;
    grid-template-areas:
    "nav1 nav2"
    "logo contact"
  }

  footer .footerBlock:nth-child(1){
    grid-area: logo;
  }

  footer .footerBlock:nth-child(2){
    grid-area: nav1;
  }

  footer .footerBlock:nth-child(3){
    grid-area: nav2;
  }

  footer .footerBlock:nth-child(4){
    grid-area: contact;
  }
}

@media screen and (max-width: 500px){
  footer{
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
    "nav1 nav2"
    "contact contact"
    "logo logo"  
  }

  footer .footerBlock:nth-child(1){
    grid-area: logo;
    grid-column: span 2;
  }

  footer .footerBlock:nth-child(4){
    grid-area: contact;
    grid-column: span 2;
  }

  footer .footerBlock img.logo{
    width: 8em;
    max-width: 100%;
}

footer .footerBlockContact p{
  font-size: var(--fs-sm);
  color: var(--clr-primary-400);
  font-weight: var(--fw-medium);
}

footer .footerBlockContact img{
  width: 20px;
}
}




.signModal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: var(--modal-bg);
  backdrop-filter: var(--modal-blur);
  z-index: 10000;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: var(--transition);
}

.signModal.active{
  pointer-events: inherit;
  visibility: visible;
  opacity: 1;
}

.signModal .signContainer{
  display: grid;
  place-items: center;
  background-color: var(--clr-neutral-light);
  border-radius: 20px;
  padding: 2.5em;
  gap: 2em;
  scale: var(--modal-scale);
  transition: var(--transition), var(--transition-shorter)s;
  z-index: 100;
  max-width: 90vw;
  transition: .5s;
  transform: translateX(0);
}

.signModal .signContainer.active{
  scale: 1;
}

.signModal .signContainer.hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-150%);
}

@media screen and (max-width: 550px){
  .signModal .signContainer{
    gap: 3em;
  }
  
}

.typeSwitch {
  position: relative;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  align-items: start;
}

.typeSwitch button {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  width: 100%;
  white-space: nowrap;
  box-shadow: none !important;
  background-color: transparent !important;
  color: var(--clr-txt);
  border: 0 !important;

  --fs-btn: clamp(1.2em, 2vw, 1.2em);  /* Button Font Size*/
}

.typeSwitch button.current {
  color: var(--clr-neutral-light);
}

.typeSwitch .bg {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: var(--clr-primary);
  border-radius: 10px;
  z-index: 0;
  transition: var(--transition) ease;
}

.typeSwitch #login.current ~ .bg {
  transform: translateX(0);
}

.typeSwitch #signup.current ~ .bg {
  transform: translateX(100%);
}

.signModal .signContainer .generalForm{
  position: relative;
  min-height: 300px;
}

.signModal .signContainer .loginFormContainer{
  transition: var(--transition);
  transform: translateY(0);
}

.signModal .signContainer .loginFormContainer.hide{
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
}

.signModal .signContainer .loginFormContainer.show{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.signModal .signContainer .signUpFormContainer{
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: var(--transition);
}

.signModal .signContainer .signUpFormContainer.show{
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}

.signModal .signContainer .signUpFormContainer.hide{
  visibility: hidden;
  transform: translateY(-10px);
  opacity: 0;
}

.signModal .signContainer .signFormContainer{
  display: grid;
  place-items: center;
  gap: 1em;
  width: 100%;
}

.signModal .signContainer .signCheckboxArea{
  width: 100%;
  padding-inline: .5em;
  gap: 4em;
  margin-block: .5em;
}

@media screen and (max-width: 390px){
  .signModal .signContainer .signCheckboxArea{
    gap: 1em;
  }
  
  .signModal .signContainer{
    padding-inline: 1.5em;
  }
}

.signModal .signContainer .signCheckboxArea span{
  color: var(--clr-primary-400);
  transition: var(--transition);
  cursor: pointer;
}

.signModal .signContainer .signCheckboxArea span:hover{
  color: var(--clr-primary-300);
}

.signModal .signContainer form button{
  margin-top: 1em;
  width: 100%;
}




.layoutContainer{
  width: 100%;
  border: var(--layout-container-border);
  border-radius: var(--layout-container-border-radius);
  padding: var(--layout-container-padding);
}



section.indexLayoutSection{
  width: 90em;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 3em;
  display: grid;
  place-items: center;
}

section.indexLayoutSection,
.layout2,
.layout2Block1{
  gap: 2em !important;
}

.layoutOnlyMobile{
  display: none;
}

@media screen and (max-width: 650px){
  section.indexLayoutSection{
    padding-inline: 1em;
  }

  .svgICON{
    width: 25px;
  }

  section.indexLayoutSection,
  .layout2,
  .layout2Block1{
    gap: 15em !important;
  }

  .layoutOnlyMobile{
    display: grid;
  }
  
  .layoutOnlyDesktop{
    display: none;
  }
  
  section.indexLayoutSection .layout2Block1{
    display: flex;
    flex-direction: column-reverse !important;
  }


  :root{
    --layout-container-border: 0;
    --layout-container-padding: 1em;
  }
}
/*
section.indexLayoutSection{
  width: 90vw;
  max-width: 100%;
  margin-inline: auto;
}*/

/*--------------------------- FIRST LAYOUT ---------------------------*/
section.indexLayoutSection .layout1 h1{
--fs-h1: clamp(1.5em, 2.5vw, 2.1em);
font-size: var(--fs-h1);
line-height: 1.2;
}

section.indexLayoutSection .layout1 h1.header1{
  font-weight: var(--fw-light);
}

section.indexLayoutSection .layout1 h1.header2{
  --fs-h1: clamp(1.8em, 2.5vw, 2.4em);
  color: var(--clr-primary);
  font-weight: var(--fw-bold);
}

section.indexLayoutSection .layout1Block{
  gap: 1em;
}

section.indexLayoutSection .layout1Block .btnArea{
  margin-top: 1em;
}

section.indexLayoutSection .layout1 img.perdeIMG{
  max-width: 100%;
}

@media screen and (max-width: 1000px){
  section.indexLayoutSection .layout1 img.perdeIMG{
    display: none;
  }
}

/*--------------------------- SECOND LAYOUT ---------------------------*/
section.indexLayoutSection .layout2{
  gap: 2em;
}

section.indexLayoutSection .layout2 .layoutContainer1 h5{
  color: var(--clr-primary-400);
}

section.indexLayoutSection .layout2 .layoutContainer1 img.graphicElement{
  margin-top: 2em;
}

@media screen and (max-width: 800px){
  section.indexLayoutSection .layout2 .layoutContainer1 img.graphicElement{
    width: 155px;
  }

  section.indexLayoutSection .layout2 .layoutContainer2 img.graphicElement{
    display: none;
  }
}

@media screen and (max-width: 650px){
  section.indexLayoutSection .layout2 .layoutContainer1{
    position: relative;
    margin-top: 7em;
  }

  section.indexLayoutSection .layout2 .layoutContainer1 img.graphicElement{
    position: absolute;
    bottom: 110%;
    right: 0;
  }
}

section.indexLayoutSection .layout2Block2{
  align-self: stretch;
  align-items: stretch;
}

/*--------------------------- THIRD LAYOUT ---------------------------*/
section.indexLayoutSection .layoutContainer2 span{
  font-size: var(--fs-sm);
  color: var(--clr-primary-400);
  font-weight: var(--fw-medium);
}

section.indexLayoutSection .layoutContainer2 p{
  font-size: var(--fs-main);
}

section.indexLayoutSection .layoutContainer2 .layoutList{
  gap: .6em;
}

/*--------------------------- FOURTH LAYOUT ---------------------------*/
  section.indexLayoutSection .layoutContainerSpecs{
  gap: 2em;
}

  section.indexLayoutSection .layoutContainerSpecs h2{
  --fs-h2: clamp(1.2em, 2vw, 1.3em);
  color: var(--clr-primary);
  white-space: nowrap;
}

  section.indexLayoutSection .layoutContainerSpecs img{
  width: 7em;
  max-width: 100%;
}

@media screen and (max-width: 1000px){
  section.indexLayoutSection .layout2{
    flex-direction: column;
  }
  .layoutContainerSpecs {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 500px){
  section.indexLayoutSection .layoutContainerSpecs h2{
    --fs-h2: clamp(.8em, 2vw, 1.3em);
  }
  
    section.indexLayoutSection .layoutContainerSpecs img{
    width: 6em;
  }
}

@media screen and (max-width: 350px){
  .layoutContainerSpecs {
    grid-template-columns: repeat(1, 1fr);
  }
}





section.whyUsSection{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding-inline: 2em;
  gap: 1em;
}

section.whyUsSection .whyUsHeader{
  color: var(--clr-primary);
  padding: .5em 2em;
  border: var(--container-border);
  border-radius: 100vw;
  margin-inline: 1em;
}

section.whyUsSection .whyUsContainer{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1em;
}

@media screen and (max-width: 535px){
  section.whyUsSection{
    padding-inline: 1em;
  }

  section.whyUsSection .whyUsHeader{
    margin: 0;
  }

  section.whyUsSection .whyUsContainer{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

section.whyUsSection .whyUsContainer .whyUsCard{
  position: relative;
  border: var(--container-border);
  border-radius: 20px;
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5em;
}

section.whyUsSection .whyUsContainer .whyUsCard h6{
  --fs-h6: clamp(1.2em, 1.7vw, 1.5em);
}

section.whyUsSection .whyUsContainer .whyUsCard h6{
  color: var(--clr-primary-400);
}

section.whyUsSection .whyUsContainer .whyUsCard img{
  position: absolute;
  left: 1em;
  top: 1em;
}





section.specSection .specSectionGraphicContainer{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2em;
  border: var(--container-border);
  padding: 2em;
  border-radius: 20px;
  font-weight: var(--fw-medium);
  color: var(--clr-primary);
  aspect-ratio: 1/1;
  width: 21em;
  height: 21em;
}

section.specSection .specSectionGraphicContainer img{
  align-self: flex-end;
  margin-left: 2em;

}

section.specSection .specArea{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: .6em;
  font-size: var(--fs-mm);
}

section.specSection .specArea p span{
  color: var(--clr-primary);
  font-weight: var(--fw-medium);
}

section.specSection .specArea a{
  color: var(--clr-primary);
  font-size: var(--fs-sm);
  align-self: flex-end;
}

@media screen and (max-width: 950px){
  section.specSection{
    flex-direction: column;
    width: 85vw;
    margin-inline: auto;
    gap: 3.5em;
  }

  section.specSection .specSectionGraphicContainer{
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 2em;
    padding: 1em 2em;
    border-radius: 20px;
    aspect-ratio: inherit;
    height: fit-content;
  }

  section.specSection .specSectionGraphicContainer img{
    align-self: inherit;
    margin-left: 0;
    width: 6em;
  }

  section.specSection .specArea{
    width: 100%;
    padding-inline: 1em;
  }
}

@media screen and (max-width: 550px){
  section.specSection{
  width: 100%;
  padding-inline: 1em;
}
}






section.indexLastSection .heading{
  color: var(--clr-primary-400);
}

section.indexLastSection .txtArea p{
  text-align: center;
  --fs-mm: clamp(1em, 2.5vw, 1.2em);
  font-size: var(--fs-mm);
}




.signModal .forgotPassContainer{
  position: absolute;
  max-width: 90vw;
  background-color: var(--clr-neutral-light);
  z-index: 600;
  border-radius: 20px;
  display: grid;
  place-items: center;
  padding: 4em 6em;
  padding-top: 2em;
  gap: 1.3em;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(100%);
  transition: var(--transition), var(--transition-shorter)s;
}

.signModal .forgotPassContainer.active{
  opacity: 1;
  pointer-events: inherit;
  visibility: visible;
  transform: translateX(0);
}

.signModal .forgotPassContainer button.backBtn{
  display: none;
}


@media screen and (max-width: 550px){
  .signModal .forgotPassContainer{
    padding: 5em 1.7em;
    padding-bottom: 2em;
  }
  
  .signModal .forgotPassContainer button.backBtn{
    display: flex;
  }
  
  .signModal .forgotPassContainer form{
    gap: 4em;
  }
}

.signModal .forgotPassContainer p.infoTxt{
  --fs-main: clamp(.8em, 1.2vw, .8em);
  margin-top: .3em;
  line-height: 1.4;
  max-width: 40ch;
}

.signModal .forgotPassContainer button.forgotPassCloseBtn{
  position: absolute;
  top: 1em;
  left: 1em;
  border: 1.5px solid var(--clr-neutral-gray-lighter) !important;
  border-radius: 15px;
  aspect-ratio: 1/1;
  padding: .7em;
}

.signModal .forgotPassContainer button.forgotPassCloseBtn img{
  width: 1.2em;
  height: 1.2em;
}


.signModal .forgotPassContainer .forgotPassElements{
  transition: var(--transition);
}

.signModal .forgotPassContainer .forgotPassElements.hidden{
  scale: 0;
}


.confirmation-container {
  position: absolute;
  height: 200px;
  margin-bottom: 30px;
}

.confirmation-container .confirmation-animation {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.5s, opacity 0.5s ease;
}

.confirmation-container .confirmation-animation.active {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.confirmation-container .confirmation-animation h6{
  white-space: nowrap;
  color: var(--clr-primary);
  position: absolute;
  top: 100%;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%);
  transition: var(--transition);
}

.confirmation-container .confirmation-animation .confirmTxt.show{
  opacity: 1;
  top: 115%;
  transition: var(--transition);
}

.confirmation-container .confirmation-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--clr-primary);
  transform: scale(0);
  opacity: 0;
}

.confirmation-container .confirmation-animation.active .confirmation-circle {
  animation: scaleUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.confirmation-container .confirmation-checkmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 70%;
  height: 70%;
}

.confirmation-container .confirmation-animation.active .confirmation-checkmark {
  animation: checkmarkScale 0.3s 0.5s ease-out forwards;
}

.confirmation-container .confirmation-checkmark path {
  transform: translateX(1px);
  stroke: var(--clr-neutral-light);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.confirmation-container .confirmation-animation.active .confirmation-checkmark path {
  animation: drawCheckmark 0.5s 0.8s ease-out forwards;
}

@keyframes scaleUp {
  0% {
      transform: scale(0);
      opacity: 0;
  }
  80% {
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

@keyframes checkmarkScale {
  0% {
      transform: translate(-50%, -50%) scale(0);
  }
  70% {
      transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
      transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes drawCheckmark {
  to {
      stroke-dashoffset: 0;
  }
}

.confirmation-container .confirmation-circle::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: var(--confirmation-effect);
  border-radius: 50%;
}

.confirmation-container .confirmation-animation.active .confirmation-circle::after {
  animation: pulse 1.5s infinite 1s;
}

@keyframes pulse {
  0% {
      transform: scale(0.8);
      opacity: 1;
  }
  100% {
      transform: scale(2);
      opacity: 0;
  }
}







section.supportHeroSection{
  display: grid;
  place-items: center;
  padding-block: 13em 2em !important;
}

@media screen and (max-width: 650px){
  section.supportHeroSection{
    padding-top: 9em !important;
  }
}

section.supportHeroSection .supportHero{
  display: grid;
  place-items: center;
  padding: 0 1em;
  gap: 1.5em;
  width: fit-content;
  text-align: center;
}

section.supportHeroSection .supportHero .supportHeroTxt .header{
  font-size: var(--fs-h5);
  color: var(--clr-primary);
  line-height: 1.2;
}

section.supportHeroSection .supportHero .inputDIV{
  width: 100%;
}

section.supportHeroSection .supportHero .inputDIV .inputSVG{
  border-radius: 100vw;
}


section.supportCardSection{
  display: grid;
  place-items: center;
  gap: 2em;
  padding-inline: 5em;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

@media screen and (max-width: 550px){
  section.supportCardSection{
    padding-inline: 1em;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5em;
  }
  
}

section.supportCardSection .supportCard{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: var(--container-border);
  gap: 1em;
  padding: 1.3em 2em;
  border-radius: 15px;
  cursor: pointer;
  transition: var(--transition);
}

section.supportCardSection .supportCard:is(:hover,:focus-visible){
  background-color: var(--container-hover);
}

section.supportCardSection .supportCard img{
  width: 30px;
}

section.supportCardSection .supportCard h6{
  --fs-h6: clamp(1.15em, 3vw, 1.3em);
  color: var(--clr-primary-400);
  font-weight: var(--fw-medium);
}



.chatBubbleBtnArea{
  position: fixed;
  bottom: 2em;
  left: 2em;
  z-index: 700;
}

.chatBubbleBtnArea::before{
  content: '';
  position: fixed;
  inset: 0;
  background-color: var(--modal-bg);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: var(--transition);
}

.chatBubbleBtnArea.active::before{
  opacity: 1;
  pointer-events: inherit;
  visibility: visible;
}

.chatBubbleBtnArea button.chatBubbleBtn{
  background-color: var(--chat-bubble-bg);
  backdrop-filter: var(--chat-bubble-blur);
  border: 0;
  box-shadow: var(--chat-bubble-shadow);
  aspect-ratio: 1/1;
}

.chatBubbleBtnArea button.chatBubbleBtn img{
  width: 50px;
}

.chatBubbleBtnArea .chatBubbleContainer{
  position: absolute;
  bottom: 100%;
  left: 100%;
  display: grid;
  place-items: center;
  width: 22em;
  padding: 2em 1.3em;
  padding-top: 1.2em;
  background-color: var(--clr-neutral-light);
  border-radius: 20px;
  box-shadow: var(--chat-bubble-shadow);
  gap: 1em;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
}

.chatBubbleBtnArea .chatBubbleContainer.active{
  opacity: 1;
  pointer-events: inherit;
  visibility: visible;
  transform: translateY(0);
}

.chatBubbleBtnArea .chatBubbleContainer .chatBubbleHeader{
  display: flex;
  width: 100%;
  gap: 1em;
  justify-content: flex-start;
  align-items: center;
}

.chatBubbleBtnArea .chatBubbleContainer .chatBubbleHeader h6{
  --fs-h6: clamp(1.1em, 2.5vw, 1.2em);
}

.chatBubbleBtnArea .chatBubbleContainer .chatBubbleHeader button{
  border-radius: 10px;
  aspect-ratio: 1/1;
  padding: .4em;
}

.chatBubbleBtnArea .chatBubbleContainer .chatBubbleHeader img{
  width: 17px;
}

.chatBubbleBtnArea .chatBubbleContainer .line-x{
  width: 100%;
  height: 1px;
  background-color: var(--clr-neutral-gray-lighter);
  opacity: .3;
}

.chatBubbleBtnArea .chatBubbleContainer .chatBubbleBody{
  width: 100%;
  display: grid;
  place-items: center;
  gap: 1em;
}

.chatBubbleBtnArea .chatBubbleContainer .chatBubbleBody textarea{
  height: 10em;
}



main.dashboardMain{
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

main.dashboardMain aside{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
  background-color: var(--aside-bg);
  padding-block: 2em;
  z-index: 500;
  transition: var(--transition);
}

main.dashboardMain aside.hide{
  max-width: 0px !important;
}

main.dashboardMain aside.hide *:not(button.closeAsideBtn, button.closeAsideBtn *){
  transition: var(--transition);
}

main.dashboardMain aside.hide *:not(button.closeAsideBtn, button.closeAsideBtn *){
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

main.dashboardMain aside button.closeAsideBtn {
  position: absolute;
  cursor: pointer;
  background-color: var(--aside-bg);
  padding-block: 3em;
  padding-inline: .3em .8em;
  border-top-right-radius: 10000px;
  border-bottom-right-radius: 10000px;
  left: 70%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: var(--transition);
}

main.dashboardMain aside:hover button.closeAsideBtn,
main.dashboardMain aside.hide button.closeAsideBtn{
  left: 100%;
  opacity: 1;
}

main.dashboardMain aside.hide button.closeAsideBtn img{
  transition: var(--transition);
}

main.dashboardMain aside.hide button.closeAsideBtn img{
  rotate: 180deg;
}

main.dashboardMain aside button.closeAsideBtn img{
  --svg-width: 1em;
  min-width: var(--svg-width) !important;
  min-height: var(--svg-width) !important;
  max-width: var(--svg-width) !important;
  max-height: var(--svg-width) !important;
}

main.dashboardMain aside::after:hover{
  background-color: var(--aside-nav-hover-bg) !important;
}

main.dashboardMain aside img.logo{
  width: 4em;
}

main.dashboardMain aside .line-x{
  width: 100%;
  height: 1px;
  opacity: .6;
  background-color: var(--clr-neutral-gray-lighter);
  margin-block: 1em;
}

main.dashboardMain aside .asideNav{
  padding-inline: 1em;
  gap: .5em;
}

main.dashboardMain aside .asideNav button img{
  width: 4em;
}

main.dashboardMain aside .asideNav button{
  --btn-box-shadow: var(--clr-primary-100) 0 0 0 0;
  position: relative;
  background-color: transparent;
  border: 0;
  border-radius: 12px;
  width: 100%;
  padding: .5em 1em;
  overflow: inherit;
}

main.dashboardMain aside .asideNav button.currentPage{
  background-color: var(--aside-nav-active-bg);
}

main.dashboardMain aside .asideNav button:not(.currentPage):hover{
  background-color: var(--aside-nav-hover-bg);
}

@media screen and (min-width: 768px){
  main.dashboardMain aside{
    border-top-right-radius:50px !important;
    border-bottom-right-radius:50px !important;
    max-width: 200px;
    margin-block: .5em;
  }

  main.dashboardMain aside .asideNav button p{
    position: absolute;
    left: 130%;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--aside-bg);
    white-space: nowrap;
    color: var(--clr-neutral-light);
    padding: .5em 1em;
    border-radius: 10px;
    box-shadow: var(--aside-nav-hover-shadow);
    opacity: 0;
    scale: .95;
    pointer-events: none;
    visibility: hidden;
    transition: var(--transition);
  }

main.dashboardMain aside .asideNav button:is(:hover, :focus-visible) p{
  opacity: 1;
  scale: 1;
  pointer-events: inherit;
  visibility: visible;
}

main.dashboardMain aside .asideNav button:active p{
  scale: .9;
}
}

@media screen and (max-width: 768px){
  main.dashboardMain{
    flex-direction: column-reverse;
  }
  
  main.dashboardMain aside{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    flex-direction: row;
    padding: 1em 1em;
    gap: 1em;
  }

  main.dashboardMain aside button.closeAsideBtn{
    display: none;
  }

  main.dashboardMain aside img.logo,
  main.dashboardMain aside .line-x{
    display: none;
  }

  main.dashboardMain aside :is(.asideNavOnMobile, .asideNav){
    width: 100%;
    padding: 0;
    gap: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  main.dashboardMain aside .asideNav button{
    width: 100%;
    flex-direction: column;
  }
}

section.dashboardSection{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 4em;
  padding: 2em !important;
  overflow: auto;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
}

section.dashboardSection .dashboardUserName{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 768px){
  section.dashboardSection{
    padding: 1em !important;
    padding-bottom: 12em !important;
  }
}

section.dashboardSection .dashboardHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-weight: var(--fw-medium);
}

section.dashboardSection .dashboardHeader :is(img, svg){
  width: 1.6em;
  height: 1.6em;
}

section.dashboardSection .dashboardHeader .powerOff p{
  color: var(--clr-accent-danger) !important;
}

section.dashboardSection .dashboardHeader .powerOff svg path{
  stroke: var(--clr-accent-danger) !important;
}

section.dashboardSection .dashboardHeader .powerOn p{
  color: var(--clr-primary) !important;
}

section.dashboardSection .dashboardHeader .powerOn svg path{
  stroke: var(--clr-primary) !important;
}

section.dashboardSection .dashboardHeader .powerOff p{
  color: var(--clr-accent-danger) !important;
}

section.dashboardSection .dashboardHeader .flexbox{
  gap: .5em;
}

section.dashboardSection .dashboardBlockTitle{
  padding-inline: 1em;
}

section.dashboardSection .dashboardMiniBtn{
  box-shadow: none !important;
  background-color: transparent;
  aspect-ratio: 1/1;
  border-radius: 8px;
  padding: .5em;
  border: 1px solid var(--clr-neutral-gray-light);
}

section.dashboardSection .dashboardMiniBtn :is(img,svg){
  width: .8em;
  height: .8em;
}

section.dashboardSection .dashboardMiniBtn:hover{
  background-color: var(--clr-rgba-gray-softer);
}

section.dashboardSection .dashboardTitles{
  --fs-main: clamp(.9em, 1.2vw, 1.1em);
  font-size: var(--fs-main);
}

section.dashboardSection .dashboardMiniBtn.refreshBtn:focus :is(img, svg){
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}



section.dashboardSection .controlUIarea{
  display: grid;
  place-items: center;
  gap: var(--dashboard-gap);
}

section.dashboardSection .controlUIcontainer{
  display: flex;
  width: 100%;
}

section.dashboardSection .controlUIcontainer,
section.dashboardSection .controlUIcolumn{
  gap: 1em;
}

section.dashboardSection .controlUIcard{
  position: relative;
  width: 100%;
  --control-ui-card-padding-block: 1em;
  --control-ui-card-padding-inline: 1.7em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  border: var(--container-border);
  padding: var(--control-ui-card-padding-block) var(--control-ui-card-padding-inline);
  border-radius: 10px;
  user-select: none;
  min-width: fit-content;
  white-space: nowrap;
  cursor: pointer;
}


section.dashboardSection .controlUIcardMini{
  --control-ui-card-add-padding: 1.5em;
  padding-right: calc(var(--control-ui-card-padding-inline) + var(--control-ui-card-add-padding));
  padding-bottom: calc(var(--control-ui-card-padding-block) + var(--control-ui-card-add-padding));
  justify-content: flex-start;
  align-items: flex-start;
}

@media screen and (max-width: 450px){
section.dashboardSection .controlUIcardMini{
  --control-ui-card-padding-block: .6em;
  --control-ui-card-padding-inline: 1em;
}
}

section.dashboardSection .controlUIcardMini .controlUIcardMiniTitle{
  font-size: var(--fs-xs);
  gap: .3em;
  opacity: .5;
}

section.dashboardSection .controlUIcardMini p{
  --fs-main: clamp(.9em, 2.2vw, 1.2em);
  font-size: var(--fs-main);
}

section.dashboardSection .controlUIcardMini h6{
  --fs-h6: clamp(2em, 2.5vw, 2.5em);
}

section.dashboardSection .controlUIcardMini .controlUIcardMiniData{
  gap: .4em;
}

section.dashboardSection .controlUIcardMini .controlUIcardMiniDataIcon{
  gap: .2em;
}

section.dashboardSection .controlUIcardMini .controlUIcardMiniDataIcon img{
  transform: translateY(-10px); 
}

section.dashboardSection .controlUIcardTimer{
  transition: var(--transition);
}

section.dashboardSection .controlUIcardTimer:hover{
  background-color: var(--clr-rgba-gray-softer);
}

section.dashboardSection .controlUIcardTimer img.arrow{
  width: .6em;
  height: .6em;
  position: absolute;
  top: .6em;
  right: .6em;
}

section.dashboardSection .controlUIcardTimer img.clockSVG{
  width: 1.7em;
  height: 1.7em;
}

section.dashboardSection .controlUItable{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  padding: 1em;
}

@media screen and (min-width: 768px){
  section.dashboardSection .controlUItable{
    max-height: 420px;
    overflow: auto;
  }
  @supports(scrollbar-color: red blue){
    section.dashboardSection .controlUItable{
        scrollbar-color: var(--clr-neutral-gray-light) transparent;
        scrollbar-width: thin;
    }
}
}

section.dashboardSection .controlUItable .column{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1em;
  height: fit-content;
}

section.dashboardSection .controlUItable .column p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

section.dashboardSection .controlUItable .column img{
  width: 3em;
  height: 3em;
  opacity: .85;
}

@media screen and (max-width: 1065px){
  section.dashboardSection .controlUItable .column img{
    width: 2em;
    height: 2em;
  }
}

section.dashboardSection .controlUItable .column .header{
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

section.dashboardSection .controlUItable .column .line-x{
  width: 100%;
  height: 1px;
  background-color: var(--clr-neutral-gray-lighter);
}

section.dashboardSection .controlUItable .column .pureflowcss-dropdown .pureflowcss-dropdown-items{
  left: inherit;
  right: 0;
}

@media screen and (min-width: 600px){

  .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="longer-dropdown-list"]{
    min-width: 496px;
  }
}

@media screen and (max-width: 600px){

  .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="longer-dropdown-list"]{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: .3em;
    gap: .5em;
    min-width: 238px;
  }

  .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="longer-dropdown-list"] .pureflow-css-dropdown-add-column{
    grid-column: span 2;
  }
}

@media screen and (max-width: 650px){
  section.dashboardSection .controlUIcontainer{
    flex-direction: column;
  }
section.dashboardSection .controlUIcolumn{
  grid-template-columns: auto auto;
}

section.dashboardSection .controlUIcardTimer{
  grid-column: span 2;
}
}


.bg-wire{
  min-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}




.userProfileModal{
  z-index: 1000;
  position: fixed;
  inset: 0;
  background-color: var(--modal-bg);
  backdrop-filter: var(--modal-blur);
  display: grid;
  user-select: none;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition);
}

.userProfileModal.active{
  opacity: 1;
  visibility: visible;
  pointer-events: inherit;
}

.userProfileModal .userProfileContainer{
  background-color: var(--clr-neutral-light);
  border-radius: 20px;
  padding: var(--modal-padding);
  max-width: 95vw;
}

.userProfileMain{
  z-index: 5;
  opacity: 1;
  pointer-events: inherit;
  visibility: visible;
  transition: var(--transition);
}

.userProfileMain.hide{
  transform: translateX(-3em);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.userProfileModal .userProfileContainer{
  display: grid;
  place-items: center;
  gap: 1em;
}

.closeModalBtn{
  aspect-ratio: 1/1 !important;
  border-radius: 8px !important;
  padding: .6em !important;
}

.closeModalBtn img{
  width: 1em;
  height: 1em;
}

.modalLine{
  width: 100%;
  height: 1px;
  background-color: var(--clr-neutral-gray-lighter);
  opacity: .4;
}

.userProfileModal .userProfileContainer button.editDataBtn{
  height: 100%;
  padding: .8em;
  aspect-ratio: 1/1;
  border-radius: 8px !important;
}

.userProfileModal .userProfileContainer button.editDataBtn img{
  margin: inherit;
}

.userProfileModal .userProfileContainer .buttonArea{
  margin-top: 1em;
}

.logoutModal{
  width: 30em;
}

.logoutModal,
.changePassModal{
  position: absolute;
  transform: translateX(3em);
  opacity: 0 !important;
  pointer-events: none;
  visibility: hidden;
  transition: var(--transition);
  z-index: -2;
}

.logoutModal.active,
.changePassModal.active{
  transform: translateX(0);
  opacity: 1 !important;
  pointer-events: inherit;
  visibility: visible;
  z-index: 2;
}

.changePassModal{
  width: 25em;
}









.knob-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: var(--transition);
}

/* Dış daire */
.knob {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #e9f2fa;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* Knob üzerindeki ince işaret çizgileri (isteğe bağlı tasarım) */
.knob::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #cfd9e3;
}

/* Ortadaki (açma-kapama) düğme veya ikon alanı */
.knob-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Yüzdelik metin */
.knob-percentage {
  font-size: 16px;
  margin-bottom: 5px;
  color: #333;
}

/* Güç (Power) ikonu – Unicode karakteri veya bir simge fontu kullanabilirsiniz. */
.knob-power {
  font-size: 18px;
  color: var(--clr-primary);
}

/* Dönen mavi gösterge (üstteki nokta) */
.knob-indicator {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #4c9ff0;
  border-radius: 50%;
  top: 0px; /* Knob'un en üst noktasına hizalandı */
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: center 100px; /* Dönüş ekseni, merkezin altına ayarlanıyor */
  cursor: grab;
}

.preview {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #357cee65;
  filter: blur(20px);
  box-shadow: var(--clr-primary-100) 0 0 10px 2px;
}



.knobClosed .knob{
  display: grid;
  place-items: center;
}

.knobManage:not(.active){
  width: 150px;
  height: 150px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: var(--transition);
}

.knobManage{
  z-index: 10;
}

.knobClosed .knob img{
  width: 4.5em;
}

.knobClosed.hide{
  width: 150px;
  height: 150px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}



.btnAreaStart{
  display: flex;
  gap: .6em;
  position: absolute;
  bottom: 1em;
  left: 1em;
}

@media screen and (max-width: 768px){
  .btnAreaStart{
    position: static;
    align-self: flex-start;
  }
}

.btnAreaStart button img{
  width: 1.5em;
  height: 1.5em;
}



.ozelAyarlarModal{
  position: fixed;
  inset: 0;
  background-color: var(--modal-bg);
  backdrop-filter: var(--modal-blur);
  display: grid;
  place-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition);
}

.ozelAyarlarModal.active{
  opacity: 1;
  visibility: visible;
  pointer-events: inherit;
}

.ozelAyarlarModal .ozelAyarlarContainer{
  position: relative;
  background-color: var(--clr-neutral-light);
  padding: var(--modal-padding);
  border-radius: 20px ;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 30em;
  height: 90dvh;
  overflow: auto;
  transition: var(--transition);
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock{
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: center;
  gap: 1.5em;
  width: 100%;
}

@media screen and (max-width: 550px){
  .ozelAyarlarModal{
    align-items: end;
  }

  .ozelAyarlarModal .ozelAyarlarContainer{
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .ozelAyarlarModal:not(.active) .ozelAyarlarContainer{
    transform: translateY(20px);
  }
}

/* Scroll Bar */
@supports(scrollbar-color: red blue){
  .ozelAyarlarModal .ozelAyarlarContainer{
      scrollbar-color: transparent transparent;
      scrollbar-width: thin;
  }
}

.ozelAyarlarModal .ozelAyarlarContainer .header{
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  gap: var(--modal-header-gap);
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock{
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1em;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock button.saveChangesBtn{
  color: var(--clr-txt-paragraph) !important;
  border-color: var(--clr-rgba-gray) !important;
  display: none;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarSection{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: var(--transition);
}

.ozelAyarlarModal .ozelAyarlarContainer :is(.ozelAyarSection, .ozelAyarTimerBlock){
  width: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: flex-start;
  gap: .5em;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarOtonomSection .isikArea{
  width: 100%;
  margin-top: 1em;
  display: grid;
  gap: .5em;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarOtonomSection .heatArea{
  width: 100%;
  display: grid;
  gap: .5em;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarOtonomSection .otonomSwitch{
  margin-block: 3em 2em;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarOtonomSection .otonomSwitchTopArea{
  margin-block: 1em 3em;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarSection.hide{
  opacity: 0;
  position: none;
  visibility: hidden;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarGenelSection{
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarGenelSection .deleteProfileBtn{
/*  position: fixed;
  bottom: 1em;*/
  margin-top: 10.5em;
}
/*
.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarGenelSection.hide{
  left: -1em ;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarTimerSection   {
  left: inherit;
  right: 0;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarGenelSection.hide{
  right: -1em !;
}*/

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarSectionHeader{
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  gap: 2em;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarSectionHeader button{
  min-width: 20px;
  max-width: 20px;
  border-color: transparent !important;
  padding: 0 !important;
  background-color: transparent;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarSectionHeader button img{
  width: 2em;
  height: 2em;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarSectionHeader h6{
  font-size: 1.3em;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarlarBlock .ozelAyarSectionHeader .infoAlertTxt{
  color: var(--clr-txt-paragraph);
  font-size: var(--fs-xs);
  position: absolute;
  width: 100%;
  max-width: fit-content;
  top: 120%;
  right: 0;
  background-color: var(--clr-neutral-light);
  border: 2px solid var(--clr-neutral-gray-light);
  padding: 1em;
  border-radius: 14px;
  box-shadow: var(--clr-rgba-gray-darker) 0 2px 10px 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition);
}

.ozelAyarSectionHeader .dashboardBtn:hover + .infoAlertTxt {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: inherit !important;
}


.ozelAyarlarModal .ozelAyarlarContainer .modalInputArea .inputDIV{
  gap: .1em;
}

.ozelAyarlarModal .ozelAyarlarContainer .modalInputArea{
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.ozelAyarlarModal .ozelAyarlarContainer .modalInputArea label,
.ozelAyarlarModal .ozelAyarlarContainer .pureflowcss-dropdown small{
  --fs-ms: clamp(0.8em, 1.5vw, 0.85em);
  font-size: var(--fs-ms);
  gap: .3em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  opacity: .8 !important;
  padding-inline: .45em !important;
}

.ozelAyarlarModal .ozelAyarlarContainer .pureflowcss-dropdown small{
  margin-bottom: .3em;
}

.ozelAyarlarModal .ozelAyarlarContainer .modalInputArea label img,
.ozelAyarlarModal .ozelAyarlarContainer .pureflowcss-dropdown small img{
  width: 1em;
  height: 1em;
}

.ozelAyarlarModal .ozelAyarlarContainer small.note{
  font-size: var(--fs-xs);
  align-self: start;
  opacity: .8;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyalarBtnArea{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .3em;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyalarBtnArea button{
  width: 100%;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyalarBtnArea button img{
  width: 1em;
  height: 1em;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyalarBtnArea button:not(.activeBtn){
  opacity: .6;
  border-color: transparent !important;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarTimerSection .timerYokContainer{
  width: 100%;
  background-color: var(--clr-rgba-gray-softer);
  display: grid;
  place-items: center;
  padding: 2em;
  border-radius: 12px;
  margin-block: 1em;
  font-weight: var(--fw-medium);
}

.ozelAyarTimerBlock:not(.active){
  display: none !important;
}

.ozelAyarTimerSection.active{
  display: flex !important;
  flex-direction: column-reverse !important;
}

.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarTimerSection .timerYokContainer.active{
  display: none;
}



.ozelAyarlarModal .ozelAyarlarContainer .ozelAyarTimerSection button.addMoreTimerBtn.active{
  margin-top: 1em;
}


.profileCardModal{
  position: fixed;
  inset: 0;
  background-color: var(--modal-bg);
  backdrop-filter: var(--modal-blur);
  display: grid;
  place-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition);
}

.profileCardModal.active{
  opacity: 1;
  visibility: visible;
  pointer-events: inherit;
}

.profileCardModal .profileCardContainer .profileCardContainerContent{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  background-color: var(--clr-neutral-light);
  padding: var(--modal-padding);
  border-radius: 20px;
  gap: .8em;
  max-width: 95vw;
}

.profileCardModal .profileCardContainer .profileCardContainerContent .buttonArea{
  margin-top: 1em;
}

.profileCardModalHeader{
  padding-left: 28px;
}

.profileCardModalHeader svg{
  position: absolute;
  left: 1.2em;
  top: 1.5em;
  transform: translate(0);
  transition: var(--transition);
}

.profileCardModalHeader .messageBox::after{
  content: 'Profil Kaldırıldı';
  position: absolute;
  bottom: 3em;
  left: 50%;
  transform: translateX(-50%);
  --fs-main: clamp(1.2em, 1.2vw, 1.2em);
  font-size: var(--fs-main);
  font-weight: var(--fw-semi-bold);
  color: var(--clr-accent-danger);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: var(--transition);
}

.profileCardModalHeader.active .messageBox::after{
  bottom: 1.2em !important;
  opacity: 1;
  pointer-events: inherit;
  visibility: visible;
}

.profileCardModalHeader.active svg{
  width: 100px;
  height: 100px;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 1050px){
  .profileCardModalHeader.active svg{
    width: 80px;
    height: 80px;
  }
}

.profileCardModalHeader.active svg path{
  stroke: var(--clr-accent-danger);
}

.profileCardModal .profileCardContainer .scaleDown{
  transition: var(--transition);
}

.profileCardModal .profileCardContainer .scaleDown.active{
  filter: blur(5px);
  opacity: 0;
}