/* --- Alapok, modern reset --- */
:root{
  --ink:#333333;
  --bg:#ffffff;
  --surface:#f5f0ee;
  --brand:#5c3b41;
  --brand-2:#a5636e;
  --radius:12px;
  --shadow:0 4px 12px rgba(0,0,0,.08);
  --wrap:1000px;

  --topline-bg:#e9ddd8;
  --header-bg:rgba(245,240,238,.96);
  --divider:#e7dfdb;

  --header-pad: clamp(24px, 6vw, 40px);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }

/* ====== FEJLÉC ====== */
header.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--header-bg);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--divider);
}
.topline{ background:var(--topline-bg); border-bottom:1px solid var(--divider); }
.topline .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0;
  padding-left: var(--header-pad);
  padding-right: var(--header-pad);
}
.socials{ display:flex; align-items:center; gap:12px; }
.socials a{
  width:18px; height:18px; display:inline-block;
  background-size:contain; background-repeat:no-repeat;
  opacity:.9; transition:opacity .15s ease, transform .1s ease;
}
.socials a:hover{ opacity:1; transform:translateY(-1px); }

/* Ikonok */
.icon-tt{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%235c3b41' d='M208 84.6a84.8 84.8 0 0 1-48-15V168a56 56 0 1 1-56-56a8 8 0 0 1 0 16a40 40 0 1 0 40 40V24a8 8 0 0 1 12.35-6.7A68.9 68.9 0 0 0 208 56a8 8 0 0 1 0 16Z'/%3E%3C/svg%3E"); }
.icon-ig{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%235c3b41' d='M176 24H80a56.06 56.06 0 0 0-56 56v96a56.06 56.06 0 0 0 56 56h96a56.06 56.06 0 0 0 56-56V80a56.06 56.06 0 0 0-56-56Zm40 152a40 40 0 0 1-40 40H80a40 40 0 0 1-40-40V80a40 40 0 0 1 40-40h96a40 40 0 0 1 40 40Zm-36-92a12 12 0 1 1 12-12a12 12 0 0 1-12 12ZM128 80a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48Zm0 80a32 32 0 1 1 32-32a32 32 0 0 1-32 32Z'/%3E%3C/svg%3E"); }
.icon-yt{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235c3b41' d='M23.498 6.186a2.965 2.965 0 0 0-2.087-2.101C19.44 3.5 12 3.5 12 3.5s-7.44 0-9.41.585A2.965 2.965 0 0 0 .502 6.186A31.27 31.27 0 0 0 0 12c0 1.962.099 3.923.502 5.814a2.965 2.965 0 0 0 2.088 2.101C4.56 20.5 12 20.5 12 20.5s7.44 0 9.41-.585a2.965 2.965 0 0 0 2.088-2.101C23.901 15.923 24 13.962 24 12s-.099-3.923-.502-5.814zM9.75 15.02V8.98L15.5 12l-5.75 3.02z'/%3E%3C/svg%3E"); }

.topline .contact{ font-style:normal; font-size:13px; line-height:1; }
.topline .contact a{ color:var(--ink); text-decoration:none; margin-left:18px; display:inline-block; }
.topline .contact a:hover{ color:var(--brand-2); }

/* LOGÓ + MENÜ */
.bar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px 0;
  padding-left: var(--header-pad);
  padding-right: var(--header-pad);
}
.logo{ display:flex; flex-direction:column; align-items:flex-start; }
.logo .title{
  display:flex; align-items:center; gap:10px;
  font-weight:700; color:var(--brand); letter-spacing:.2px;
  font-size:clamp(20px, 1.2vw + 16px, 26px);
}
.logo .heart{ color:var(--brand-2); font-size:1.4em; line-height:1; }
.logo .tagline{ margin-top:2px; color:#7a5c63; font-weight:500; font-size:14px; }

nav.primary{ display:flex; align-items:center; justify-content:flex-end; gap:22px; flex-wrap:nowrap; }
nav.primary a{ text-decoration:none; color:var(--ink); font-size:16px; padding:6px 4px; border-radius:8px; transition:color .2s ease; }
nav.primary a:hover{ color:var(--brand-2); }

@media (max-width: 820px){
  .bar .wrap{ flex-direction:column; align-items:flex-start; gap:8px; }
  nav.primary{ flex-wrap:wrap; justify-content:flex-start; gap:16px; }
  .topline .contact a{ margin-left:12px; }
}

/* ====== HERO ====== */
/* Asztali: cover háttér (változatlan) */
.hero{
  position:relative;
  min-height:100vh;
  display:grid; place-items:center;
  text-align:center; color:#fff;
  background:url('sminkecset.jpg') center/cover no-repeat;
  isolation:isolate; overflow:hidden;
}
/* sötét ráfedés a teljes hero területre */
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.45));
  z-index:2;
}
.hero-content{ position:relative; z-index:3; }

/* Asztali: kicsit nagyobb cím */
@media (min-width:1024px){
  .hero h1{ font-size:clamp(40px, 4vw + 14px, 64px); }
  .hero p{  font-size:clamp(18px, 1.2vw + 10px, 22px); }
}

/* Mobil: TELJES kép + elmosott kitöltés, csak a főoldalon */
.hero-media{ display:none; }
@media (max-width:820px){
  .home .hero{
    background:none;
    min-height:unset;
    height:auto;
    aspect-ratio:3 / 2;     /* nem lesz szürke sávon kívüli kilógás */
  }
  /* Elmosott háttér a szürke területre – a konténeren belül marad */
  .home .hero::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:url('sminkecset.jpg') center/cover no-repeat;
    filter:blur(8px) brightness(.9) saturate(1.05);
    transform:scale(1.05);             /* a blur szélei ne látszódjanak */
  }
  .home .hero-media{ display:block; position:absolute; inset:0; z-index:1; overflow:hidden; }
  .home .hero-img{
    width:100%; height:100%;
    object-fit:contain;                 /* TELJES kép látszik */
    object-position:center;
  }
}

/* --- Szekciók --- */
section{ padding:60px 0; }
.intro{ color:var(--brand); text-align:center; }
.intro h2{ font-size:clamp(28px, 2.2vw + 18px, 42px); margin:0 0 12px; }
.intro .subtitle{ color:#7a5c63; font-size:18px; margin:0 0 6px; }

/* --- Kép + szöveg blokk --- */
.services h2{ color:var(--brand); font-size:clamp(24px, 1.6vw + 18px, 34px); margin:0 0 18px; }
.services .grid{ display:grid; gap:40px; align-items:start; grid-template-columns:1fr; }
.services figure{ margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.services .text p{ font-size:18px; line-height:1.65; margin:0; }
@media (min-width:900px){ .services .grid{ grid-template-columns:1fr 1fr; } }

/* --- Portfólió --- */
.portfolio{ background:var(--surface); border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); }
.portfolio .head{ text-align:center; margin-bottom:26px; }
.portfolio .head h2{ margin:0 0 8px; color:var(--brand); font-size:clamp(28px, 2vw + 18px, 40px); }
.portfolio .cards{ display:grid; gap:18px; grid-template-columns:repeat(2, 1fr); }
@media (min-width:820px){ .portfolio .cards{ grid-template-columns:repeat(4, 1fr); } }
.card{ position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:#000; isolation:isolate; transition: transform .18s ease, box-shadow .2s ease; }
.card img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; opacity:.95; }
.card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 70%, transparent 100%); z-index:0; }
.card .label{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:12px 14px; color:#fff; font-weight:700; text-align:center; backdrop-filter: blur(2px); }
.card a,.card .card-click{ position:absolute; inset:0; z-index:2; text-indent:-9999px; border:0; background:transparent; cursor:pointer; }
.card:hover{ transform:translateY(-2px); }

/* CTA gomb */
.cta{ display:flex; justify-content:center; margin-top:30px; }
.btn{ appearance:none; border:0; cursor:pointer; background:var(--brand); color:#fff; font-weight:700; padding:14px 22px; border-radius:999px; letter-spacing:.2px; box-shadow:var(--shadow); text-decoration:none; display:inline-block; transition:filter .2s ease, transform .02s ease; }
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:translateY(1px); }

/* Lábléc */
footer{ padding:28px 0; font-size:14px; color:#6a6060; text-align:center; }

/* Mozgás csökkentés */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto; }
  .gallery-grid img:hover, .card:hover { transform:none; }
}

/* ====== Árlista ====== */
.price-note{ text-align:center; color:var(--brand); max-width:800px; margin:0 auto 18px; }
.price-sep{ border:0; border-top:1px solid var(--divider); margin:22px 0 8px; }
.price-title{ text-align:center; color:var(--brand); font-size:clamp(28px, 2.2vw + 18px, 42px); margin:8px 0 28px; }
.service{ font-weight:600; }
.duration{ display:block; font-weight:400; color:#7a5c63; }
.price{ font-weight:700; color:var(--brand); white-space:nowrap; }

.price-table{ display:flex; flex-direction:column; }
.price-line{ display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:14px 0; border-bottom:1px solid var(--divider); }
.price-line:last-child{ border-bottom:0; }
.price-line .side{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start; }
@media (max-width:900px){
  .price-line{ grid-template-columns:1fr; }
  .price-line .side + .side{ margin-top:12px; padding-top:12px; border-top:1px solid var(--divider); }
}

/* ====== Galéria ====== */
.gallery-title{ text-align:center; color:var(--brand); font-size:clamp(28px, 2.2vw + 18px, 42px); margin:0 0 36px; }
.gallery-grid{ display:grid; gap:20px; grid-template-columns:repeat(2, 1fr); }
.gallery-grid figure{ margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.gallery-grid img{ width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform .25s ease; }
.gallery-grid img:hover{ transform:scale(1.05); }
@media (min-width:700px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1000px){ .gallery-grid{ grid-template-columns:repeat(4, 1fr); } }

/* ====== Kapcsolat / Foglalás ====== */
.book-form{ max-width:760px; margin:0 auto; }
.form-grid{ display:grid; grid-template-columns:160px 1fr; gap:14px 16px; align-items:center; }
.form-grid label{ font-weight:600; color:var(--brand); }
.form-grid input, .form-grid textarea{ width:100%; padding:12px 14px; border:1px solid var(--divider); border-radius:10px; font:inherit; outline:none; background:#fff; transition:border-color .15s ease, box-shadow .15s ease; }
.form-grid input:focus, .form-grid textarea:focus{ border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(165,99,110,.15); }
.form-actions{ display:flex; justify-content:center; margin-top:18px; }
@media (max-width:700px){
  .form-grid{ grid-template-columns:1fr; }
  .form-grid label{ margin-top:8px; }
}

/* ====== Aloldali keskeny hero ====== */
.hero--slim{ min-height:320px; padding:40px 0; display:grid; place-items:center; text-align:center; }
.hero--slim h1{ font-size:clamp(28px, 3vw + 12px, 42px); }
.hero--slim p{ font-size:clamp(14px, 1vw + 10px, 18px); }

/* Sticky fejléchez gördülési puffer */
html{ scroll-padding-top:72px; }

/* ====== LIGHTBOX ====== */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; padding:20px; z-index:2000; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(100%, 1100px); max-height:90vh; border-radius:12px; box-shadow:var(--shadow); }
.lb-close,.lb-prev,.lb-next{ position:absolute; background:rgba(0,0,0,.55); color:#fff; border:0; width:46px; height:46px; font-size:26px; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lb-close{ top:14px; right:16px; font-size:28px; }
.lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lb-next{ right:18px; top:50%; transform:translateY(-50%); }
body.lb-no-scroll{ overflow:hidden; }

/* ====== ALOLDALAK – kontrasztos hero szöveg (index kivétel) ====== */
body:not(.home) .hero h1,
body:not(.home) .hero--slim h1{
  color:#fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.25);
  opacity:1;
}
body:not(.home) .hero p,
body:not(.home) .hero--slim p{
  color:#fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
/* biztosan az overlay fölé kerüljön a szöveg */
body:not(.home) .hero,
body:not(.home) .hero--slim{ position:relative; }
body:not(.home) .hero > *,
body:not(.home) .hero--slim > *{ position:relative; z-index:3; }