/* style.css */

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

body{
  background:#0f0f0f;
  color:white;
  font-family:Arial, sans-serif;

  /* jarak layar */
  padding:30px 18px 60px;
}

/* title */

.title{
  text-align:center;
  margin-bottom:45px;
  font-size:34px;
  font-weight:700;
  letter-spacing:1px;
}

/* gallery */

.gallery{
  display:grid;

  /* responsive */
  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

  /* jarak antar card */
  gap:40px;
}

/* card */

.card{
  background:#1a1a1a;

  border-radius:28px;

  overflow:hidden;

  border:1px solid #2a2a2a;

  transition:0.3s ease;

  /* jarak bawah */
  margin-bottom:10px;
}

.card:hover{
  transform:translateY(-6px);
}

/* image */

.card img{
  width:100%;

  height:380px;

  object-fit:cover;

  display:block;
}

/* content */

.content{

  /* biar lega */
  padding:28px;
}

.content h2{
  margin-bottom:20px;

  font-size:22px;

  font-weight:700;

  line-height:1.4;
}

/* open button */

.toggle-btn{
  width:100%;

  padding:15px;

  border:none;

  border-radius:16px;

  background:#2c2c2c;

  color:white;

  cursor:pointer;

  margin-bottom:20px;

  font-weight:600;

  font-size:15px;

  transition:0.25s ease;
}

.toggle-btn:hover{
  background:#3a3a3a;
}

/* hidden prompt */

.prompt-box{
  display:none;
}

/* prompt text */

.prompt{
  background:#111;

  padding:20px;

  border-radius:18px;

  line-height:1.9;

  color:#d0d0d0;

  margin-bottom:15px;

  font-size:14px;

  letter-spacing:0.3px;
}

/* copy button */

.copy-btn{
  width:100%;

  padding:15px;

  border:none;

  border-radius:16px;

  background:white;

  color:black;

  font-weight:700;

  cursor:pointer;

  transition:0.25s ease;
}

.copy-btn:hover{
  transform:translateY(-2px);
}

.copy-btn:active{
  transform:scale(0.97);
}

/* copied animation */

.copy-btn.copied{
  background:#22c55e;

  color:white;

  transform:scale(1.02);
}

/* mobile */

@media(max-width:600px){

  body{
    padding:25px 14px 60px;
  }

  .gallery{
    gap:35px;
  }

  .card{
    border-radius:24px;
  }

  .card img{
    height:340px;
  }

  .content{
    padding:24px;
  }

  .title{
    font-size:28px;
  }
}