@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 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;
  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{
    --ff-primary: "Bebas Neue", serif;
    --ff-secondary: "Poppins", sans-serif; 

    --max-width: 1920px;

    /* 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(1em, 2vw, 1.1em);
    --fs-h1: clamp(2.5em, 5vw, 4em);
    --fs-h2: clamp(2.2em, 4.5vw, 3.5em);
    --fs-h3: clamp(2em, 4vw, 3em);
    --fs-h4: clamp(1.8em, 3.5vw, 2.5em);
    --fs-h5: clamp(1.5em, 3vw, 2em);
    --fs-h6: clamp(1.2em, 2.5vw, 1.6em);

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

    --fs-input: var(--fs-ms);


    /* Background Colors */
    --clr-bg: #0C0A0B;


    /* Primary Colors */
    --clr-light: hsl(0, 0%, 100%);
    --clr-dark: #0C0A0B;
    
    --clr-warning: hsl(0, 100%, 50%);


    /* Text Color */
    --clr-txt: hsl(0, 0%, 100%);


    /* Dropdown */              /* Recommended colors for light theme */
    --dropdown-bg: ;            /* Recommended Color: hsl(0, 0%, 100%) */
    --dropdown-clr: ;           /* Recommended Color: hsl(0, 0%, 38%)*/
    --dropdown-hover: ;         /* Recommended Color: hsl(0, 0%, 94%) */
    --dropdown-padding: ;       /* Recommended Padding: .85em 1.2em */
    --dropdown-shadow: ;

    
    /* Modal */
    --modal-bg: ;               /* Set bg color */
    --modal-content-bg: ;       /* Set modal bg color */

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


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


    /* Accent Colors */
    --clr-accent: #441752;
    --clr-accent-secondary: #1F4529;

    --selection-clr: #9934b87d;

    --clr-glow: hsl(286, 56%, 31%);

    --clr-box-shadow: hsla(286, 56%, 46%, 0.050);
    
    --clr-accent-100: ;
    --clr-accent-200: #9934B8;
    --clr-accent-300: ;
    --clr-accent-400: #441752;
    --clr-accent-500: ;
    --clr-accent-600: ;
    --clr-accent-700: ;
    --clr-accent-750: ;

    --clr-accent-lighter: ;
    --clr-accent-darker: ;

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


    /* Button */
    --btn-border: 2.5px solid var(--clr-accent);

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

    --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: ;
    --btn-secondary-bg-hover: ;
    --btn-secondary-txt: ;
    
    --btn-secondary-border-clr: ;


    /* Input */
    --input-bg: transparent;
    
    --input-bg-hover: #ffffff0b;         /* Set color */
    --input-file-bg-hover: ;    /* Set color ( Recommended: rgba(0,0,0,0.05) );*/
    
    --input-ff: var(--ff-secondary);

    --input-clr: ;              /* Set color */

    --input-border: 1.5px solid #ffffff46;           /* Recommended Border: 1.5px solid #dcdcdc */
    --input-border-radius: var(--btn-border-radius-pill);    /* Recommended Radius: 10px */
    --input-padding: .7em 1em;          /* Recommended Padding: .65em 1.2em */

    --input-secondary-border: linear-gradient(45deg, #ffffffdb, #ffffff35 80%);
    --input-secondary-clr-effect: #7a7a7a 1px 0 10px;
    
    /* Input File */
    --input-clr-file: ;         /* Set color ( Recommended: hsl(0, 0%, 34%) );*/


    /* 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: .3s;

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





    --primary-btn-clr: #295B36;
    
    --nav-btn-clr: #ffffff32;
    --nav-btn-txt: #ffffffa6;

    --border-btn-clr: #68237d;
    --border-btn-txt: #811ba0;
    
    --thin-btn-clr: hsla(0, 0%, 100%, 0.07);
    --thin-btn-txt: #fff;
    --thin-btn-border: var(--input-border);
    --transparent-btn-clr: #ffffff37;

    --gradient-btn-bg: linear-gradient(180deg, var(--clr-accent-200) 48%, var(--clr-accent-400));
    
    --gradient-btn-border-size: 2px;
    
    --gradient-1-btn-top-clr: #dfdfdf;
    --gradient-1-btn-bottom-clr: #313131;
    --gradient-bg-1: linear-gradient(to bottom, var(--gradient-1-btn-top-clr), var(--gradient-1-btn-bottom-clr));


    --gradient-2-btn-top-clr: #878787;
    --gradient-2-btn-bottom-clr: #313131;
    --gradient-bg-2: linear-gradient(to right, var(--gradient-2-btn-top-clr), var(--gradient-2-btn-bottom-clr));



    --txt-purple-gradient: linear-gradient(180deg, var(--clr-accent-200), var(--clr-accent));
    --txt-white-gradient: linear-gradient(180deg, var(--clr-light) 35%, var(--clr-gray-softer));
}

/* Header Texts */
h1{ font-size: var(--fs-h1); font-weight: var(--fw-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(.hamburger-btn),
button:not(.hamburger-btn)[type="submit"],
button:not(.hamburger-btn)[type="button"],
input:not(.hamburger-btn)[type="button"],
input:not(.hamburger-btn)[type="submit"],
a.buttonLink{
    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-main);
    border-radius: var(--btn-border-radius);
    color: var(--btn-txt);
    border: var(--btn-border);
}

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

button:not(.hamburger-btn):is(:focus, :active),
button:not(.hamburger-btn)[type="submit"]:is(:focus, :active),
button:not(.hamburger-btn)[type="button"]:is(:focus, :active),
input:not(.hamburger-btn)[type="button"]:is(:focus, :active),
input:not(.hamburger-btn)[type="submit"]:is(:focus, :active){
  scale: .9;
}

@media screen and (max-width: 550px){
button:not(.hamburger-btn),
button:not(.hamburger-btn)[type="submit"],
button:not(.hamburger-btn)[type="button"],
input:not(.hamburger-btn)[type="button"],
input:not(.hamburger-btn)[type="submit"]{
  padding-block: .3em;
  border-radius: var(--btn-border-radius-sharp);
}
}


/* ---------------- SECONDARY BUTTONS --------------- */
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):is(:hover,:focus-visible),
button:is(.secondaryBtn)[type="submit"]:is(:hover,:focus-visible),
button:is(.secondaryBtn)[type="button"]:is(:hover,:focus-visible),
input:is(.secondaryBtn)[type="button"]:is(:hover,:focus-visible),
input:is(.secondaryBtn)[type="submit"]:is(:hover,:focus-visible){
  background-color: var(--btn-secondary-hover);
}



/* ---------------- PRIMARY BUTTON --------------- */
button:is(.primary-btn),
button:is(.primary-btn)[type="submit"],
button:is(.primary-btn)[type="button"],
input:is(.primary-btn)[type="button"],
input:is(.primary-btn)[type="submit"]{
  background-color: var(--primary-btn-clr);
  border-color: var(--primary-btn-clr);
}

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

/* ---------------- PRIMARY BUTTON (ONLY BORDER) --------------- */
button:is(.border-btn),
button:is(.border-btn)[type="submit"],
button:is(.border-btn)[type="button"],
input:is(.border-btn)[type="button"],
input:is(.border-btn)[type="submit"]{
  background-color: transparent;
  border-color: var(--border-btn-clr);
  color: var(--border-btn-txt);
}

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

/* ---------------- NAV BUTTON --------------- */
button:is(.nav-btn),
button:is(.nav-btn)[type="submit"],
button:is(.nav-btn)[type="button"],
input:is(.nav-btn)[type="button"],
input:is(.nav-btn)[type="submit"]{
  background-color: var(--nav-btn-clr);
  border-color: var(--nav-btn-clr);
  backdrop-filter: blur(10px);
}

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

/* ---------------- THIN BUTTON --------------- */
button:is(.thin-btn),
button:is(.thin-btn)[type="submit"],
button:is(.thin-btn)[type="button"],
input:is(.thin-btn)[type="button"],
input:is(.thin-btn)[type="submit"]{
  background-color: transparent;
  border: var(--thin-btn-border);
}

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

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

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

/* ---------------- FUN BUTTON --------------- */
button:is(.fun-btn),
button:is(.fun-btn)[type="submit"],
button:is(.fun-btn)[type="button"],
input:is(.fun-btn)[type="button"],
input:is(.fun-btn)[type="submit"]{
            background: var(--gradient-btn-bg);
            border-radius: var(--btn-border-radius-pill);
            border: 0;
}

button:is(.fun-btn):is(:hover,:focus-visible),
button:is(.fun-btn)[type="submit"]:is(:hover,:focus-visible),
button:is(.fun-btn)[type="button"]:is(:hover,:focus-visible),
input:is(.fun-btn)[type="button"]:is(:hover,:focus-visible),
input:is(.fun-btn)[type="submit"]:is(:hover,:focus-visible){
  transform: translateY(-3px);
}



/* ---------------- GRADIENT BTNS --------------- */
/* ---------------- ONLY BACKGROUND --------------- */
button:is(.small-btn),
button:is(.small-btn)[type="submit"],
button:is(.small-btn)[type="button"],
input:is(.small-btn)[type="button"],
input:is(.small-btn)[type="submit"]{
  padding: var(--btn-padding);
  border: none;
  outline: none;
  position: relative;
  z-index: 1;
  border-radius: var(--btn-border-radius-sm);
  background: var(--gradient-bg-1);
  aspect-ratio: 1/1;
  padding: .9em;
  display: grid;
  place-items: center;
}

button:is(.small-btn)::before,
button:is(.small-btn)[type="submit"]::before,
button:is(.small-btn)[type="button"]::before,
input:is(.small-btn)[type="button"]::before,
input:is(.small-btn)[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: var(--clr-dark);
  z-index: -1;
  transition: var(--transition);
}


/* ---------------- ONLY BORDER --------------- */
button:is(.small-btn):is(:hover,:focus-visible):before,
button:is(.small-btn)[type="submit"]:is(:hover,:focus-visible):before,
button:is(.small-btn)[type="button"]:is(:hover,:focus-visible):before,
input:is(.small-btn)[type="button"]:is(:hover,:focus-visible):before,
input:is(.small-btn)[type="submit"]:is(:hover,:focus-visible):before{
  background-color: #222222;
}

button:is(.small-btn)::after,
button:is(.small-btn)[type="submit"]::after,
button:is(.small-btn)[type="button"]::after,
input:is(.small-btn)[type="button"]::after,
input:is(.small-btn)[type="submit"]::after{
  content: attr(data);
  background: var(--gradient-bg-1);
  -webkit-background-clip: text;
  color: transparent;
  transition: var(--transition);
}

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




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{
  display: flex;
  justify-content: start;
  align-items: center;
  resize: vertical;
  font-size: var(--fs-input);
  font-family: var(--input-ff);
  caret-color: var(--clr-accent);
  padding: var(--input-padding);
  background-color: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-border-radius);
  color: var(--input-clr);
  transition: var(--transition);
}

/* Input Hover */

input:not([type="button"], [type="submit"], [type="range"]):hover,
textarea:hover{ 
  background-color: var(--input-bg-hover) !important; 
}

input:not([type="button"], [type="submit"], [type="range"]):focus,
textarea:focus{
  background-color: var(--input-bg-hover);
  animation: inputFocus .7s infinite;
}

@keyframes inputFocus{
  0%   { opacity: 1; }
  50%  { opacity: .7; }
  100% { opacity: 1; }
}

/* 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{
    opacity: .8;
}

/* Custom Checkbox */
input[type="checkbox"],
input[type="radio"]{
  accent-color: var(--clr-accent);
}

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

.input-block label{
    font-size: var(--fs-xs);
    font-family: var(--ff-secondary);
    opacity: .5;
    font-weight: var(--fw-700);
    padding-inline: .6em;
}

.input-block input{
  width: 100%;
}

/* Input With a Button Styling */
.inputBtn{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--input-border-radius);
  border: var(--input-border);
  overflow: hidden;
  transition: var(--transition);
}

.inputBtn:hover{
  background-color: var(--input-bg-hover);
}

.inputBtn input{
  border: 0;
  background-color: transparent !important;
  padding-inline: 1.5em;
  align-self: stretch;
}

.inputBtn input:hover{
  background-color: transparent !important;
}

.inputBtn button{
  background-color: transparent;
  outline: 0;
  border: 0;
  border-radius: 0;
  scale: 1 !important;
  align-self: stretch;
}

.inputBtn button svg{
  transition: var(--transition);
}

.inputBtn button:hover{
  background-color: #ffffff0e;
}

.inputBtn button:focus svg{
  scale: .9;
}

/* --------------------------------- */
.inputSecondaryContainer {
  --border-2-input-radius: var(--btn-border-radius-pill);
  position: relative;
}

.inputSecondaryContainer :is(input,textarea) {
  background-color: transparent;
  outline: none;
  border: none;
  text-shadow: var(--input-secondary-clr-effect);
  border-radius: 0;
  width: 100%;
}

.inputSecondaryContainer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--border-2-input-radius);
  background: var(--input-secondary-border);
  z-index: -1;
}

.inputSecondaryContainer::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: var(--border-2-input-radius);
  background-color: var(--clr-dark);
  z-index: -1;
}
/* ------------------------------------------*/

.p-txt{
  background: var(--txt-purple-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

h1.titleHeader{
  --fs-h1: clamp(2em, 5vw, 2.3em);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-light);
  user-select: none;
  background: var(--txt-white-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* 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: #00000006;
    backdrop-filter: blur(10px);
}

/* HTML: <div class="loader"></div> */
.loader {
  height: 5px;
  width: 130px;
  --c:no-repeat linear-gradient(var(--clr-accent-200) 0 0);
  background: var(--c),var(--c),#ffefef;
  background-size: 60% 100%;
  animation: l16 3s infinite;
  box-shadow: var(--clr-accent-200) 0 0 10px 2px;
}
@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 (Mobile) */
@supports(scrollbar-color: red blue){
    *{
      /*  scrollbar-color: var(--clr-accent) var(--clr-dark);*/
      scrollbar-color: transparent transparent;
        scrollbar-width: thin;
    }
}

@media screen and (min-width: 650px){
  @supports(scrollbar-color: red blue){
      *{
          scrollbar-color: var(--clr-accent) var(--clr-dark);
          scrollbar-width: thin;
      }
    }
  }



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

/*  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-dvg{
  min-height: 100vh;
}

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

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

.wrap{
    flex-wrap: wrap;
}

.flex1{
    flex: 1;
}

.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;
}

/* 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 */


/* Font Types */
.i{
    font-style: italic;
}

/* Gaps */
.g-30  { gap: .3em;  }
.g-50  { gap: .5em;  }
.g-70  { gap: .7em;  }
.g-100 { gap: 1em;   }
.g-120 { gap: 1.2em; }
.g-150 { gap: 1.5em; }
.g-200 { gap: 2em;   }
.g-250 { gap: 2.5em; }
.g-300 { gap: 3em;   }
.g-350 { gap: 3.5em; }
.g-400 { gap: 4em;   }
.g-450 { gap: 4.5em; }
.g-500 { gap: 5em;   }

/* Paddings */
.p-50  { padding: .5em; }
.p-100 { padding: 1em; }
.p-150 { padding: 1.5em; }
.p-200 { padding: 2em; }
.p-250 { padding: 2.5em; }
.p-300 { padding: 3em; }
.p-350 { padding: 3.5em; }
.p-400 { padding: 4em; }
.p-450 { padding: 4.5em; }
.p-500 { padding: 5em; }

.px-50  { padding-inline: .5em; }
.px-100 { padding-inline: 1em; }
.px-150 { padding-inline: 1.5em; }
.px-200 { padding-inline: 2em; }
.px-250 { padding-inline: 2.5em; }
.px-300 { padding-inline: 3em; }
.px-350 { padding-inline: 3.5em; }
.px-400 { padding-inline: 4em; }
.px-450 { padding-inline: 4.5em; }
.px-500 { padding-inline: 5em; }

.py-50  { padding-block: .5em; }
.py-100 { padding-block: 1em; }
.py-150 { padding-block: 1.5em; }
.py-200 { padding-block: 2em; }
.py-250 { padding-block: 2.5em; }
.py-300 { padding-block: 3em; }
.py-350 { padding-block: 3.5em; }
.py-400 { padding-block: 4em; }
.py-450 { padding-block: 4.5em; }
.py-500 { padding-block: 5em; }

.pt-50  { padding-top: .5em; }
.pt-100 { padding-top: 1em; }
.pt-150 { padding-top: 1.5em; }
.pt-200 { padding-top: 2em; }
.pt-250 { padding-top: 2.5em; }
.pt-300 { padding-top: 3em; }
.pt-350 { padding-top: 3.5em; }
.pt-400 { padding-top: 4em; }
.pt-450 { padding-top: 4.5em; }
.pt-500 { padding-top: 5em; }

.pb-50  { padding-bottom: .5em; }
.pb-100 { padding-bottom: 1em; }
.pb-150 { padding-bottom: 1.5em; }
.pb-200 { padding-bottom: 2em; }
.pb-250 { padding-bottom: 2.5em; }
.pb-300 { padding-bottom: 3em; }
.pb-350 { padding-bottom: 3.5em; }
.pb-400 { padding-bottom: 4em; }
.pb-450 { padding-bottom: 4.5em; }
.pb-500 { padding-bottom: 5em; }

.pr-50  { padding-right: .5em; }
.pr-100 { padding-right: 1em; }
.pr-150 { padding-right: 1.5em; }
.pr-200 { padding-right: 2em; }
.pr-250 { padding-right: 2.5em; }
.pr-300 { padding-right: 3em; }
.pr-350 { padding-right: 3.5em; }
.pr-400 { padding-right: 4em; }
.pr-450 { padding-right: 4.5em; }
.pr-500 { padding-right: 5em; }

.pl-50  { padding-left: .5em; }
.pl-100 { padding-left: 1em; }
.pl-150 { padding-left: 1.5em; }
.pl-200 { padding-left: 2em; }
.pl-250 { padding-left: 2.5em; }
.pl-300 { padding-left: 3em; }
.pl-350 { padding-left: 3.5em; }
.pl-400 { padding-left: 4em; }
.pl-450 { padding-left: 4.5em; }
.pl-500 { 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-dark); }

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

.clr-accent{ color: var(--clr-accent); }

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

.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);
}

.font2{
  font-family: var(--ff-secondary);
}

/* Aspect Ratio */
.aspect-1{ aspect-ratio: 1/1; }
.aspect-4{ aspect-ratio: 4/3; }
.aspect-16{ aspect-ratio: 16/9; }

/* 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; }

.relative{ position: relative; overflow: hidden; }

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

/* Dropdown Styling */
.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);
}

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

.dropdown .dropdown-items{
  display: grid;
  place-items: center;
  position: absolute;
  overflow: auto;
  top: 3.5em;
  left: 0;
  min-width: 100%;
  background-color: var(--clr-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.dropdown .dropdown-items span{
  width: 100%;
  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);
}

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

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

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

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

.dropdown .dropdown-items .no-match{
  color: var(--clr-warning);
  font-size: var(--fs-sm);
  white-space: nowrap;
  padding: 1em;
}
 /* Dropdown Stling Ends */
 

/* 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);

  /* 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: .8 !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: .9 !important;
      opacity: .9 !important;
    }

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

.glow{
  content: '';
  position: absolute;
  background-color: var(--clr-glow);
  z-index: -1;
  width: 20em;
  height: 10em;
  filter: blur(300px);
  border-radius: 100vw;
  animation: glowingAnimation 4s infinite;
}

@keyframes glowingAnimation {
  0%{
    scale: 1;
  }

  50%{
    scale: .5;
  }
  100%{
    scale: 1;
  }
}

.indexTitleSection,
.highlightSection,
.cityEnergySection,
.kayitGuideSection{
  padding-bottom: 16em !important;
}

.indexNumberSection{
  padding-top: 16em !important;
}

.hakkimizdaSection{
  padding-block: 16em !important;
}

.indexCardsSection,
.ADcarArea,
.mesleklerSliderSection,
.indexVIPSection,
.aboutUsInviteSection{
  padding-top: 0 !important;
}

.indexDiscordSection,
.indexVIPSection{
  padding-bottom: 0 !important;
}

.hakkimizdaTop{
  padding-block: 0em !important;
}

.cityEnergySection,
.sssSection{
  padding-bottom: 24em !important;
}

.sssSection{
  padding-top: 18em !important;
}


.centerBtn{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}


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

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

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

header{
  font-family: var(--ff-secondary);
  font-size: var(--fs-ms);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 2em;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

header .header-socials{
  z-index: 150;
}

header ul{ 
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--btn-border-radius-pill);
  overflow: hidden;
}

header nav a{
  transition: var(--transition);
  padding: 1em;
  width: 100%;
  text-align: center;
}

header nav a:not(.current-page){
  opacity: .6;
}

header nav a:hover{
  opacity: 1;
  background-color: #ffffff15;
}

header button{
  font-size: var(--fs-);
}

header :is(ul, button){
  border: 2px solid #ffffff52 !important;
  background-color: #ffffff1b !important;
  backdrop-filter: blur(10px);
  z-index: 150;
}

header .hamburgerBtn{
  display: none;
  place-items: center;
  position: relative;
  aspect-ratio: 1/1;
  padding: .7em .8em;
  gap: 1.5px;
  scale: 1 !important;
}

header .hamburgerBtn::before,
header .hamburgerBtn .bar,
header .hamburgerBtn::after{
  content: '';
  width: 1.5em;
  height: 1.6px;
  border-radius: 100vw;
  background-color: var(--clr-light);
}

header .hamburgerBtn .bar{
  width: 1em;
  justify-self: end;
  transition: var(--transition);
}

header .hamburgerBtn.active .bar{
  width: 1.5em;
}

@media screen and (min-width: 750px){
  header .header-socials{
    flex: 1;
    justify-content: start;
  }

  header nav{
    flex: 1;
    justify-content: center;
    white-space: nowrap;
  }

  header nav a.current-page{
    background-color: #ffffff20;
  }

  header .header-buttons{
    flex: 1;
    justify-content: end;
  }

  header nav ul a:first-child{
    padding-left: 2em;
  }

  header nav ul a:last-child{
    padding-right: 2em;
  }
}

@media screen and (max-width: 750px){
  header{
    padding: 1.5em 2em; 
    font-size: var(--fs-sm);
  }

  header .hamburgerBtn{
    display: grid;
  }

  header nav{
    position: fixed;
    inset: 0;
    background-color: var(--clr-rgba-gray-soft);
    backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
  }

  header nav a{
    text-align: start;
  }

  header nav.active{
    opacity: 1;
    visibility: visible;
  }

  header nav ul{
    flex-direction: column;
    background-color: #0000006f !important;
    border-radius: var(--btn-border-radius-md);
    padding: 0;
    backdrop-filter: blur(10px);
    gap: 0;
    align-items: start;
    scale: .98;
    transition: var(--transition);
  }

  header ul.active{
    scale: 1;
  }

  header nav ul a{
    padding: 1em 1em;
    width: 85vw;
  }

  header nav ul a:first-child{
    padding-top: 1.2em;
  }

  header nav ul a:last-child{
    padding-bottom: 1.2em;
  }

  header button.hyperBtn{
    position: fixed;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0000006f !important;
    padding-block: 1em;
    width: 85vw;
    border-radius: var(--btn-border-radius-md);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    scale: .98;
  }

  header button.hyperBtn.active{
    opacity: 1;
    visibility: visible;
    scale: 1;
  }
}



footer{
  display: grid;
  place-items: center;
  grid-template-columns: repeat(4, 1fr);
}

footer .footerGlow{
  right: -7em;
  bottom: -7em;
  opacity: .4;
  width: 50em;
}


@media screen and (max-width: 870px){
  footer{
    grid-template-columns: repeat(2, 1fr);
  }
}

footer .footerBlock{
  padding: 2em;
}

footer .footerBlock :is(a,.footerInfoBlock){
  font-size: var(--fs-h6);
  line-height: 1.2;
  opacity: .6;
  transition: var(--transition);
}

footer a:hover{
  transform: translateX(5px);
}

footer a.active-page{
  opacity: .9 !important;
}

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

  footer .footerBlock{
    width: 100%;
    padding-inline: 4em;
    justify-content: start;
  }
}



section.indexTopSection{
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

section.indexTopSection::after{
  content: '';
  position: absolute;
  left: -50%;
  bottom: -5em;
  width: 150%;
  height: 10em;
  z-index: 3;
  background-color: var(--clr-dark);
  filter: blur(20px);
}

section.indexTopSection img{
  position: absolute;
  inset: 0;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  filter: brightness(85%);
}

section.indexTopSection .indexTopSectionHero{
  z-index: 5;
  padding-inline: 1.5em;
}

section.indexTopSection .indexTopSectionHero h1{
  font-size: var(--fs-h4);
  line-height: 1.2;
}

@media screen and (max-width: 540px){
  section.indexTopSection .indexTopSectionHero h1{
    --fs-h4: clamp(1.6em, 3.5vw, 2.5em);
    text-align: start;
    margin-bottom: 1em;
  }
}

@media screen and (max-width: 330px){
  .indexTopSectionButtonsArea{
    width: 100%;
    flex-direction: column;
  }
  
  .indexTopSectionButtonsArea button{
    width: 100%;
  }
}



section.indexTitleSection{
  position: relative;
  padding-top: 10em;
}

section.indexTitleSection::before{
  content: '';
  position: absolute;
  left: -50%;
  top: -4em;
  width: 150%;
  height: 5em;
  z-index: 3;
  background-color: var(--clr-dark);
  filter: blur(20px);
}


@media screen and (max-width: 960px){
  section.indexCardsSection .indexCardsArea{
    flex-direction: column;
  }
}

@media screen and (max-width: 550px){
  section.indexTopSection{
    display: none;
  }

  section.indexTitleSection{
    padding-block: 0 !important;
    min-height: 100vh;
  }
}




section.indexDiscordSection .indexDiscordArea{
  position: relative;
  padding: 5em 1em;
  gap: 6em;
  max-width: var(--max-width);
  margin-inline: auto;
}

section.indexDiscordSection .indexDiscordArea img.discordBG{
  position: absolute;
  max-height: 100%;
  inset: 0 3em;
}

@media screen and (max-width: 1045px){
  section.indexDiscordSection .indexDiscordArea img.discordBG{
    display: none;
  }

  section.indexDiscordSection .indexDiscordArea{
    flex-direction: column-reverse;
    overflow: hidden;
  }
}

@media screen and (max-width: 500px){
  section.indexDiscordSection .indexDiscordArea img.discordICON{
    transform: rotate(-25deg) translateX(10em);
  }

  section.indexDiscordSection .indexDiscordArea .discordTXTArea{
    gap: .9em;
    margin-bottom: .6em;
  }
}



section.indexNumberSection .indexNumberArea .indexNumberBlock{
  line-height: 1.1;
}

section.indexNumberSection .indexNumberArea{
  gap: 2em;
}

section.indexNumberSection .indexNumberArea .indexNumberBlock h2{
  --fs-h2: clamp(5em, 7.5vw, 10em);
}

section.indexNumberSection .indexNumberArea .indexNumberBlock h6{
  opacity: .7;
}

section.indexNumberSection .indexNumberArea .line-x{
  width: 3em;
  height: 2px;
  background-color: var(--clr-light);
  opacity: .1;
}

section.indexNumberSection .glowNumbers{
  opacity: .45;
  width: 35em;
  height: 8em;
}

@media screen and (max-width: 650px){
  section.indexNumberSection .indexNumberArea{
    flex-direction: column;
    width: fit-content;
    margin-inline: auto;
    align-items: start;
  }
  
  section.indexNumberSection .indexNumberArea .indexNumberBlock{
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  
  section.indexNumberSection .indexNumberArea .indexNumberBlock h2{
    --fs-h2: clamp(4em, 78.5vw, 7em);
  }

  section.indexNumberSection .indexNumberArea .indexNumberBlock h6{
    padding-inline: 1em;
  }

  section.indexNumberSection .indexNumberArea .line-x{
    display: none;
  }

  section.indexNumberSection .glowNumbers{
    width: 35em;
    height: 25em;
  }
}



section.highlightSection{
  max-width: var(--max-width);
  margin-inline: auto;
  gap: 16em;
}

section.highlightSection .highlightGlow1{
  top: 15em;
  width: 30em;
  height: 30em;
  opacity: .2 !important;
  right: -10em;
}

section.highlightSection .highlightGlow2{
  bottom: 15em;
  width: 30em;
  height: 30em;
  opacity: .2 !important;
  left: -10em;
}

@media screen and (max-width: 630px){
  section.highlightSection .highlightArea{
    flex-direction: column;

  }
  
  section.highlightSection .highlightArea:nth-child(2) img:nth-child(2){
    transform: translateX(-5em);
  }

  section.highlightSection .highlightArea:nth-child(3){
    flex-direction: column-reverse;
  }
  
  section.highlightSection .highlightArea:nth-child(3) img:nth-child(2){
    transform: translateX(-5em);
  }
}



section.cityEnergySection .cityEnergyGrid{
  grid-template-columns: auto auto;
  gap: 0 6em;
}

section.cityEnergySection .cityEnergyGlow{
  right: -5em;
  bottom: 5em;
  width: 40em;
  height: 40em;
  opacity: .13;
  animation: none;
}

@media screen and (max-width: 1190px){
  section.cityEnergySection .cityEnergyGrid img{
    width: 15em;
  }
}

@media screen and (max-width: 1000px){
  section.cityEnergySection .cityEnergyGrid img:nth-child(3){
    display: none;
  }

  section.cityEnergySection .cityEnergyGrid{
    gap: 1em;
  }

  section.cityEnergySection .cityEnergyArea{
    flex-direction: column-reverse;
    gap: 4em;
  }
}



section.mesleklerSliderSection .mesleklerSliderHeader .mesleklerSliderHeaderButtons{
  justify-content: end;
}

@media screen and (max-width: 935px){
  section.mesleklerSliderSection .mesleklerSliderHeader .mesleklerSliderHeaderButtons,
  section.mesleklerSliderSection .mesleklerSliderHeader .null{
    display: none;
  }
  
}

section.mesleklerSliderSection .mesleklerSlider .mesleklerSliderContainer{
  padding: 1em;
}

section.mesleklerSliderSection .mesleklerSlider .mesleklerSliderContainer .mesleklerSliderCard{
  width: 20em !important;
  aspect-ratio: 16/9;
  border-radius: var(--btn-border-radius-md);
  box-shadow: var(--clr-box-shadow) 0 3px 20px 1px;
  filter: brightness(80%);
  user-select: none;
}




section.kayitGuideSection .add-opacity-animation.opacity-animation{
  opacity: .6 !important;
}

section.kayitGuideSection .guideCard{
  cursor: pointer;
  user-select: none;
  transition: var(--transition);
}

section.kayitGuideSection .guideCard:hover{
  opacity: 1 !important;
}

section.kayitGuideSection .glow{
  opacity: .25;
  animation: none;
}

section.kayitGuideSection .kayitGuideGlow1{
  left: -10em;
  top: 5em;
  width: 30em;
  height: 30em;
}

section.kayitGuideSection .kayitGuideGlow2{
  right: -10em;
  bottom: 5em;
  width: 30em;
  height: 30em;
}



section.indexVIPSection h6{
  --fs-h6: clamp(1.4em, 2.5vw, 1.6em);
}




section.sssSection h1{
  --fs-h1: clamp(3em, 5vw, 4em);
}

section.sssSection .sssArea{
  width: 50em;
  max-width: 95vw;
}

section.sssSection .sssArea .sssButton{
  width: 100%;
  justify-content: space-between;
  background-color: transparent;
  border: 0;
  outline: 0;
  scale: 1;
  padding: 1em 0 .3em 0;
  opacity: .8;
}

section.sssSection h5,
section.sssSection .sssArea .sssButton svg{
  --size: clamp(1.4em, 3vw, 2em);
}

section.sssSection h5{
  font-size: var(--size);
}

section.sssSection .sssArea .sssButton svg{
  width: var(--size);
  transition: var(--transition);
}

section.sssSection .sssArea .sssButton svg.active{
  scale: -1;
}

section.sssSection .sssArea span{
  padding-inline: 1em;
  opacity: .5;
  height: 0;
  overflow: hidden;
  transform: scaleY(0);
  overflow: hidden;
  transform: translateY(-20px);
  transition: var(--transition);
}

section.sssSection .sssArea span.active{
  height: auto;
  transform: scaleY(1);
}

section.sssSection .glow{
  width: 30em;
  height: 20em;
  opacity: .2;
  animation: none;
}

section.sssSection .sssSectionGlow1{
  left: -10em;
  top: 10em;
}

section.sssSection .sssSectionGlow2{
  right: -10em;
  bottom: 2em;
}



section.hakkimizdaTop .glow{
  top: -20em;
  left: -15em;
  width: 60em;
  height: 45em;
  opacity: .2;
}






section.hakkimizdaSection .hakkimizdaGlow{
  right: -9em;
  height: 25em;
  opacity: .7;
}

@media screen and (max-width: 1050px){
  section.hakkimizdaSection{
    gap: 2em;
  }
}

@media screen and (min-width: 730px) and (max-width: 920px){
  section.hakkimizdaSection img{
    max-width: 13em;
  }
}

@media screen and (max-width: 730px){
  section.hakkimizdaSection{
    flex-direction: column;
    padding-inline: 3em;
  }
  section.hakkimizdaSection img{
    width: 100%;
  }
}



@media screen and (max-width: 1020px){
  section.aboutUsInviteSection .aboutUsInviteArea{
    flex-direction: column-reverse;
  }
}

@media screen and (max-width: 545px){
  section.aboutUsInviteSection .aboutUsInviteArea{
    gap: 1.7em;
  }

  section.aboutUsInviteSection .aboutUsInviteArea .discordSVG{
    transform: translateX(-7em);
    scale: .8;
  }
}




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

  section.bottomCardsMOBILE{
    display: none;
  }
}

@media screen and (max-width: 1200px){
  section.bottomCardsDESKTOP{
    display: none;
  }

  section.bottomCardsMOBILE{
    display: flex;
  }
}




section.iletisimSection{
  min-height: 100vh;
}

section.iletisimSection .iletisimArea{
  width: 30em;
  max-width: 85vw;
  gap: 2em;
}

section.iletisimSection .iletisimArea :is(form, .inputSecondaryContainer){
  width: 100%;
}

section.iletisimSection .iletisimArea form .messageBox{
  resize: both !important;
  height: 10em;
}

section.iletisimSection .iletisimArea form .inputSecondaryContainer{
  --border-2-input-radius: var(--btn-border-radius-main);
}

section.iletisimSection .iletisimGlow{
  left: -20em;
  top: -10em;
  width: 60em;
  rotate: -45deg;
  height: 30em;
  animation: none;
  opacity: .25;
}



section.magazaSection .glowShop1{
  top: -16em;
  left: -20%;
  width: 140%;
  height: 30em;
  opacity: .15;
  animation: none;
}


section.magazaSection .magazaSearchArea .filterBtn{
  align-self: stretch;
}

section.magazaSection .urunlerArea .filterBtn{
  display: none;
}

section.magazaSection .filterBtn svg{
  opacity: .9;
}


@media screen and (max-width: 450px){
  section.magazaSection .magazaSearchArea{
    padding-inline: 1em;
  }
  
  section.magazaSection .magazaSearchArea .inputBtn{
    width: 100%;
  }
  
  section.magazaSection .magazaSearchArea button.filterBtn{
  display: none;
  }

  section.magazaSection .urunlerArea .filterBtn{
    display: flex;
  }
}

section.magazaSection .magazaKategorilerBubbles {
  display: none;
}

section.magazaSection .magazaKategorilerBubbles button{
  padding: .75em 1.5em;
  --gradient-btn-border-size: 1px;
  font-size: var(--fs-ms);
  aspect-ratio: inherit;
  background: var(--gradient-bg-2);
  font-family: var(--ff-secondary);

  display: none !important;
}

section.magazaSection .magazaKategorilerBubbles button::before,
section.magazaSection .magazaKategorilerBubbles button,
section.magazaSection .magazaKategorilerBubbles button::after{
  border-radius: var(--btn-border-radius-pill);
}

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



section.magazaSection .urunlerArea .urunlerGrid{
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2em;
}

section.magazaSection .urunlerArea .urunlerGrid .urunCard{
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--btn-border-radius-md);
  cursor: pointer;
}

section.magazaSection .urunlerArea .urunlerGrid .urunCard img{
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transition: var(--transition);
  filter: brightness(80%);
}

section.magazaSection .urunlerArea .urunlerGrid .urunCard:hover img{
  filter: brightness(100%);
  scale: 1.02;
}

section.magazaSection .urunlerArea .urunlerGrid .urunCard::after{
  content: '';
  position: absolute;
  width: 250%;
  height: 5em;
  left: -100%;
  bottom: -2.2em;
  background: #000000db;
  filter: blur(20px);
  z-index: 2;
}

section.magazaSection .urunlerArea .urunlerGrid .urunCard .urunIsim{
  position: absolute;
  left: 1em;
  bottom: .5em;
  z-index: 5;
}


section.urunDetaySection .urunDetayTop .urunDetayNav a{
  transition: var(--transition);
}

section.urunDetaySection .urunDetayTop .urunDetayNav a:not(:last-child){
  opacity: .4;
}

section.urunDetaySection .urunDetayTop .urunDetayNav a:first-child:hover{
  opacity: .8;
}

section.urunDetaySection .urunDetayTop .urunDetayNav a:last-child{
  transition: var(--transition);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

section.urunDetaySection .urunDetayArea img{
  border-radius: var(--btn-border-radius-md);
  aspect-ratio: 16/9;
  object-fit: cover;
}

section.urunDetaySection .urunDetayArea{
  line-height: 1.2;
}

section.urunDetaySection .urunDetayArea *{
  --fs-h1: clamp(2em, 5vw, 2.7em);
  --fs-h2: clamp(.9em, 4.5vw, 1.3em);
  --fs-h3: clamp(2.5em, 4vw, 3.4em);
  font-weight: var(--fw-regular);
}

section.urunDetaySection .urunDetayArea h3{
  font-weight: var(--fw-medium);
}

section.urunDetaySection .urunDetayArea h1{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

section.urunDetaySection .urunDetayArea{
  align-items: flex-start;
}

section.urunDetaySection .urunDetayArea .urunDetayContainer{
  align-items: flex-start;
}

section.urunDetaySection .urunDetayArea .urunDetayBlock{
  gap: 1em;
}

section.urunDetaySection .urunDetayArea .urunDetayButtons{
  align-items: stretch;
}

section.urunDetaySection .urunDetayArea .star-area{
  min-width: fit-content;
}

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

  section.urunDetaySection .urunDetayTop{
    padding-inline: .5em !important;
  }

  section.urunDetaySection .urunDetayContainer{
    flex-direction: column;
    width: 100%;
  }

  section.urunDetaySection .urunDetayArea .star-area{
    display: none;
  }

  section.urunDetaySection .urunDetayArea .urunDetayContainer{
    gap: 2em;
  }

  section.urunDetaySection .urunDetayArea .urunDetayBlock{
    padding-inline: 1em;
    width: 100%;
  }

  section.urunDetaySection .urunDetayArea img{
    width: 100%;
  }

  section.urunDetaySection .urunDetayTop button.sepetimbtn p{
    display: none;
  }

  section.urunDetaySection .urunDetayTop button{
    min-width: fit-content;
  }
}