/*--- 01 Typography System:

html : {
font-size : 62.5%;
}

FONT SIZE : 
- Normal Text : / 10 / 12 / 14 / 16 / 18 /
- Sub-Titles :  / 20 / 24 / 30 / 36 /
- Titles : / 44 / 52 / 62 / 74 / 86 / 98 /

 Font weights
- Default : 400
- Medium : 500
- Semi-bold : 600
- Bold : 700

  Line heights : 
- Default : 1 
- Small : 1.05
- Medium : 1.2
- Large : 1.8

- Paragraph default : 1.6   
- For small text, use line height of 1.5≥
- For titles or sub-titles, use line height of 1.5≤

Letter Spacing :
- 0.5px
- 0.75px


--- 02 Colors

- Brand color (Primary): 
- Tint : #f4f4f4, #e7f5ff
- Shades :  #0d0f10, #212529, #171a1d
- Accent : #228be6
- Greys : #495057, #868e96, #f1f3f5

--- 05 SHADOWS


--- 06 BORDER-RADIUS
Default : 9px
8px (Container etx)
4px (Img)


--- 07 WHITESPACE

- SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128


FONT-NAME? */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  /* DOESN'T WORK IN SAFARI, ETC */
  /* scroll-behavior: smooth; */
}

body {
  font-family: Rubik, sans-serif;
  line-height: 1;
  font-weight: 400;
  background-color: #212529;
  color: #555;
  display: grid;
  grid-template-columns: 1fr;
  /* Only works if there's nothing absolutely
  positioned in relation to body  */
  overflow-x: hidden;
}
/* ///////////////////// */
/* GENERAL-USE */
/* ///////////////////// */
.grid {
  display: grid;
  column-gap: 1.2rem;
  row-gap: 2.4rem;
}

.grid--1-cols {
  grid-template-columns: 1fr;
}
.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--4-cols {
  grid-template-columns: repeat(4, 1fr);
}

.grid--5-cols {
  grid-template-columns: repeat(5, 1fr);
}

.hidden {
  display: none;
}

/* ///////////////////// */
/* HEADER-SECTION */
/* ///////////////////// */
.header {
  background-color: #0d0f10;
  display: grid;
  grid-template-columns: 1fr;
}

.container {
  max-width: 90rem;
  margin: 0 auto;
}

.container-xl {
  max-width: 120rem;
  margin: 0 auto;
}

/* Header - ASIDE */
.aside {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  padding: 1.2rem 2.4rem;
  align-items: center;
  width: 100%;
}

.aside div:nth-child(2) {
  justify-self: end;
}

.aside-link {
  display: inline-block;
  color: #f4f4f4;
  text-decoration: none;
  font-size: 1.2rem;
}

.aside div a:first-child {
  margin-right: 1.6rem;
}

.lapor-link:link,
.lapor-link:visited,
.grup-fb:link,
.grup-fb:visited {
  background-color: #495057;
  padding: 0.6rem 1.2rem;
  transition: all 0.3s ease-in-out;
}

.lapor-link:hover,
.lapor-link:active,
.grup-fb:hover,
.grup-fb:active {
  background-color: #f4f4f4;
  color: #495057;
}

/* Header - LOGO */
.logo {
  background-color: #212529;
  padding: 1.8rem;
}
.logo img {
  height: 4.4rem;
}

/* Header - Navigation */
.navigation {
  border-bottom: 5px solid #228be6;
  background-color: #171a1d;
}

.navigation-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.navigation-bar {
  display: flex;
  list-style: none;
  color: #f4f4f4;
  font-size: 1.4rem;
}

.navigation-bar-active {
  background-color: #228be6;
}

.navigation-bar a:link,
.navigation-bar a:visited {
  padding: 1.6rem 1.6rem;
  display: inline-block;
  text-decoration: none;
  color: #f4f4f4;
  transition: all 0.3s ease-in-out;
}

.navigation-bar a:hover,
.navigation-bar a:active {
  background-color: #228be6;
}

.search-bar {
  display: block;
  text-align: left;
  padding: 0.8rem 1.2rem;
  max-width: 100%;
  border: none;
}

nav.navigation
  div.navigation-container
  ul.navigation-bar
  li
  a.nav-link.close-nav-link {
  display: none;
  border-radius: 1.1rem;
  color: #228be6;
  background-color: #f4f4f4;
  font-weight: 700;
}

/* MOBILE-NAV-INITIALIZATION */
.menu {
  border: none;
  background: none;
  cursor: pointer;

  display: none;
}

.btn-nav-icon {
  color: #f4f4f4;
  font-size: 3.6rem;
}

.btn-nav-icon[name="close-outline"] {
  display: none;
}

/* ///////////////////// */
/* MAIN-SECTION */
/* ///////////////////// */

.main-container {
  background-color: #171a1d;
  grid-template-columns: 5.5fr 2.5fr;
  padding: 1.6rem;
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
  border-radius: 0.8rem;
}

.anime-subheading {
  grid-column: span 2;
  border-radius: 0.4rem;
}

.anime-subheading {
  background-color: #228be6;
  text-align: center;
  color: #e7f5ff;
  padding: 1.2rem;
  font-size: 1.6rem;
}

.anime-current-status {
  display: flex;
  justify-content: space-between;
  background-color: #212529;
  padding: 0.8rem;
  align-items: center;
}

.anime-status,
.anime-check {
  color: #f4f4f4;
  text-decoration: none;
  font-size: 1.2rem;
}

.anime-check {
  display: inline-block;
  padding: 0.6rem;
  background-color: #228be6;
}

/* Ongoing anime */
.current-anime {
  padding: 0 1.2rem;
  margin-top: 3.2rem;
}

.anime {
  position: relative;
  overflow: hidden;
  border-radius: 0.4rem;
  aspect-ratio: 9/13;
  /* padding-bottom: 150%; */
  /* width dihitung oleh css nya sendiri karena kita menggunakan
  grid-template-columns: repeat (5, 1fr)
  
  Kita tinggal harus menentukan width nya, bisa dengan menggunakan
  padding, atau aspect ratio*/
}

.anime img,
.anime-details,
.anime-date,
.position-absolute-img {
  position: absolute;
  top: 0;
  left: 0;
}

.anime img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anime-details {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem;
  background-color: #0d0f10;
  filter: opacity(70%);
}

.anime-icon,
.anime-episodes,
.anime-date,
.anime-names {
  color: #f4f4f4;
  font-size: 1.4rem;
}

.anime-date {
  top: 2.8rem;
  font-size: 0.8rem;
  padding: 0.6rem;
  background-color: #0d0f10;
  filter: opacity(70%);
}

.anime-info {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  height: 15%;
  background-color: rgba(13, 15, 16, 0.5);
  padding-top: 0.3rem;
  padding-bottom: 0.8rem;
  text-align: center;
  bottom: 0;
  color: #f4f4f4;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.anime-names {
  line-height: 1.4;
  padding: 0 1.6rem;
}

.anime:hover .anime-info {
  height: 30%;
}

.anime img {
  transform: scale(1.2);
  transition: all 0.3s ease-in-out;
}
.anime img:hover {
  transform: scale(1);
}

/* Recommended anime */
.recommended-anime-container {
  margin-top: 6.4rem;
}

/* Aside section */
.additional-container {
  height: 100%;
  background-color: #f1f3f5;
  padding: 0.8rem;
  border-radius: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

aside img {
  border-radius: 0.4rem;
}

/* Anime movies */
.anime-movies {
  position: relative;
  height: 25%;
}

.anime-movies-recommended {
  row-gap: 0;
}

.anime-subheading {
  margin-bottom: 2.4rem;
}

.movie-container {
  position: relative;
  height: 100%;
}

.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all 0.3s ease-in-out;
}

.button {
  top: 30%;
  color: #f1f3f5;
  background-color: #228be6c2;
  position: absolute;
  height: auto;
  border: none;
  cursor: pointer;
  z-index: 1;
  padding: 0.8rem;
  border: none;
}

.previousBtn {
  left: 0;
}

.nextBtn {
  right: 0;
}

.btn-icon {
  font-size: 1.8rem;
}

.anime-movies-img {
  position: relative;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.anime-recommendations {
  display: flex;
  column-gap: 1.6rem;
}

.anime-recommended-img {
  position: relative;
  height: 100%;
  width: 100%;
  aspect-ratio: 9/16;
}

.recommended-anime-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25%;
  background-color: rgba(0, 0, 0, 0.562);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f4f4f4;
  transform: translateY(100%);
  transition: all 0.5s ease-in-out;
  line-height: 1.5;
  padding: 1.6rem;
}

.recommended-anime-name {
  font-size: 1.8rem;
  line-height: 1.2;
  text-align: center;
}
.recommended-anime-score {
  font-size: 1.6rem;
  color: #fee715;
}

.anime-upcoming-img {
  position: relative;
  aspect-ratio: 16/9;
}

.anime-recommended-img,
.anime-movies-img,
.anime-upcoming-img {
  overflow: hidden;
  border-radius: 4px;
}

.anime-movies-img img,
.anime-recommended-img img,
.anime-upcoming-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
}

.anime-recommended-img img,
.anime-movies-img img,
.anime-upcoming-img img {
  transform: scale(1.2);
  transition: all 0.3s ease-in-out;
}
.anime-recommended-img img:hover,
.anime-movies-img img:hover {
  transform: scale(1);
}

.upcoming-anime-info {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #0d0f10;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  transform: translateX(100%);
  transition: all 0.3s ease-in-out;
}

.anime-upcoming-img:hover .upcoming-anime-info {
  transform: scale(1);
  transform: translateX(0%);
}

.anime-recommended-img:hover .recommended-anime-info {
  transform: translateY(0%);
}

.anime-movies-img:hover .recommended-anime-info {
  transform: translateY(0%);
}

.anime-upcoming-name,
.anime-upcoming-release {
  text-align: center;
  color: #f4f4f4;
  font-size: 1.9rem;
}

.anime-upcoming-release span {
  color: #fee715;
}

/* /////// FOOTER-SECTION \\\\\\\\ */
.footer {
  background-color: #171a1d;
}

.footer-container {
  margin-top: 9.6rem;
  padding: 3.2rem 0rem;
}

.footer-header,
.footer-description {
  text-align: center;
  color: #f4f4f4;
}

.footer-header {
  font-size: 3.6rem;
  margin-bottom: 2.4rem;
  color: #228be6;
}

.footer-description {
  font-size: 1.6rem;
  line-height: 1.5;
}

.footer-social {
  display: flex;
  list-style: none;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 2.4rem;
}

.footer-social a:link,
.footer-social a:visited {
  font-size: 3.2rem;
  color: #f4f4f4;
  transition: all 0.3s ease-in-out;
}

.footer-social a:hover,
.footer-social a:active {
  font-size: 3.2rem;
  color: #228be6;
}

.footer-copyright {
  text-align: center;
  padding: 1.6rem 0;
}

/* TESTING */