/* ====== Perus ====== */
body {
  margin: 0;
  font-family: "Georgia", serif;
  background-image: url('taustakuva2.jpg'); /* Korvaa polku oikealla taustakuvalla */
  background-repeat: repeat;
  background-size: 200px 200px;
  background-position: center;
  background-attachment: fixed;
  color: #f5e6c8;
}

/* ====== Topbar ====== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  border-bottom: 2px solid #c8a85a;
  background: linear-gradient(90deg, #0a0a0a, #1a1a1a);
}

.logo {
  font-size: 28px;
  letter-spacing: 4px;
  color: #d4af37;
  font-weight: bold;
}

.logo span {
  color: #fff;
}

#searchInput {
  width: 300px;
  padding: 10px;
  border: 1px solid #c8a85a;
  background: #111;
  color: #fff;
  outline: none;
}

/* ====== Otsikot ====== */
h2 {
  margin: 30px 40px 10px;
  font-size: 22px;
  color: #d4af37;
  border-left: 4px solid #c8a85a;
  padding-left: 10px;
}

.logo::first-letter {
  color: #ff0000;
  font-weight: bold;
  text-shadow: 0 0 8px #ff0000;
}

/* ====== Grid ====== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
  padding: 20px 40px;
}

/* ====== Kortit ====== */
.card {
  background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
  border: 1px solid #c8a85a55;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #c8a85a55;
}

.card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom: 1px solid #c8a85a55;
}

.card .info {
  padding: 10px;
}

.card .title {
  font-size: 14px;
  color: #f5e6c8;
}

.card .year {
  font-size: 12px;
  color: #c8a85a;
}

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.modal-content {
  width: 80%;
  max-width: 900px;
  border: 2px solid #c8a85a;
  box-shadow: 0 0 30px #000;
  background: #000;
}

.modal-content iframe {
  width: 100%;
  height: 500px;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}

.navButtons{
    display:flex;
    justify-content:center;
    gap:20px;
    margin:20px 0;
}

.navButtons button{
    background:linear-gradient(180deg,#2a2a2a,#111);
    color:#d4af37;
    border:2px solid #d4af37;
    padding:12px 34px;
    font-size:16px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:0.3s ease;
    box-shadow:
        0 0 0 1px rgba(212,175,55,.25),
        0 0 12px rgba(212,175,55,.15);
}

.navButtons button::before{
    content:"";
    position:absolute;
    inset:4px;
    border:1px solid rgba(212,175,55,.5);
    pointer-events:none;
}

.navButtons button:hover{
    background:#d4af37;
    color:#111;
    box-shadow:
        0 0 18px rgba(212,175,55,.5),
        0 0 35px rgba(212,175,55,.25);
    transform:translateY(-2px);
}

.navButtons button:active{
    transform:translateY(1px);
}

.carousel{
    position:relative;
    display:flex;
    align-items:center;
}

.carouselTrack{
    display:flex;
    gap:20px;

    overflow-x:auto;
    scroll-behavior:smooth;

    scrollbar-width:none;
}

.carouselTrack::-webkit-scrollbar{
    display:none;
}

.carouselTrack .card{
    flex: 0 0 160px;
}

.carouselBtn{
    width: 50px;
    height: 80px;

    border: none;
    border-radius: 8px;

    background: rgba(0,0,0,.6);
    color: white;

    font-size: 30px;
    cursor: pointer;

    transition: .2s;
}

.carouselBtn:hover{
    background: rgba(0,0,0,.9);
}

#latestPrev{
    left:10px;
}

#latestNext{
    right:10px;
}

#infoPoster {
    width: 180px;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 0 auto 20px;
}

.extraBtn {
    display: block;
    width: 90%;
    margin: 10px 0;
    padding: 12px 18px;
    margin-left: 45px;

    background: linear-gradient(180deg, #2f2618, #1b1813);
    color: #d8b15a;

    border: 2px solid #b38b3d;
    border-radius: 0;

    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;

    cursor: pointer;
    transition: all .25s ease;
}

.extraBtn:hover {
    background: linear-gradient(180deg, #b38b3d, #8c6b2e);
    color: #111;
    box-shadow: 0 0 12px rgba(211,175,55,.45);
}

.extraBtn:active {
    transform: scale(.98);
}

.primaryBtn {
    background: linear-gradient(180deg, #b38b3d, #8c6b2e);
    color: #111;
    font-weight: 700;
    box-shadow: 0 0 14px rgba(211,175,55,.35);
}

.primaryBtn:hover {
    background: linear-gradient(180deg, #d8b15a, #b38b3d);
    box-shadow: 0 0 18px rgba(211,175,55,.55);
}

.close-info {
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;

    position: absolute;
    top: 12px;
    right: 16px;

    line-height: 1;
}

.button {
        background:linear-gradient(180deg,#2a2a2a,#111);
        color:#d4af37;
        border:2px solid #d4af37;
        padding:12px 34px;
        font-size:16px;
        font-weight:600;
        letter-spacing:3px;
        text-transform:uppercase;
        cursor:pointer;
        position:relative;
        overflow:hidden;
        transition:0.3s ease;
        box-shadow:
            0 0 0 1px rgba(212,175,55,.25),
            0 0 12px rgba(212,175,55,.15);
}

.button:hover {
    background:#d4af37;
    color:#111;
    box-shadow:
        0 0 18px rgba(212,175,55,.5),
        0 0 35px rgba(212,175,55,.25);
    transform:translateY(-2px);
}

/* =========================
   ART DECO FILTERS
========================= */

.filters {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 25px 15px;
    background: linear-gradient(
        180deg,
        #111 0%,
        #1c1c1c 100%
    );
}


/* Select-painikkeet */

.filters select {

    appearance: none;

    min-width: 170px;

    padding: 12px 45px 12px 18px;

    background:
        linear-gradient(
            135deg,
            #1a1a1a,
            #303030
        );

    color: #d4af37;

    border: 2px solid #d4af37;

    border-radius: 0;

    font-family:
        "Cinzel",
        "Times New Roman",
        serif;

    font-size: 15px;

    letter-spacing: 2px;

    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 0 0 2px #111,
        0 0 12px rgba(212,175,55,.35);

    transition:
        .3s ease;

}


/* Hover */

.filters select:hover {

    background:
        linear-gradient(
            135deg,
            #272727,
            #111
        );

    color: #fff;

    box-shadow:
        0 0 0 2px #111,
        0 0 20px rgba(212,175,55,.65);

}


/* Focus */

.filters select:focus {

    outline:none;

    border-color:#fff;

}


/* Pieni art deco -korostus */

.filters::before,
.filters::after {

    content:"";

    width:80px;

    height:2px;

    background:#d4af37;

    align-self:center;

}


@media(max-width:700px){

    .filters {

        flex-direction:column;

        align-items:center;

    }


    .filters select {

        width:90%;

    }

}