html{
      scroll-behavior:smooth;
    }

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

    body{
      font-family:'Inter', sans-serif;
      background:#f5f2ed;
      color:#111;
      overflow-x:hidden;
    }

    img{
      max-width:100%;
      display:block;
    }

    .container{
      width:100%;
      max-width:1500px;
      margin:auto;
    }

    /* HEADER */

    header{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      z-index:1000;
      transition:0.4s ease;
    }

    .header-inner{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:24px 40px;
    }

    header.scrolled{
      background:rgba(255,255,255,0.88);
      backdrop-filter:blur(12px);
      box-shadow:0 10px 30px rgba(0,0,0,0.06);
    }

    /* LOGO */

    .logo{
      margin-left:-200px;
    }

    .logo img{
      height:42px;
      width:auto;
    }

    /* NAV */

    nav{
      display:flex;
      align-items:center;
      gap:32px;
      margin-right:-200px;
    }

    nav a{
      text-decoration:none;
      color:white;
      font-size:14px;
      transition:0.3s;
      position:relative;
    }

    nav a::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-6px;
      width:0%;
      height:1px;
      background:currentColor;
      transition:0.3s;
    }

    nav a:hover::after{
      width:100%;
    }

    header.scrolled nav a{
      color:#111;
    }

    /* HAMBURGER */

    .menu-toggle{
      display:none;
      flex-direction:column;
      gap:5px;
      cursor:pointer;
    }

    .menu-toggle span{
      width:26px;
      height:2px;
      background:white;
      transition:0.3s;
    }

    header.scrolled .menu-toggle span{
      background:#111;
    }

    /* HERO */

    .hero{
      position:relative;
      height:85vh;
      background:url("kepek/ormosbuda1.PNG") center/cover no-repeat;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      overflow:hidden;
    }

    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0.45);
    }

    .hero-content{
      position:relative;
      z-index:2;
      color:white;
      padding:20px;
      max-width:900px;
    }

    .hero h1{
      font-size:clamp(42px, 8vw, 90px);
      font-weight:300;
      letter-spacing:-3px;
      margin-bottom:20px;
    }

    .hero p{
      font-size:18px;
      opacity:0.9;
    }

    /* GALÉRIA */

    .projektek{
      padding:140px 40px;
    }

    .section-title{
      font-size:clamp(36px, 5vw, 10px);
      font-weight:300;
      margin-bottom:80px;
      letter-spacing:-2px;
    }

    .galeria{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:36px;

  align-items:start;
}

    /* KÁRTYÁK */

    .kep{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      background:white;
      box-shadow:0 4px 20px rgba(0,0,0,0.04);

      opacity:0;
      transform:translateY(40px);

      transition:
      transform 1s cubic-bezier(.19,1,.22,1),
      box-shadow 0.6s ease,
      opacity 1s ease;
    }

    .kep.show{
      opacity:1;
      transform:translateY(0);
    }

    .kep:hover{
      transform:translateY(-10px);
      box-shadow:0 35px 70px rgba(0,0,0,0.14);
    }

    /* OVERLAY */

    .kep::after{
      content:"";
      position:absolute;
      inset:0;

      background:linear-gradient(
        to top,
        rgba(0,0,0,0.25),
        transparent 45%
      );

      opacity:0;
      transition:0.6s ease;
      pointer-events:none;
    }

    .kep:hover::after{
      opacity:1;
    }

    /* ASYMMETRICAL GRID */

    .kep:nth-child(even){
  position:relative;
  top:40px;
}

    /* KÉPEK */

.kep img{
  width:100%;
  height:560px;
  object-fit:cover;

  transition:1.2s cubic-bezier(.19,1,.22,1);

  cursor:pointer;
  position:relative;
  z-index:2;
}

.kep:hover img{
  transform:scale(1.08);
}



    /* MOBILE */

    @media(max-width:768px){

  .header-inner{
    padding:20px;
  }

  .menu-toggle{
    display:flex;
  }

  nav{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:white;
    flex-direction:column;
    padding:24px;
    gap:20px;
    display:none;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);

    margin-right:0;
  }

  nav.active{
    display:flex;
  }

  nav a{
    color:#111;
  }

  .logo{
    margin-left:0;
  }

  .hero{
    height:55vh;
  }

  .projektek{
    padding:90px 20px;
  }

  .galeria{
    grid-template-columns:1fr;
    gap:24px;
  }

  .kep{
    transform:none;
  }

  .kep.show{
    transform:none;
  }

  .kep:nth-child(even){
    top:0;
  }

  .kep:hover{
    transform:none;
  }

  .kep img{
    height:340px;
  }

  .section-title{
    margin-bottom:50px;
  }

  .hero h1{
    letter-spacing:-2px;
  }

}
/* LIGHTBOX */

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.92);

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;

  transition:0.4s ease;

  z-index:9999;
}

.lightbox.active{
  opacity:1;
  visibility:visible;
}

.lightbox img{
  width:auto;
  height:auto;

  max-width:90%;
  max-height:85vh;

  object-fit:contain;
  border-radius:18px;

  transform:scale(0.92);
  transition:0.4s ease;
}

.lightbox.active img{
  transform:scale(1);
}

.close{
  position:absolute;
  top:30px;
  right:40px;

  color:white;
  font-size:42px;
  cursor:pointer;

  z-index:10000;
}

/* ZOOM */

.lightbox img{
  cursor:zoom-in;
}

.lightbox img.zoomed{
  transform:scale(1.8);
  cursor:zoom-out;
}

/* COOKIE BANNER */

.cookie-banner{
  position:fixed;
  left:30px;
  right:30px;
  bottom:30px;

  background:#111;
  color:#f5f2ed;

  padding:22px 26px;
  border-radius:18px;

  display:none;
  justify-content:space-between;
  align-items:center;
  gap:24px;

  z-index:99999;
  box-shadow:0 20px 60px rgba(0,0,0,0.22);
}

.cookie-banner p{
  font-size:14px;
  line-height:1.6;
  opacity:0.85;
  max-width:720px;
}

.cookie-actions{
  display:flex;
  gap:12px;
  flex-shrink:0;
}

.cookie-actions button{
  border:none;
  border-radius:999px;
  padding:12px 22px;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
}

#cookie-decline{
  background:transparent;
  color:#f5f2ed;
  border:1px solid rgba(255,255,255,0.25);
}

#cookie-accept{
  background:#f5f2ed;
  color:#111;
}

@media(max-width:768px){
  .cookie-banner{
    left:16px;
    right:16px;
    bottom:16px;
    flex-direction:column;
    align-items:flex-start;
  }

  .cookie-actions{
    width:100%;
  }

  .cookie-actions button{
    width:100%;
  }
}