@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&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,
p,
figure,
blockquote,
dl,
dd {
  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: 100svh;
  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{
    cursor: pointer;
}

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

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

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

/*--------- FIREFOX SUPPORT ------------  */
@supports(scrollbar-color: red blue){
    *{
        scrollbar-color: var(--clr-neutral-300) var(--clr-rgba-gray-darker-opacity);
        scrollbar-width: thin;
    }
  }

/*  Neutral: #;
    Light: #;
    Dark: #;
 */
:root{
    --ff: "Roboto", sans-serif;
    --ff-admin: "Chakra Petch", sans-serif;
    
    --fw-bold: 900;
    --fw-semi-bold: 700;
    --fw-normal-bolder: 500;
    --fw-normal: 400;
    --fw-light: 200;

    --fs-main: clamp(.8em, 4vw, 1.2em);
    --fs-h1: clamp(1.7em, 4vw, 2em);
    --fs-h2: clamp(1.4em, 4vw, 1.7em);
    --fs-h3: clamp(1.2em, 4vw, 1.5em);
    --fs-h4: clamp(1.1em, 4vw, 1.4em);
    --fs-h5: clamp(1em, 4vw, 1.3em);
    --fs-h6: clamp(.6em, 4vw, 1em);

    --fs-xl: clamp(1.7em, 4vw, 2em);
    --fs-l: clamp(1.4em, 4vw, 1.7em);
    --fs-m: clamp(1.2em, 4vw, 1.5em);
    --fs-mm: clamp(1em, 4vw, 1.3em);
    --fs-sm: clamp(.8em, 4vw, 1.2em);
    --fs-s: clamp(.6em, 4vw, 1em);
    --fs-ms: clamp(.7em, 4vw, .9em);
    --fs-xs: clamp(.6em, 4vw, .8em);

    --clr-black: hsl(0, 0%, 0%);
    --clr-light: hsl(0, 0%, 100%);
    --clr-dark: hsl(0, 0%, 19%);
    --clr-neutral: hsl(11, 85%, 46%);

    --clr-accent: hsl(209, 96%, 31%);
    
    --clr-dashboard-bg: hsl(0, 0%, 95%);

    --clr-rgba-gray-modal: rgba(0,0,0,0.25); 

    --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: hsl(0, 0%, 34%);
    --clr-gray-softer: hsl(0, 0%, 40%);
    --clr-gray-much-softer: hsl(0, 0%, 90%);

    --dashboard-box-shadow: var(--clr-rgba-gray-softer) 0 2px 100px 1px;
    --dashboard-box-modal-shadow: var(--clr-rgba-gray-soft) 0 2px 70px 10px;

    --clr-hover-gray: hsl(0, 0%, 95%);

    --linear-gradient-soft: linear-gradient(var(--clr-neutral-200), var(--clr-neutral-100));

    --clr-linear-gradient: hsl(11.04,84.81%,56.47%);
    
    --clr-neutral-20: hsl(11, 85%, 66%, 70%);
    --clr-neutral-40: hsl(11, 85%, 66%, 80%);
    --clr-neutral-50: hsl(11, 85%, 66%, 90%);
    --clr-neutral-100: hsl(11, 85%, 66%);
    --clr-neutral-200: hsl(11.04,84.81%,60.47%);
    --clr-neutral-300: hsl(11, 85%, 56%);
    --clr-neutral-400: hsl(11.04,84.81%,46.47%);
    --clr-neutral-500: hsl(11.04,84.81%,36.47%);
    --clr-neutral-600: hsl(11.04,84.81%,34.47%);

    --clr-light-secondary: #f8f8f8;

    --clr-started: hsl(120, 100%, 25%);
    --clr-waiting: hsl(39, 100%, 45%);

    --clr-red: hsl(0, 100%, 50%);
    --clr-red-hover: hsl(0, 100%, 45%);
    --clr-red-opacity: rgb(230, 0, 0, .2);
    
    --clr-text-dark: var(--clr-dark);
    --clr-text-light: var(--clr-light);
    --clr-text-neutral: var(--clr-neutral);

    --modal-bg-color: var(--clr-light);
    --modal-border-color: #888;
    --modal-header-bg-color: #5cb85c;
    --modal-header-text-color: #fff;
    --modal-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    --close-btn-color: #fff;
    --close-btn-hover-color: #000;
    --close-btn-size: 28px;
    --resizer-color: #5cb85c;
    --modal-min-width: 200px;
    --modal-min-height: 200px;

    --border-dashboard: 20px;
}
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,
button[type="submit"],
input[type="button"],
input[type="submit"]{
    padding: .6em 1em;
    cursor: pointer;
    transition: .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
    background-color: var(--clr-neutral-300);
    border-radius: .5em;
    color: var(--clr-light);
}

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

input:not([type="button"], [type="submit"]),
textarea{
  border: 2px solid var(--clr-neutral-300);
  border-radius: .5em;
  display: flex;
  justify-content: center;
  align-items: center;
  resize: none;
  padding: .3em 1em;
}

input:not([type="button"], [type="submit"]):is(:focus,:focus-visible),
textarea:is(:focus,:focus-visible){ 
}

input:not([type="button"], [type="submit"]):is(:focus,:focus-visible)::placeholder,
textarea:is(:focus,:focus-visible)::placeholder{
  transition: .3s;
}

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

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

input[type="file"]{
    color: var(--clr-neutral-100);
    cursor: pointer;
}

input::file-selector-button {
    color: var(--clr-neutral-300);
    background-color: transparent;
    border: 0;
    border-radius: 3px;
}

.custom-input{
    outline: none !important;
    border: none !important;
    box-shadow: var(--clr-rgba-gray-soft) 0 0 0 4px;
}

.custom-input:is(:focus,:focus-visible){
    box-shadow: var(--clr-rgba-gray-soft) 0 0 0 5px;
}

.custom-input-2{
    border: 1.7px solid var(--clr-rgba-gray) !important;
    outline: none !important;
}

.secondary-btn{
  background-color: var(--clr-light);
  border: 2px solid var(--clr-neutral-300);
  color: var(--clr-neutral-300);
}

.secondary-btn:is(:hover,:focus-visible){
  background-color: transparent;
}

.aside-btn{
    background-color: var(--clr-light);
    color: var(--clr-gray);
}

.aside-btn:is(:hover,:focus-visible){
    background-color: var(--clr-rgba-gray);
}

.invinsible-btn{
    background-color: transparent;
    outline: 0;
    border: 0;
}

.invinsible-btn:is(:hover,:focus-visible){
    background-color: transparent;
    outline: 0;
    border: 0;
}

.alertButton{
    background-color: var(--clr-red);
}

.alertButton:is(:hover,:focus-visible){
    background-color: var(--clr-red-hover);
}

.btnborder{
    border: 1px solid var(--clr-rgba-gray);
}

.dropdownBorder{
    border: 1.7px solid var(--clr-rgba-gray);
}

.fit-content{
    width: fit-content;
}

.width-100{
  width: 100%;
}

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

::selection{
    background-color: var(--clr-neutral-300);
}

.st0{fill:var(--clr-dark) !important;}

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

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

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

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

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

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

.cursor{
  cursor: pointer;
}

iframe{
  border-radius: .5em;
}

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

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

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

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

.no-padding{ padding: 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; }


.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--clr-rgba-gray);
  border-radius: .5em;
  width: 300px;
  min-width: var(--modal-min-width);
  min-height: var(--modal-min-height);
  box-shadow: var(--modal-shadow);
  background-color: var(--modal-bg-color);
  overflow: auto;
  user-select: none;
}

.modal .modal-header {
  padding-block: .7em;
  background-color: var(--clr-neutral-300);
  color: var(--clr-text-light);
  cursor: move;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.modal .close-btn {
  color: var(--close-btn-color);
  font-size: var(--close-btn-size);
  font-weight: bold;
  position: absolute;
  right: .5em;
  cursor: pointer;
  padding-inline: .5em;
}

.modal .modal-content {
  padding: 20px;
}
.modal .resizer {
  width: 10px;
  height: 10px;
  background: var(--resizer-color);
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: se-resize;
}

div[data-type="dropdown"]{
    display: grid;
    place-items: center;
    width: fit-content;
    gap: .5em;
    position: relative; 
}

div[data-type="dropdown"] label,
div[data-type="dropdown"] .dropdown-items{
    border: 1.7px solid var(--clr-rgba-gray);
    border-radius: .5em;
}

div[data-type="dropdown"] label,
div[data-type="dropdown"] span{
    cursor: pointer;
    padding: .5em 1em;
    width: 100%;
    user-select: none;
    display: flex;
    justify-content: center;
    transition: .3s;
    align-items: center;
    white-space: nowrap;
}

div[data-type="dropdown"] span:is(:hover, :focus-visible){
    background-color: #eee;
}

div[data-type="dropdown"] span{
    background-color: var(--clr-light);
    min-width:fit-content;
    text-align: start;
    justify-content: start;
}


div[data-type="dropdown"] span[data-droptype="team-statu-dropdown"]{
    min-width: 25ch;
}

div[data-type="dropdown"] label{
    gap: .5em;
    position: relative;
    justify-content: space-between;
    white-space: nowrap;
    color: var(--clr-gray-softer);
}

div[data-type="dropdown"] label svg path{
    stroke: var(--clr-gray-softer);
    opacity: .6;
}

div[data-type="dropdown"] .dropdown-items{
    visibility: hidden;
    display: grid;
    position: absolute;
    top: 3em;
    margin-inline: auto;
    place-items: center;
    min-width: fit-content;
    overflow: hidden;
    gap: 1.7px;
    border-color: transparent;
    scale: 0;
    /*background-color: #eee;*/
    background-color: var(--clr-light);
    opacity: 0;
    transition: .15s;
    z-index: 1000;
    min-width: fit-content;
    width: 100%;
    box-shadow: var(--clr-rgba-gray-darker) 0 2px 100px 10px;
}

div[data-type="dropdown"] .show-menu{
    visibility: visible;
    border-color: #d4d4d4;
    scale: 1;
    opacity: 1;
}

.dropdown-inline .dropdown-items{
    display: grid;
    grid-template-columns: auto auto;
}

.dropdown-inline .dropdown-items span{
    white-space: nowrap;
    opacity: .7;
    justify-content: start;
    border-radius: 5px;
}

div[data-type="dropdown"] label svg{
    scale: 1;
    transition: .3s;
}

.dropdownSvg{
    transition: .3s;
}

/*div[data-type="dropdown"] label*/ .animate-svg{
    scale: -1 !important;
}

.dropdownSvgTeam{
    transition: .3s;
}

/* LOADER 
.loader-bg{
    z-index: 99999;
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background-color: var(--clr-light);
}
.loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--clr-neutral-300);
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: l3 1s infinite linear;
  }
  @keyframes l3 {to{transform: rotate(1turn)}}*/

  .loader-container{
    z-index: 99999;
    position: fixed;
    inset: 0;
    display: grid;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: var(--clr-light);
    display: grid;
    place-items: center;
  }
  .main {
    width: 800px;
    height: 600px;
    position: absolute;
    overflow: hidden;
}
@media (max-width: 800px) {
    .main {
        transform: scale(0.75);
   }
}
@media (max-width: 600px) {
    .main {
        transform: scale(0.5);
   }
}
/**/
.bow {
    position: absolute;
    top: 120px;
    left: 345px;
    width: 120px;
    height: 350px;
    animation: bow 8s infinite;
}
.bow__base {
    position: absolute;
    top: calc(50% - 260px);
    right: 0%;
    width: 1500px;
    height: 520px;
    z-index: 100;
    border-radius: 70% 30% 30% 70% / 50% 50% 50% 50%;
    border-top: 15px solid transparent;
    border-right: 15px solid var(--clr-neutral-300);
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
}
.bow__base::before {
    content: '';
    position: absolute;
    top: calc(50% - 37.5px);
    right: -15px;
    width: 25px;
    height: 75px;
    background-image: linear-gradient(to bottom, #2c6087 30%, #f82b48 30%, #f82b48 70%, var(--clr-neutral-300) 70%);
}
.bow__top, .bow__bottom {
    position: absolute;
    left: 10px;
    height: 25px;
    width: 12px;
    border-radius: 10px;
    background: var(--clr-neutral-300);
    z-index: 100;
}
.bow__bottom {
    bottom: 0px;
}
.rope {
    position: absolute;
    top: 5px;
    left: 12px;
    height: 340px;
}
.rope__top, .rope__bottom {
    position: absolute;
    height: 175px;
    width: 7px;
    border-radius: 10px;
    background: #555468;
    animation: row-top 4s infinite linear, row-h 4s infinite linear;
}
.rope__bottom {
    bottom: 0%;
    animation: row-bottom 4s infinite linear, row-h 4s infinite linear;
}
.arrow {
    position: absolute;
    top: calc(50% - 22.5px);
    left: calc(50% - 75px);
    width: 300px;
    height: 45px;
    animation: arrow 8s infinite linear, arrow-s 8s infinite linear;
}
.arrow__line {
    position: absolute;
    width: 280px;
    height: 5px;
    top: calc(50% - 2.5px);
    left: calc(50% - 140px);
    z-index: 50;
    background: #555468;
    border-radius: 5px;
}
.arrow__head {
    position: absolute;
    top: 8px;
    right: 5px;
    width: 30px;
    height: 30px;
    z-index: 50;
    background-image: linear-gradient(-45deg, #ff6353 0%, #ff6353 50%, transparent 50%);
    transform: rotateZ(-45deg);
}
.arrow__top, .arrow__bottom {
    position: absolute;
    left: 5px;
    width: 50px;
    height: 22px;
    background-image: linear-gradient(to right, #ff6353 0%, #ff6353 70%, #f82b48 70%);
    transform: skewX(30deg);
}
.arrow__bottom {
    bottom: 0;
    background-image: linear-gradient(to right, var(--clr-neutral-300) 0%, var(--clr-neutral-300) 70%, var(--clr-accent) 70%);
    transform: skewX(-30deg);
}
.line {
    position: absolute;
    left: 100%;
    top: 40%;
    width: 50px;
    height: 5px;
    background: #555468;
    animation: line 8s infinite linear;
}
.line-2 {
    top: 60%;
    animation-delay: 0.2s;
}
.wall {
    position: absolute;
    width: 5px;
    height: 200px;
    top: calc(50% - 100px);
    right: -5px;
    z-index: 50;
    background: #555468;
    animation: wall 8s infinite linear;
}
/**/
@keyframes wall {
    0%, 80%, 96% {
        right: -10px;
   }
    82%, 95% {
        right: 0px;
   }
}
@keyframes bow {
    0%, 22%, 100% {
        top: 120px;
        left: 345px;
   }
    30% {
        top: 120px;
        left: -50vw;
   }
    80% {
        top: 150vmax;
        left: 345px;
   }
}
@keyframes arrow {
    0%, 100% {
        left: calc(50% - 75px);
        transform: rotateZ(0deg);
   }
    21% {
        left: calc(50% - 170px);
   }
    24%, 79% {
        left: calc(100% - 350px);
        transform-origin: right;
        transform: rotateZ(0deg);
   }
    80%, 82%, 84% {
        transform-origin: right;
        transform: rotateZ(-5deg);
        left: calc(100% - 305px);
   }
    81%, 83%, 85% {
        transform-origin: right;
        transform: rotateZ(5deg);
        left: calc(100% - 305px);
   }
    86%, 95% {
        transform-origin: right;
        transform: rotateZ(0deg);
        left: calc(100% - 305px);
   }
}
@keyframes arrow-s {
    0%, 40%, 42%, 44%, 46%, 48%, 60%, 62%, 64%, 66%, 68%, 70% {
        top: calc(50% - 22.5px);
   }
    41%, 43%, 45%, 47%, 49%, 61%, 63%, 65%, 67%, 69% {
        top: calc(50% - 18px);
   }
}
@keyframes row-h {
    0%, 12.5%, 44%, 50% {
        height: 175px;
   }
    42.5% {
        height: 198px;
   }
}
@keyframes row-top {
    0%, 50% {
        transform-origin: top;
        transform: rotateZ(0deg);
   }
    40%, 42.5% {
        transform-origin: top;
        transform: rotateZ(30deg);
   }
    47.5% {
        transform-origin: top;
        transform: rotateZ(-15deg);
   }
}
@keyframes row-bottom {
    0%, 50% {
        transform-origin: bottom;
        transform: rotateZ(0deg);
   }
    40%, 42.5% {
        transform-origin: bottom;
        transform: rotateZ(-30deg);
   }
    47.5% {
        transform-origin: bottom;
        transform: rotateZ(15deg);
   }
}
@keyframes line {
    0%, 25%, 30.1%, 35.1%, 40.1%, 45.1%, 50.1%, 55.1%, 60.1%, 65.1%, 70.1%, 75.1% {
        left: 100%;
   }
    30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75% {
        left: -100px;
   }
}

.opacity-1{
    opacity: 1;
}

.opacity-60{
    opacity: .6;
}

.hidden-item{
    opacity: 0 !important;
    visibility: hidden !important;
}

.flex-block{
    display: flex;
    align-items: center;
    flex: 1;
}

.flex-block-r{
    justify-content: flex-end;
}

.flex-block-l{
    justify-content: flex-start;
}

.flex-block-c{
    justify-content: center;
}

.flex-block-s{
    justify-content: space-between;
}

/* Styling */
body{
    font-family: var(--ff);
    font-weight: var(--fw-normal);
    font-size: var(--fs-main);
    color: var(--clr-text-dark);
    background-color: var(--clr-light);
    max-width: 4000px;
    margin-inline: auto;
    
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: hidden;
}

body.scrollable-body{
    max-height: auto;
    overflow-y: auto;
}

body.non-scrollable-body{
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: hidden;
}

/* Header Styling */
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    min-height: 5em;
    padding-inline: 4vw;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    color: var(--clr-dark);
}

header img,
footer img{
  cursor: pointer;
}

header nav ul{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    gap: 1.5em;
}

header nav ul li{
  transition: .15s;
  position: relative;
}

header .user-sign-status{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5em;
}

header .user-sign-status button{
    background-color: transparent;
    outline: 0;
    padding: .3em .7em;
    max-width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--clr-text-dark);
    font-weight: var(--fw-semi-bold);
}

header .user-sign-status button:first-child{
  border: 0;
  padding: 0;
}

header .header-right-side{
    display: flex;
    gap: 1.2em;
    justify-content: center;
    align-items: center;
}

header .header-right-side .search-input-block{
    box-shadow: var(--clr-gray-much-softer) 0 0 0 4px;
    background-color: var(--clr-light);
    border-radius: 1em;
    overflow: hidden;
    width: 15em;
    height: fit-content;
    z-index: 1000;
    position: absolute;
    right: 1em;
    top: 5em;
    opacity: 0;
    transform: translateY(-1em);
    filter: blur(5px);
    visibility: hidden;
    transition: .3s;
}

header .header-right-side .search-input-block.showSearchArea{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    visibility: visible;
}

header .header-right-side .search-input-block input{
    box-shadow: none;
    width: 100%;
    border-radius: 0;
    padding-block: .3em;
}

header .header-right-side .search-input-block button{
    padding-block: .5em;
    height: 100%;
    background-color: var(--clr-rgba-gray-soft);
}

header .header-right-side .search-input-block button{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

header .header-right-side .search-input-block button path{
    opacity: .5;
}

header .user-sign-status .signUpBtn:is(:hover, :focus-visible){
    background-color: var(--clr-rgba-gray-softer);
}

header .header-right-side span #user-icon{
    width: 2.5em;
    height: 2.5em;
    display: grid;
    place-items: center;
    border-radius: 100vw;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--clr-rgba-gray) 0 0 5px 1px;
}

header .user-sign-status span img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

header nav ul li:hover{
  color: var(--clr-neutral);
}

header .header-profile-dropdown{
    box-shadow: var(--clr-rgba-gray-soft) 0 0 2px .5px;
    background-color: var(--clr-light);
    z-index: 99999;
    border-radius: .5em;
    position: absolute;
    right: 1em;
    top: 5em;
    display: grid;
    place-items: center;
    padding: .7em;
    gap: .7em;
}

header .header-profile-dropdown span{
    display: grid;
    justify-content: start;
    align-items: center;
    padding-inline: .5em;
    width: 100%;
}

header .header-profile-dropdown span p:first-child{
    font-weight: var(--fw-semi-bold);
}

header .header-profile-dropdown span p:last-child{
    opacity: .5;
    font-size: var(--fs-xs);
}

header .header-profile-dropdown .header-profile-dropdown-body{
    width: 100%;
    border-block: 1px solid var(--clr-rgba-gray-soft);
    display: grid;
    gap: .3em;
    padding-block: .3em;
}

header .header-profile-dropdown .header-profile-dropdown-body .lisans-container{
    border-bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .header-profile-dropdown .header-profile-dropdown-body .lisans-container button{
    background-color: transparent;
    border: 0;
    color: var(--clr-neutral-300);
    font-size: var(--fs-s);
    padding: 0;
    max-width: fit-content;
}

header .header-profile-dropdown .header-profile-dropdown-body .lisans-container article{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .3em;
    opacity: .7;
}

header .header-profile-dropdown .lisans-container .lisans-durumu-info{
    display: flex;
    justify-content: space-between;
    gap: .5em;
    width: 100%;
    align-items: center;
    padding: .5em .9em;
}

header .header-profile-dropdown .lisans-container .lisans-durumu-info p{
    font-weight: var(--fw-normal-bolder);
}

header .header-profile-dropdown button{
    width: 100%;
    justify-content: start;
    align-items: center;
}


@media screen and (min-width: 65.5em){
header nav ul li svg,
header .hamburger,
header nav li.nav-li-search,
header nav span.nav-hesap{
    display: none;
}
}

@media screen and (max-width: 1048px){
  header img.header-comp-logo{
    display: none;
  }
}

header.show-header nav{
    display: grid;
    align-items: start;
    justify-content: center;
    position: fixed;
    top: 5em;
    background-color: var(--clr-light);
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 99998;
    transition: .3s;
    opacity: 0;
    transform: translateX(-100%);
}

header.show-header.show-header-open nav{
    opacity: 1;
    transform: translateX(0);
}

header.show-header nav ul{
    display: grid;
    width: 90vw;
    gap: .5em;
    max-height: fit-content;
}

header.show-header nav li{
    transition: .3s;
}

header.show-header nav  li.nav-li-search{
    max-height: 0px;
    overflow: hidden;
    transition:  .3s;
    margin-bottom: .5em;
    background-color: var(--clr-rgba-gray);
    cursor: default;
    padding: 0;
}

header.show-header nav  li.nav-li-search.showResponsiveSearch{
    max-height: 50px;
    padding: 0 .2em;
    border-radius: .7em;
}

header.show-header nav  li.nav-li-search input{
    width: 86%;
    box-shadow: none;
}

header.show-header nav  li{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: .5em;
    width: 90vw;
    background-color: var(--clr-rgba-gray-softer);
    padding: .6em 1em;
    border-radius: .5em;
    cursor: pointer;
}

header.show-header nav  li:is(:hover,:focus-visible){
    background-color: var(--clr-rgba-gray);
    color: var(--clr-dark);
}

header.show-header nav  span.nav-hesap{
    gap: .5em;
}

header.show-header nav  span.nav-hesap-no-user{
    font-weight: var(--fw-normal-bolder);
}

header.show-header nav  span.nav-hesap li{
    justify-content: center;
    border: 1px solid var(--clr-rgba-gray);
}

header.show-header nav  span.nav-hesap li:is(:nth-child(1), :nth-child(2)){
    font-weight: var(--fw-normal-bolder);
}

header nav li.show-currentPage{
    background-color: var(--clr-rgba-gray-soft);
    padding: .6em 1em;
    border-radius: .5em;
    color: var(--clr-dark) !important;
    transition: .3s;
    font-weight: var(--fw-normal-bolder);
}

header nav li.show-currentPage:hover{
    background-color: var(--clr-rgba-gray-darker);
}

header.show-header nav li.show-currentPage{
    background-color: var(--clr-rgba-gray-darker);
}

header.show-header .header-right-side .search-input-block.showSearchArea{
    display: none;
}

@media screen and (max-width:600px){
    header{
        padding-right: 2em;
    }
}

/* Footer Styling */
/*footer *{
    outline: 1px solid red;
}*/
footer{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3em;
    padding-block: 1em;
    background-color: var(--clr-light);
}

footer section:first-child{
    display: grid;
    grid-template-columns: repeat(5, auto);
}

/*footer section#footer-blocks.set-up-footer{
    grid-template-columns: repeat(4, auto) !important;
}*/

@media screen and (max-width: 950px){
    footer section:first-child{
        display: grid;
        grid-template-columns: repeat(2, auto);
        place-items: center;
        gap: 1em;
    }

    footer section:first-child article:first-child{
        grid-column: span 2;
    }
}

footer section article{
    display: grid;
    place-items: start;
    align-items: start;
    height: fit-content;
}

footer section article:first-child{
    place-items: center;
    align-items: start;
    padding-block: .4em;
    gap: .7em;
}

footer section article:first-child .saatlerimiz{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: .4em;
    font-size: var(--fs-xs);
    opacity: .5;
}

footer section article .social-container{
    display: flex;
    gap: .7em;
    margin-top: .5em;
}

footer section article .social-container svg{
    cursor: pointer;
    transition: .3s;
}

footer section article .social-container svg:is(:hover,:focus-visible){
  transform: translateY(-.3em);
}

footer section article h3{
    font-size: var(--fs-sm);
    opacity: .8;
}

footer section article ul{
    height: 100%;
    align-items: start;
}

footer section article ul li a{
    color: var(--clr-dark);
    opacity: .7;
    text-decoration: none;
    transition: .3s;
}

footer section:last-child{
    display: flex;
    justify-content: center;
    align-items: center;
}

footer section:last-child article{
    display: flex;
    justify-content: center;
    gap: .7em;
    
}

footer section:last-child article.copyright-container p:first-child{
    opacity: .7;
}

footer section:last-child article.copyright-container p a{
    text-decoration: none;
    cursor: pointer;
}

footer section article ul li a:is(:hover, :focus-visible){
  opacity: .6;
}

@media screen and (max-width: 890px){
    footer section:last-child article{
        flex-direction: column;
    }

    footer section:last-child article.copyright-container p:nth-child(2){
        display: none;
    }

    footer section:last-child article.copyright-container p:last-child{
        margin-inline: auto;
    }
}

@media screen and (max-width: 586px){
    footer section:last-child article.copyright-container p:first-child{
        font-size: var(--fs-main);
        padding-inline: 1em;
        text-align: center;
    }
}

.lisans-alert{
    position: fixed;
    bottom: 1em;
    right: 1em;
    display: grid;
    justify-content: start;
    align-items: center;
    background-color: #fff;
    cursor: pointer;
    box-shadow: var(--clr-rgba-gray-soft) 0 0 5px 1px;
    border-radius: .5em;
    padding: .7em 1em;
    z-index: 10000;
    animation: lisansAnimation 1s infinite;
    user-select: none;
}

.lisans-alert .close-btn{
    position: absolute;
    right: -.5em;
    top: -1em;
    background-color: #fff;
    z-index: 10001;
    color: var(--clr-dark);
    display: grid;
    height: 2em;
    place-items: center;
    padding: .5em;
    box-shadow: var(--clr-rgba-gray-soft) 0 0 5px 1px;
}

.lisans-alert .lisans-alert-area{
    display: flex;
    gap: .5em;
}

.lisans-alert .lisans-alert-area:first-child p{
    font-weight: var(--fw-normal-bolder);
}

.lisans-alert .lisans-alert-area:first-child h6{
    color: var(--clr-red);
}

.lisans-alert .lisans-alert-area.navToL{
    opacity: .7;
}

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

    50%{
        scale: 1.02;
    }

    100%{
        scale: 1;
    }
}

@media screen and (max-width: 40em){
  *{
    user-select: none;
  }
}

main[class="index-main"] section{
  padding: 3em 1em;
}

section.padding-section{
    padding: 3em 1em;
}

main[class="padding-main"]{
  padding-block: 5em;
}

main section.index-custom-section{
    background-color: var(--clr-neutral-50);
}

.hidden{
  opacity:0;
  filter:blur(.5em);
  transform:translateY(-2em);
  transition:.6s
}
.show{
  opacity:1;
  filter:blur(0);
  transform:translateY(0)
}


/* Login Form */
.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .8em;
  padding: 1.6em 1.6em .3em 1.6em;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  background-color: var(--clr-light);
  box-shadow: var(--clr-rgba-gray) 0 0 5px 1px;
}

.form .loginTypeChange{
    display: flex;
    width: 100%;
    padding-inline: 1em;
}

.form .loginTypeChange button{
    flex: 1;
}

.form .loginTypeChange button:first-child{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form .loginTypeChange button:last-child{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    opacity: .7;
}

.form .loginTypeChangeText{
    opacity: .45;
    font-size: var(--fs-s);
    margin-block: -.4em -.7em;
}

.radio-input input {
    display: none;
}

.radio-input {
    --container_width: 300px;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: .5em;
    background-color: var(--clr-light);
    color: #000000;
    width: var(--container_width);
    overflow: hidden;
    border: 1px solid rgba(53, 52, 52, 0.226);
}

.radio-input label {
    width: 100%;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    user-select: none;
    letter-spacing: -1px;
}

.selection {
    display: none;
    position: absolute;
    height: 100%;
    width: calc(var(--container_width) / 2);
    z-index: 0;
    left: 0;
    top: 0;
    transition: .15s ease;
}

.radio-input label:has(input:checked) {
    color: var(--clr-light);
}

.radio-input label:has(input:checked) ~ .selection {
    background-color: var(--clr-neutral-300);
    display: inline-block;
}

.radio-input label:nth-child(1):has(input:checked) ~ .selection {
    transform: translateX(calc(var(--container_width) * 0/2));
}

.radio-input label:nth-child(2):has(input:checked) ~ .selection {
    transform: translateX(calc(var(--container_width) * 1/2));
}

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


.flex-column > label {
  color: var(--clr-text-dark);
  font-weight: var(--fw-semi-bold);
}

.inputForm {
  display: flex;
  align-items: center;
  gap: .5em;
  transition: 0.3s;
  margin-bottom: .5em;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 100%;
  justify-content: space-between;
}

.flex-row > div > label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
}

.span {
  font-size: var(--fs-xs);
  color: var(--clr-neutral-300);
  cursor: pointer;
  font-weight: var(--fw-semi-bold);
}

.p {
  text-align: center;
  color: var(--clr-text-dark);
}

.remember-container{
  font-weight: var(--fw-semi-bold);
  gap: .5em;;
}

.input-error {
  border-color: red;
  color:red;
}

.error-message {
  color: red;
  font-size: 0.875em;
}

.background-logo-image{
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 50em;
  z-index: -100;
  user-select: none;
  opacity: .25;
}

.googleContText{
  margin-top: .5em;
  opacity: .85;
  font-size: var(--fs-xs);
}

.googleSignInBtn{
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: var(--clr-rgba-gray) 0 1px 1px 1px;
}

@media screen and (max-width: 31em){
  .form{
    min-width: 90vw;
    box-shadow: none;
    padding: 0;
  }

  .googleSignInBtn{
    border-radius: .5em;
    box-shadow: none;
  }

  .background-logo-image{
    position: relative;
    opacity: 1;
    max-width: 10em;
    min-width: 10em;
    transform: translate(0,0);
    left: 0;
    top: 0;
    margin-inline: auto;
    margin-bottom: 2em;
  }
}

/* Profil Sayfası */
.profil-main{
    display: flex;
    min-width: 100%;
}

.profil-main aside img{
    transform: translateX(.7em);
    cursor: pointer;
}

.profil-main aside{
    width: 267px;
    min-width: 267px;
    display: grid;
    min-height: 100vh;
    max-height: 100vh;
    place-items: center;
    align-items: space-between;
    padding: 2em 1em;
    border-right: 1px solid var(--clr-rgba-gray);
    position: fixed;
    z-index: 1000;
    background-color: var(--clr-light);
}

.profil-main aside nav{
    display: grid;
    place-items: center;
    min-width: 100%;
    gap: .5em;
}

.profil-main aside button{
    min-width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    place-items: center;
    justify-content: start;
    z-index: 1002;
}

.profil-main aside{
    justify-content: center;
}

.profil-main aside .aside-up-buttons{
    display: grid;
    grid-template-columns: auto auto;
    width: 100%;
    place-items: center;
    justify-content: space-between;
    position: absolute;
    left: 0;
    top: 0;
    padding: 1em;
}

.profil-main aside .aside-up-buttons button{
    max-width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profil-main aside nav button.current-page{
    background-color: var(--clr-rgba-gray-darker);
    color: #000
}

.profil-main aside .logoutBtn{
    justify-content: center;
}

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

@media screen and (max-width: 1083px){
    .profil-main aside:not([data-aside="admin-aside"]){
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        border-top: 1px solid var(--clr-rgba-gray);
        border-left: 0;
        width: 100%;
        min-height: fit-content;
        max-height: fit-content;
        padding: 0;
        overflow-x: hidden;
        background-color: var(--clr-light);
    }

    .profil-main aside:not([data-aside="admin-aside"]) nav{
        display: flex;
        justify-content: center;
        min-width: fit-content;
    }

    .profil-main aside:not([data-aside="admin-aside"]) button p{
        font-size: var(--fs-xs);
    }
    
    .profil-main aside:not([data-aside="admin-aside"]) button{
        min-width: fit-content;
        grid-template-columns: auto;
        justify-content: center;
    }

    .profil-main aside:not([data-aside="admin-aside"]) .logoutBtn{
        border: 0;
    }

    .profil-main aside:not([data-aside="admin-aside"]) .aside-up-buttons{
        display: none;
    }

    .profil-main aside:not([data-aside="admin-aside"]) button svg{
        width: 2em;
        height: 2em;
    }

    .board-svg-icon{
        fill: var(--clr-dark) !important;
    }

    .profil-main aside:not([data-aside="admin-aside"]) img{
        display: none;
    }

}

.profil-info-section .profil-section-container{
    padding-inline: 1em;
    box-shadow: var(--clr-rgba-gray-softer) 0 0 5px 1px;
    border-radius: .5em;
}

.profil-info-section .profil-section-container .profil-user-info-container{
    padding: 2em 1em;
    display: flex;
    justify-content: space-between;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block{
    display: flex;
    justify-content: start;
    gap: .5em;
    align-items: center;
    max-width: 161px !important;
    overflow: hidden !important;
    padding-block: .5em;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-second-area{
    display: grid;
    place-items: center;
    gap: 1em;
}


.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block.antrenor-info-block p.antrenor-basvuru-kontrol{
    position: absolute;
    right: 1em;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block.antrenor-info-block p.antrenor-durumu-title{
    min-width: fit-content;
}

@media screen and (max-width: 1212px) and (min-width: 1083px){
    .profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block.antrenor-info-block p.antrenor-basvuru-kontrol{
        position: relative;
        right: inherit;
    }

    .profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block.antrenor-info-block{
        display: grid;
        grid-template-columns: auto auto;
    }
}

@media screen and (max-width: 880px) and (min-width: 753px){
    .profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block.antrenor-info-block p.antrenor-basvuru-kontrol{
        position: relative;
        right: inherit;
    }

    .profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block.antrenor-info-block{
        display: grid;
        grid-template-columns: auto auto;
    }
}

@media screen and (max-width: 561px){
    .profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block.antrenor-info-block p.antrenor-basvuru-kontrol{
        position: relative;
        right: inherit;
    }

    .profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block.antrenor-info-block{
        display: grid;
        grid-template-columns: auto auto;
    }}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area{
    min-width: 60%;
    display: grid;
    place-items: start;
    align-items: center;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block{
    min-width: 100%;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block{
    padding-inline: 1em;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area :is(.user-info-block:nth-child(1), .user-info-block:nth-child(3),.p-s-first-area .user-info-block:nth-child(5)){
    background-color: var(--clr-rgba-gray-softer);
    border-radius: .5em;
}

/* Profil İnfo */
.profil-user-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block:nth-child(1){
    gap: 1.97em;
}

.profil-user-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block:nth-child(3){
    gap: 1.4em;
}

.profil-user-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block:nth-child(4){
    gap: 1.88em;
}

/* Takım İnfo */
.profil-takim-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block:nth-child(1){
  gap: 3.05em;
}

.profil-takim-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block:nth-child(2){
  gap: .8em;
}

.profil-takim-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block:nth-child(3){
  gap: 1.6em;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block p:first-child{
    font-weight: var(--fw-semi-bold);
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block{
    position: relative;
    cursor: pointer;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block .editable{
    width: 100%;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .user-info-block svg{
    position: absolute;
    display: none;
    z-index: -1;
    right: 1em;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area button:not([id="save-btn"]){
    border: 0;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area .buttons-area{
    width: 100%;
    justify-content: start;
    margin-top: .5em;
    position: relative;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-first-area button#save-btn{
    position: absolute;
    top: 0;
    right: 0;
}

.profil-info-section .profil-section-container .profil-user-info-container .p-s-second-area .profil-resmi{
    width: 10em;
    height: 10em;
    border-radius: 100vw;
    background-color: #eee;
    box-shadow: var(--clr-rgba-gray) 0 0 5px 1px;
    object-fit: cover;
}

@media screen and (min-width: 67.75em){
    .profil-info-section .profil-section-container{
        padding-right: 4em;
    }
}

@media screen and (max-width: 50em){
    .profil-info-section .profil-section-container{
        padding-inline: 0;
        box-shadow: none;
        border-radius: .5em;
    }
}

@media screen and (max-width: 47em){
    .profil-info-section .profil-section-container .profil-user-info-container{
        padding: 2em 1em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 90vw;
        gap: 2em;
    }

    .profil-info-section .profil-section-container{
        display: grid;
        place-items: center;
    }
}


/* Contact Page Styling */
.contact-section{
  display: flex;
  max-width: 80vw;
  margin-inline: auto;
  border-radius: 1em;
  overflow: hidden;
  box-shadow: var(--clr-rgba-gray) 0 0 5px 1px;
}

.contact-section article:first-child{
  background: var(--linear-gradient-soft);
  color: var(--clr-text-light);
  padding: 1em 1.3em;
  display: flex;
  border-radius: 1em;
}

.contact-section article:first-child .container-contact-texts{
  display: grid;
  place-items: start;
}

.contact-section article:first-child .container-contact-texts .container-contact-text-area{
  max-width: 35ch;
  position: relative;
  padding-bottom: 1em;
}

.contact-section article:first-child .container-contact-texts .container-contact-text-area::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40%;
  min-height: 3px;
  border-radius: 100vw;
  background-color: var(--clr-light);
  opacity: .5;
}

.contact-section article:first-child .container-contact-text-infos{
  display: grid;
  gap: .5em;
  place-items: start;
}

.contact-section article:first-child .container-contact-text-infos span{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1em;
}

.contact-section article:first-child .container-contact-text-infos span a{
  color: var(--clr-text-light);
  text-decoration: none;
  font-weight: var(--fw-semi-bold);
}

.contact-section article:first-child .container-contact-text-infos span svg,
.contact-section article:first-child .container-contact-text-infos span svg path{
  fill: var(--clr-light) !important;
}

.contact-section article:first-child .container-contact-text-infos span:nth-child(2){
  transform: translateX(-.3em);
  gap: .8em;
}

.contact-section article:last-child{
  display: grid;
  width: 43%;
  place-items: center;
  padding-block: 2em;
}

.contact-section article:last-child form h2{
  opacity: .9;
}

.contact-section article:last-child form{
  display: grid;
  place-items: center;
  gap: .5em;
  min-width: 65%;
}

.contact-section article:last-child form .input-block{
  display: flex;
  flex-direction: column;
  place-items: start;
  min-width: 100%;
}

.contact-section article:last-child form .input-block input,
.contact-section article:last-child form .input-block textarea{
  flex: 1;
  max-width: 14.5em;
  min-width: 100%;
}

.contact-section article:last-child form .input-block label{
  opacity: .8;
}

.contact-section article:last-child form button{
  margin-top: .5em;
}

@media screen and (max-width:78.5em){
  .contact-section{
    flex-direction: column;
    box-shadow: var(--clr-rgba-gray-softer) 0 0 5px 1px;
    border-radius: none;
  }

  .contact-section article:last-child{
    width: 100%;
    padding-block: 3em;
  }

  .contact-section article:first-child{
    border-radius: 1em;
    justify-content: space-between;
    gap: 1em;
  }

  .contact-section article:first-child .container-contact-texts .container-contact-text-area{
    max-width: 100%;
  }
}

@media screen and (max-width:50em){
  .contact-section{
    max-width: 95vw;
    flex-direction: column-reverse;
  }

  .contact-section article:last-child form{
    min-width: 80%;
  }

  .contact-section article:first-child{
    flex-direction: column;
  }

  .contact-section article:first-child .container-contact-texts img{
    display: none;
  }

  .contact-section article:first-child .container-contact-texts{
    gap: 1em;
  }

  .contact-section article:first-child iframe{
    width: 100%;
    height: 20em;
  }
}

/* Profil/Takım */
button#showUyeler{
    font-weight: var(--fw-normal-bolder);
}

.profil-takim-section .secondary-btn:nth-child(2){
    font-weight: var(--fw-semi-bold);
}

.uyeler-liste{
  margin-top: 3.5em;
  display: grid;
  gap: 2em;
}

.uyeler-liste .team-header{
    display: flex;
    justify-content: space-between;
    gap: .5em;
    align-items: center;
    min-width: 100%;
}

.uyeler-liste .team-header h3{
  display: flex;
  justify-content: start;
  gap: .5em;
  align-items: center;

}

h3.no-underline::after{
  display: none;
}

.uyeler-liste .team-footer{
    display: flex;
    justify-content: end;
    align-items: center;
}

.uyeler-liste .uyeler-alan{
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    margin-block: 2em;
}

.uyeler-liste .uye-card .uye-sayisi{
    position: absolute;
    top: -.5em;
    left: -.5em;
    border-radius: .7vh;
    box-shadow: var(--clr-rgba-gray) 0 0 5px 1px;
    z-index: 1;
    width: 1.5em;
    height: 1.5em;
    display: grid;
    place-items: center;
    background-color: var(--clr-light);
    font-weight: var(--fw-semi-bold);
}

.uyeler-liste .uye-card{
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--clr-rgba-gray) 0 0 5px 1px;
    position: relative;
    padding: 1em;
    border-radius: 1vh;
    min-width: 25em;
    flex: 1;
}

@media screen and (max-width: 33em){
    .uyeler-liste .uye-card{
        min-width: 100%;
    }
}

.uyeler-liste .uye-card .uye-card-area{
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    position: relative;
    gap: 1em;
}

.uyeler-liste .uye-card .uye-card-area .uye-foto{
    background-color: #eee;
    box-shadow: var(--clr-rgba-gray-soft) 0 0 5px 1px;
    border-radius: 100vw;
    width: 3em;
    height: 3em;
}

.uyeler-liste .uye-card .uye-card-area .uye-area-info{
    display: grid;
    place-items: start;
    gap: .35em;
}

.uyeler-liste .uye-card .uye-card-area .uye-area-info p:first-child{
    font-weight: var(--fw-semi-bold);
}

.uyeler-liste .uye-card .uye-card-area .uye-area-info p:last-child{
    background-color: var(--clr-rgba-gray-darker);
    border-radius: .2em;
    padding: .2em .5em;
}

.uyeler-liste .uye-card .uye-card-area .uye-area-info p:last-child span{
    font-weight: var(--fw-normal-bolder);
}

.uyeler-liste .uye-card .uye-card-area .uye-yonet{
    display: grid;
    border: 0;
    background-color: transparent;
    width: fit-content;
    position: absolute;
    right: 1em;
    transition: .3s;
}

.uyeler-liste .uye-card .uye-card-area .uye-yonet:hover path{
    stroke: var(--clr-red-hover);
}

.team-modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--clr-light);
    box-shadow: var(--clr-rgba-gray-modal) 0 0 100000px 100000px;
    z-index: 100000;
    display: grid;
    place-items: center;
    border-radius: 1em;
    padding: 1em 1.5em 2em 1.5em;
    gap: 1em;
}

@media screen and (max-width: 54em){
    .team-modal{
        min-width: 90vw;
    }
}

.team-modal .team-modal-header{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2em;
    width: 100%;
}

.team-modal .team-modal-header button{
    font-style: var(--fs-l);
    font-weight: var(--fw-normal-bolder);
}

.team-modal .team-modal-body{
    width: 100%;
    display: grid;
    gap: .5em;
}

.team-modal .team-modal-footer{
    display: flex;
    justify-content: space-between;
    align-items: end;
    width: 100%;
    gap: .5em;
}

.team-modal .team-modal-footer .team-modal-dropdown-area{
    display: grid;
    place-items: start;
    gap: .2em;
}

.team-modal .team-modal-footer .team-modal-dropdown-area p.modal-statu-text{
    font-style: var(--fs-xs);
    opacity: .7;
}

.team-modal .team-modal-body .input-block input{
    width: 100%;
}

.team-modal .team-modal-body .input-block label{
    font-weight: var(--fw-normal-bolder);
    opacity: .85;
}

/* Admin Panel */
aside.admin-aside{
    overflow: hidden;
    padding: 2.5em 1em 2em 1em;
    scrollbar-color: var(--clr-neutral-300) var(--clr-light);
    scrollbar-width: thin;
}

aside.admin-aside .aside-admin-logo,
.admin-header .aside-admin-logo{
    display: grid;
    justify-self: start;
    font-family: var(--ff-admin);
    line-height: 1.2;
    letter-spacing: .15em;
    opacity: .8;
    font-style:italic;
    user-select: none;
    cursor: pointer;
}

.admin-header .aside-admin-logo{
    grid-template-columns: auto auto;
    align-items: end;
    gap: .5em;
}

.admin-header .aside-admin-logo h1{
    transform: translateY(.1em);
}


aside.admin-aside .admin-aside-img{
    position: absolute;
    top: 10em;
    scale: 2;
    user-select: none;
    right: .5em;
    opacity: .5;
    transition: .3s;
}

aside.admin-aside .admin-aside-img.non-visible-img{
    opacity: 0;
}

aside.admin-aside button.yarismalarParentButton{
    grid-template-columns: auto auto auto;
}

aside.admin-aside button.yarismalarParentButton svg:last-child{
    opacity: .7;
}

aside.admin-aside .yarismalar-dropdown{
    border-radius: .6em;
    max-height: 0px;
    width: 100%;
    overflow: hidden;
    transition: .3s;
    padding-left: 1em;
    display: grid;
    gap: .3em;
}

.show-yarismalar-dropdown{
    max-height: 250px !important;
}

aside.admin-aside .yarismalar-dropdown button.yarismalar-dropdown-start-button svg{
    transform: translateX(-.2em);
}

aside.admin-aside .yarismalar-dropdown button:last-child{
    margin-top: 0;
    margin-bottom: .6em;
}

aside.admin-aside nav button:last-child{
    margin-top: -.6em;
}

/* Admin Header */
.admin-header{
    width: 100%;
    justify-content: space-around;
    align-items: center;
    display: none;
    padding-block: 1em;
    z-index: 100000;
}

.hamburger{
    display: block;
    border: 0;
    outline: 0;
    background-color: transparent;
    width: fit-content;
    height: fit-content;
}

.hamburger:is(:hover, :focus-visible){
    background-color: transparent;
}

.hamburger::before,
.hamburger .bar,
.hamburger::after{
    content: '';
    background-color: #000;
    opacity: .8;
    display: block;
    min-width: 1.5em;
    min-height: 2px;
    margin: 6px 0;
    transition: .3s;
}

.hamburger.hamburger-active::before{
        transform: rotate(45deg) translateY(10.6px) translateX(7.8px);
}

.hamburger.hamburger-active .bar{
    opacity: 0;
}

.hamburger.hamburger-active::after{
    transform: rotate(-45deg) translateY(-2.92px) translateX(1px);  
}

@media screen and (max-width: 67.75em){
    .admin-panel{
        display: grid;
        min-height: fit-content;
        z-index: 9999;
    }
    .admin-header{
        display: flex;
    }

    aside.admin-aside{
        transform: translateX(200%);
        transition: .3s;
        width: 100%;
        inset: 0;
        background-color: var(--clr-light);
    }

    aside.admin-aside button{
        background-color: var(--clr-rgba-gray-softer);
    }

    aside.admin-aside nav{
        min-width: 90vw;
    }

    aside.admin-aside .admin-aside-img,
    aside.admin-aside .aside-admin-logo{
        display: none;
    }

    aside.admin-aside .aside-up-buttons{
        display: none;
    }
    
    aside.admin-aside.show-aside{
        transform: translateX(0);
    }

    aside.admin-aside .admin-nav-buttons-area{
        width: 100%;
        gap: .3em;
    }

    aside.admin-aside .admin-nav-buttons-area button:first-child{
        justify-content: center;
        font-weight: var(--fw-normal-bolder);
    }

    aside.admin-aside .admin-nav-buttons-area button:last-child:not(:hover,:focus-visible){
        background-color: var(--clr-rgba-gray-much-softer);
        border-color: var(--clr-rgba-gray-soft);
    }
}

aside.admin-aside .admin-nav-buttons-area{
    gap: .5em;
}

aside.admin-aside .admin-nav-buttons-area button:last-child{
    opacity: .85;
}

/* Users Page */
section.users-table-section{
    display: grid;
    place-items: start;
    gap: 2.5em;
}

section.users-table-section .table-wapper{
    width: 100%;
    display: grid;
    gap: 2em;
}

section.users-table-section .table-wapper .input-block{
    width: 100%;
    display: grid;
    gap: .5em;
}

section.users-table-section .table-wapper .input-block label{
    font-weight: var(--fw-normal-bolder);
    display: flex;
    justify-content: start;
    flex-direction: row-reverse;
    gap: .5em;
    align-items: center;
}

table{
    width: 100%;
    padding: 1rem;
    border-collapse: collapse;
    border-radius: .5em;
    overflow: hidden;
    margin-inline: auto;
    box-shadow: var(--clr-rgba-gray-softer) 0 0 5px 1px;
}

th,
td{
    padding: 1rem;
}

th{
    text-align: left;
    background: var(--clr-rgba-gray-soft);
    font-weight: var(--fw-normal-bolder);
}

tr:nth-of-type(2n){
    background-color: var(--clr-rgba-gray-softer);
}

tr.bannedUser{
    background-color: var(--clr-red-opacity);
}

tr.bannedUser button.alertButton{
    font-weight: var(--fw-normal-bolder);
}

td:is([data-cell="profil resmi"], [data-cell="takım resmi"]){
    display: grid;
    place-items: start;
    align-items: center;
}

td:is([data-cell="profil resmi"], [data-cell="takım resmi"]) span{
    width: 2em;
    height: 2em;
    background-color: #eee;
    border-radius: 100vw;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: var(--clr-rgba-gray-soft) 0 0 5px 1px;
}

td:is([data-cell="profil resmi"], [data-cell="takım resmi"]) span img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media screen and (min-width:50em){
    section.users-table-section{
        padding-inline: 1em;
    }
    
    td:is([data-cell="profil resmi"], [data-cell="takım resmi"] :not([class="admin-takimlar-resim"])) span{
        transform: translateY(.3em);
    }
}

@media screen and (max-width:50em){
    section.users-table-section{
        width: 92vw;
        margin-inline: auto;
    }

    th{
        display: none;
    }

    td{
        display: grid;
        justify-content: start;
        align-items: center;
        grid-template-columns: 15ch auto;
        gap: .5rem;
        padding: .7rem 1rem;
        border-top: 1px solid var(--clr-rgba-gray-softer);
        border-bottom: 1px solid var(--clr-rgba-gray-softer);
    }

    td:first-child{
        padding-top: 1.5rem;
    }

    td:last-child{
        padding-bottom: 1.5rem;
    }
    
    td::before{
        content: attr(data-cell) ": ";
        font-weight: var(--fw-normal-bolder);
        text-transform: uppercase;
    }
}

/* Index Styling */
.skeleton-loader {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1em;
    padding: 2em;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
}
.skeleton-card {
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 1em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: shimmer 1.5s infinite linear;
}
.skeleton-header, .skeleton-line {
    background-color: #e0e0e0;
    border-radius: 4px;
}
.skeleton-header {
    width: 100%;
    height: 2em;
    margin-bottom: 1em;
}
.skeleton-line {
    width: 100%;
    height: 1em;
    margin-bottom: 0.5em;
}
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
.skeleton-line::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
    background-size: 2000px 100%;
    animation: shimmer 1.5s infinite linear;
}
.announcements-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--clr-rgba-gray-soft) 0 0 5px 1px;
    overflow: hidden;
    border-radius: .5em;
    max-width: 100%;
}

.duyuru-block{
    width: fit-content;
    height: fit-content;
}

.announcements-box .nav-arrow{
    background: none;
    border: none;
    font-size: 2rem;
    color: transparent;
    cursor: pointer;
    z-index: 10;
    width: fit-content;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 0;
    transition: .3s;
    position: absolute; 
}

.announcements-box .nav-arrow.left{
    left: 0;
}

.announcements-box .nav-arrow.right{
    right: 0;
}

.announcements-box:hover .nav-arrow{
    background-color: var(--clr-rgba-gray-darker-opacity);
    /*box-shadow: var(--clr-rgba-gray-darker-opacity) 0 0 10px 5px;*/
    color: var(--clr-light);
}

.announcements-box:hover .nav-arrow:hover{
    background-color: var(--clr-rgba-gray-much-darker-opacity);
}

.announcements-box .duyurular-img{/*
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;*/
}

.announcements-box .img-summary {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: var(--clr-rgba-gray-much-darker);
    box-shadow: var(--clr-rgba-gray-much-darker) 0 0 10px 5px;
    z-index: 3;
    text-align: center;
    color: var(--clr-light);
    padding: .5em 1em;
    white-space: nowrap;
}
.announcements-box .no-announcements {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}
.announcements-box .no-announcements .animation {
    font-size: 3rem;
}

.index-nav{
    display: flex;
    height: fit-content;
    width: 100%;
    position: sticky;
    top: 0;
    background-color: var(--clr-light);
    z-index: 500;
    transition: .3s;
}

.add-shadow{
    box-shadow: var(--clr-rgba-gray-soft) 0 1px 5px 1px;
    font-weight: var(--fw-normal-bolder);
}

.index-nav nav{
    width: 100%;
    justify-content: center;
}

.index-nav nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.index-nav nav ul li{
    flex: 1;
    min-width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.index-nav nav ul li a{
    text-decoration: none;
    color: var(--clr-dark);
    border: 1px solid var(--clr-rgba-gray-soft);
    padding: 1em;
    flex: 1;
    transition: .3s;
}

.index-nav nav ul li a:is(:hover, :focus-visible){
    background-color: var(--clr-rgba-gray-soft);
}

@media screen and (max-width: 980px){
    .index-nav{
        display: none;
    }
}

main:is([data-page="duyuru-detayi-page"],[class="index-main"]) .h2-lined h2,
h2[class="header-h2"]{
    font-size: var(--fs-main);
    color: var(--clr-light);
    background-color: var(--clr-gray-softer);
    padding: .3em .4em;
    width: fit-content;
    max-width: 100%;
    border-radius: .2em;
    margin-bottom: 1em;
    position: relative;
}

h2[class="header-h2"]{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
}

main:is([data-page="duyuru-detayi-page"],[class="index-main"])  .h2-lined{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

main:is([data-page="duyuru-detayi-page"],[class="index-main"]) .h2-lined h2::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 100000%;
    min-height: 2px;
    z-index: -1;
    background-color: var(--clr-rgba-gray-softer);
}

/* Index Duyurular Styling */
section.index-duyurular-section{
    position: relative;
    overflow: hidden;
}

/*section.index-duyurular-section::before{
    content: '';
    background-color: var(--clr-neutral-50);
    filter: blur(2px);
    height: 15em;
    width: 100em;
    transform: rotate(5deg);
    position: absolute;
    left: -5em;
    top: 12em;
}*/

section.index-duyurular-section .index-duyurular-area{
    gap: 1em;
    padding-inline: 3vw;    
}

@media screen and (min-width:1400px){
    section.index-duyurular-section .index-duyurular-area{
        padding-inline: 7vw;    
    }    
}

@media screen and (max-width:1348px){
    section.index-duyurular-section .index-duyurular-area{
        padding-inline: 1vw;    
    }   
}

@media screen and (max-width:1322px){
    section.index-duyurular-section .index-duyurular-container .duyuru-column{
        display: none;
    }
}

section.index-duyurular-section .index-duyurular-container{
    min-width: 100%;    
    gap: 1em;
    border-left: 0;
}

section.index-duyurular-section .announcements-box .duyuru img{/*
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;*/
    object-fit: contain !important;
}

section.index-duyurular-section .first-duyuru{
    width: 100%;
}

section.index-duyurular-section .first-duyuru .announcements-box{
    border-bottom-right-radius: .3em !important;
    border-top-right-radius: .3em !important;
}

section.index-duyurular-section .index-duyurular-container .duyuru-column .announcements-box{
    border-top-left-radius: .3em !important;
    border-bottom-left-radius: .3em !important;
}

section.index-duyurular-section .first-duyuru .announcements-box .duyuru{
    min-height: 25em;
    max-height: 25em;
}

section.index-duyurular-section .index-duyurular-container .duyuru-column{
    width: 30%;
    gap: 1em;
}

section.index-duyurular-section .index-duyurular-container .duyuru-column .announcements-box .duyuru{
    width: 20em;
    min-height: 12em !important;
    max-height: 12em !important;
}

section.sliding-cards-section{
    max-width: 100%;
    padding-inline: 0;
    position: relative;
}

.sliding-cards-slider {
    display: flex;;
    gap: 1em;
    overflow-x: hidden;
    scroll-behavior: smooth;
    cursor: grab;
    padding: 1em 0;
    margin-inline: 6em; 
    position: relative;
}

section.sliding-cards-section::before,
section.sliding-cards-section::after{
    content: '';
    height: 70%;
    width: 2em;
    top: 55.7%;
    transform: translateY(-50%);
    background-color: var(--clr-light);
    z-index: 5;
    position: absolute;
    filter: blur(5px);
}

section.sliding-cards-section::before{
    left: 5.5em;
}

section.sliding-cards-section::after{
    right: 5.5em;
}
  
  .sliding-cards-slider.active {
    cursor: grabbing;
  }

  button.slider-button {
    position: absolute;
    background-color: var(--clr-rgba-gray-much-darker);
    color: var(--clr-light);
    border: none;
    padding: .5em;
    top: 55%;
    transform: translateY(-50%);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 2rem;
    z-index: 10;
    width: 2em;
    height:2em;
    border-radius: 100vw;
    transition: .3s;
  }

  button.slider-button:hover{
    background-color: var(--clr-rgba-gray-med-darker);
  }
  
  button.slide-left {
    left: 1em;
  }
  
  button.slide-right {
    right: 1em;
  }

.sliding-cards-slider .yarisma-card{
    display: grid;
    gap: 1.5em;
    border-radius: .5em;
    box-shadow: var(--clr-rgba-gray-soft) 0 1.5px 5px 1px;
    user-select: none;
}

.sliding-cards-slider .yarisma-card:first-child{
    margin-left: .5em;
}

.sliding-cards-slider .yarisma-card:last-child{
    margin-right: .5em;
}

.sliding-cards-slider .yarisma-card :is(.yarisma-card-header, .yarisma-card-body, .yarisma-card-footer){
    padding: .7em 1em;
}

.sliding-cards-slider .yarisma-card .yarisma-card-header{
    display: flex;
    justify-content: start;
    gap: .5em;
    border-bottom: 1px solid var(--clr-rgba-gray-softer);
}

.sliding-cards-slider .yarisma-card .yarisma-card-header img{
    width: 3em;
    height: 3em;
}

.sliding-cards-slider .yarisma-card .yarisma-card-header span{
    display: grid;
    place-items: start;
}

.sliding-cards-slider .yarisma-card .yarisma-card-header span p:first-child{
    font-weight: var(--fw-normal-bolder);
    font-size: var(--fs-sm);
}

.sliding-cards-slider .yarisma-card .yarisma-card-header span div{
    display: flex;
    justify-content: start;
    align-items: center;
    opacity: .7;
    gap: .3em;
}

.sliding-cards-slider .yarisma-card .yarisma-card-body{
    display: grid;
    place-items: start;
    padding-block: 0;
    gap: .5em;
}

.sliding-cards-slider .yarisma-card .yarisma-card-body .yarisma-card-body-block{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: .5em;
}

.sliding-cards-slider .yarisma-card .yarisma-card-body .yarisma-card-body-block span{
    display: flex;
    justify-content: start;
    gap: .3em;
    align-items: center;
}

.sliding-cards-slider .yarisma-card .yarisma-card-body .yarisma-card-body-block span p{
    font-weight: var(--fw-normal-bolder);
}

.sliding-cards-slider .yarisma-card .yarisma-card-body .yarisma-card-body-block  :is(p:is([class="katilim-durumu"], [class="son-tarih"], [class="durum"])){
    opacity: .7;
}

.sliding-cards-slider .yarisma-card .yarisma-card-footer{
    gap: 3em;
    padding-top: 0;
}

.sliding-cards-slider .yarisma-card .yarisma-card-footer .yarisma-card-footer-block{
    display: flex;
    justify-content: start;
    align-items: center;
    min-width: fit-content;
    gap: .3em;
}

@media screen and (max-width: 1000px){
    .sliding-cards-slider {
        margin-inline: 5em; 
    }
    section.sliding-cards-section::before{
        left: 4.5em;
    }
    
    section.sliding-cards-section::after{
        right: 4.5em;
    }
    button.slide-left {
      left: .2em;
    }
      
    button.slide-right {
      right: .2em;
    }
}

@media screen and (max-width: 582px){
    section.liderlik-section{
        margin-top: 2em;
    }

    .sliding-cards-slider {
        margin-inline: 1em; 
    }
    section.sliding-cards-section::before{
        left: .5em;
    }
    
    section.sliding-cards-section::after{
        right: .5em;
    }
    button.slider-button {
        padding: .5em;
        top: 100%;
        transform: translateY(-50%);
        font-size: 2rem;
        z-index: 10;
        width: 4em;
        height:1.2em;
        border-radius: .3em;
        transition: .3s;
      }
    button.slide-left {
        left: .6em;
        border-top-left-radius: .1em;
        border-bottom-left-radius: 1em;
      }
        
      button.slide-right {
        right: .6em;
        border-top-right-radius: .1em;
        border-bottom-right-radius: 1em;
      }
}

section#yarisma-takvimi .yarismalar-area{
    position: relative;
}

section#yarisma-takvimi .yarismalar-area img{
    position: absolute;
    left: -12em;
    top: 50%;
    transform: translateY(-50%);
    opacity: .3;
    height: 60%;
}

section#yarisma-takvimi .yarismalar-area .calendar .fc-today-button{
    text-transform: capitalize;
}

@media screen and (max-width: 1120px){
    section#yarisma-takvimi .yarismalar-area .calendar .fc-toolbar-chunk:first-child{
        display: grid;
        place-items: center;
        gap: .7em;
        transform: translateY(1em);
    }

    section#yarisma-takvimi .yarismalar-area .calendar .fc-toolbar-chunk button{
        width: 100%;
        margin-left: 0;
    }
}

@media screen and (min-width: 834px) and (max-width: 1100px){
    section#yarisma-takvimi .yarismalar-area .calendar{
        max-width: 70% !important;
        margin-left: 12em !important;
    }
}

@media screen and (max-width: 834px){
    section#yarisma-takvimi .yarismalar-area .calendar{
        max-width: 100% !important;
    }

    section#yarisma-takvimi .yarismalar-area img{
        display: none;
    }
    
    section#yarisma-takvimi .yarismalar-area .calendar h2{
        transform: translateX(1.6em);
    }
}

section#yarisma-takvimi .yarismalar-area .calendar h2{
    background-color: var(--clr-rgba-gray-much-darker);
}

@media screen and (min-width: 1264px){
section#yarisma-takvimi .yarismalar-area .calendar h2{
    transform: translateX(-.55em);
}
}

@media screen and (max-width: 800px){
    section#yarisma-takvimi{
        display: none;
    }
}

section#yarisma-takvimi .yarismalar-area .calendar h2::before{
    display: none;
}

section.sponsorlar-section{
    background-color: var(--clr-gray);
    padding: 0 !important;
}

section.sponsorlar-section .sponsorlar-area{
    display: flex;
    justify-content: space-around;
    height: 100%;
}

section.sponsorlar-section .sponsorlar-area .sponsorlar-block{
    flex: 1;
    display: grid;
    cursor: pointer;
    place-items: center;
    padding: 3.5em 1.5em;
    min-height: 100%;
    transition: .3s;
}

section.sponsorlar-section .sponsorlar-area .sponsorlar-block:is(:hover, :focus-visible){
    background-color: var(--clr-gray-softer);
}

section.sponsorlar-section .sponsorlar-area .sponsorlar-block img{
    width: 12em;
}

@media screen and (max-width: 800px){
    section.sponsorlar-section .sponsorlar-area{
        display: grid;
        grid-template-columns: auto auto;
    }
}

section.liderlik-section{
    padding-inline: 0 !important;
}

.liderlik-tablo{
    display: grid;
    border-radius: .5em;
    overflow: hidden;
}

.liderlik-tablo .liderlik-header{
    background-color: var(--clr-rgba-gray-soft);
    font-weight: var(--fw-semi-bold);
}

.liderlik-tablo .liderlik-hucre:nth-child(2n){
    background-color: var(--clr-rgba-gray-softer);
}

.liderlik-tablo .liderlik-header,
.liderlik-tablo .liderlik-hucre{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.liderlik-tablo .liderlik-hucre .liderlik-block:is(:first-child,:last-child) p{
    font-weight: var(--fw-normal-bolder);
    transform: translateX(1.2em);
}

.liderlik-tablo .liderlik-header .liderlik-block{
    display: flex;
    justify-self: start;
    align-items: center;
    gap: .5em;
}

.liderlik-tablo .liderlik-block{
    justify-content: start;
    text-align: start;
    min-width: fit-content;
    align-items: center;
    flex: 1;
}

.liderlik-tablo .liderlik-block{
    min-width: 100%;
    flex: 1;
    padding: 1em;
}

@media screen and (max-width: 800px){
    .liderlik-tablo{
        border-radius: 0;
    }

    .liderlik-tablo .liderlik-header .liderlik-block:first-child{
        padding-left: 1em;
    }

    .liderlik-tablo .liderlik-hucre .liderlik-block:first-child p{
        transform: translateX(2em);
    }

    .liderlik-tablo .liderlik-block{
        padding: 1em .3em;
    }
}

@media screen and (max-width: 636px){
    .liderlik-tablo .liderlik-header .liderlik-block:first-child{
        padding-left: 1.5em;
    }

    .liderlik-tablo .liderlik-header svg{
        display: none;
    }

    .liderlik-tablo .liderlik-hucre .liderlik-block:last-child p{
        transform: translateX(1.6em);
    }
}

section.potansiyonelSection{
    position: relative;
    overflow: hidden;
    padding-inline: 0 !important;
    display: grid;
    place-items: center;
}

section.potansiyonelSection::before,
section.potansiyonelSection::after{
    background-color: var(--clr-light);
    content: '';
    position: absolute;
    left: -2em;
    width: 120%;
    height: 100px;
    filter: blur(10px);
}

section.potansiyonelSection::before{
    top: -.5em;
}

section.potansiyonelSection::after{
    bottom: -.5em;
}

section.potansiyonelSection h1{
    position: absolute;
    color: var(--clr-light);
}

@media screen and (max-width:980px){
    section.potansiyonelSection img{
        min-height: 15em;
        object-fit: cover;
    }
}


section.fed-bilgi{
    padding: 5em 0 !important;
}

section.fed-bilgi article{
    flex: 1;
    height: 30em;
    padding: 2em 1em;
    overflow: hidden;
}

section.fed-bilgi article:first-child{
    padding-right: 0;
    padding-left: 7em;
    position: relative;
}

section.fed-bilgi article:first-child img{
    display: none;
}

section.fed-bilgi article:first-child .fed-info-area{
    gap: 2em;
}

section.fed-bilgi article:last-child{
    position: relative;
    display: grid;
    place-items: center;
    padding-left: 0;
}

section.fed-bilgi article:last-child img{
    width: 10em;
    transform: translateX(10em);
    z-index: 1;
    position: absolute;
    right: 20em;
}

section.fed-bilgi article:last-child .decorative{
    position: absolute;
    height: 100%;
    width: 30em;
    border-radius: 100vw;
    top: 0;
    right: -15em;
    background-color: var(--clr-neutral-300);
}

@media screen and (max-width:1114px){
    section.fed-bilgi article:first-child{
        padding-left: 3em;
    }
}

@media screen and (max-width:856px){
    section.fed-bilgi{
        padding-top: 0 !important;
    }

    section.fed-bilgi article:first-child{
        padding-inline: 2em;
    }

    section.fed-bilgi article:last-child{
        display: none;
    }

    section.fed-bilgi article:first-child img{
        display: block;
        opacity: .2;
        position: absolute;
        top: 12em;
        right: -4em;
        width: 10em;
        height: 10em;
    }
}

/* Duyuru Oluştur Styling */
form.duyuru-olustur-form{
    display: flex;
    gap: 1.5em;
    height: fit-content;
}

form.duyuru-olustur-form .duyuru-olustur-bilgiler{
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    gap: 1.5em;
    width: 30%;
    min-width: fit-content;
    min-height: 100%;
    border: 1px solid var(--clr-gray-much-softer);
    padding: 1em;
    border-radius: 1em;
}

form.duyuru-olustur-form .duyuru-olustur-bilgiler .duyuru-btn-container{
    display: flex;
    flex-direction: column;
    gap: 1em;
}

form.duyuru-olustur-form .duyuru-olustur-bilgiler input{
    width: 100%;
}

form.duyuru-olustur-form .duyuru-olustur-icerik{
    display: grid;
    gap: 1em;
    width: 70%;
    height: fit-content;
}

form.duyuru-olustur-form .duyuru-olustur-icerik textarea{
    height: 70vh;
}

form.duyuru-olustur-form label{
    font-weight: var(--fw-normal-bolder);
}

.mobile-all-duyurular-btn{
    display: none;
}

@media screen and (max-width: 1244px){
    form.duyuru-olustur-form{
        display: flex;
        flex-direction: column-reverse;
    }

    form.duyuru-olustur-form :is(.duyuru-olustur-bilgiler, .duyuru-olustur-icerik){
        width: 100%;
    }

    form.duyuru-olustur-form .duyuru-olustur-bilgiler{
        border: 0;
        padding: 0;
    }

    form.duyuru-olustur-form .duyuru-olustur-bilgiler button.newsButton{
        display: none;
    }

    .mobile-all-duyurular-btn{
        margin-top: 5em;
        display: flex;
    }
}


/* Yarışma Oluştur Styling */
section.yarisma-olustur-section .yarisma-olustur-form{
    margin-inline: auto;
    display: grid;
    gap: 1em;
    place-items: center;
    justify-content: center;
    background-color: var(--clr-light);
    box-shadow: var(--dashboard-box-shadow);
    border-radius: 1em;
    margin-bottom: 1em;
    max-width: fit-content;
    padding-bottom: 1em;
}

section.yarisma-olustur-section .yarisma-olustur-form .yarisma-olustur-header{
    display: grid;
    position: relative;
    place-items: center;
    padding: .7em 6.5em;
    border-bottom: 1px solid var(--clr-rgba-gray-softer);
    overflow: hidden;
    border-top-right-radius: 1em;
}

section.yarisma-olustur-section .yarisma-olustur-form .yarisma-olustur-header img{
    position: absolute;
    top: -.5em;
    right: -1em;
    opacity: .5;
    
}

section.yarisma-olustur-section .yarisma-olustur-form .yarisma-olustur-body{
    display: grid;
    grid-template-columns: auto auto;
    gap: 1em 3em;
    justify-content: space-between;
    padding: 1em;
    padding-top: 0;
}

section.yarisma-olustur-section .yarisma-olustur-form .yarisma-olustur-body article{
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1em;
}

section.yarisma-olustur-section .yarisma-olustur-form .yarisma-olustur-body article .input-block label:not(.dropdown label){
    font-size: var(--fs-ms);
    opacity: .6;
}

section.yarisma-olustur-section .yarisma-olustur-form .yarisma-olustur-body article :is(.input-block, .input-block input, .input-block .dropdown, .input-block .dropdown .dropdown-items){
    width: 100%;
}

section.yarisma-olustur-section .yarisma-olustur-form .yarisma-olustur-body article .input-block .dropdown .dropdown-items{
    box-shadow: var(--clr-rgba-gray-soft) 0 5px 5px 2px;
}

section.yarisma-olustur-section .yarisma-olustur-form .yarisma-olustur-footer{
    grid-column: 2 span;
    position: relative;
}

section.yarisma-olustur-section .yarisma-olustur-form .yarisma-olustur-body article .input-block :is(input, div[data-type="dropdown"] label){
    height: 2.5em;
}

.multiselectDrop .select-btn{
display: flex;
height: 50px;
align-items: center;
justify-content: space-between;
padding: 0 16px;
border-radius: 8px;
cursor: pointer;
background-color: var(--clr-light);
gap: 1em;
}

.multiselectDrop .select-btn .btn-text{
user-select: none;
color: var(--clr-dark);
}

.multiselectDrop .select-btn .arrow-dwn{
display: flex;
height: 21px;
width: 21px;
color: var(--clr-light);
font-size: 14px;
border-radius: 50%;
background: var(--clr-neutral-200);
align-items: center;
justify-content: center;
transition: 0.3s;
}

.multiselectDrop .select-btn.open .arrow-dwn{
transform: rotate(-180deg);
}

.multiselectDrop .list-items{
position: absolute;
margin-top: 15px;
border-radius: 8px;
padding: 16px;
user-select: none;
background-color: var(--clr-light);
overflow: hidden;
visibility: hidden;
opacity: 0;
box-shadow: var(--clr-rgba-gray-soft) 0 0 5px 2px;
transition: .3s;
z-index: 1000;
}

.multiselectDrop.multiselectDropCreate .list-items{
    transform: translateY(-25.65em);
    width: 100%;
}

.multiselectDrop .select-btn.open ~ .list-items{
    opacity: 1;
    visibility:visible;
}

.multiselectDrop .list-items .item{
display: flex;
align-items: center;
list-style: none;
height: 50px;
cursor: pointer;
transition: 0.3s;
padding: 0 15px;
border-radius: 8px;
}

.multiselectDrop .list-items .item:hover{
background-color: var(--clr-rgba-gray-soft);
}

.multiselectDrop .item .item-text{
font-size: 16px;
font-weight: 400;
color: var(--clr-dark);
}

.multiselectDrop .item .checkbox{
display: flex;
align-items: center;
justify-content: center;
height: 16px;
width: 16px;
border-radius: 4px;
margin-right: 12px;
border: 1.5px solid #c0c0c0;
transition: all 0.3s ease-in-out;
}

.multiselectDrop .item.checked .checkbox{
background-color: var(--clr-neutral-300);
border-color: var(--clr-neutral-300);
}

.multiselectDrop .checkbox .check-icon{
color: var(--clr-light);
font-size: 11px;
transform: scale(0);
transition: all 0.2s ease-in-out;
}

.multiselectDrop .item.checked .check-icon{
transform: scale(1);
}

@media screen and (max-width: 45.5em){
    section.yarisma-olustur-section .yarisma-olustur-form .yarisma-olustur-header{
        padding-inline: 4em;
    }
}

@media screen and (max-width: 45em){

    section.yarisma-olustur-section .yarisma-olustur-form .yarisma-olustur-body{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 85vw;
        gap: 1em;
    }

    section.yarisma-olustur-section .yarisma-olustur-form .yarisma-olustur-header{
        white-space: nowrap;
    }

    section.yarisma-olustur-section .yarisma-olustur-form button{
        width: 100%;
    }
}

/* Yarışmalar Styling */
section.yarismalar-section .yarismalar-header-text{
    display: grid;
    justify-content: start;
    padding-bottom: .5em;
    gap: 1em;
    border-bottom: 1px solid var(--clr-rgba-gray-soft);
}

section.yarismalar-section .yarismalar-area .yarismalar-filtre-area{
    display: flex;
    width: 100%;
    gap: 1em;
    margin-bottom: .5em;
    flex-wrap: wrap;
}

section.yarismalar-section .yarismalar-area .yarismalar-filtre-area button{
    background-color: transparent;
    border: 2px solid var(--clr-red);
    height: 50px;
    align-self: end;
    margin-left: 1em;
    width: fit-content;
    color: var(--clr-red);
}

section.yarismalar-section .yarismalar-area .yarismalar-filtre-area button path{
    transition: .3s;
}

section.yarismalar-section .yarismalar-area .yarismalar-filtre-area button:is(:hover, :focus-visible){
    background-color: var(--clr-red);
    color: var(--clr-light);
}

section.yarismalar-section .yarismalar-area .yarismalar-filtre-area button:is(:hover, :focus-visible) path{
    stroke: var(--clr-light);
}

section.yarismalar-section .yarismalar-area .yarismalar-filtre-area .input-block label{
    font-size: var(--fs-ms);
    opacity: .6;
}

section.yarismalar-section .yarismalar-area .yarismalar-filtre-area .select-btn{
    flex: 1;
    min-width: 10em;
}

section.yarismalar-section .yarismalar-header-text p b{
    font-weight: var(--fw-semi-bold);
}

section.yarismalar-section .yarismalar-area{
    margin-top: 1em;
    width: fit-content;
    display: grid;
    place-items: center;
    gap: 1em;
}

section.yarismalar-section .yarismalar-area button.yarismalar-refresh-btn{
    margin-bottom: .3em;
}

section.yarismalar-section .yarismalar-area button.yarismalar-refresh-btn:focus svg{
    animation: refreshSvg 1s infinite;
}

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

section.yarismalar-section .yarismalar-area button{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: fit-content;
}

section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block button{
    box-shadow: var(--clr-rgba-gray-soft) 0 2px 5px 1px;
    display: grid;
    grid-template-columns: auto auto;
    place-items: center;
    width: 12em;
}

section.yarismalar-section .yarismalar-area .yarismalar-card{
    display: flex;
    justify-content: space-between;
    box-shadow: var(--clr-rgba-gray-soft) 0 2px 5px 1px;
    cursor: pointer;
    border-radius: 1em;
    flex: 1;
    width: 100%;
}

section.yarismalar-section .yarismalar-area .yarismalar-card.yarismalar-card-banned * :not(.bannedText, .bannedText *, .detailsBtn, .detailsBtn *){
    opacity: .4;
    pointer-events: none;
    user-select: none;
}

section.yarismalar-section .yarismalar-area .yarismalar-card.yarismalar-card-banned .yarismalar-block-info{
    opacity: 1;
}

section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block-info p:nth-child(3){
    opacity: .65;
}

section.yarismalar-section .yarismalar-area .yarismalar-card.yarismalar-card-banned .yarismalar-block-info p:nth-child(3){
    opacity: .4;
}

section.yarismalar-section .yarismalar-area .yarismalar-card.yarismalar-card-banned .yarismalar-block-info p:nth-child(4){
    opacity: 1;
}

section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block:first-child{
    display: flex;
    gap: 2em;
}

section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block{
    padding: 1em 2em;
}

section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block:last-child form button{ 
    width: fit-content;
}

section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block:first-child span{
    position: relative;
    box-shadow: var(--clr-rgba-gray-soft) 0 0 2px 2px;
    min-width: 3.5em;
    min-height: 3.5em;
    border-radius: 100vw;
    display: grid;
    place-self: center;
    place-items: center;
    overflow: hidden;
}

section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block:first-child span img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateY(0);
}

section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block:last-child{
    display: grid;
    place-items: center;
}

section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block-info{
    width: fit-content;
}

section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block-info p{
    font-size: var(--fs-ms);
    opacity: .6;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: .3em;
}

section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block-info p{
    margin-top: .3em;
    opacity: .8;
}

section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block-info p:nth-child(4){
    color: var(--clr-red);
    opacity: 1;
}

@media screen and (max-width: 1530px){
    section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block-info p svg{
        min-width: 1em !important;
        min-height: 1em !important;
    }

    section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block-info p:nth-child(3) svg,
    section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block-info p:nth-child(4) svg{
        align-self: start;
        margin-top: .2em;
    }
}

@media screen and (max-width: 1188px) and (min-width: 1084px){
    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area{
        justify-content: center;
    }
    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area .input-block{
        flex: 1;
        width: 33.3%;
    }
    
    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area .select-btn{
        width: 100%;
    }
    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area button{
        width: 100%;
        margin-left: 0;
    }
}

@media screen and (max-width: 936px){
    section.yarismalar-section .yarismalar-area{
        margin-inline: auto;
    }

    section.yarismalar-section .yarismalar-area .yarismalar-card{
        display: grid;
        grid-template-columns: auto auto;
    }

    section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block{
        padding: 1em 1em;
    }
    
    section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block:last-child{
        grid-column: 2 span;
    }

    section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block:last-child button{
        width: 100%;
    }
}

@media screen and (max-width: 918px){
    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area button{
        width: 100%;
        margin-left: 0;
    }
}

@media screen and (max-width: 918px) and (min-width: 680px){
    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area{
        justify-content: center;
    }
    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area .input-block{
        flex: 1;
        width: 33.3%;
    }
    
    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area .select-btn{
        width: 100%;
    }
}

@media screen and (max-width: 680px){
    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area .multiselectDrop .list-items{
        width: 92vw;
    }

    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area .input-block,
    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area .select-btn{
        min-width: 100%;
        max-width: 100%;
    }

    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area{
        gap: .5em;
    }
}

@media screen and (max-width:626px){
    section.yarismalar-section .yarismalar-header-text p{
        display: grid;
        justify-content: start;
    }
}

@media screen and (max-width: 442px){
    section.yarismalar-section .yarismalar-area .yarismalar-filtre-area button{
        height: fit-content;
    }

    section.yarismalar-section .yarismalar-area button.yarismalar-refresh-btn{
        padding-block: .8em;
    }

    section.yarismalar-section .yarismalar-area .yarismalar-card .yarismalar-block:first-child{
        gap: 1.5em;
    }
}


/* Duyurular Sayfası Ekleme 
main[data-page="duyuru-detayi-page"]{
    margin-bottom: 3em;
    min-height: 670px;
}

main[data-page="duyuru-detayi-page"] h2{
    font-size: var(--fs-main);
    color: var(--clr-light);
    background-color: var(--clr-gray-softer);
    font-weight: var(--fw-semi-bold);
    padding: .3em .4em;
    width: fit-content;
    max-width: 100%;
    border-radius: .2em;
    margin-top: 2em;
    margin-left: 1.4em;
}

.duyuru-detaylari-alani{
    display: flex;
    gap: 2em;
    position: relative;
}

.duyuru-detaylari-alani .duyuru-detaylari{
    padding: 1.5em;
    margin-right: 30em;
}

.duyuru-detaylari-alani .duyuru-detaylari .duyuru-bulunamadi-container{
    display: grid;
    place-items: center;
}

.duyuru-detaylari-alani .duyuru-detaylari .duyuru-bulunamadi-container p:first-child{
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-l);
    text-align: center;
}

.duyuru-detaylari-alani .duyuru-detaylari .duyuru-bulunamadi-container p:last-child{
    font-weight: var(--fw-normal-bolder);
}

@media screen and (max-height: 840px){
    .duyuru-detaylari-alani .duyuru-detaylari .duyuru-bulunamadi-container img{
        max-width: 50%;
    }
}

@media screen and (max-height:724px){
    .duyuru-detaylari-alani .duyuru-detaylari .duyuru-bulunamadi-container img{
        max-width: 30% !important;
    }
}

.duyuru-detaylari-alani .duyuru-detaylari img{
    width: 70%;
    height: fit-content;
    object-fit: cover;
    border-radius: .5em;
    margin-block: 1em;
}

.duyuru-detaylari-alani .onerilen-duyurular{
    border: 1px solid var(--clr-rgba-gray-soft);
    border-top-left-radius: 1em;
    padding: .5em 1em;
    border-bottom-left-radius: 1em;
    width: fit-content;
    max-height: fit-content !important;
    position: fixed;
    background-color: var(--clr-light);
    right: 0;
    top: 55%;
    transform: translateY(-50%);
}

.duyuru-detaylari-alani .duyuru-detaylari-ici{
    display: grid;
    gap: .5em;
}

.duyuru-detaylari-alani .duyurular-listesi{
    display: grid;
    gap: .7em;
}

.duyuru-detaylari-alani .duyuru-detaylari-ici .duyurular-listesi{
    display: grid;
    gap: 1em;
    min-width: fit-content;
}

.duyuru-detaylari-alani .onerilen-duyurular h2{
    margin-top: .7em;
    width: fit-content;
    margin-left: .6em;
}

.duyuru-detaylari-alani .duyuru-detaylari-ici .duyuru-block{
    display: flex;
    justify-content: start;
    align-items: center;
    padding: .7em;
    gap: 1em;
    flex: 1;
    height: 5em;
    width: 27em;
    border-radius: .7em;
    transition: .3s;
    max-width: 100%;
}

.duyuru-detaylari-alani .duyuru-detaylari-ici .block{
    transition: .3s;
    text-decoration: none;
    border-radius: .7em;
    max-width: 100%;
}

.duyuru-detaylari-alani .duyuru-detaylari-ici .duyuru-block:is(:hover, :focus-visible){
    background-color: var(--clr-rgba-gray-soft);
}

.duyuru-detaylari-alani .duyuru-detaylari-ici .duyuru-block :is(p, h5){
    color: var(--clr-dark);
    min-width: 100%;
}

.duyuru-detaylari-alani .duyuru-detaylari-ici .duyuru-block .duyuru-block-text{
    min-width: 100%;
}

.duyuru-detaylari-alani .duyuru-detaylari-ici .duyuru-block .duyuru-block-text h5 {
    font-size: var(--fs-main);
    max-width: 35ch !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


.duyuru-detaylari-alani .duyuru-detaylari-ici .duyuru-block .duyuru-block-text p{
    opacity: .7;
    font-size: var(--fs-ms);
}

.duyuru-detaylari-alani .duyuru-detaylari-ici .block img{
min-width: 6em;
max-width: 6em;
border-radius: .5em;
border: 1px solid var(--clr-rgba-gray-softer);
height: 100%;
object-fit: cover;
}

/*@media screen and (max-height: 720px){    
    .duyuru-detaylari-alani .duyuru-detaylari-ici .duyuru-block{
        width: 23em;
    }
}



@media screen and (max-width: 1100px){
    main[data-page="duyuru-detayi-page"]{
        margin-bottom: 0;
        min-height: fit-content;
    }
    
    .duyuru-detaylari-alani .duyuru-detaylari img{
        width: 100%;
    }

    .duyuru-detaylari-alani{
        display: flex;
        gap: 1em;
        position: relative;
        flex-direction: column;
    }
    
    .duyuru-detaylari-alani .duyuru-detaylari{
        padding: 1.5em;
        margin-right: 0;
    }

    .duyuru-detaylari-alani .onerilen-duyurular{
        position: relative;
        max-width: 95vw;
        margin-inline: auto;
        border-radius: 1em;
        overflow: hidden;
        top: 0;
    }
}*/

main[data-page="duyuru-list-page"]{
    display: grid;
    gap: 2em;
    padding: 2em 3em 6em 3em;
}

@media screen and (max-width: 508px){
    main[data-page="duyuru-list-page"]{
        padding-inline: 1em;
    }
}

main[data-page="duyuru-list-page"] section.duyuru-yonetim{
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background-color: var(--clr-light);
    z-index: 3;
    padding-block: 1em;
}

main[data-page="duyuru-list-page"] section.duyuru-yonetim.add-shadow-to-duyuru-yonetim{
    border-bottom: 1px solid var(--clr-rgba-gray-soft);
}

main[data-page="duyuru-list-page"] section.duyuru-yonetim .duyuru-filter-area{
    display: flex;
    width: fit-content;
    gap: 1em;
}

main[data-page="duyuru-list-page"] section.duyuru-yonetim .duyuru-filter-area .duyuru-filter{
    background-color: transparent;
    border: 2px solid var(--clr-rgba-gray);
    color: var(--clr-gray);
    cursor: pointer;
    padding:.5em 1em;
    border-radius: 10px;
    transition: .3s;
}

main[data-page="duyuru-list-page"] section.duyuru-yonetim .duyuru-filter-area .duyuru-filter:is(:hover, :focus-visible){
    background-color: var(--clr-rgba-gray);
    border-color: transparent !important;
    scale: .97;
}

main[data-page="duyuru-list-page"] section.duyuru-yonetim .duyuru-filter-area .duyuru-filter:focus{
    animation: filterBtnFocus .6s ;
}

@keyframes filterBtnFocus {
    0%{
        scale: .97;
    }

    50%{
        scale: 1.03;
    }
    100%{
        scale: .97;
    }
}

main[data-page="duyuru-list-page"] section.duyuru-yonetim .duyuru-filter-area .duyuru-filter.duyuru-filter-active{
    background-color: var(--clr-neutral-300);
    border-color: var(--clr-neutral-300);
    color: var(--clr-light);
}

main[data-page="duyuru-list-page"] section.duyuru-yonetim .mobile-duyuru-filter-dropdown{
    display: none !important;
}

@media screen and (max-width: 1120px){
    main[data-page="duyuru-list-page"] section.duyuru-yonetim .duyuru-filter-area{
        display: none !important;
    }
    
    main[data-page="duyuru-list-page"] section.duyuru-yonetim .mobile-duyuru-filter-dropdown{
        display: grid !important;
    }
}

main[data-page="duyuru-list-page"] section.duyuru-list{
    display: flex;
    flex-wrap: wrap;
    gap: 5em 2em;
    place-items: center;
    justify-content: space-between;
    width: 100%;
    /*grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));*/
}

@media screen and (max-width: 1346px){
    main[data-page="duyuru-list-page"] section.duyuru-list{
        justify-content: center;
    }
}

main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block{
    display: grid;
    width: 20em;
    height: 20em;
    cursor: pointer;
}

@media screen and (max-width: 686px){
    main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block{
        min-width: 100%;
    }
}

main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block .duyurular-duyuru-block-img-area{
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    height: 250px;
    transition: .3s;
}

main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block .duyurular-duyuru-block-img-area img{
    min-width: 100%;
    min-height: 100%;
    transition: .3s;
}

@media screen and (max-width: 482px){
    main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block .duyurular-duyuru-block-img-area{
        max-height: 14em !important;
        border-radius: 15px;
    }
}

main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block .duyurular-duyuru-block-img-area .black-blur{
    position: absolute;
    top: -3em;
    left: -7em;
    background-color: #000;
    min-width: 170%;
    min-height: 6em;
    filter: blur(50px);
}

main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block .duyurular-duyuru-block-img-area .flex-space{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1em;
}

main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block .duyurular-duyuru-block-img-area .flex-space p{
    color: var(--clr-light);
}

main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block .duyurular-duyuru-block-img-area .flex-space p.duyuru-type{
    background-color: var(--clr-neutral-300);
    padding: .25em .7em;
    border-radius: 5px;
}

main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block h4{
    padding-block: .5em .2em;
}

main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block .duyuru-filter-block-text-area p{
    width: 20em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    opacity: .6;
}

main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block .duyuru-filter-block-text-area a{
    font-weight: var(--fw-semi-bold);
    color: var(--clr-neutral-300);
    cursor: pointer;
    text-decoration: none;
}

main[data-page="duyuru-list-page"] section.duyuru-list .duyurular-duyuru-block:hover img{
    scale: 1.05;
}

/* Duyuru Detayları Sayfası */
main[data-page="duyuru-detayi-page"]{
    display: grid;
    gap: 1em;
    padding-block: 1em;
}

main[data-page="duyuru-detayi-page"],
main[data-page="duyuru-detayi-page"] section{
    min-width: 100%;
}

main[data-page="duyuru-detayi-page"] section{
    display: flex;
    justify-content: space-between;
    gap: 1em;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-detaylar{
    width: 70%;
    border: 1px solid #eee;
    border-left: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
    padding: 1.5em;
    display: grid;
    gap: .7em;
    place-items: center;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-detaylar span#duyuru-detay-date{
    justify-self: right;
    font-weight: lighter;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-detaylar h2#title{
    margin-bottom: .3em;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-detaylar #duyuru-detay-icerik img{
    border-radius: 20px;
    margin-block: 1em;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-detaylar #duyuru-detay-icerik img:last-child{
    margin-bottom: 0;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler{
    width: 30%;
    height: fit-content;
    position: sticky;
    top: 1em;
    border: 1px solid #eee;
    border-right: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    display: grid;
    place-items: center;
    padding: 1em;
    gap: 1em;
}

@media screen and (max-width: 1320px){
    main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-detaylar{
        width: 60%;
    }

    main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler{
        width: 40%;
    }
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-block img{
    max-width: 130px;
    min-width: 130px;
    min-height: 90px;
    max-height: 90px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: var(--clr-rgba-gray-soft) 0 0 5px 1px;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-block{
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    transition: .3s;
    opacity: 1;
    padding-block: 1em;
    border-bottom: 2px solid #eee;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-block-area{
    gap: 1em;
    width: 100%;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-block-area .onerilen-duyuru-block-info{
    width: 100%;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-block-area .onerilen-duyuru-block-info h5#onerilen-duyuru-block-info-title{
    margin-bottom: .3em;
  line-height: 1.2;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 2ch;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-block-area .onerilen-duyuru-block-info .onerilen-duyuru-block-info-grid{
    display: grid;
    gap: .2em;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-block-area .onerilen-duyuru-block-info .onerilen-duyuru-block-info-grid span#onerilen-duyuru-block-info-grid-type{
    background-color: #000;
    padding: .17em .4em;
    color: var(--clr-light);
    width: fit-content;
    border-radius: 6px;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-block-area .onerilen-duyuru-block-info .onerilen-duyuru-block-info-grid span#onerilen-duyuru-block-info-grid-date{
    opacity: .6;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-block-area .onerilen-duyuru-block-info svg{
    margin-right: .7em;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler span#onerilen-duyuru-yenile-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--fw-semi-bold);
    cursor: pointer;
    margin-top: .4em;
    gap: .5em;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-social-area{
    margin-top: .5em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
    font-weight: var(--fw-semi-bold);
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-social-area span.onerilen-duyuru-social-svgs{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-social-area span.onerilen-duyuru-social-svgs svg{
    cursor: pointer;
    transition: .3s;
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-social-area span.onerilen-duyuru-social-svgs svg:is(:hover, :focus-visible){
    transform: translateY(-3px);
}

main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-social-area p:last-child{
    opacity: .75;
}

@media screen and (max-width: 1022px){
        main[data-page="duyuru-detayi-page"] section{
            flex-direction: column;
        }

        main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-detaylar,
        main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler{
            width: 100%;
            border-radius: 0;
    }

    main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler h4{
        font-size: var(--fs-h1);
    }
}

@media screen and (max-width: 452px){
    main[data-page="duyuru-detayi-page"] section article.duyuru-detaylari-onerilenler .onerilen-duyuru-block img{
        max-width: 100px;
        min-width: 100px;
        min-height: 70px;
        max-height: 70px;
    }
}

/* Takımlar Page Styling */
main[data-page="takimlar-page"] section{
    display: flex;
    width: 100%;
    gap: 1em;
    padding: 1em;
}

main[data-page="takimlar-page"] section article:first-child{
    width: 20%;
    display: grid;
    gap: .5em;
    height: fit-content;
    transition: .3s;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-container{
    border: 1.5px solid var(--clr-rgba-gray-soft);
    display: grid;
    align-items: space-between;
    padding: 1em;
    height: fit-content;
    gap: 1em;
    border-radius: 1em;
    width: 100%;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-container .takimlar-filtre-area-header span p:first-child{
    min-width: 100%;
    font-weight: var(--fw-light);
    font-size: var(--fs-xs);
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-container .takimlar-filtre-area-header span p:last-child{
    font-weight: var(--fw-normal-bolder);
    text-align: center;
    font-size: var(--fs-m);
    transform: translateY(-.3em);
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-container.takimlar-filtre-container-buttons{
    gap: .5em;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-container.takimlar-filtre-container-buttons button:first-child{
    border: 1.2px solid var(--clr-rgba-gray-soft);
    font-weight: var(--fw-normal-bolder);
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-container.takimlar-filtre-container-buttons button{
    size-adjust: flex;
    justify-content: center;
    align-items: center;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-area{
    display: grid;
    gap: 1em;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-area .takimlar-filtre-block{
    display: grid;
    place-items: start;
    width: 100%;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-area .takimlar-filtre-block .dropdown-items{
    width: 100%;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-area .takimlar-filtre-block label[for="filtre-header"]{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: .2em;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-area .takimlar-filtre-block label[for="filtre-header"] p:first-child{
    font-weight: var(--fw-normal-bolder);
    display: flex;
    justify-content: start;
    align-items: center;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-area .takimlar-filtre-block label[for="filtre-header"] p:first-child svg{
    margin-right: .3em;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-area .takimlar-filtre-block label[for="filtre-header"] p:last-child{
    opacity: .8;
    cursor: pointer;
    transition: .3s;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-area .takimlar-filtre-block label[for="filtre-header"] p:last-child:hover{
    opacity: 1;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-area .takimlar-filtre-block .dropdown{
    width: 100%;
}

main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-sayfalar-container .takimlar-filtre-block{
    display: grid;
    place-items: center;
    font-weight: var(--fw-normal-bolder);
    gap: .5em;
}

main[data-page="takimlar-page"] section article .takimlar-filtre-sayfalar-container .active{
    background-color: var(--clr-rgba-gray-darker) !important;
    color: var(--clr-dark);
    font-weight: var(--fw-semi-bold);
}

main[data-page="takimlar-page"] section article .takimlar-filtre-sayfalar-container .not-active{
    background-color: var(--clr-rgba-gray-softer) !important;
    color: var(--clr-dark);
}

main[data-page="takimlar-page"] section article .takimlar-filtre-sayfalar-container .not-active:hover{
    background-color: var(--clr-rgba-gray-soft) !important
}

main[data-page="takimlar-page"] section article .takimlar-filtre-sayfalar-container .filtre-nav-btn{
    background-color: var(--clr-gray) !important;
    margin-inline: .7em;
    transition: .3s;
}

main[data-page="takimlar-page"] section article .takimlar-filtre-sayfalar-container .filtre-nav-btn:hover{
    background-color: var(--clr-gray-softer) !important;
}

main[data-page="takimlar-page"] section article:last-child{
    width: 80%;
    transition: .3s;
}

main[data-page="takimlar-page"] section article:last-child .mobile-takimlar-filtre-sayfalar-container{
    margin-block: 2em;
    text-align: center;
    display: none;
}

main[data-page="takimlar-page"] section article:last-child .mobile-takimlar-filtre-sayfalar-container .page-text{
    margin-bottom: .5em;
    font-weight: var(--fw-normal-bolder);
    font-size: var(--fs-m);
}

.takimlar-search-area{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 2px solid var(--clr-rgba-gray-soft);
    border-radius: 1em;
    overflow: hidden;
    margin-bottom: 2em;
}

.takimlar-search-area input{
    background-color: transparent;
    width: 100%;
    border: 3px solid transparent;
    border-radius: .9em;
    transition: .3s;
}

.takimlar-search-area input:is(:focus,:focus-visible){
    border-color: var(--clr-rgba-gray-soft);
}

.takimlar-search-area-cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1em;
    width: 100%;
}

.takim-card{
    position: relative;
    display: grid;
    padding-top: 2em;
    background-color: var(--clr-rgba-gray-soft);
    border-radius: 1em;
    border: 2px solid var(--clr-gray-softer);
    overflow: hidden;
    flex: 1;
    box-shadow: var(--clr-rgba-gray-soft) 0 0 5px 1px;
}

.takim-card img{
    width: 3em;
    height: 3em;
    position: absolute;
    top: .5em;
    left: .5em;
    background-color: var(--clr-light);
    border-radius: .5em;
    border: 1.5px solid var(--clr-gray-softer);
    object-fit: cover;
    z-index: 2;

}

.takim-card .takim-card-icerik{
    position: relative;
    background-color: var(--clr-light);
    border-top: 1.5px solid var(--clr-gray-softer);
    border-radius: .7em;    
    padding: 2em 1em 3.7em 1em;
    display: grid;
    gap: 1em;
}

.takim-card .takim-card-icerik .takim-card-yazilar p{
    opacity: .6;
}

.takim-card .takim-card-icerik .takim-card-infos,
.takim-card .takim-card-icerik .takim-card-infos span{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1.5em;
}

.takim-card .takim-card-icerik .takim-card-infos{
    position: absolute;
    bottom: 1em;
    left: 1em;
}

.takim-card .takim-card-icerik .takim-card-infos span{
    gap: .2em;
    opacity: .9;
}

.takim-card .takim-card-icerik .takim-card-infos span p{
    opacity: .8 ;
}

@media screen and (max-width: 1400px){
    main[data-page="takimlar-page"] section article:first-child{
        width: 25%;
    }

    main[data-page="takimlar-page"] section article:last-child{
        width: 75%;
    }
}

@media screen and (max-width: 1122px){
    main[data-page="takimlar-page"] section article:first-child{
        width: 35%;
    }

    main[data-page="takimlar-page"] section article:last-child{
        width: 65%;
    }
}

@media screen and (max-width: 838px){
    main[data-page="takimlar-page"] section{
        display: grid;
    }
    
    main[data-page="takimlar-page"] section article:first-child{
        width: 100%;
    }

    main[data-page="takimlar-page"] section article:last-child{
        width: 100%;
    }

    main[data-page="takimlar-page"] section article:first-child .takimlar-filtre-container .takimlar-filtre-area-header{
        width: fit-content;
        gap: 2.6em;
    }

    .takimlar-search-area-cards{
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }

    main[data-page="takimlar-page"] section article:last-child .mobile-takimlar-filtre-sayfalar-container{
        display: block;
    }

    main[data-page="takimlar-page"] section article:first-child .desktop-takimlar-filtre-sayfalar-container{
        display: none;
    }
}


main.dashboard-main{
    min-height: 100vh;
    max-height: 100vh;
    min-height: 100dvh;
    max-height: 100dvh;
    display: flex;
    align-items: start;
    background-color: var(--clr-dashboard-bg);
    justify-content: space-between;
    padding: 2em;
    gap: 2em;
}

main.dashboard-main aside{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1em .5em;
    min-width: 12em;
    min-height: 100%;
    gap: 2em;
    background-color: var(--clr-light);
    justify-content: space-between;
    align-self: stretch;
    border-radius: var(--border-dashboard);
    box-shadow: var(--dashboard-box-shadow);
    z-index: 50;    
}

main.dashboard-main aside .aside-top-area{
    position: relative;
}

main.dashboard-main aside .aside-top-area button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .5em;
    opacity: .8;
}

.aside-top-area button{
    background-color: transparent;
    padding: .5em;
}

main.dashboard-main aside nav{
    gap: .2em;
}

main.dashboard-main aside nav button{
    width: 100%;
    background-color: transparent;
    color: var(--clr-dark);
    font-weight: var(--fw-normal-bolder);
    justify-content: start;
    align-items: center;
    white-space: nowrap;
    padding-block: .65em;
}

main.dashboard-main aside nav button:hover,
.aside-top-area button:hover{
    background-color: var(--clr-rgba-gray-softer);
}

main.dashboard-main aside nav button :is(p,svg){
    opacity: .55;
}

@media screen and (min-width: 850px){
    main.dashboard-main aside nav .aside-open-parent{
        position: relative;
    }
}

main.dashboard-main aside nav .aside-open-parent{
    width: 100%;
    gap: .2em;
}

main.dashboard-main aside nav .aside-open-parent .aside-open-child{
    position: absolute;
    left: 110%;
    top: -220%;
    background-color: var(--clr-light);
    border-radius: var(--border-dashboard);
    box-shadow: var(--dashboard-box-modal-shadow);
    gap: .2em;
}

main.dashboard-main aside nav .aside-open-parent .aside-open-child button{
    padding-right: 2em;
}

main.dashboard-main aside nav .aside-open-parent .aside-open-child button:not(.no-padding-top):first-child{
    border-top-left-radius: var(--border-dashboard);
    border-top-right-radius: var(--border-dashboard);
    padding-top: .8em;
}

main.dashboard-main aside nav .aside-open-parent .aside-open-child button:last-child{
    border-bottom-left-radius: var(--border-dashboard);
    border-bottom-right-radius: var(--border-dashboard);
    padding-bottom: .8em;
}

main.dashboard-main aside nav .aside-open-parent .aside-open-child button{
    border-radius: 0;
}

main.dashboard-main aside nav .aside-open-parent .aside-open-child.aside-open-child-second{
    top: -50%;
    left: 105%;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

main.dashboard-main aside nav .aside-open-parent .aside-open-child{
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

main.dashboard-main aside nav .aside-open-parent :is(.aside-open-child.show-aside-open-child, .aside-open-child.aside-open-child-second.show-aside-open-child-second){
    opacity: 1;
    visibility: visible;
}

main.dashboard-main aside nav .aside-open-parent .aside-open-child.show-aside-open-child{
    left: 112%;
}

main.dashboard-main aside nav .aside-open-parent .aside-open-child.aside-open-child-second.show-aside-open-child-second{
    left: 107%;
}

@media screen and (min-width: 850px) and (max-width: 1250px){
    main.dashboard-main aside{
        min-width: fit-content;
        width: fit-content;
    }

    main.dashboard-main aside .aside-top-area .backBtn{
        display: none;
    }

    main.dashboard-main aside nav button.aside-main-nav-btns p{
        opacity: 0;
        visibility: hidden;
        position: absolute;
        left: 110%;
        background-color: var(--clr-light);
        box-shadow: var(--clr-rgba-gray-soft) 0 2px 50px 10px;
        padding: .2em .5em;
        border-radius: 7px;
        color: var(--clr-gray-softer);
        transition: .3s;
    }

    main.dashboard-main aside nav button.aside-main-nav-btns.asideOpenBtn p{
        left: 130%;
    }

    main.dashboard-main aside nav button.aside-main-nav-btns:hover p{
        left: 120%;
    }

    main.dashboard-main aside nav button.aside-main-nav-btns.asideOpenBtn:hover p{
        left: 140%;
    }

    main.dashboard-main aside nav button.aside-main-nav-btns:hover p,
    main.dashboard-main aside nav button.aside-main-nav-btns.asideOpenBtn:hover p{
        opacity: 1;
        visibility: visible;
    }

    main.dashboard-main aside nav .aside-open-parent .aside-open-child.show-aside-open-child{
        left: 140%;
    }
}

@media screen and (max-width: 850px){
    main.dashboard-main{
        flex-direction: column-reverse;
        padding: 1em;
    }

    .aside-dark-effect{
        z-index: 40;
        position: fixed;
        inset: 0;
        background-color: var(--clr-rgba-gray);
        opacity: 0;
        visibility: hidden;
        transition: .3s;
    }

    .aside-dark-effect.aside-dark-effect-show{
        opacity: 1;
        visibility: visible;
    }

    main.dashboard-main aside{
        flex-direction: row;
        min-height: fit-content;
        max-height: fit-content;
        justify-content: center;
        align-items: center;
    }

    main.dashboard-main aside nav:nth-child(2){
        display: flex;
        justify-content: space-around;
        width: 100%;
        align-items: center;
    }

    main.dashboard-main aside nav button.aside-main-nav-btns{
        flex-direction: column;
        font-size: var(--fs-xs);
    }

    main.dashboard-main aside nav button.aside-main-nav-btns:hover{
        background-color: transparent;
    }

    main.dashboard-main aside nav button.aside-main-nav-btns svg{
        width: 2em;
        height: 2em;
    }

    main.dashboard-main aside nav.aside-nav-mobile-bottom{
        position: fixed;
        display: flex;
        justify-content: space-between;
        padding-inline: .5em;
        width: 100%;
        top: .5em;
        flex-direction: row;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
    }

    main.dashboard-main aside nav.aside-nav-mobile-bottom-active{
        opacity: 1;
        visibility: visible;
    }

    main.dashboard-main aside nav.aside-nav-mobile-bottom button{
        background-color: var(--clr-light) !important   ;
        width: fit-content;
        box-shadow: var(--clr-rgba-gray-softer) 0 2px 100px 1px;
    }

    main.dashboard-main aside .aside-top-area{
        display: none;
    }

    main.dashboard-main aside nav .aside-open-parent .aside-open-child.aside-open-child-second{
        bottom: 50%;
        width: 100%;
    }
    
    main.dashboard-main aside nav .aside-open-parent .aside-open-child{
        left: 0 !important;
        bottom: 120%;
        width: 100%;
        top: inherit;
        display: block;
    }
    
    main.dashboard-main aside nav .aside-open-parent :is(.aside-open-child.show-aside-open-child, .aside-open-child.aside-open-child-second.show-aside-open-child-second){
    }
    
    main.dashboard-main aside nav .aside-open-parent .aside-open-child.show-aside-open-child{
        left: 0;
    }
    
    main.dashboard-main aside nav .aside-open-parent .aside-open-child.aside-open-child-second.show-aside-open-child-second{
        left: 0;
        z-index: 70;
        height: fit-content;
    }
}


section.panel-area{
    display: flex;
    flex-direction: column;
    align-self: stretch;
    align-items: start;
    justify-self: stretch;
    width: 100%;
    max-height: 100%;
    gap: 2em;
    overflow: auto;
    border-radius: var(--border-dashboard);
}

@supports(scrollbar-color: red blue){
    section.panel-area{
        scrollbar-color: transparent transparent;
        scrollbar-width: thin;
    }
  }

section.panel-area .panel-title{
    padding-top: 1em;
    padding-inline: 1em;
    gap: 2em;
}

section.panel-area .panel-title h1{
    font-weight: var(--fw-normal-bolder);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

section.panel-area .panel-title .user-info{
    gap: .5em;
}

section.panel-area .panel-title .user-info img{
    border-radius: 100vw;
    width: 2.3em;
    height: 2.3em;
    object-fit: cover;
}

section.panel-area .panel-title .user-info .user-info-txt-area{
    line-height: 1.2;
}

section.panel-area .panel-title .user-info .user-info-txt-area h6{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

section.panel-area .panel-title .user-info .user-info-txt-area span{
    justify-self: start;
    opacity: .5;
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal-bolder);
}

section.panel-area .panel-container{
    background-color: var(--clr-light);
    border-radius: var(--border-dashboard);
    box-shadow: var(--dashboard-box-shadow);
}

section.panel-area .input-area,
main.newInput .input-area{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    padding: 0;
    border: 2px solid var(--clr-rgba-gray-soft);
    border-radius: 100vw;
    overflow: hidden;
    width: 25em;
}

@media screen and (max-width: 515px){
    section.panel-area .input-area,
    main.newInput .input-area{
        width: 100% !important;
    }
}

section.panel-area .input-area input,
main.newInput .input-area input{
    --fs-xs: clamp(.8em, 4vw, .9em);
    border: 0;
    font-size: var(--fs-xs);
    width: 100%;
}

section.panel-area .input-area input::placeholder,
main.newInput .input-area input::placeholder{
    opacity: .6;
}

section.panel-area .input-area button,
main.newInput .input-area button{
    background-color: transparent;
}

section.panel-area .input-area button svg,
main.newInput .input-area button svg{
    transform: translateX(-5px);
}

section.panel-area .panel-container{
    display: grid;
    padding: 1.5em 1em;
    gap: 2.5em;
    box-shadow: var(--dashboard-box-shadow);
}

button.panelTitleBtn{
    position: relative;
    background-color: transparent;
    color: var(--clr-dark);
    font-weight: var(--fw-normal-bolder);
}

button.panelTitleBtn :is(p, svg){
    opacity: .7;
}

button.panelTitleBtn:hover{
    background-color: var(--clr-rgba-gray-softer);
}

@media screen and (min-width: 725px) and (max-width: 1066px){
    section.panel-area .panel-container .listing-panel-top button.panelTitleBtn p{
        position: absolute;
        top: 90%;
        left: 0;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
    }

    section.panel-area .panel-container .listing-panel-top button.panelTitleBtn:last-child p{
        right: 0;
        left: inherit;
    }
    
    section.panel-area .panel-container .listing-panel-top button.panelTitleBtn:hover p{
        top: 105%;
        opacity: .7;
        visibility: visible;
    }
}

@media screen and (max-width: 725px){
    section.panel-area .panel-container .listing-panel-top{
        display: grid;
        width: 100%;
        grid-template-columns: auto auto;
        grid-template-areas:
        'button1 button2'
        'input input';
        gap: 1.5em;
    }

    section.panel-area .panel-container .listing-panel-top button.panelTitleBtn{
        width: 100%;
    }

    section.panel-area .panel-container .listing-panel-top button.panelTitleBtn:nth-child(1){
        grid-area: button1;
    }

    section.panel-area .panel-container .listing-panel-top button.panelTitleBtn:nth-child(3){
        grid-area: button2;
    }
    
    section.panel-area .panel-container .listing-panel-top .input-area{
        grid-area: input;
        grid-column: span 2;
        width: 100%;
        max-width: 100% !important;
    }
}




section.panel-area .panel-list-container .panel-list-area{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px,1fr));
    place-items: center;
    gap: 2.5em 2em;
    padding-inline: 1em;
}

@media screen and (max-width: 555px){
    section.panel-area .panel-list-container .panel-list-area{
        grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
    }
}

section.panel-area .panel-list-container .panel-list-area .user-card{
    position: relative;
    justify-content: start;
    gap: 1em;
    width: 100%;
}

section.panel-area .panel-list-container .panel-list-area .user-card .pfp{
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 100vw;
    min-width: 74px;
    min-height: 74px;
    max-width: 74px;
    max-height: 74px;
}

section.panel-area .panel-list-container .panel-list-area .user-card .pfp img{
    border-radius: 100vw;
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-width: 74px;
    min-height: 74px;
    max-width: 74px;
    max-height: 74px;
}

section.panel-area .panel-list-container .panel-list-area .pfp button{
    position: absolute;
    background-color: var(--clr-light);
    border-radius: 100vw;
    box-shadow: var(--clr-rgba-gray-soft) 0 2px 5px 1px;
    padding: .4em;
    bottom: 0;
    right: 0;
}

section.panel-area .panel-list-container .panel-list-area .user-info{
    line-height: 1.2;
    justify-content: start;
    align-items: start;
}

section.panel-area .panel-list-container .panel-list-area .user-info h6{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

section.panel-area .panel-list-container .panel-list-area .user-info span{
    opacity: .7;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--fs-xs);
}

section.panel-area .panel-list-container .panel-list-area .user-info :is(p, span) svg{
    padding-right: .2em;
}

section.panel-area .panel-list-container .panel-list-area .user-info p{
    opacity: .55;
    font-size: var(--fs-xs);
}

/* --------------------- TEAM BLOCK -----------------------*/
section.panel-area .panel-list-container .panel-list-area .user-info span{
    display: flex;
    margin-top: .2em;
    justify-content: start;
    align-items: center;
    opacity: .6;
    font-weight: var(--fw-normal-bolder);
}

section.panel-area .panel-list-container .panel-list-area .user-info p{
    display: flex;
    justify-content: start;
    align-items: center;
    opacity: .6;
    font-weight: var(--fw-normal-bolder);
}
/*----------------------------------------------------------*/

section.panel-area .panel-list-container .panel-list-area button.dots{
    padding-inline: .5em 0;
    padding-top: .25em;
    padding-bottom: 1em;
    background-color: transparent;
}

@media screen and (max-width: 500px){
    section.panel-area .panel-list-container .panel-list-area .user-card .pfp img{
        min-width: 50px;
        min-height: 50px;
        max-width: 50px;
        max-height: 50px;
    }

    section.panel-area .panel-list-container .panel-list-area .user-card .pfp{
        min-width: 50px;
        min-height: 50px;
        max-width: 50px;
        max-height: 50px;
    }

    section.panel-area .panel-list-container .panel-list-area .pfp button{
        scale: .9;
        bottom: -7px;
        right: -7px;
    }
}


@media screen and (max-width: 400px){
    section.panel-area .panel-list-container .panel-list-area .user-card .pfp img{
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
    }

    section.panel-area .panel-list-container .panel-list-area .user-card .pfp{
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
    }

    section.panel-area .panel-list-container .panel-list-area{
        padding-inline: .5em;
    }
}


.manage-card-duyuru{
    position: relative;
}

.manage-card:not(.manage-card-duyuru){
    position: absolute;
    right: 0;
}

.manage-card .manage-card-container{
    position: absolute;
    top: -100%;
    right: 155%;
    background-color: var(--clr-light);
    z-index: 20;
    box-shadow: var(--clr-gray-much-softer) 0 2px 50px 3px;
    border-radius: var(--border-dashboard);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: .3s ;
}

.manage-card .manage-card-container.show-manage-card-container{
    visibility: visible;
    opacity: 1;
    right: 170%;
}

.manage-card button.manage-card-btn{
    background-color: transparent;
}

.manage-card .manage-card-container button{
    background-color: transparent;
    white-space: nowrap;
    color: var(--clr-gray);
    width: 100%;
    justify-content: start;
    border-radius: 0;
}

.manage-card .manage-card-container button:hover{
    background-color: var(--clr-rgba-gray-soft);
}

.manage-card .manage-card-container button.delete-acc-btn{
    color: var(--clr-red);
}

 .page-numbers-area{
    position: relative;
    margin-top: 1.5em;
}

 .page-numbers-area button{
    background-color: transparent;
    color: var(--clr-rgba-gray-much-darker);
    padding: .3em .8em;
}

 .page-numbers-area button:not(.active-page):hover{
    color: var(--clr-rgba-gray-darker-opacity);
}

 .page-numbers-area button.active-page{
    color: var(--clr-rgba-gray-darker-opacity);
    background-color: var(--clr-rgba-gray-softer);
}

 .page-numbers-area button.panel-btn-t{
    position: absolute;
    right: 0;
    padding-inline: 1em;
    top: 0;
}



.search-filter{
    position: fixed;
    display: grid;
    place-items: center;
    inset: 0;
    background-color: var(--clr-rgba-gray-much-darker);
    z-index: 60;
    visibility: hidden;
    opacity: 0;
    transition: .3s ;
}

.search-filter.show-search-filter{
    visibility: visible;
    opacity: 1;
}

.search-filter .search-filter-container{
    display: grid;
    gap: .5em;
    background-color: var(--clr-light);
    padding: 1.5em;
    padding-right: 2em;
    border-radius: var(--border-dashboard);
    width: 340px;
    min-width: fit-content;
    max-width: 95vw;
}

.search-filter .search-filter-container .filter-block{
    gap: 1em;
}

.search-filter .search-filter-container .filter-block .dropdown{
    width: 100%;
}

.search-filter .search-filter-container .filter-block .dropdown label p{
    opacity: .6;
}


/* ----------------------- PROFILE PAGE ------------------------*/
section.panel-area .profile-panel{
    padding: 1em;
    gap: 4em;
    padding-bottom: 3em;
}

section.panel-area .panel-container .profile-top .banner{
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden !important;
    border-radius: 11px;
    min-height: 7em;
    max-height: 7em;
    padding: .5em 1em;
}

section.panel-area .panel-container .profile-top .banner img{
    position: absolute;
    inset: 0;
    justify-self: center;
    align-self: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    border-radius: 11px;
    user-select: none;
}

section.panel-area .panel-container .profile-top .banner .banner-top{
    z-index: 3;
    align-items: flex-start;
    color: var(--clr-light);
    width: 100%;
}


@media screen and (max-width: 740px){
    section.panel-area .panel-container .profile-top .banner .banner-top{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
    }

    section.panel-area .panel-container .profile-top .banner .banner-top .statu{
        opacity: .8;
    }
}

section.panel-area .panel-container .profile-top .banner .banner-top button{
    padding: 0;
    background-color: transparent;
    
}

@keyframes hoppingButton {
    0%{
        scale: 1;
    }
    25%{
        scale: 1.04;
    }

    50%{
        scale: 1;
    }

    75%{
        scale: 1.04;
    }
    100%{
        scale: 1;
    }
}

section.panel-area .panel-container .profile-top .banner::after{
    content: '';
    opacity: .9;
    backdrop-filter: blur(100px);
    z-index: 2;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 11px;
}

section.panel-area .panel-container .profile-top .user-review{
    position: relative;
    margin-bottom: 3em;
}

section.panel-area .panel-container .profile-top .user-review .user-pfp-area{
    position: absolute;
    z-index: 5;
    left: 50%;
    transform: translateX(-50%);
    gap: 1em;
    color: var(--clr-dark);
}

section.panel-area .panel-container .profile-top .user-review .user-pfp-area{
    --fs-h6: clamp(.8em, 4vw, 1.2em);
}

section.panel-area .panel-container .profile-top .user-review .user-pfp{
    position: relative;
    display: grid;
    place-items: center;
    user-select: none;
}

section.panel-area .panel-container .profile-top .user-review .user-pfp img{
    border-radius: 100vw;
    /*box-shadow: var(--clr-rgba-gray-soft) 0 2px 50px 1px;*/
    min-width: 180px;
    min-height: 180px;
    max-width: 180px;
    max-height: 180px;
    object-fit: cover;
    border: 6px solid var(--clr-light);
}

section.panel-area .panel-container .profile-top .user-review .user-pfp button{
    position: absolute;
    bottom: .5em;
    right: .5em;
    background-color: var(--clr-light);
    border-radius: 100vw;
    padding: .5em;
    box-shadow: var(--clr-rgba-gray) 0 1px 5px 1px;
}

section.panel-area .panel-container .profile-top .user-review .user-pfp button:hover{
    background-color: var(--clr-gray-much-softer);
}

section.panel-area .panel-container .profile-top .user-review .user-pfp button:focus{
    scale: .85;
}

section.panel-area .panel-container .profile-top .user-review{
    padding: .5em 1em;
    color: var(--clr-gray);
}

section.panel-area .panel-container .profile-top .user-review span.onay{
    gap: .5em;
}

section.panel-area .panel-container .profile-top .user-review .user-info{
    text-align: end;
}

@media screen and (max-width: 740px){
    section.panel-area .panel-container .profile-top .user-review{
        justify-content: center;
        align-items: end;
        flex-direction: column;
    }

    section.panel-area .panel-container .profile-top .user-review span.onay{
        font-weight: var(--fw-normal-bolder);
    }

    section.panel-area .panel-container .profile-top .user-review span.onay svg{
        width: 1em;
    }

    section.panel-area .panel-container .profile-top .user-review .user-pfp-area{
        scale: .8;
        transform: translateX(-50%) translateY(-1.5em);
        left: 15%;
    }

    section.panel-area .panel-container .profile-top .user-review .user-pfp-area h6{
        --fs-h6: clamp(1em, 10vw, 1.4em);
    }

    section.panel-area .panel-container .profile-top .user-review{
        margin-bottom: 0;
    }
}

@media screen and (max-width: 550px){
    section.panel-area .panel-container .profile-top .user-review .user-pfp img{
        min-width: 150px;
        min-height: 150px;
        max-width: 150px;
        max-height: 150px;
    }
}

@media screen and (max-width: 420px){
    section.panel-area .panel-container .profile-top .user-review .user-pfp img{
        min-width: 120px;
        min-height: 120px;
        max-width: 120px;
        max-height: 120px;
    }
}

@media screen and (max-width: 370px){
    section.panel-area .panel-container .profile-top .user-review .user-pfp img{
        min-width: 100px;
        min-height: 100px;
        max-width: 100px;
        max-height: 100px;
    }
}

section.panel-area .panel-container span.area-title{
    --fs-m: clamp(1.2em, 4vw, 1.2em);
    --clr-gray: hsl(0, 0%, 32%);
    color: var(--clr-gray);
    font-weight: var(--fw-normal-bolder);
    font-size: var(--fs-m);
}

.profile-block{
    padding-inline: 1em;
    display: grid;
    gap: 1em;
}

@media screen and (max-width: 560px){
    .profile-block{
        padding-inline: 0;
    }
}

section.panel-area .panel-container .user-info-container,
section.panel-area .panel-container .user-team-area .team-infos-container,
.team-users-area{
    padding-inline: 1em;
}

.user-info-area{
    display: grid;
    place-items: center
}

.user-info-area span.area-title{
    justify-self: start;
}

section.panel-area .panel-container .user-info-container{
    justify-content: stretch;
    width: fit-content;
    display: flex;
    gap: 1em;
    width: 100%;
}

@media screen and (max-width: 975px){
    section.panel-area .panel-container .user-info-container{
        flex-direction: column;
    }
}

section.panel-area .panel-container .user-info-container .user-info-block{
    width: 100%;
}

section.panel-area .panel-container .user-info-container .user-info-block div{
    opacity: .6;
    justify-content: stretch;  
    transition: .3s;
    border: 0;
    padding-block: 0;
    justify-self: stretch;
    width: 100%;
    padding-left: .5em;
    gap: .5em;
}

section.panel-area .panel-container .user-info-container .user-info-block div svg{
    min-width: .8em;
    width: .8em;
}

section.panel-area .panel-container .user-info-container .user-info-block div p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

section.panel-area .panel-container .user-info-container .user-info-block div:hover{
    opacity: .8;
}

section.panel-area .user-info-area button.editbtn{
    margin-top: 1.2em;
}

button.panel-btn{
    --clr-rgba-gray-soft: rgba(0,0,0,0.085);
    --fs-main: clamp(.8em, 4vw, .9em);
    background-color: var(--clr-rgba-gray-soft);
    color: var(--clr-rgba-gray-darker-opacity);
    font-size: var(--fs-main);
    font-weight: var(--fw-normal-bolder);
    border: 1.5px solid #c7c7c792;
    padding: .35em 1.35em;
    justify-content: center;
}

button.panel-btn:is(:hover, :focus-visible){
    --clr-rgba-gray-soft: rgba(0,0,0,0.15);
}

button.panel-btn:focus{
    scale: .95;
}


section.panel-area .panel-container .user-team-area .team-infos-container{
    width: calc(100% - 40%);
}

section.panel-area .panel-container .user-team-area .team-infos-container .team-pfp{
    min-width: 4em;
    max-width: 4em;
    max-height: 4em;
    min-height: 4em;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--clr-rgba-gray-softer);
    border: 1.5px solid var(--clr-rgba-gray-soft);
}

section.panel-area .panel-container .user-team-area .competition-infos .team-pfp{
    border: 0;
    background-color: transparent;
}

section.panel-area .panel-container .user-team-area .team-infos .team-pfp img{
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
}

section.panel-area .panel-container .user-team-area .team-infos{
    gap: .7em;
}


section.panel-area .panel-container .user-team-area .team-infos span{
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: var(--fs-xs);
    opacity: .6;
    gap: .3em;
    line-height: 1;
}

section.panel-area .panel-container .user-team-area .team-infos h6{
    --fs-h6: clamp(1.2em, 4vw, 1.4em);
}

section.panel-area .panel-container .user-team-area .team-buttons-area{
    gap: .3em;
    align-self: end;
}

section.panel-area .panel-container .user-team-area .team-buttons-area button{
    font-size: var(--fs-xs);
    align-self: stretch;
    padding-block: .3em;
    width: fit-content;
}

section.panel-area .panel-container .user-team-area .team-buttons-area button.logoutBtn{
    padding-inline: 1em;
}

@media screen and (max-width: 580px){
    section.panel-area .panel-container .user-team-area .team-buttons-area{
        flex-direction: column-reverse;
    }

    section.panel-area .panel-container .user-team-area .team-buttons-area button{
        align-self: end;
    }

    section.panel-area .panel-container .user-team-area .team-buttons-area button.logoutBtn{
        padding: .5em .9em;
    }
}

section.panel-area .panel-container .user-team-area .team-buttons-area button.logoutBtn svg{
    transform: translateX(-2px);
}

@media screen and (max-width: 1066px){
    section.panel-area .panel-container .user-team-area .team-infos-container{
        width: 100%;
    }    
}


.profile-bottom-btns-area button.panel-btn-negative{
    --clr-red: hsl(0, 100%, 60%);
    border-color: var(--clr-red);
    background-color: var(--clr-red);
    color: var(--clr-light);
}

.profile-bottom-btns-area .flex-center{
    gap: .3em;
}


.team-profile-navs{
    margin-bottom: 1em;
}

.team-profile-navs button{
    background-color: transparent;
    color: var(--clr-gray);
}

.team-profile-navs button:hover{
    background-color: var(--clr-rgba-gray-softer);
}

.team-profile-navs button svg path{
    fill: var(--clr-gray);
}

@media screen and (min-width: 740px){
    .team-profile-leader{
        align-self: start;
    }

    .team-profile-leader,
    .team-profile-info{
        margin-top: .5em;
        opacity: .65;
        font-weight: var(--fw-normal-bolder);
        color: var(--clr-dark);
    }
}

.team-profile-info span{
    display: flex;
    gap: .3em;
    justify-content: end;
}

.team-profile-info span,
span.teamLeader{
    opacity: .6;
}

.team-profile-filter-area{
    display: flex;
    gap: .3em;
}

.team-profile-filter-area svg.teamFilterSVG,
.team-profile-filter-area .dropdown label{
    opacity: .7;
    color: var(--clr-dark);
}

.team-profile-filter-area .dropdown label{
    padding: 0;
    border: 0;
}

.team-profile-filter-area .dropdown .dropdown-items{
    background-color: var(--clr-light);
    gap: 0;
}

.team-users-area{
    margin-top: 1em;
    display: grid;
    gap: 2em;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

@media screen and (max-width: 500px){
    .team-users-area{
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

.team-profile-filter-area .dropdown span{
    white-space: nowrap;
    justify-content: start;
    color: var(--clr-gray);
}

.team-users-area .team-user-card .team-user-info-area{
    gap: .5em;
}

.team-users-area .team-user-card .team-user-info-area img{
    min-width: 2.5em;
    min-height: 2.5em;
    max-width: 2.5em;
    min-height: 2.5em;
    border-radius: 100vw;
}

.team-users-area .team-user-card .team-user-info-area .team-user-info-txt{
    line-height: 1.2;
}

.team-users-area .team-user-card .team-user-info-area .team-user-info-txt h6{
    --fs-h6: clamp(.9em, 4vw, 1.1em);
}

.team-users-area .team-user-card .team-user-info-area .team-user-info-txt p{
    --fs-xs: clamp(.7em, 4vw, .75em);
    font-size: var(--fs-xs);
    opacity: .6;
}

.team-users-area .team-user-card button.manageUser{
    background-color: transparent;
}

.duyuru-list-container{
    place-items: start;
    padding-inline: 1em;
    gap: 1.5em;
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
}

.duyuru-list-container .duyuru-card{
    gap: .5em;
    cursor: pointer;
}

.duyuru-list-container .duyuru-card .manage-card-btn{
    padding-right: .4em;
}

.duyuru-thumbnail{
    max-width: 100%;
    min-width: 100%;
    max-height: 7em;
    min-height: 7em;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-color: var(--clr-rgba-gray);
    transition: .3s;
}

.duyuru-list-container .duyuru-card:hover .duyuru-thumbnail{
    background-color: var(--clr-dark);
}

.duyuru-thumbnail::before{
    z-index: 1;
    --clr-rgba-gray-much-darker: rgba(0,0,0,0.80); 
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--clr-rgba-gray-much-darker);
    opacity: 0;
    transition: .3s;
}

.duyuru-list-container .duyuru-card:hover .duyuru-thumbnail::before{
    opacity: 1;
}

svg.duyuruThumbnailSVG{
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
    transition: .3s;
}

.duyuru-list-container .duyuru-card:hover svg.duyuruThumbnailSVG{
    opacity: 1;
    visibility: visible;
}

.duyuru-list-container .duyuru-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
}

.duyuru-list-container .duyuru-card .butonArea{
    justify-self: end;
}

.duyuru-list-container .duyuru-card p{
    padding-inline: .3em;
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal-bolder);
    opacity: .65;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}


.duyuru-olustur-icerik{
    align-items: start;
    gap: 2em;
}

.duyuru-olustur-icerik button.tumDuyurularBtn{
    color: #757575;
}

.duyuru-olustur-icerik textarea,
.duyuru-olustur-icerik .tox-tinymce,
.duyuru-olustur-icerik .file-area{
    width: 100%;
}

.duyuru-olustur-icerik .uploadFileBtn{
    border: 0 !important;
    justify-self: start;
}

.duyuru-olustur-input-area{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 20em;
    justify-content: space-between;
}

.duyuru-olustur-inputs button,
.panelInput,
label.customFile{
    padding: .6em 1em !important;
}

.panelInput{
    border: 2px solid var(--clr-rgba-gray) !important;
}

label.customFile {
    display: flex;
    justify-content: start;
    align-items: center;
    cursor: pointer;
    /* Style as you please, it will become the visible UI component. */
    border: 2px solid var(--clr-rgba-gray) !important;
    border-radius: .5em;
 }

 .duyuru-olustur-inputs .dropdown label p,
 label.customFile{
    color: #757575;
 }

 .duyuru-olustur-inputs .dropdown label svg path{
    fill: #757575;
 }

 label.customFile svg{
    margin-right: .5em;
 }
 
 #upload-photo {
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
 }

 .duyuru-olustur-inputs{
    gap: 1em;
 }

 .duyuru-olustur-inputs label.customFile,
 .duyuru-olustur-inputs .dropdown,
 .duyuru-olustur-inputs button,
 .duyuru-olustur-inputs .panelInput{
    width: 100%;
 }

 .duyuru-olustur-inputs .line-y{
    width: 2px;
    height: 1em;
    background-color: var(--clr-rgba-gray-soft);
 }

 .panel-btn-t{
    background-color: transparent;
    border: 0;
    color: var(--clr-dark);
    padding: .6em 1em;
 }
 
 .panel-btn-t:hover{
    background-color: var(--clr-rgba-gray-softer) !important;
 }

 @media screen and (max-width: 1080px){
    .duyuru-olustur-icerik textarea,
    .duyuru-olustur-icerik .tox-tinymce{
        height: 30em;
    }

    .duyuru-olustur-icerik{
        flex-direction: column;
    }
    
    .duyuru-olustur-input-area{
        width: 100%;
    }

    button.fullscreenBtn{
        margin-top: 5em;
    }
 }


 .search-filter-invite-member input{
    padding-block: .5em !important;
 }

 .search-filter-invite-member .input-block label{
    font-size: var(--fs-xs);
    opacity: .6;
    padding-inline: .3em;
 }

 .search-filter-invite-member button{
    margin-top: 1em;
    padding-block: .6em;
 }



 .panel-faturalar{
    position: relative;
   /*overflow: hidden;*/
   background: url('faturaBG.png');
   background-repeat: no-repeat;
   background-size: 100%;
 }
/*
 .panel-faturalar::before{
    content: '';
    position: absolute;
    top: -5em;
    left: -50%;
    width: 150%;
    height: 15em;
    filter: blur(50px);
    background-color: #3D40FF;
    opacity: .42;
 }*/

 .faturalar-area{
    grid-template-columns: auto auto;
    z-index: 2;
    padding: 2em 4em;
    gap: 1em;
    align-items: stretch;
 }
 
 .faturalar-area .fatura-container:nth-child(3){
    grid-column: span 2;
 }

 @media screen and (max-width: 1000px){
    .faturalar-area{
        grid-template-columns: auto;
     }
     
     .faturalar-area .fatura-container:nth-child(3){
        grid-column: span 1;
     }
 }

 @media screen and (max-width: 670px){
    .faturalar-area{
        padding-inline: 1em;
    }
 }

 .faturalar-area .fatura-container{
    position: relative;
    width: 100%;
    background-color: var(--clr-light);
    box-shadow: var(--clr-rgba-gray-soft) 0 2px 5px 1px;
    border-radius: var(--border-dashboard);
    padding: 1em;
    display: flex;
    justify-content: start;
    align-items: space-between;
    flex-direction: column;
    gap: .5em;
 }
 
 .faturalar-area .fatura-container .priceCardInfo{
    padding-inline: .3em;
 }

 .faturalar-area .fatura-container button.editPriceBtn{
    position: absolute;
    bottom: 1em;
    right: 1em;
 }
 
 .faturalar-area .fatura-container.fatura-container-top{
    align-items: start;
 }

 .faturalar-area .fatura-container h6{
    --fs-sm: clamp(.7em, 4vw, .85em);
    font-weight: var(--fw-normal-bolder);
    opacity: .8;
    font-size: var(--fs-sm);
 }

 .faturalar-area .fatura-container .dropdown{
    --fs-sm: clamp(.65em, 4vw, .7em);
    font-weight: var(--fw-normal-bolder);
    font-size: var(--fs-sm);
 }

 .faturalar-area .fatura-container .dropdown span{
    white-space: nowrap;
    color: var(--clr-gray);
    opacity: .8;
    justify-content: start;
 }

 .faturalar-area .fatura-container .price-area{
    max-width: fit-content !important;
    width: fit-content
 }

 .faturalar-area .fatura-container .price-area{
    --fs-xl: clamp(1.7em, 4vw, 2.5em);
    font-size: var(--fs-xl);
    font-weight: var(--fw-normal-bolder);
    font-weight: 510;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .2em;
 }

 .faturalar-area .fatura-container .priceNewArea{
    gap: .5em;
    transform: translateY(-5px);
 }

 .faturalar-area .fatura-container .priceUpArea{
    line-height: .5;
    align-items: flex-start;
    justify-content: flex-start;
 }

 .faturalar-area .fatura-container .priceUpArea small{
    --fs-xs: clamp(.6em, 4vw, .6em);
    font-size: var(--fs-xs);
    opacity: .8;
 }

 .faturalar-area .fatura-container .total-profit-area small{
    font-size: var(--fs-xs);
    opacity: .7;
 }

 .faturalar-area .fatura-container .total-profit-area p{
    font-weight: 510;
    font-size: var(--fs-main);
 }
 

 .container-checkbox {
    width: 100%;
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
  }
  
  /* On mouse-over, add a grey background color */
  .container-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .container-checkbox input:checked ~ .checkmark {
    background-color: #2196F3;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .container-checkbox input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .container-checkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .panel-qr-list-container{
    grid-template-columns: repeat(auto-fill, minmax(400px ,1fr));
    gap: 2em;
  }

  .panel-qr-list-container .qr-user-card{
    gap: 3.5em;
    cursor: pointer;
    transition: .3s;
    width: 100%;
  }

.panel-qr-list-container .qr-user-card:hover {
    transform: translateY(-5px);
}

  @media screen and (max-width: 1280px){
    .panel-qr-list-container .qr-user-card{
      max-width: 100%;
    }
  }

  .panel-qr-list-container .qr-user-card .qr-user-card-left{
    position: relative;
    background-color: var(--clr-rgba-gray-soft);
    border-radius: var(--border-dashboard);
    min-width: 10em;
    max-width: 10em;
    height: 15em;
  }

  .panel-qr-list-container .qr-user-card .qr-user-card-left img.qr-user-card-left-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-dashboard);
    z-index: 1;
  }

  .panel-qr-list-container .qr-user-card .qr-user-card-left::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: .9;
    backdrop-filter: blur(50px);
    width: 100%;
    height: 100%;
    border-radius: var(--border-dashboard);
  }

  .panel-qr-list-container .qr-user-card .qr-user-card-left svg.link-svg{
    position: absolute;
    top: .7em;
    z-index: 5;
    right: .7em;
  }

  .panel-qr-list-container .qr-user-card .qr-user-card-left .statu{
    --fs-xs: clamp(.7em, 4vw, .75em);
    font-size: var(--fs-xs);
    z-index: 5;
    position: absolute;
    bottom: 1em;
    left: 1em;
    color: var(--clr-light);
    line-height: 1.3;
  }

  .panel-qr-list-container .qr-user-card .qr-user-card-left img.user-pfp{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 140px;
    height: 140px;
    border-radius: 100vw;
    object-fit: cover;
    right: -3em;
    border: 5px solid var(--clr-light);
  }

  .panel-qr-list-container .qr-user-card .qr-user-card-right{
    gap: 1em;
    width: 100%;
  }

  .panel-qr-list-container .qr-user-card .qr-user-card-right h6{
    font-size: var(--fs-m);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .panel-qr-list-container .qr-user-card .qr-user-card-right img{
    min-width: 7em;
    max-width: 7em;
  }

  

  @media screen and (max-width: 700px){
    .panel-qr-list-container{
        grid-template-columns: repeat(auto-fill, minmax(100% ,1fr));
    }
    .panel-qr-list-container .qr-user-card{
        flex-direction: column;
        width: 100%;
        margin-bottom: 2em;
    }
    
    .panel-qr-list-container .qr-user-card .qr-user-card-left{
        min-width: 100%;
        max-width: 100%;
        height: 5em;
    }

    .panel-qr-list-container .qr-user-card .qr-user-card-left img.user-pfp{
        right: inherit;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }

    .panel-qr-list-container .qr-user-card .qr-user-card-left .statu{
        bottom: inherit;
        top: 1em;
    }
  }

  @media screen and (max-width: 563px){
    .panel-qr-list-container .qr-user-card .qr-user-card-left img.user-pfp{
        width: 100px;
        height: 100px;
    }

    .panel-qr-list-container .qr-user-card .qr-user-card-left svg.link-svg{
        width: 1.5em;
    }
  }

  .current-page{
    background-color: var(--clr-rgba-gray-softer) !important;
  }

  .current-page svg{
    fill: var(--clr-black);
  }

  .current-page svg path{
  }

  .payments-container{
    padding-inline: 2em !important;
  }

  .licanse-buy-cards-area{
    grid-template-columns: repeat(4, auto);
  }

  @media screen and (max-width: 1145px){
    .licanse-buy-cards-area{
        grid-template-columns: repeat(2, auto);
        gap: 2em 0;
      }
  }

  .licanse-container *{
    font-weight: var(--fw-normal) !important;
  }

  .licanse-container h6{
    opacity: .8;
  }

  .licanse-container small{
    font-size: var(--fs-xs);
font-weight: var(--fw-normal-bolder) !important;
opacity: .6;
  }

  .licanse-buy-cards-area .licanse-container button{
    margin-top: 1em;
    padding-block: .35em;
  }
 .no-licanse-alert{
    color: #ff0000;
  }

  .payments-container .line-text{
    justify-content: start;
    gap: 1em;
  }

  .payments-container .line-text h4{
    background-color: var(--clr-light);
    white-space: nowrap;
    
  }
  
  .payments-container .line-text .line-x{
    width: 100%;
    height: 1px;
    opacity: .9;
    background-color: var(--clr-rgba-gray-soft);
  }

  a.info-licanse-href{
    color: var(--clr-dark);
    text-decoration: none;
    font-weight: var(--fw-normal-bolder);
    opacity: .6;
  }

  .payments-container .active-license-container{
    box-shadow: var(--clr-rgba-gray-softer) 0 1px 5px 1px;
    border-radius: 20px;
    padding: 1.5em 2em;
    margin-inline: 2em;
  }

  .payments-container .active-license-container .active{
    color: rgb(0, 160, 0);
    background-color: rgba(0, 196, 0, 0.059);
    padding: .2em .6em;
    border-radius: 5px;
    font-size: var(--fs-xs);
  }

  @media screen and (max-width: 755px){
    .payments-container .active-license-container{
        gap: 1.5em;
        border-radius: 10px;
        margin-inline: 1em;
    }

    .payments-container .active-license-container .active-license-upper{
        flex-direction: column;
        align-items: start;
    }

    .payments-container .active-license-container .active-license-upper p{
        font-size: var(--fs-xs);
        opacity: .3;
    }
  }

  .payments-container .all-plans-txt{
    position: relative;
  }

  .payments-container .all-plans-txt::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--clr-rgba-gray-soft);
    left: 0;
    opacity: .7;
  }

  .payments-container .all-plans-txt p{
    background-color: var(--clr-light);
    padding-inline: 1em;
    z-index: 1;
    color: #999999;
  }

  .payments-container .payment-history{
    margin-top: 1em;
  }


  .talimatlarFilesArea {
    display: grid;
    grid-template-columns: repeat(auto-fit, 15em);
    justify-content: start;
    padding: 3em;
    gap: 2em;
    width: 100%;
  }

  @media screen and (max-width: 730px){
    .talimatlarFilesArea{
        justify-content: center;
        padding-inline: 0em;
    }
    
  }

  .talimatlarFilesArea .belgeCard{
    width: 15em;
    cursor: pointer;
  }

  .talimatlarFilesArea .belgeCard .belgeCardIMGArea{
    position: relative;
    width: 100%;
    border: 1px solid var(--clr-rgba-gray-soft);
    border-radius: 15px;
    display: grid;
    place-items: center;
    padding-block: 1.2em;
    transition: .3s;
  }

  .talimatlarFilesArea .belgeCard:hover .belgeCardIMGArea{
    background-color: var(--clr-rgba-gray-softer);
  }

  @media screen and (max-width: 490px){
    .talimatlarFilesArea .belgeCard{
        width: 100%;
      }
    
  }

  .talimatlarFilesArea .belgeCard .belgeCardIMGArea :is(.eye-btn, .manage-card){
    position: absolute;
  }

  .talimatlarFilesArea .belgeCard .belgeCardIMGArea .manage-card{
    top: .5em;
    right: 0;
  }

  .talimatlarFilesArea .belgeCard .belgeCardIMGArea .eye-btn{
    bottom: 0;
    right: 0;
    border-radius: 0;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 15px;
    padding: .5em .8em;
  }

  .talimatlarFilesArea .belgeCard .belgeCardInfoArea{
    line-height: 1.15;
    margin-top: .5em;
  }

  .talimatlarFilesArea .belgeCard .belgeCardInfoArea h6{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .9;
  }

  .talimatlarFilesArea .belgeCard .belgeCardInfoArea small{
    font-size: var(--fs-xs);
    opacity: .6;
  }

  .talimatlarTopArea{
    padding-inline: 1.5em;
  }

  @media screen and (max-width: 1330px){
    .talimatlarTopArea .grid-1{
        grid-area: grid-1;
        width: 100%;
        justify-content: center;
    }

    .talimatlarTopArea .grid-2{
        grid-area: grid-2;
        width: 100%;
        justify-content: center;
    }

    .talimatlarTopArea .dropdown,
    .talimatlarTopArea .belgeOlusturBTN{
        width: 100%;
    }

    .talimatlarTopArea .grid-3{
        grid-area: grid-3;
        width: 100%;
        justify-content: center;
        flex-direction: column-reverse;
    }
    .talimatlarTopArea{
        display: grid;
        place-items: center;
        justify-content: center;
        grid-template-areas:
        'grid-2'
        'grid-1'
        'grid-3';
        gap: 1em;
    }
  }