/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); /* Mengimpor font Poppins dari Google Fonts */

/* Reset default margin, padding, dan box-sizing */
*{
  margin: 0; /* Menghapus margin default */
  padding: 0; /* Menghapus padding default */
  box-sizing: border-box; /* Mengatur ukuran elemen termasuk padding dan border */
  font-family: 'Poppins', sans-serif; /* Mengatur font default */
}

/* Styling untuk body */
body{
  display: flex; /* Menggunakan flexbox untuk mengatur tata letak */
  padding: 10px; /* Memberikan padding pada body */
  min-height: 100vh; /* Mengatur tinggi minimal 100% viewport */
  align-items: center; /* Memusatkan elemen secara vertikal */
  justify-content: center; /* Memusatkan elemen secara horizontal */
  background: #E3F2FD; /* Memberikan warna latar belakang */
}

/* Styling untuk container utama */
.container{
  width: 820px; /* Mengatur lebar container */
  padding: 30px 35px 35px; /* Memberikan padding di dalam container */
  background: #fff; /* Warna latar belakang */
  border-radius: 10px; /* Memberikan sudut melengkung */
  box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Memberikan efek bayangan */
}

/* Menonaktifkan beberapa elemen saat class .disable ditambahkan */
.container.disable .editor-panel,
.container.disable .controls .reset-filter,
.container.disable .controls .save-img{
  opacity: 0.5; /* Mengurangi transparansi elemen */
  pointer-events: none; /* Menonaktifkan interaksi pengguna */
}

/* Styling untuk judul container */
.container h2{
  margin-top: -8px; /* Mengatur margin atas */
  font-size: 22px; /* Ukuran font */
  font-weight: 500; /* Ketebalan font */
}

/* Styling untuk wrapper utama */
.container .wrapper{
  display: flex; /* Menggunakan flexbox */
  margin: 20px 0; /* Memberikan margin atas dan bawah */
  min-height: 335px; /* Mengatur tinggi minimal */
}

/* Styling untuk panel editor */
.wrapper .editor-panel{
  padding: 15px 20px; /* Memberikan padding */
  width: 280px; /* Lebar panel */
  border-radius: 5px; /* Sudut melengkung */
  border: 1px solid #ccc; /* Memberikan border */
}

/* Styling untuk label judul dalam editor panel */
.editor-panel .title{
  display: block; /* Membuat elemen tampil dalam satu baris penuh */
  font-size: 16px; /* Ukuran font */
  margin-bottom: 12px; /* Memberikan jarak bawah */
}

/* Mengatur elemen dengan class .options yang berada di dalam .editor-panel, serta elemen dengan class .controls */
.editor-panel .options, .controls{
  display: flex; /* Menggunakan model tata letak fleksibel untuk mengatur elemen secara responsif */
  flex-wrap: wrap; /* Memungkinkan elemen dalam baris baru jika tidak cukup ruang */
  justify-content: space-between; /* Menyebarkan elemen secara merata dengan ruang di antara mereka */
}

/* Styling untuk tombol dalam editor panel */
.editor-panel button{
  outline: none; /* Menghapus outline saat tombol diklik */
  height: 40px; /* Mengatur tinggi tombol */
  font-size: 14px; /* Ukuran font */
  color: #6C757D; /* Warna teks */
  background: #fff; /* Warna latar belakang */
  border-radius: 3px; /* Sudut melengkung */
  margin-bottom: 8px; /* Memberikan jarak antar tombol */
  border: 1px solid #aaa; /* Warna border */
}

/* Mengatur lebar tombol filter di dalam editor-panel agar setiap tombol memiliki lebar setengah dari parent dikurangi 4px untuk memberi jarak */
.editor-panel .options button{
  width: calc(100% / 2 - 4px);
}

/* Mengubah warna latar belakang tombol saat kursor hover untuk memberikan efek interaktif */
.editor-panel .options button:hover{
  background: #f5f5f5;
}

/* Mengatur tampilan tombol filter yang aktif dengan warna latar belakang dan border khusus */
.options button.active{
  color: #fff;
  border-color: #5372F0;
  background: #5372F0;
}
/* Menambahkan jarak atas pada slider dalam filter */
.filter .slider{
  margin-top: 12px;
}

/* Mengatur tampilan interaksi slider dengan flexbox agar teks sejajar di kedua ujung */
.filter .slider .filter-info{
  display: flex;
  color: #464646;
  font-size: 14px;
  justify-content: space-between;
}

/* Mengatur ukuran input slider agar penuh dalam container dan memberikan warna aksen */
.filter .slider input{
  width: 100%;
  height: 5px;
  accent-color: #5372F0;
}

/* Menambahkan jarak atas pada elemen rotate di dalam editor-panel */
.editor-panel .rotate{
  margin-top: 17px;
}

/* Mengatur tombol dalam rotate agar sejajar di tengah dengan flexbox dan memiliki lebar proporsional */
.editor-panel .rotate button{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 4 - 3px);
}

/* Mengatur ukuran icon pada tombol rotate ke-1 dan ke-4 untuk memperbaiki tampilan */
.rotate .options button:nth-child(1),
.rotate .options button:nth-child(4){
  font-size: 18px;
}

/* Mengubah warna tombol rotate saat diletakkan (active) untuk memberikan umpan balik visual */
.rotate .options button:active{
  color: #fff;
  background: #5372F0;
  border-color: #5372F0;
}

/* Mengatur tampilan preview gambar agar fleksibel, overflow tersembunyi, dan memiliki border radius */
.wrapper .preview-img{
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  margin-left: 20px;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
}

/* Styling untuk gambar pratinjau */
.preview-img img{
  max-width: 490px; /* Lebar maksimal gambar */
  max-height: 335px; /* Tinggi maksimal gambar */
  width: 100%; /* Lebar menyesuaikan container */
  height: 100%; /* Tinggi menyesuaikan container */
  object-fit: contain; /* Memastikan gambar tetap proporsional */
}

/* Styling untuk tombol dalam controls */
.controls button{
  padding: 11px 20px; /* Padding tombol */
  font-size: 14px; /* Ukuran font */
  border-radius: 3px; /* Sudut melengkung */
  outline: none; /* Menghapus outline */
  color: #fff; /* Warna teks */
  cursor: pointer; /* Mengubah kursor pointer */
  background: none; /* Tidak ada warna latar awal */
  transition: all 0.3s ease; /* Animasi transisi */
  text-transform: uppercase; /* Mengubah teks menjadi huruf besar */
}

/* Styling tombol Reset Filter */
.controls .reset-filter{
  color: #6C757D; /* Warna teks abu-abu */
  border: 1px solid #6C757D; /* Border abu-abu */
}

.controls .reset-filter:hover{
  color: #fff; /* Warna teks putih saat hover */
  background: #6C757D; /* Warna latar belakang abu-abu */
}

/* Styling tombol Pilih Gambar */
.controls .choose-img{
  background: #6C757D; /* Warna latar abu-abu */
  border: 1px solid #6C757D; /* Border abu-abu */
}

/* Styling tombol Simpan Gambar */
.controls .save-img{
  margin-left: 5px; /* Memberikan jarak dari tombol sebelumnya */
  background: #5372F0; /* Warna latar biru */
  border: 1px solid #5372F0; /* Border biru */
}

/* Media query untuk layar dengan lebar maksimal 760px */
@media screen and (max-width: 760px) {
  .container{
    padding: 25px; /* Menyesuaikan padding */
  }

  .container .wrapper{
    flex-wrap: wrap-reverse; /* Mengubah urutan elemen */
  }

  .wrapper .editor-panel{
    width: 100%; /* Menjadikan panel editor full width */
  }

  .wrapper .preview-img{
    width: 100%; /* Menjadikan gambar full width */
    margin: 0 0 15px; /* Memberikan jarak bawah */
  }
}

/* Media query untuk layar dengan lebar maksimal 500px */
@media screen and (max-width: 500px) {
  .controls button{
    width: 100%; /* Menjadikan tombol full width */
    margin-bottom: 10px; /* Memberikan jarak antar tombol */
  }

  .controls .row{
    width: 100%; /* Menyesuaikan lebar */
  }

  .controls .row .save-img{
    margin-left: 0px; /* Menghilangkan jarak kiri */
  }
}