:root{--gold:#e8bb63;--gold2:#fff0bd;--cream:#fff7e8;--muted:#d6c7bf;--wine:#3b0716;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;overflow-x:hidden;background:url('../galeri/background/ilona-1.webp') center top/cover fixed no-repeat;color:var(--cream);font-family:Inter,system-ui,sans-serif;line-height:1.5}body::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(12,2,6,.16)}a{color:inherit;text-decoration:none}select{font:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.ilona-header{position:relative;z-index:20;width:min(var(--max),calc(100% - 28px));min-height:60px;display:flex;align-items:center;gap:1.4rem;margin:12px auto 0;padding:6px 10px;border:1px solid #e8bb6344;border-radius:14px;background:#19050cbf;box-shadow:0 10px 30px #0007;backdrop-filter:blur(16px)}.ilona-brand{display:flex;align-items:center;gap:9px}.ilona-brand img{width:44px;height:44px;object-fit:contain}.ilona-brand>span{font-size:.68rem;letter-spacing:.16em}.ilona-brand b{color:var(--gold);font-weight:800}.ilona-brand small{display:block;color:#c2b3ad;font-size:.45rem;letter-spacing:.15em}.home-link{margin-left:auto;color:#e0d3ce;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.home-link:hover{color:var(--gold2)}.language{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #9e7b4666;border-radius:99px;background:#14070cd9}.language span{color:var(--gold)}.language select{max-width:76px;border:0;outline:0;background:transparent;color:var(--cream);font-size:.68rem;font-weight:800}.language option{background:#19070e}
.ilona-shell{width:min(var(--max),calc(100% - 28px));margin:auto;padding:clamp(24px,4vw,48px) 0 54px}.page-intro{display:flex;justify-content:space-between;align-items:end;gap:2rem;padding:14px 4px 20px;text-shadow:0 2px 14px #000}.eyebrow{margin:0 0 5px;color:var(--gold);font-size:.62rem;font-weight:900;letter-spacing:.22em}.page-intro h1{margin:0;font:600 clamp(2.6rem,5vw,4.7rem)/.9 'Cormorant Garamond',serif;letter-spacing:-.035em}.page-intro h1 em{color:var(--gold2);font-weight:500}.page-intro>p{max-width:480px;margin:0 0 4px;color:#eadfd9;font-size:.92rem}
.development-note{display:flex;align-items:center;gap:13px;margin:0 0 14px;padding:11px 14px;border:1px solid #e8bb6352;border-radius:14px;background:#1a070eb8;backdrop-filter:blur(9px)}.development-note strong{color:var(--gold2);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.development-note p{display:inline;margin-left:10px;color:#d6c7bf;font-size:.78rem}.development-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold)}
.ilona-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:12px}.creative-gate{--focus:center;position:relative;isolation:isolate;display:flex;align-items:end;grid-column:span 4;min-height:230px;overflow:hidden;padding:1.3rem;border:1px solid #e8bb6357;border-radius:18px;background:linear-gradient(115deg,rgba(27,5,12,.85),rgba(14,3,7,.42));box-shadow:0 12px 34px #0008;transition:transform .3s,border-color .3s,box-shadow .3s;backdrop-filter:blur(3px)}.creative-gate::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,2,6,.82),rgba(12,2,6,.12) 70%)}.creative-gate img{position:absolute;z-index:-2;inset:0 0 0 auto;width:63%;height:100%;object-fit:cover;object-position:var(--focus);opacity:.72;filter:saturate(.88);-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000);mask-image:linear-gradient(90deg,transparent,#000 30%,#000);transition:transform .5s,opacity .35s}.creative-gate:hover{transform:translateY(-4px);border-color:#f0ca7eb8;box-shadow:0 18px 45px #000a}.creative-gate:hover img{transform:scale(1.025);opacity:.88}.gate-number{position:absolute;right:1rem;top:.8rem;color:#f0d99a9c;font-size:.62rem;letter-spacing:.15em}.creative-gate>div{position:relative;z-index:2;max-width:64%}.creative-gate div>p{margin:0 0 .3rem;color:var(--gold);font-size:.56rem;font-weight:900;letter-spacing:.16em}.creative-gate h2{margin:0;font:600 clamp(1.75rem,2.7vw,2.9rem)/.92 'Cormorant Garamond',serif;text-shadow:0 2px 14px #000}.creative-gate div>span{display:block;margin:.5rem 0 .8rem;color:#eee2dd;font-size:.78rem;text-shadow:0 1px 8px #000}.creative-gate b{display:inline-flex;align-items:center;color:#d7b979;font-size:.58rem;letter-spacing:.12em}.creative-gate b i{display:grid;place-items:center;width:23px;height:23px;margin-left:.4rem;border:1px solid #d2a85588;border-radius:50%;font-style:normal}.gate-wide{grid-column:span 7}.gate-tall{grid-column:span 5;grid-row:span 2;min-height:472px}.gate-feature{grid-column:span 8;min-height:270px}.gate-tailoring{--focus:center 48%}.gate-embroidery{--focus:center}.gate-knit{--focus:center 35%}.gate-occasion{--focus:center 30%}.gate-designer{--focus:right center}.gate-designer img{width:68%;opacity:.78}.gate-designer b{color:var(--gold2)}
.ilona-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;padding:20px max(16px,calc((100% - var(--max))/2));border-top:1px solid #b8874050;background:#090306df;backdrop-filter:blur(10px)}.ilona-footer .ilona-brand img{width:38px;height:38px}.ilona-footer>p{color:#a99b96;font-size:.68rem}.ilona-footer nav{display:flex;justify-content:flex-end;gap:1rem;color:#c6b8b2;font-size:.65rem}
@media(max-width:900px){.gate-wide,.gate-tall,.gate-feature,.creative-gate{grid-column:span 6;grid-row:auto;min-height:250px}.page-intro{align-items:start}.ilona-footer{grid-template-columns:1fr auto}.ilona-footer nav{grid-column:1/-1;justify-content:center}}
@media(max-width:600px){body{background-attachment:scroll}.ilona-header{width:calc(100% - 16px);margin-top:8px}.ilona-brand>span{display:none}.home-link{margin-left:auto}.ilona-shell{width:calc(100% - 18px);padding:20px 0 34px}.page-intro{display:block;padding:8px 3px 14px}.page-intro h1{font-size:2.7rem}.page-intro>p{margin-top:10px;font-size:.84rem}.development-note{align-items:flex-start}.development-note p{display:block;margin:3px 0 0}.ilona-grid{display:flex;flex-direction:column}.creative-gate{width:100%;min-height:260px;padding:1.1rem}.creative-gate>div{max-width:72%}.creative-gate img{width:72%;opacity:.65}.ilona-footer{display:flex;flex-direction:column;gap:10px;text-align:center}.ilona-footer .ilona-brand>span{display:block}.ilona-footer nav{flex-wrap:wrap;justify-content:center}}
@media(max-width:360px){.home-link{display:none}.page-intro h1{font-size:2.35rem}.creative-gate{min-height:240px}.creative-gate h2{font-size:1.9rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.creative-gate,.creative-gate img{transition:none}}
/* Ilona művészműhely: vászon, csipke és festői rétegek */
.ilona-header{background:linear-gradient(105deg,rgba(42,12,19,.76),rgba(20,13,13,.58));border-color:rgba(255,220,163,.4)}
.page-intro{padding-top:clamp(24px,4vw,46px)}.page-intro h1 em{font-style:italic;text-shadow:0 0 28px rgba(255,204,122,.26)}
.development-note{background:linear-gradient(110deg,rgba(64,23,29,.76),rgba(35,20,18,.62));border-style:dashed;border-color:rgba(255,222,174,.52)}
.ilona-grid{gap:16px}
.creative-gate{min-height:250px;border:1px solid rgba(255,213,154,.5);border-radius:34px 12px 30px 16px;background:radial-gradient(circle at 82% 18%,rgba(142,52,65,.24),transparent 38%),linear-gradient(120deg,rgba(91,12,38,.82),rgba(49,6,22,.67) 56%,rgba(28,5,14,.55));box-shadow:0 18px 42px rgba(24,5,9,.58),inset 0 1px 0 rgba(255,235,214,.11),inset 0 0 38px rgba(125,27,53,.12);backdrop-filter:blur(7px) saturate(1.08)}
.creative-gate:nth-child(even){border-radius:14px 36px 16px 32px}
.creative-gate::before{background:linear-gradient(90deg,rgba(55,5,22,.94) 0%,rgba(72,10,31,.76) 38%,rgba(40,5,18,.16) 78%)}
.creative-gate::after{content:"";position:absolute;inset:8px;z-index:3;pointer-events:none;border:1px dashed rgba(255,229,187,.3);border-radius:27px 8px 24px 12px}
.creative-gate:nth-child(even)::after{border-radius:10px 29px 12px 25px}
.creative-gate img{width:68%;opacity:.8;filter:saturate(.9) sepia(.06);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 92%);mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 92%)}
.creative-gate:nth-child(even) img{inset:0 auto 0 0;-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 25%,#000 92%);mask-image:linear-gradient(270deg,transparent 0,#000 25%,#000 92%)}
.creative-gate>div{max-width:67%;padding:14px 15px 13px;border-left:2px solid rgba(239,190,105,.66);background:linear-gradient(90deg,rgba(31,7,13,.68),rgba(31,7,13,.16));border-radius:0 20px 20px 0}
.creative-gate:nth-child(even)>div{margin-left:auto;border-left:0;border-right:2px solid rgba(239,190,105,.66);background:linear-gradient(270deg,rgba(31,7,13,.72),rgba(31,7,13,.18));border-radius:20px 0 0 20px;text-align:right}
.creative-gate h2{font-style:italic;color:#fff5df}.creative-gate div>p{color:#f0c879}.creative-gate div>span{color:#f2e5dc}
.gate-tailoring{--focus:center 46%}.gate-embroidery{--focus:center 46%}.gate-knit{--focus:center 35%}.gate-occasion{--focus:center 28%}
.gate-tall{min-height:516px}.gate-designer{border-radius:42px 16px 42px 16px;background:radial-gradient(circle at 80% 20%,rgba(156,54,76,.25),transparent 42%),linear-gradient(120deg,rgba(91,12,38,.86),rgba(40,5,19,.58))}.gate-designer::after{border-style:solid;border-color:rgba(255,209,126,.38)}.gate-designer img{width:72%;opacity:.82;object-position:center 38%}.gate-designer>div{margin-left:0;text-align:left;border-left:2px solid rgba(239,190,105,.66);border-right:0;background:linear-gradient(90deg,rgba(55,5,22,.82),rgba(55,5,22,.14));border-radius:0 20px 20px 0}
@media(max-width:600px){body{background-position:center top!important;background-attachment:scroll!important}body::before{background:rgba(12,2,6,.25)}.creative-gate,.creative-gate:nth-child(even),.gate-designer{border-radius:26px 10px 24px 12px}.creative-gate::after,.creative-gate:nth-child(even)::after{border-radius:20px 7px 18px 9px}.creative-gate img,.creative-gate:nth-child(even) img{inset:0 0 0 auto;width:78%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%)}.creative-gate>div,.creative-gate:nth-child(even)>div,.gate-designer>div{max-width:76%;margin-left:0;text-align:left;border-left:2px solid rgba(239,190,105,.66);border-right:0;background:linear-gradient(90deg,rgba(31,7,13,.78),rgba(31,7,13,.16));border-radius:0 18px 18px 0}}