*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#000;color:#fff;
font-family:'Helvetica Neue',Arial,sans-serif}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1}
.ui{position:fixed;inset:0;pointer-events:none;z-index:3}
/* marka logosu: sol üst (P | 86:3) — SVG, Oswald sayfadan miras alınır.
mix-blend-mode: beyaz zemine denk gelirse siyah, koyu zeminde beyaz görünür */
.logo{position:absolute;top:30px;left:44px;height:50px;width:auto;display:block;mix-blend-mode:difference}
/* 86:3 üzerine gelince PULSAR YILDIZI gibi titreme + hafif ışık atımları (+ ses JS'ten) */
.logo863{pointer-events:auto;cursor:pointer;transform-box:fill-box;transform-origin:center}
.logo863:hover{animation:pulsarFlicker 1.6s linear infinite}
@keyframes pulsarFlicker{
0%{opacity:.92;filter:drop-shadow(0 0 2px rgba(255,255,255,.45))}
6%{opacity:1;filter:drop-shadow(0 0 11px rgba(255,255,255,1))} /* ana atım (parlama) */
12%{opacity:.85;filter:drop-shadow(0 0 3px rgba(255,255,255,.5))}
18%{opacity:.98;filter:drop-shadow(0 0 7px rgba(255,255,255,.85))} /* ikincil atım */
24%{opacity:.9;filter:drop-shadow(0 0 2px rgba(255,255,255,.45))}
50%{opacity:.94;filter:drop-shadow(0 0 3px rgba(255,255,255,.5))}
56%{opacity:1;filter:drop-shadow(0 0 10px rgba(255,255,255,.95))} /* düzenli pulsar atımı */
62%{opacity:.87;filter:drop-shadow(0 0 3px rgba(255,255,255,.5))}
100%{opacity:.92;filter:drop-shadow(0 0 2px rgba(255,255,255,.45))}
}
/* 86:3 hover: frekans çubukları (86:3 YANINDA; yükseklik gerçek ses frekansına göre JS AnalyserNode ile) */
.logoFreq{opacity:0;transition:opacity .3s ease}
.logo863:hover ~ .logoFreq{opacity:1}
nav{position:absolute;top:150px;right:40px;display:flex;flex-direction:column;align-items:center;gap:42px;
font-size:12px;letter-spacing:.22em;pointer-events:auto;font-family:'Oswald','Helvetica Neue',Arial,sans-serif}
nav span,nav a{writing-mode:vertical-rl;opacity:.55;transition:opacity .3s;color:#fff;text-decoration:none}
nav span:hover,nav a:hover{opacity:1}
nav .on{opacity:1;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.scroll{position:absolute;right:clamp(20px,1.98vw,38px);bottom:clamp(18px,3.15vh,34px);display:flex;flex-direction:column;align-items:center;opacity:.65}
.scroll-t{writing-mode:vertical-rl;font-size:clamp(9px,0.573vw,11px);letter-spacing:.32em}
.scroll::after{content:"";width:1px;height:44px;background:#fff;margin-top:12px;transform-origin:top;animation:ind 1.9s ease-in-out infinite}
@keyframes ind{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
/* ---- SOL KÜNYE: referans gibi ferah, etiket gri / değer beyaz ---- */
.meta{position:absolute;left:13%;top:25%;width:clamp(200px,16.67vw,320px);font-size:clamp(10px,0.625vw,12px);
font-family:'Oswald','Helvetica Neue',Arial,sans-serif;
transform-origin:50% 0;will-change:transform,opacity;backface-visibility:hidden}
.meta-body{position:relative}
/* çizgi yalnız künye satırları boyunca (açıklama hariç); scroll geçişinde aşağıdan yukarı silinir/geri gelir */
.meta-body::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:#333;
transform:scaleY(var(--lineScale,1));transform-origin:top;will-change:transform}
.meta .n{letter-spacing:.2em;font-size:clamp(11px,0.677vw,13px);font-weight:500;margin-bottom:40px;padding-left:16px}
.meta .row{margin-bottom:30px;padding-left:16px}
.meta .lbl{color:#8a8a8a;font-size:clamp(10px,0.66vw,12.5px);letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin-bottom:7px}
.meta .val{color:#fff;font-size:clamp(13px,0.885vw,17px);font-weight:400;line-height:1.25;letter-spacing:.01em;position:relative;display:inline-block}
/* YATAY ÇUBUK DOLMA: değerin ÜZERİNDE beyaz bar, soldan-sağa dolar sonra sağa açılır (yazı genişliğinde) */
.meta .val::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left center;pointer-events:none}
.meta .val.fill::after{animation:barFill .6s cubic-bezier(.5,0,.2,1)}
@keyframes barFill{0%{transform:scaleX(0);transform-origin:left}46%{transform:scaleX(1);transform-origin:left}54%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
/* orijinalde CLIENT değeri (ör. Panasonic) belirgin BÜYÜK ve bold */
.meta #m-client{font-size:clamp(20px,1.615vw,31px);font-weight:600;letter-spacing:0;line-height:1.08}
.meta .hint{color:#555;margin-top:38px;padding-left:14px;font-size:clamp(11px,0.73vw,13px);line-height:1.7;letter-spacing:.04em}
/* ---- MOUSE LENS ---- */
.lens{position:fixed;left:0;top:0;width:40px;height:40px;border-radius:50%;
border:1.5px solid rgba(255,255,255,.55);overflow:hidden;z-index:9;pointer-events:none;
transform:translate(-50%,-50%);will-change:transform,width,height;opacity:0;
transition:width .62s cubic-bezier(.22,1,.32,1),height .62s cubic-bezier(.22,1,.32,1),border-color .5s,opacity .6s}
/* intro (kart-yelpazesi) sırasında lens gizli; works hazır olunca belirir */
body.ready .lens{opacity:1}
.lens canvas{position:absolute;inset:0;width:100%;height:100%}
.lens.dot{width:8px;height:8px;border-color:#fff;background:#fff}
.lens.dot canvas{opacity:0} /* dot saf CSS nokta; liquid glass yalnız .big'de görünür */
.lens.big{width:246px;height:246px;border-color:rgba(255,255,255,.7)}
/* nav (WORKS/ABOUT/CONTACT) üstünde: içi BOŞ çember -> altındaki sekme adı görünür (orijinal) */
.lens.hollow{width:52px;height:52px;border-color:rgba(255,255,255,.9);background:transparent}
.lens.hollow canvas{opacity:0}
/* detay açıkken lens kapatma (X) göstergesine dönüşür */
.lens.close{width:56px;height:56px;border-color:rgba(255,255,255,.85);background:rgba(0,0,0,.18)}
.lens.close canvas{opacity:0}
.lens.over-img{opacity:0} /* görsel kartı üzerinde lens (×) gizli — yerine cam küre büyüteç gelir */
/* CAM KÜRE BÜYÜTEÇ: görsel üzerinde imleci takip eden dışbükey (fisheye) lens */
.glass-lens{position:fixed;left:0;top:0;width:126px;height:126px;border-radius:50%;z-index:40;pointer-events:none;
opacity:0;transform:translate(-50%,-50%) scale(.55);transition:opacity .22s ease,transform .28s cubic-bezier(.16,.84,.44,1);
box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 2px 10px rgba(255,255,255,.45), inset 0 -8px 20px rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.45)}
.glass-lens.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.lens.close::before,.lens.close::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:1.5px;background:#fff}
.lens.close::before{transform:translate(-50%,-50%) rotate(45deg)}
.lens.close::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* alt-orta scroll göstergesi: durağanda yanıp sönen yazı, scroll'da gidilen yönü gösteren ok */
.hint-scroll{position:absolute;left:50%;bottom:clamp(24px,3.89vh,42px);transform:translateX(-50%);text-align:center;
font-size:clamp(8px,0.52vw,10px);letter-spacing:.22em;color:#9a9a9a;pointer-events:none;white-space:nowrap}
.hint-scroll .hs-text{animation:hsblink 2.2s ease-in-out infinite}
@keyframes hsblink{0%,100%{opacity:.22}50%{opacity:.85}}
.hint-scroll .hs-arrow{display:none;font-size:20px;line-height:1;color:#fff}
.hint-scroll.moving .hs-text{display:none}
.hint-scroll.moving .hs-arrow{display:inline-block}
/* ---- GEÇİŞ TILE KATMANI ---- */
.tilewrap{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);
overflow:hidden;mix-blend-mode:screen}
.tile{padding:24px;font-size:10px;line-height:1.5;color:#8a8a8a;letter-spacing:.04em}
.tile .tn{font-weight:700;color:#aaa;margin-bottom:8px;letter-spacing:.12em}
.tile .tl{color:#4a4a4a;font-size:8px;text-transform:uppercase;letter-spacing:.14em;margin-top:8px}
.tile .tv{color:#bbb;font-size:11px;font-weight:600}
/* ===== DETAY KATMANI ===== */
/* ===== SENKRON KARADELİK GEÇİŞİ — JS-driven (tek transP: --wAway works emilme, --dHere detay doğma) ===== */
/* DOM künye/nav: works emilirken (--wAway) bulanıklaşıp merkeze çekilir + söner */
body.bh .meta{filter:blur(calc(var(--wAway,0)*8px));
transform:scale(calc(1 - var(--wAway,0)*0.12)) translateY(calc(var(--wAway,0)*-18px));
transform-origin:50% 0;opacity:calc(1 - var(--wAway,0))}
body.bh .logo,body.bh nav,body.bh .scroll,body.bh .hint-scroll{
filter:blur(calc(var(--wAway,0)*3px));opacity:calc(1 - var(--wAway,0))}
/* DETAY: cam küre merkezinden DOĞAR (--dHere); transition YOK — JS her frame sürer (works emilmesiyle senkron) */
.detail{position:fixed;inset:0;z-index:5;pointer-events:none;visibility:hidden;
opacity:var(--dHere,0);
clip-path:circle(calc(var(--dHere,0) * 150%) at 50% 50%);
filter:blur(calc((1 - var(--dHere,0)) * 26px));
transform:scale(calc(1.08 - var(--dHere,0) * 0.08));
transition:none;will-change:clip-path,filter,transform,opacity}
body.bh .detail{visibility:visible} /* clip(0) görünmez tutar */
body.bh-open .detail{pointer-events:auto} /* yalnız tam açıkken etkileşim */
/* hareket azaltma: düz fade, blur yok */
@media (prefers-reduced-motion: reduce){
body.bh .meta,body.bh .logo,body.bh nav,body.bh .scroll,body.bh .hint-scroll{filter:none;transform:none}
.detail{clip-path:none!important;filter:none!important;transform:none!important;transition:opacity .25s ease}
}
/* stagger reveal — referans detay açılışı: power4.out + scale/y/opacity */
.detail [data-anim]{opacity:0;transform:translateY(70px) scale(1.12)}
.detail [data-anim].in{opacity:1;transform:translateY(0) scale(1);
transition:opacity 1.0s cubic-bezier(.165,.84,.44,1),transform 1.05s cubic-bezier(.165,.84,.44,1)}
/* HERO BAŞLIK: harf-harf giriş (orijinal u_detail_title_animes per-glyph) */
.detail-title .tch{display:inline-block;opacity:0;transform:translateY(.85em) scale(1.35);transform-origin:bottom right;will-change:transform,opacity}
.detail-title.in .tch{opacity:1;transform:none;
transition:opacity .7s cubic-bezier(.165,.84,.44,1),transform .95s cubic-bezier(.165,.84,.44,1)}
/* tıklamada works arayüzü çekilir (orijinal: hero cloth + u_scroll_alpha fade) */
body.detailing .scroll,body.detailing .hint-scroll,body.detailing nav,body.detailing .logo,body.detailing .meta{opacity:0!important;transition:opacity .55s ease}
/* kapanış perdesi — siyah, alttan yukarı süpürür (orijinal .cover) */
.detail-cover{position:fixed;inset:0;z-index:7;background:#000;transform:translateY(100%);pointer-events:none}
.detail-cover.sweep{animation:coverSweep 1.1s cubic-bezier(.83,0,.17,1) forwards}
@keyframes coverSweep{0%{transform:translateY(100%)}100%{transform:translateY(-100%)}}
.detail-bg{position:absolute;inset:0;overflow:hidden;background:#000}
.detail-bg .bgimg{position:absolute;inset:-4%;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity 1.1s ease;will-change:transform}
/* DETAY ARKA PLANI: orijinal gibi düz SİYAH — Ken-Burns/görsel/video/gradient yok (görseller içerik akışında) */
.detail-bg video{display:none}
/* HERO BAŞLIK: DİKEY, sağ kenarda (orijinal referans detay: vertical-rl, harfler yana yatık) */
.detail-title{position:absolute;right:3%;top:5%;height:90%;text-align:left;
writing-mode:vertical-rl;text-orientation:mixed;
font-weight:800;font-size:clamp(38px,6vw,100px);line-height:1.06;letter-spacing:.005em;
color:#fff;text-transform:uppercase;pointer-events:none}
/* ALT BAŞLIK: DİKEY, en sağ kenarda, ince (orijinal detay subtitle) */
.detail-subtitle{position:absolute;right:.9%;top:6%;height:88%;
writing-mode:vertical-rl;text-orientation:mixed;
font-weight:300;font-size:clamp(13px,1.35vw,21px);line-height:1.5;letter-spacing:.02em;
color:#cfcfcf;pointer-events:none;opacity:0;transition:opacity 1s ease .4s}
body.bh-open .detail .detail-subtitle{opacity:1}
/* İÇERİK: SOLDA %12.71, üstten boşluk, dikey scroll (orijinal .detail_wrapper) */
/* orijinal .detail_wrapper padding-top:62% -> içerik ekran ALTINDAN başlar, scroll ile yukarı kayar (uzun sayfa) */
.detail-content{position:absolute;left:12.71%;top:0;height:100%;width:42%;max-width:560px;display:flex;
flex-direction:column;align-items:flex-start;justify-content:flex-start;overflow-y:auto;padding:22vh 0 16vh;
mix-blend-mode:difference} /* içerik üst kısımda başlar (görseller yukarıda görünür); görselle çakışınca yazı ters renk */
.detail-content::-webkit-scrollbar{width:0}
/* GÖRSELLER: üst üste binen DESTE (fan). Kartlar absolute; JS fan ofseti verir, hover'da öne çıkıp büyür. */
.detail .d-shot{position:relative;width:100%;flex:0 0 auto;
height:clamp(220px,30vh,320px);min-height:clamp(220px,30vh,320px);margin:-6vh 0 22vh;
opacity:0;transition:opacity 1s cubic-bezier(.165,.84,.44,1) .2s}
.detail .d-shot .d-img{position:absolute;left:50%;top:0;width:auto;height:clamp(220px,30vh,320px);
display:block;cursor:pointer;
border:1px solid rgba(255,255,255,.18);border-radius:8px;box-shadow:0 18px 42px rgba(0,0,0,.55);
transform-origin:center center;backface-visibility:hidden;will-change:transform;
transition:transform .5s cubic-bezier(.16,.84,.44,1),opacity .45s ease,filter .45s ease,box-shadow .5s ease}
body.bh-open .detail .d-shot{opacity:1}
.detail .d-shot.off{display:none}
/* TAM EKRAN GÖRSEL (lightbox) */
.img-lightbox{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:6vh;
background:rgba(0,0,0,.93);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.img-lightbox.on{opacity:1;visibility:visible}
.img-lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px;
transform:scale(.94);transition:transform .55s cubic-bezier(.16,.84,.44,1)}
.img-lightbox.on img{transform:scale(1)}
.lightbox-x{position:fixed;top:26px;right:32px;width:46px;height:46px;border-radius:50%;z-index:51;cursor:pointer;
border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.4);color:#fff;font-size:24px;line-height:1;
display:flex;align-items:center;justify-content:center;transition:background .3s ease,transform .35s ease}
.lightbox-x:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}
/* GALERİ OKLARI: aktif görselin konumuna göre (ilk/son'da gizlenir, JS ile) */
.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;z-index:51;cursor:pointer;
align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.4);color:#fff;
font-size:30px;line-height:1;padding-bottom:4px;transition:background .3s ease,transform .3s ease}
.lightbox-nav.prev{left:34px}
.lightbox-nav.next{right:34px}
.lightbox-nav:hover{background:rgba(255,255,255,.16)}
.lightbox-nav.prev:hover{transform:translateY(-50%) translateX(-4px)}
.lightbox-nav.next:hover{transform:translateY(-50%) translateX(4px)}
.detail-content .dn{font-size:12px;letter-spacing:.22em;margin-bottom:30px;color:#bdbdbd}
.detail-content .drow{margin-bottom:14px;display:flex;align-items:center;gap:14px}
.detail-content .dlbl{flex:0 0 84px;width:84px;color:#888;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin:0;white-space:nowrap}
.detail-content .dval{color:#fff;font-size:15px;font-weight:600;line-height:1.4}
/* CLIENT değeri BÜYÜK + bold (orijinal .detail_value_client 35px) */
.detail-content .dval.client{font-size:34px;font-weight:700;line-height:1.08;letter-spacing:0}
.detail-desc{margin:34px 0;font-size:13px;line-height:2.1;color:#cfcfcf;letter-spacing:.03em;width:96%}
.detail-credit-h{color:#888;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:30px 0 14px}
/* CREDIT: yan yana kutular (orijinal .detail_credit_box inline) */
.detail-credits{display:flex;flex-wrap:wrap;gap:10px 44px;margin-bottom:34px}
.detail-credits .cr .crl{color:#888;font-size:11px;letter-spacing:.04em;margin-bottom:4px}
.detail-credits .cr .crv{color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em}
/* NEXT: altta ORTADA, büyük, altında akan çizgi (orijinal .detail_navi_wrapper + next_loop) */
.detail-next{position:relative;display:inline-block;font-size:48px;font-weight:700;letter-spacing:.02em;color:#fff;
align-self:center;text-align:center;border-bottom:1px solid #707070;padding-bottom:8px;margin-top:46px;line-height:1}
.detail-next::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:#fff;
animation:nextLoop 2s cubic-bezier(.215,.61,.355,1) infinite}
@keyframes nextLoop{0%{width:0}100%{width:110px}}
.detail-next:hover{opacity:.6}
.detail-close{display:none}
.loader{position:fixed;inset:0;z-index:6;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .8s;cursor:pointer}
.loader.hide{opacity:0;pointer-events:none}
.skip-loader .loader{display:none} /* aynı oturumda dönüş: loader hiç gösterilmez (flash önlenir) */
.load-hint{position:absolute;bottom:17%;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.28em;
color:#9a9a9a;opacity:0;transition:opacity .6s;pointer-events:none}
.loader.ready-hint .load-hint{opacity:1;animation:hintPulse 1.8s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.32}50%{opacity:.95}}
/* ---- INTRO: marka logosu (P | 86:3) yumuşak belirir ---- */
.load-logo{height:78px;width:auto;opacity:0;transform:translateY(16px);
animation:loadIn .85s cubic-bezier(.22,1,.32,1) forwards}
@keyframes loadIn{to{opacity:1;transform:none}}
/* alt bar: soldan sağa dolan progress (uzunluk 452-70=382) */
.load-logo .bar-fill{stroke-dasharray:382;stroke-dashoffset:382;
animation:barFillLoad 1.6s cubic-bezier(.55,0,.25,1) .35s forwards}
@keyframes barFillLoad{to{stroke-dashoffset:0}}
/* ---- (kullanılmıyor) eski kart-yelpazesi animasyonu ---- */
.fan{position:relative;width:0;height:0;transform:translateY(40px);
animation:fansway 3.6s ease-in-out .9s infinite}
.fan .card{position:absolute;width:64px;height:90px;left:-32px;top:-45px;background:#f3f3f3;border-radius:6px;
box-shadow:0 10px 36px rgba(0,0,0,.55);transform-origin:50% 135%;opacity:0;
animation:fanopen .9s cubic-bezier(.16,1,.3,1) both}
.fan .card::after{content:"";position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);
width:24px;height:18px;background:repeating-linear-gradient(90deg,#141414 0 2px,#f3f3f3 2px 6px)}
.fan .card:nth-child(1){--r:-33deg;animation-delay:.00s}
.fan .card:nth-child(2){--r:-20deg;animation-delay:.06s}
.fan .card:nth-child(3){--r:-7deg;animation-delay:.12s}
.fan .card:nth-child(4){--r:7deg;animation-delay:.18s}
.fan .card:nth-child(5){--r:20deg;animation-delay:.24s}
.fan .card:nth-child(6){--r:33deg;animation-delay:.30s}
@keyframes fanopen{0%{transform:rotate(0deg) translateY(46px) scale(.9);opacity:0}
100%{transform:rotate(var(--r)) translateY(0) scale(1);opacity:1}}
@keyframes fansway{0%,100%{transform:translateY(40px) rotate(-1.4deg)}50%{transform:translateY(32px) rotate(1.4deg)}}