/* Adapted from the local HingeDoor prototype: one fixed frame, one hinged leaf.
   This is an original concept illustration, not a manufacturer's product model. */
.hinge-hero{--hero-angle:0deg;--hero-open:0;--hero-bottom:0px;--leaf:#ded7c9;--leaf-edge:#a69b84;--groove:#b4aa96;--slat:#4b5145;--metal:#b79a68;display:block;background:var(--bg);border-bottom:1px solid var(--line)}
.light .hinge-hero{--leaf:#284a62;--leaf-edge:#193449;--groove:#173449;--slat:#132d43;--metal:#b6c4ca}
.hinge-hero-journey{position:relative}
.hinge-hero-pin{height:min(100svh,1000px);min-height:620px;position:relative;display:grid;grid-template-columns:1.08fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:24px 60px;padding:38px max(32px,calc((100vw - 1280px)/2)) 24px;overflow:clip;isolation:isolate}
.hinge-hero.is-interactive:not(.is-static) .hinge-hero-journey{height:calc(100svh + 1050px)}
.hinge-hero.is-interactive:not(.is-static) .hinge-hero-pin{position:sticky;top:0;height:calc(100svh - var(--hero-bottom));min-height:0}
.hinge-hero-scene{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:0;padding:14px 20px 42px;perspective:1500px;background:radial-gradient(ellipse at 50% 48%,var(--surface),var(--bg) 70%)}
.hinge-hero-scene:after{content:'';position:absolute;left:13%;right:7%;bottom:32px;height:28px;background:radial-gradient(ellipse,#26372930,transparent 70%);filter:blur(9px);z-index:-1}
.hinge-hero-portal{position:relative;height:min(100%,520px);aspect-ratio:270/512;transform-style:flat;perspective:1200px;transform:rotateY(-6deg)}
.hinge-hero-frame{position:absolute;inset:-14px;background:linear-gradient(100deg,#d4d4cc,#a9ada2 3%,#efeee8 7%,#dadbd1 95%,#9d9f93);box-shadow:12px 15px 30px #25332c1c,0 0 0 1px #a8afa0;transform:translateZ(-3px)}
.hinge-hero-room{position:absolute;inset:0;background:linear-gradient(105deg,#bdc5b6 0%,#eff0e8 17%,#f8f7ee 67%,#d9dfd0);overflow:hidden;border:1px solid #82917d;transform:translateZ(-2px)}
.light .hinge-hero-room{background:linear-gradient(105deg,#91a2af,#e8edf0 18%,#f4f7f8 72%,#c8d4dc)}
.hinge-hero-room:before{content:'';position:absolute;top:0;left:0;width:15%;height:100%;background:#788b7760;clip-path:polygon(0 0,100% 12%,100% 86%,0 100%)}
.hinge-hero-room:after{content:'';position:absolute;inset:77% 0 0;background:linear-gradient(#c8c8b7,#a5aa99);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.hinge-hero-inside{position:absolute;inset:26% 8% auto 19%;text-align:center;color:var(--text);opacity:var(--hero-open);z-index:1}
.hinge-hero-inside strong{display:block;font-size:26px;letter-spacing:.06em;font-weight:600}.light .hinge-hero-inside strong{font-size:37px;letter-spacing:-.05em}
.hinge-hero-inside span{display:block;font-size:16px;line-height:1.5;margin-top:13px}
.hinge-hero-leaf{position:absolute;inset:0;transform-origin:0 50%;transform:rotateY(var(--hero-angle));transform-style:preserve-3d;z-index:2}
.hinge-hero.is-active:not(.is-static) .hinge-hero-leaf{will-change:transform}
.hinge-hero-face,.hinge-hero-back{position:absolute;inset:0;border:2px solid var(--leaf-edge);backface-visibility:hidden;background:linear-gradient(100deg,#ffffff16,transparent 30%,#00000008 83%,#00000020),var(--leaf);box-shadow:inset 3px 0 8px #ffffff55,inset -4px 0 8px #00000016}
.hinge-hero-face:before{content:'';position:absolute;inset:0 auto 0 11%;width:24%;background:repeating-linear-gradient(90deg,var(--slat) 0 6px,#ffffff1a 6px 7px,var(--slat) 7px 10px);box-shadow:2px 0 4px #00000015}
.hinge-hero-face:after{content:'';position:absolute;inset:22% 8% 22% 44%;border-top:1px solid var(--groove);border-bottom:1px solid var(--groove)}
.hinge-hero-back{transform:rotateY(180deg);background:linear-gradient(90deg,#00000018,transparent 25%),var(--leaf)}
.hinge-hero-side{position:absolute;right:0;top:0;width:13px;height:100%;background:linear-gradient(90deg,var(--leaf-edge),#e1dfcd);transform-origin:right;transform:rotateY(-90deg)}
.hinge-hero-handle{position:absolute;right:9%;top:42%;width:4.5%;height:22%;border-radius:3px;background:linear-gradient(90deg,#566159,var(--metal) 24%,#f5f1db 42%,var(--metal) 72%,#596158);box-shadow:5px 5px 4px #26352230}
.hinge-hero-handle:before,.hinge-hero-handle:after{content:'';position:absolute;left:-65%;width:105%;height:4%;background:var(--metal);z-index:-1}.hinge-hero-handle:before{top:8%}.hinge-hero-handle:after{bottom:8%}
.hinge-hero-cylinder{position:absolute;right:10%;top:71%;width:3%;height:3.7%;border:1px solid var(--leaf-edge);background:linear-gradient(90deg,#647262,var(--metal),#d5dbcc);border-radius:4px}
.hinge-hero-hinge{position:absolute;left:-5px;width:8px;height:7%;background:linear-gradient(90deg,#6b7866,#d6ddcf,#7a8872);border-radius:2px;transform:translateZ(2px);z-index:3}.hinge-hero-hinge:nth-of-type(4){top:11%}.hinge-hero-hinge:nth-of-type(5){top:47%}.hinge-hero-hinge:nth-of-type(6){top:82%}
.catalog-site .hinge-hero-note{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:16px;line-height:1.5;color:var(--muted)}
.hinge-hero-copy{grid-column:2;grid-row:1;align-self:center;position:relative;z-index:2;max-width:550px}
.catalog-site .hinge-hero-kicker{font-size:16px;color:var(--accent);letter-spacing:.07em;font-weight:600;line-height:1.5;margin-bottom:22px}
.catalog-site .hinge-hero h1{font-size:clamp(46px,4.8vw,70px);line-height:1.08;letter-spacing:-.045em;margin:0}
.catalog-site .hinge-hero-intro{font-size:18px;line-height:1.75;margin-top:26px;max-width:470px}
.catalog-site .hinge-hero-instruction{font-size:16px;line-height:1.5;margin-top:26px;color:var(--text)}
.hinge-hero-instruction>span:first-child{display:inline-block;margin-right:8px;color:var(--accent);font-size:21px;vertical-align:middle}
.hinge-hero-controls{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:14px;position:relative;z-index:4}
.catalog-site .hinge-hero-skip,.catalog-site .hinge-hero-toggle{display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1.25;min-height:44px;padding:10px 14px;border-radius:6px;color:var(--text);background:transparent;border:1px solid var(--line);text-align:center}
.catalog-site .hinge-hero-skip{gap:16px;border-color:transparent;padding-left:0;text-decoration:underline;text-underline-offset:5px}.hinge-hero-toggle[hidden]{display:none}.hinge-hero-toggle:disabled{cursor:default;color:var(--muted)}
.hinge-hero-progress{display:none;position:absolute;top:-1px;left:0;height:2px;width:calc(var(--hero-open)*100%);background:var(--accent);pointer-events:none}
.hinge-hero.is-interactive .hinge-hero-progress{display:block}.hinge-hero.is-static .hinge-hero-journey{height:auto}.hinge-hero.is-static .hinge-hero-pin{position:relative;min-height:620px;height:min(100svh,1000px)}
#koleksiyon{scroll-margin-top:20px}
@media(max-width:1100px) and (min-width:801px){.hinge-hero-pin{gap:24px 30px}.catalog-site .hinge-hero h1{font-size:48px}}
@media(max-width:800px){
 .hinge-hero{--hero-bottom:calc(69px + env(safe-area-inset-bottom,0px))}
 .hinge-hero-pin,.hinge-hero.is-static .hinge-hero-pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;height:calc(100svh - var(--hero-bottom));min-height:0;padding:22px 16px 14px}
 .hinge-hero.is-interactive:not(.is-static) .hinge-hero-journey{height:calc(100svh + 850px)}
 .hinge-hero-copy{grid-column:1;grid-row:1;align-self:start}
 .catalog-site .hinge-hero-kicker{font-size:16px;line-height:1.4;margin:0 0 9px}
 .catalog-site .hinge-hero h1{font-size:36px;line-height:1.08;letter-spacing:-.04em}
 .catalog-site .hinge-hero-intro{display:none}
 .catalog-site .hinge-hero-instruction{font-size:16px;margin-top:10px;line-height:1.45}
 .hinge-hero-scene{grid-column:1;grid-row:2;padding:17px 16px 32px}
 .hinge-hero-scene:after{bottom:25px}
 .hinge-hero-controls{grid-row:3;gap:8px;padding-top:10px}
 .catalog-site .hinge-hero-skip,.catalog-site .hinge-hero-toggle{font-size:16px;padding:10px 8px;min-height:44px}
 .hinge-hero-skip span{display:none}.hinge-hero-note{font-size:16px}
 .hinge-hero-inside strong{font-size:22px}.light .hinge-hero-inside strong{font-size:30px}.hinge-hero-inside span{font-size:16px}
}
@media(max-width:360px){.catalog-site .hinge-hero h1{font-size:32px}.hinge-hero-pin{gap:10px;padding-top:18px}.catalog-site .hinge-hero-skip,.catalog-site .hinge-hero-toggle{padding-inline:5px}}
@media(max-height:560px){
 .hinge-hero .hinge-hero-journey,.hinge-hero.is-interactive:not(.is-static) .hinge-hero-journey{height:auto}
 .hinge-hero .hinge-hero-pin,.hinge-hero.is-static .hinge-hero-pin,.hinge-hero.is-interactive:not(.is-static) .hinge-hero-pin{position:relative;top:0;height:auto;min-height:0;grid-template-columns:1fr 1fr;grid-template-rows:minmax(300px,1fr) auto;padding-top:22px}
 .hinge-hero-copy{grid-column:2;grid-row:1;align-self:center}.hinge-hero-scene{grid-column:1;grid-row:1;min-height:350px}.hinge-hero-portal{height:290px}.hinge-hero-controls{grid-row:2}
 .catalog-site .hinge-hero h1{font-size:36px}.catalog-site .hinge-hero-kicker{margin-bottom:12px}.catalog-site .hinge-hero-intro{display:none}
}
@media(max-height:560px) and (max-width:500px){.hinge-hero .hinge-hero-pin,.hinge-hero.is-static .hinge-hero-pin{grid-template-columns:1fr;grid-template-rows:auto 360px auto}.hinge-hero-copy{grid-column:1;grid-row:1}.hinge-hero-scene{grid-row:2}.hinge-hero-controls{grid-row:3}}

/* Original source JPEG is used twice: fixed frame/context with a leaf-shaped
   opening, and the same pixels clipped to the visible leaf. No generated parts. */
.real-photo-hero .hinge-hero-scene{padding-bottom:58px}
.real-photo-hero .real-door-portal{aspect-ratio:var(--photo-ratio);transform:none;transform-style:flat;perspective:1200px}
.real-door-frame{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:2;overflow:hidden}
.real-door-leaf{position:absolute;z-index:3;transform-origin:0 50%;transform:rotateY(var(--hero-angle));transform-style:flat;backface-visibility:hidden}
.real-door-leaf svg{display:block;width:100%;height:100%;overflow:hidden}
.real-photo-hero.is-active:not(.is-static) .real-door-leaf{will-change:transform}
.real-door-opening{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text);background:var(--surface);text-align:center;padding:10px}
.real-door-opening strong{font-size:22px;letter-spacing:.04em;line-height:1.2}.light .real-door-opening strong{font-size:30px;letter-spacing:-.04em}
.real-door-opening span{font-size:16px;line-height:1.5}
.real-photo-hero .hinge-hero-note{line-height:1.45}
@media(max-width:800px){.real-photo-hero .hinge-hero-scene{padding-bottom:54px}.real-door-opening strong{font-size:18px}.light .real-door-opening strong{font-size:26px}}

@media(max-width:800px) and (max-height:640px){.real-photo-hero .hinge-hero-pin,.real-photo-hero.is-static .hinge-hero-pin{position:relative;height:auto;min-height:0;grid-template-rows:auto 440px auto}.real-photo-hero .hinge-hero-scene{grid-row:2;min-height:0}.real-photo-hero .real-door-portal{height:min(100%,480px)}.real-photo-hero .hinge-hero-controls{grid-row:3}}