:root {
  --background: rgb(20,20,24);
  --background-typo: #aaa;
  --bg-second: #2b2b2b;
  --bg-third: #232931;
  --color-main: #f1f1f1;
  --color-second: #1f1f1f;
  --color-fell: #0256d3;
  --color-stun: #3fe98f;
  --color-labor: #ff00ff;
  --color-shine: #fff;
  --color-dark: #000;
  --color-hover: #ffcc74;
  --color-hover-text: #1fad5c;

  --d-bg: #c7c7c7;
  --d-bgs: #f0f0f0;
  --d-eight: #181818;
  --d-cstun: #3fe98f;
  --d-cnorm: #2a2a2a;
  --d-cmain: #1c1c1c;
  --d-csecond: #d0d0d0;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: "Montserrat", sans-serif;
  background-color: var(--background);
  color: var(--color-main);
}

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: var(--sizeWidth);
  height: 60px;
  margin: 0 auto;
  background: var(--color-dark);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 2px 5px var(--color-stun);
  transition: 0.5s;
  z-index: 1000;
}
header.isticky {
  position: sticky;
}
header * {
  transition: 0.4s;
}

main.marg {
  margin-top: 90px;
}

section.falio {
  min-height: 90vh;
}
section.arievo {
  height: 800px;
  overflow-y: auto;
  overflow-x: hidden;
}

footer {
  background-color: var(--bg-second);
  padding: 45px 55px 20px;
  color: var(--color-shine);
}

a {
  color: var(--color-dark);
  font-weight: 500;
  text-decoration: none;
  transition: 0.1s;
}
a:hover {
  color: var(--color-hover-text) !important;
}

img {
  object-position: center;
  object-fit: cover;
}

/*    		KAYDIRMA  			    */
/******************************/
::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
::-webkit-scrollbar-track {
  background: var(--background-typo);
}
::-webkit-scrollbar-thumb {
  background: var(--color-stun);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-second);
}

/*    		ÖN TANIMLAR 		    */
/******************************/
.over {
	overflow: hidden;
}
.over-y {
	overflow-y: hidden;
  overflow-x: auto;
}
.over-x {
	overflow-x: hidden;
  overflow-y: auto;
}
.over-scroll {
	overflow: scroll;
}
.over-sy {
	overflow-y: scroll;
}
.over-sx {
	overflow-x: scroll;
}
.scroll-h {
  overflow-x: auto;
}

.fw-1 {
  font-weight: 100;
}
.fw-2 {
  font-weight: 200;
}
.fw-3 {
  font-weight: 300;
}
.fw-4 {
  font-weight: 400;
}
.fw-5 {
  font-weight: 500;
}
.fw-6 {
  font-weight: 600;
}
.fw-7 {
  font-weight: 700;
}
.fw-8 {
  font-weight: 800;
}

.fsz-02 {
  font-size: 8px !important;
}
.fsz-01 {
  font-size: 10px !important;
}
.fsz-0 {
  font-size: 12px !important;
}
.fsz-1 {
  font-size: 14px !important;
}
.fsz-2 {
  font-size: 16px !important;
}
.fsz-3 {
  font-size: 18px !important;
}
.fsz-4 {
  font-size: 20px !important;
}
.fsz-5 {
  font-size: 22px !important;
}
.fsz-6 {
  font-size: 24px !important;
}
.fsz-7 {
  font-size: 26px !important;
}

.ta-l {
  text-align: left;
}
.ta-c {
  text-align: center;
}
.ta-r {
  text-align: right;
}

.td-line {
  text-decoration: line-through;
  color: rgb(100, 100, 100);
}

.float-right {
  float: right;
}
.float-left {
  float: left;
}

.crs-pointer {
  cursor: pointer;
}

.poe-n {
  pointer-events: none;
}
.poe-a {
  pointer-events: all;
}

.c-main {
  color: var(--color-main) !important;
}
.c-shine {
  color: var(--color-shine) !important;
}
.c-stun {
  color: var(--color-stun) !important;
}
.c-fell {
  color: var(--color-fell) !important;
}
.c-second {
  color: var(--color-second) !important;
}
.c-labor {
  color: var(--color-labor) !important;
}

.bc-main {
  background-color: var(--color-main) !important;
}
.bc-shine {
  background-color: var(--color-shine) !important;
}
.bc-stun {
  background-color: var(--color-stun) !important;
}

/*    	     TOGGS  			    */
/******************************/
.toggs {
  position: relative;
  width: 74px;
  height: 36px;
  border-radius: 100px;
  background: gray;
  overflow: hidden;
}
.toggs input {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
.toggs .knobs {
  z-index: 2;
}
.toggs .knobs,
.toggs .layer {
  position: absolute;
  inset: 0;
}
.toggs .layer {
  width: 100%;
  background-color: #ebf7fc;
  transition: 0.3s ease all;
  border-radius: 100px;
  z-index: 1;
}
.toggs .knobs::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 90 448 512' width='18'%3E%3Cpath fill='black' d='M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V136zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z'/%3E%3C/svg%3E");
  position: absolute;
  top: 4px;
  left: 4px;
  width: 30px;
  height: 30px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03A9F4;
  border-radius: 50%;
  transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}
.toggs input:active + .knobs::before {
  width: 46px;
  border-radius: 100px;
}
.toggs input:checked:active + .knobs::before {
  margin-left: -26px;
}
.toggs input:checked + .knobs::before{
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 100 448 512' width='18'%3E%3Cpath fill='black' d='M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V136zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z'/%3E%3C/svg%3E");
  left: 42px;
  background-color: #F44336;
  transform: rotateZ(90deg);
}


/*    	     HEADER  			    */
/******************************/
:root {
  --sizeWidth: 80px;
  --sizeList: 400px;
  --sizeListH: 0px;
  --sizeBox: 45px;
}
header .logos {
  margin: 5px 15px;
  width: 50px;
  height: 50px;
  background: var(--color-dark);
  -webkit-text-fill-color: transparent;
}
header .logos:hover {
  animation: logoHover linear infinite 0.9s;
}
@keyframes logoHover {
  0% {
    background: var(--color-stun);
    border-radius: 50%;
  }
}
header .header-list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: var(--sizeListH);
  height: 120px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  z-index: -1;
}
header:hover .header-list {
  top: 10px;
  --sizeListH: var(--sizeList);
  left: calc((var(--sizeListH) / 2 - var(--sizeWidth) / 2) * -1);
}
header .header-list div {
  cursor: pointer;
  margin-top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  background: var(--color-shine);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  filter: drop-shadow(0 0 12px black);
}
header .header-list div:hover {
  background: var(--color-stun) !important;
}
header .header-list div i {
  color: var(--color-second);
}
header .header-list div img {
    max-height: 40px;
}
header:hover .header-list div {
  margin-top: var(--t);
  transform: rotateZ(var(--z));
  width: var(--sizeBox);
  height: var(--sizeBox);
}
header:hover .header-list div i {
  font-size: calc(var(--sizeBox) - 15px);
}
header .header-list div.sword-draw {
  background: var(--bg-second) !important;
}
header .header-list div.sword-draw i {
  color: var(--color-shine) !important;
}
header:hover .header-list div.sword-draw i {
  font-size: calc(var(--sizeBox) - 22px);
}
header:hover .header-list div.sword-draw img {
    transform: scale(0.7);
}

@media (max-width: 996px) {
  :root {
    --sizeList: 390px;
    --sizeBox: 50px;
  }

  header {
    top: unset !important;
    bottom: 0px !important;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 5px var(--color-stun);
  }
  header:hover .header-list {
    top: -10px;
  }
  header:hover .header-list div {
    margin-top: calc(var(--t) * -1);
  }
}
@media (max-width: 389px) {
  :root {
    --sizeList: 340px;
    --sizeBox: 45px;
  }
}
@media (max-width: 339px) {
  :root {
    --sizeList: 240px;
    --sizeBox: 35px;
  }
  header:hover .header-list div i {
    font-size: 20px;
    transform: rotateZ(calc(var(--z) * -1));
  }
}


/*    		   ROSE 	    	    */
/******************************/
:root {
  --rose-width: 400px;
  --rose-height: 400px;
}

rose {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
rose * {
  transition: 0.4s !important;
}
rose .rose-gen {
  position: relative;
  width: var(--rose-width);
  height: var(--rose-height);
}
rose .rose-raw {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  width: var(--rose-width);
  height: var(--rose-height);
  filter: drop-shadow(0 0 4px var(--color-shine));
}
rose .rose-gen .rose-raw::after {
  content: '1Layf Production';
  position: absolute;
  bottom: 0;
  font-size: 0;
  font-style: italic;
  font-weight: 700;
  transition: 0.6s;
}
rose .rose-gen:hover .rose-raw {
  filter: drop-shadow(0 0 10px var(--color-stun));
}
rose .rose-gen:hover .rose-raw::after {
  bottom: -60px;
  font-size: 26px;
}
rose .rose-raw.rose-scene {
  transform: scale(0);
}
rose .rose-raw img {
  width: 65%;
}
rose .rose-gen:hover .rose-raw img {
  width: 52% !important;
}

rose .rose-menu {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%) scale(0);
  display: block;
  width: 100%;
  height: 100%;
}
rose .rose-shift {
  position: absolute;
  top: var(--t);
  left: var(--l);
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-main);
  border-radius: 40%;
  filter: drop-shadow(0 0 8px var(--color-shine));
  text-align: center;
  cursor: pointer;
}
rose .rose-shift i {
  font-size: 40px;
  color: var(--color-dark);
}
rose .rose-shift img {
  max-height: 52px;
}
rose .rose-gen:hover .rose-menu {
  transform: translate(-50%, 50%) scale(1);
}
rose .rose-shift:hover {
  background: var(--d-cstun) !important;
  filter: drop-shadow(0 0 8px var(--d-cstun)) !important;
}
rose .rose-shift:hover i {
  color: var(--color-shine);
}

/*    		   darken    		    */
/******************************/
:root {
  --sword-height: 2000px;
}

darken {
  background: var(--background);
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}
darken.darken-vision {
  left: 0;
}
darken * {
  transition: 0.35s cubic-bezier(0, 0, 0.5, 1.35);
}

darken sword {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 0;
  padding: 0;
  overflow: hidden;
}
darken sword.sword-draw.sword-fill {
  padding: 10px;
}
darken sword.sword-draw {
  min-height: 100vh;
  overflow-y: auto !important;
  padding: 15px 30px;
}

@media (max-width: 996px) {
}

/*    		   cinta    		    */
/******************************/
sword .cinta {
  border-bottom: 2px solid lime;
  border-radius: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background: rgb(240, 240, 240);
  color: var(--color-second);
  box-shadow: 0 0 10px rgba(255, 240, 100, 0.8);
}
sword .cinta .cinta-logo {
  overflow: hidden;
  width: 64px;
  height: 64px;
  background: rgba(20, 20, 20, 0.6);
  border: 3px solid black;
  border-radius: 50px;
}
sword .cinta .cinta-logo img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}
sword .cinta h3 {
  font-weight: 800;
  font-style: italic;
}
sword .cinta .carousel {
  position: relative;
  width: 90%;
  aspect-ratio: 1.75/1;
  overflow: hidden;
  border: 8px solid rgba(180, 180, 180, 0.7);
  border-radius: 15px;
}
sword .cinta .carousel .carousel-inner {
  height: 100%;
  width: 100%;
}
sword .carousel .carousel-item {
  position: relative;
  width: 100%;
  height: 100%;
}
sword .carousel .carousel-item-next,
sword .carousel .carousel-item-prev,
sword .carousel .carousel-item.active {
  display: flex;
  justify-content: center;
  align-items: center;
}
sword .cinta .carousel img {
  position: relative;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/*    		   castle    		    */
/******************************/
sword .castle {
  position: relative;
  background: var(--bg-second);
  box-shadow: 0 4px 4px rgba(15, 15, 15, 0.6);
  border-radius: 8px;
  border-top: 3px solid lime;
  padding: 20px 16px;
}
sword .castle .castle-logo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  padding: 8px;
  background: rgba(60, 40, 60, 0.8);
}
sword .castle .castle-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
sword .castle h3 {
  font-weight: 800;
  font-style: italic;
  border-bottom: 2px solid white;
  color: var(--color-main);
}
sword .castle p {
  font-size: 15px;
  font-weight: 500;
  color: rgb(160, 190, 220);
}
sword .castle .carousel {
  position: relative;
  width: 90%;
  aspect-ratio: 2/1;
  max-height: 400px;
  border: 6px solid rgba(230, 230, 230, 0.4);
  border-radius: 14px;
}
sword .castle .carousel .carousel-inner {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 16px;
}
sword .castle .carousel .carousel-item {
  position: relative;
  width: 100%;
  height: 100%;
}
sword .castle .carousel img {
  position: relative;
  width: 100%;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 996px) {
  sword .castle .carousel img {
    aspect-ratio: 1.5/1;
  }
}

sword .sorcress-play {
  width: 20%;
  aspect-ratio: 1/1;
  margin: 10px 2.5%;
  cursor: pointer;
}
sword .sorcress {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border-radius: 14px;
  background: linear-gradient(240deg, rgba(42,254,142,1) 32%, rgba(255,0,232,1) 100%);
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  transition: 0.25s ease-in;
}
sword .sorcress-play:hover .sorcress {
  border-radius: 7px;
  clip-path: polygon(50% 100%, 50% 100%, 100% 0, 0 0);
  background: radial-gradient(circle, rgba(150,150,150,1) 0%, rgba(250,250,250,1) 100%);
}
sword .sorcress img {
  width: 60%;
}
sword .sorcress-play:hover .sorcress img {
  width: 50%;
  transform: translateY(-50px);
}

@media (max-width: 996px) {
  sword .sorcress-play {
    width: 40%;
    margin: 10px 5%;
  }
  sword .sorcress-play:hover .sorcress img {
    width: 45%;
    transform: translateY(-40px);
  }
}

/*    		   sequence 		    */
/******************************/
sword .sequence {
  width: 100%;
  border-bottom: 2px solid white;
}
sword .sequence h3 {
  color: var(--color-main);
}
sword .sequence .sequence-amblem {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1/1;
  background: var(--color-shine);
  border-radius: 24px;
}
sword .sequence .sequence-amblem i {
  color: var(--color-dark);
  font-size: 60px;
}
sword .sequence .sequence-tree {
  position: relative;
  color: var(--color-second);
  font-weight: 600;
  border-radius: 10px;
}
sword .sequence .sequence-tree .sequence-root {
  background: var(--color-shine);
  border-radius: 18px;
}
sword .sequence .sequence-tree .sequence-root a {
  color: var(--color-dark) !important;
} var(--d-csecond) !important;


@media (max-width: 996px) {
  sword .sequence .sequence-amblem i {
    font-size: 50px;
  }
}

/*    		   CAROUSEL 		    */
/******************************/
#carouselShows {
  background: rgba(180, 180, 180, 0.4);
  border-radius: 7px;
  padding: 15px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
#carouselShows * {
  border-radius: 7px 7px 0 0;
}
#carouselShows img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  object-position: center;
}
#carouselShows .carousel-caption {
  background: rgba(0, 0, 0, 0.4);
}

@media (max-width: 996px) {
  #carouselShows {
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }
  #carouselShows img {
    height: 450px;
  }
  #carouselShows .carousel-caption {
    left: 5%;
    right: 5%;
  }
}

/*    		   DRAGEN 		      */
/******************************/
dragen {
  display: block;
  position: relative;
  overflow: hidden;
}
dragen .dragen-amblem {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: wrap;
}
dragen .dragen-amblem-right {
  flex-direction: row-reverse;
}
dragen .dragen-sign {
  width: 25%;
  background: var(--background);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 5px var(--color-stun));
}
dragen .dragen-amblem-right .dragen-sign {
  transform: translateX(50%);
}
dragen .dragen-sign i {
  font-size: 80px;
  transform: translateX(50px);
  color: red;
  filter: drop-shadow(0 0 5px red);
}
dragen .dragen-amblem-right .dragen-sign i {
  transform: translateX(-50px);
}
dragen .dragen-culture {
  width: 75%;
  transform: translateX(calc(25% / 2.8 * -1));
}
dragen .dragen-amblem-right .dragen-culture {
  transform: translateX(calc(25% / 2.8));
}
dragen .dragen-cast {
  border-bottom: 2px solid var(--color-shine);
  border-radius: 0 0 15px 15px;
  padding: 0 10px;
  margin-bottom: 50px;
  margin-left: var(--ml);
  background: rgba(240, 240, 240, 0.05);
}
dragen .dragen-amblem-right .dragen-cast {
  margin-left: unset !important;
  margin-right: var(--ml);
}

@media (max-width: 996px) {
  dragen .dragen-sign {
    width: 10%;
  }
  dragen .dragen-sign i {
    font-size: 40px;
    transform: rotateZ(90deg) translateY(-30px);
  }
  dragen .dragen-amblem-right .dragen-sign i {
    transform: rotateZ(270deg) translateY(-30px) !important;
  }
}

/*    		  TIMELINE			    */
/******************************/
timeline {
  font-family: "PT Sans", sans-serif;
  position: relative;
  background: var(--bg-third);
  display: block;
  width: 100%;
  box-shadow: 2px 5px 20px rgba(120, 120, 120, 0.4);
  border-radius: 10px;
}
timeline ul.time {
  position: relative;
  margin: 2.5em 0 0 0;
  padding-left: 50px;
  display: inline-block;
}
timeline ul.time pancake {
  position: absolute;
  display: block;
  width: 6px;
  top: 0;
  left: 47.5px;
  background: var(--color-stun);
  max-height: 50px;
  z-index: 1;
  border-radius: 10px;
}
timeline ul.time li {
  list-style: none;
  min-height: 50px;
  border-left: 1px dashed var(--color-shine);
  padding: 0 0 50px 30px;
  position: relative;
}
timeline ul.time li:last-child {
  border-left: 0;
}
timeline ul.time li::before {
  content: '';
  position: absolute;
  left: -18px;
  top: -5px;
  border: 6px solid var(--color-shine);
  border-radius: 50%;
  background: var(--color-stun);
  height: 20px;
  width: 20px;
  transition: 0.2s ease-in-out;
  z-index: 2;
}
timeline ul.time li:hover::before {
  border-color: var(--bg-third);
  transition: 0.8s ease-in-out;
}
timeline ul.time li .timestamp {
  color: var(--color-stun);
  position: relative;
  width: 100px;
  font-size: 12px;
}
timeline ul.time li .item-title {
  color: var(--color-shine);
}

@media (max-width: 996px) {
  timeline ul.time {
    padding-left: 30px;
  }
  timeline ul.time pancake {
    left: 27.5px;
  }
}

/*    		   CONTACT 		      */
/******************************/
sword img.logoPurse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
sword.sword-draw img.logoPurse {
  animation: animPurse linear infinite 2s;
}
@keyframes animPurse {
  50% {
    opacity: 0;
  }
}

.contactus {
  position: relative;
  height: 90%;
  justify-content: center;
  z-index: 2;
}
.contactus label {
  color: var(--color-stun);
}
.contactus input,
.contactus textarea {
  border-radius: 16px;
  background: var(--bg-third);
  color: var(--color-main);
  font-weight: 600;
  border: 1px solid var(--color-shine);
  box-shadow: 0 0 0 transparent;
  transition: 0.6s ease-in;
}
.contactus input:hover,
.contactus input:focus,
.contactus textarea:hover,
.contactus textarea:focus {
  background: var(--bg-third);
  color: var(--color-main);
  border: 1px solid var(--color-stun) !important;
  box-shadow: 0 3px 4px var(--color-stun);
}
.contactus input::placeholder {
  color: rgba(240, 240, 240, 0.4);
}
.contactus input:-ms-input-placeholder {
  color: rgba(240, 240, 240, 0.4);
}
.contactus input::-ms-input-placeholder {
  color: rgba(240, 240, 240, 0.4);
}


@media (max-width: 996px) {
  .contactus {
    justify-content: start;
  }
}

/*    		    WORKING  		    */
/******************************/
.working {
    position: relative;
    margin-top: 150px;
    width: 90%;
    min-height: 60%;
    border-radius: 8px;
    background: var(--color-main);
    color: var(--color-second);
    filter: drop-shadow(0 0 15px white) blur(5px);
}
.working i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
}

/*    		    FOOTER  		    */
/******************************/
.foot-button {
  padding: 8px 25px;
  border: 1px solid var(--color-shine);
  border-radius: 50px;
  color: var(--color-shine);
  background-color: transparent;
}
.foot-button:hover {
  color: white;
  background-color: var(--color-hover);
  transition: ease 0.5s;
}

.foot-links {
  color: var(--color-shine);
  text-align: right;
  font-size: 20px;
  font-weight: 600;
}

@media (max-width: 996px) {
  footer {
    padding: 35px 20px 10px;
  }
  .foot-links {
    text-align: left;
  }
}

/*    		  LOGINATOR			    */
/******************************/
loginator {
  position: fixed;
  top: -180%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  object-position: center;
  width: 450px;
  background: var(--color-shine);
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  transition: 0.4s;
}
loginator.online {
  top: 160px;
}
loginator * {
  transition: 0.4s;
}
loginator button {
  background: transparent;
  border: 1px solid #111;
  border-radius: 5px;
  width: 290px;
  height: 34px;
}
loginator button.loginati {
  background: #111;
  color: #eee;
}
loginator .prv {
  cursor: pointer;
  color: var(--color-fell);
}
loginator .prv:hover {
  color: var(--color-main);
}

@media (max-width: 996px) {
  loginator {
    width: 360px;
  }
}

/*    		 BARG/BARK  	       */
/******************************/
.meow {
  position: relative;
  display: block;
  border: 1px solid var(--color-stun);
  color: var(--color-hover-text);
  border-radius: 20px;
  padding: 9px 0;
  text-align: center;
  transition: 0.2s;
  font-weight: 700;
  box-shadow: 0 4px 4px rgba(40, 240, 50, 0.4);
}
.meow:hover {
  color: var(--color-second);
}
.meow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  border-radius: 20px 0 0 20px;
  display: block;
  background: var(--color-stun);
  z-index: -1;
  transition: 0.4s ease-in;
}
.meow:hover::before {
  width: 100%;
  border-radius: 20px;
}

.barg {
  position: relative;
  border: 1px solid var(--color-shine);
  border-radius: 20px;
  width: 120px;
  display: block;
  padding: 6px 0;
  text-align: center;
  transition: 0.2s;
  font-weight: 700;
}
.barg:hover {
  background-color: var(--color-dark) !important;
  color: var(--color-shine) !important;
}
.barg.barg-login:hover {
  background-color: #02dfb2 !important;
  color: #444 !important;
}
.barg.barg-register:hover {
  background-color: #13f013 !important;
}

.bark {
  position: relative;
  display: block;
  border: none;
  border-radius: 3px 3px 0 0;
  width: 200px;
  padding: 7px 0;
  text-align: center;
  transition: 0.2s;
  font-size: 15px;
  font-weight: 700;
  background: var(--color-shine);
  color: var(--color-second);
  cursor: pointer;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
.bark::before {
  content: '';
  position: absolute;
  bottom: -4px;
  height: 4px;
  left: 0;
  width: 4px;
  border-radius: 0 0 3px 3px;
  background: var(--color-stun);
  transition: 0.2s;
}
.bark.bark-long {
  width: 320px;
  padding: 9px 0;
}
.bark.bark-stun {
  background: var(--color-stun);
}
.bark:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  background: #eee;
}
.bark:hover::before {
  width: 100%;
}

/*    		pin                */
/******************************/
.pin-top span {
    display: block;
    margin: 0 15px;
    border: 2px solid white;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    box-shadow: 0 0 10px limegreen;
    text-align: center;
    font-size: 0;
    font-weight: 900;
    transition: 0.3s;
}
.pin-top span.pinned {
    background: white;
}
.pin span {
    display: block;
    width: calc((100% / 3) - (5px * 3));
    aspect-ratio: 1;
    background: white;
    color: black;
    font-weight: 900;
    font-size: 3em;
    margin: 10px auto;
    cursor: pointer;
    text-align: center;
    border-radius: 12px;
    border: 2px solid purple;
    box-shadow: 0 0 20px purple;
}
.pin span.pin-f {
    display: block;
    width: calc(100% - 40px);
    aspect-ratio: auto !important;
    height: 80px;
}

/*    		EK İÇERİKLER		    */
/******************************/
#tpscrol {
  z-index: 99;
  right: 20px;
  width: 52px;
  height: 52px;
  bottom: 20px;
  border: none;
  outline: none;
  display: none;
  position: fixed;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--bg-second);
}
#tpscrol:hover {
  background-color: var(--color-hover);
}
#tpscrol img {
  width: 18px;
  margin-left: 0.125rem;
  margin-bottom: 0.25rem;
}

.toast {
  background: transparent;
  border: none !important;
}
.toast-header {
  color: var(--color-main);
  background-color: var(--bg-third);
  border-bottom: none !important;
  border-radius: 15px 15px 0 0;
}
.toast-body {
  background: var(--bg-second);
  border-radius: 0 0 12px 12px;
  color: var(--color-main);
}
.toast button {
  color: var(--color-main);
}
.toast button:focus,
.toast button:hover {
  box-shadow: none !important;
  border: none !important;
}

loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 100000;
  color: white;
}

notifer {
  position: fixed;
  display: block;
  padding: 20px 24px;
  top: -100%;
  left: 50%;
  transform: translate(0, 0);
  width: 60%;
  min-height: 300px;
  background: var(--bg-third);
  box-shadow: 0 4px 4px rgba(10, 10, 10, 0.4);
  border-radius: 8px;
  transition: 0.4s ease-in;
}
notifer.notify {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
notifer h3 {
  border-bottom: 3px solid white;
}
notifer p {
  color: rgb(170, 200, 170);
}

@media (max-width: 996px) {
  h2.auto {
    font-size: 18px;
  }
  notifer {
    width: 90%;
  }
}