/* Isolated S1000RR preview; source site is untouched. */
.hero { background:#101114; min-height:calc(100svh - 60px); color:#fff; }
.hero-cizgi { display:none; }
.hero__ic { width:min(610px,82vw); padding:38px 0 58px; }
.far-crop { position:relative; width:90%; margin:0 auto; aspect-ratio:748/425; overflow:hidden; isolation:isolate; background:#000; -webkit-mask-image:linear-gradient(transparent,#000 9%,#000 93%,transparent); mask-image:linear-gradient(transparent,#000 9%,#000 93%,transparent); }
.far-crop img { position:absolute; width:273.8%; max-width:none; height:auto; left:-86.9%; top:-42.35%; display:block; }
.far-crop { mix-blend-mode:screen; }
.hero .word { font-family:'Saira Condensed','Arial Narrow',sans-serif; margin:4px 0 0; font-size:clamp(64px,9.2vw,125px); line-height:.95; font-weight:800; letter-spacing:.025em; }
.hero .harf { --sheen:linear-gradient(112deg,#F2F4F7 0%,#FFFFFF 22%,#BFC4CD 50%,#FFFFFF 78%,#F2F4F7 100%); }
.hero .im { fill:#fff; opacity:.085; }
.hero .im-yuva { display:none; }
.hero .im-yuva:nth-of-type(1),.hero .im-yuva:nth-of-type(2),.hero .im-yuva:nth-of-type(6),.hero .im-yuva:nth-of-type(8) { display:block; width:22px!important; }
.hero .im-yuva:nth-of-type(1) { left:9%!important;top:20%!important; }
.hero .im-yuva:nth-of-type(2) { left:88%!important;top:24%!important; }
.hero .im-yuva:nth-of-type(6) { left:11%!important;top:80%!important; }
.hero .im-yuva:nth-of-type(8) { left:87%!important;top:78%!important; }
body.giris .far-crop { animation:farGelis 1.5s ease-out .3s both; }
@keyframes farGelis { from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:none} }
.test-notu { text-align:center;font-size:11px;color:var(--ink-3);margin:18px 16px 0; }
@media(max-width:700px) {
 .hero { min-height:calc(100svh - 53px); }
 .hero__ic { width:86vw;padding:24px 0 48px; }
 .hero .word {font-size:19.4vw;letter-spacing:.015em;margin-top:3px;}
 .far-crop {width:97%;}
 .hero .im-yuva {width:15px!important;}
}
@media(prefers-reduced-motion:reduce) {body.giris .far-crop {animation:none;}}
.hero .word { font-size:clamp(64px,11vw,148px); }
.far-crop { -webkit-mask-image:radial-gradient(ellipse 68% 78% at 50% 50%,#000 60%,transparent 100%); mask-image:radial-gradient(ellipse 68% 78% at 50% 50%,#000 60%,transparent 100%); }
@media(max-width:900px) { .proj-izgara {margin:0;padding:2px 0 10px;gap:20px;} }
@media(max-width:700px) { .hero .word {font-size:22vw;} }
/* Sedef: one material shared by both themes and all surfaces. */
:root {
 --pearl-x:50%; --pearl-y:45%; --pearl-angle:112deg;
 --pearl-ink-a:#111214; --pearl-ink-b:#191a1c; --pearl-ink-c:#252628;
 --pearl-wash:rgba(181,174,190,.035); --pearl-warm:rgba(202,195,180,.03);
 --pearl-cool:rgba(175,185,190,.025); --pearl-glint:rgba(25,25,28,.06);
 --bg:#f5f5f6; --surface:#ffffff; --surface-2:#eaeaec;
 --ink:#101114; --ink-2:#393a3e; --ink-3:#61636a;
 --line:#d9dade; --line-2:#a9abb2;
 --pearl-sheen:linear-gradient(var(--pearl-angle),var(--pearl-ink-a) 5%,var(--pearl-ink-b) 32%,var(--pearl-ink-c) 47%,var(--pearl-ink-a) 60%,var(--pearl-ink-b) 84%,var(--pearl-ink-a));
}
html[data-tema="koyu"] {
 --bg:#0d0e10; --surface:#151619; --surface-2:#202126;
 --ink:#ffffff; --ink-2:#d1d2d5; --ink-3:#a4a7ad;
 --line:#2c2d31; --line-2:#505259;
 --pearl-ink-a:#ffffff; --pearl-ink-b:#f1f0f4; --pearl-ink-c:#f5f4f0;
 --pearl-wash:rgba(194,185,207,.035); --pearl-warm:rgba(218,210,190,.025);
 --pearl-cool:rgba(185,195,199,.025); --pearl-glint:rgba(245,245,250,.20);
}
@media(prefers-color-scheme:dark) {
 html:not([data-tema="acik"]) {
  --bg:#0d0e10;--surface:#151619;--surface-2:#202126;--ink:#ffffff;--ink-2:#d1d2d5;--ink-3:#a4a7ad;--line:#2c2d31;--line-2:#505259;
  --pearl-ink-a:#ffffff;--pearl-ink-b:#f1f0f4;--pearl-ink-c:#f5f4f0;
  --pearl-wash:rgba(194,185,207,.035);--pearl-warm:rgba(218,210,190,.025);--pearl-cool:rgba(185,195,199,.025);--pearl-glint:rgba(245,245,250,.20);
 }
}
body,.nav,.menu-panel,.sec,.alt,.proj,.kutu,.yan,.ust,.kaydet-cubuk {
 transition:background-color .55s ease,color .55s ease,border-color .55s ease;
}
.hero {
 color:var(--ink);background:var(--bg);isolation:isolate;
}
.hero:before {
 content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
 background:radial-gradient(ellipse 42% 56% at var(--pearl-x) var(--pearl-y),var(--pearl-wash),transparent 82%),radial-gradient(ellipse 40% 52% at 65% 70%,var(--pearl-warm),transparent);
 opacity:.65;
}
.hero__ic {width:min(660px,84vw);padding:35px 0 45px;}
.hero .word {font-size:clamp(68px,11.7vw,162px);font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:800;letter-spacing:.005em;margin-top:-3px;}
.far-crop {width:90%;background:#fff;mix-blend-mode:multiply;opacity:1;}
.far-crop img {filter:grayscale(1) invert(1);transition:none;}
html[data-tema="koyu"] .far-crop {background:#000;mix-blend-mode:screen;}
html[data-tema="koyu"] .far-crop img {filter:grayscale(1);}
.far-crop:after {
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(var(--pearl-angle),transparent 15%,rgba(181,148,209,.32) 34%,rgba(230,207,154,.30) 48%,rgba(173,213,217,.25) 61%,transparent 80%);
 background-size:200% 100%;background-position:var(--pearl-x) 50%;mix-blend-mode:soft-light;
}
.hero .im {fill:var(--ink);opacity:.12;}
.hero .harf {
 --sheen:var(--pearl-sheen);
 background-image:var(--pearl-sheen);background-size:240% 100%;
 background-position:var(--pearl-x) 50%;
 animation:pearlBreathe 8s ease-in-out infinite;
 animation-delay:calc(var(--letter-i,0) * .13s)!important;
}
body.giris .far-crop {animation:headlightOn 1.5s cubic-bezier(.2,.7,.3,1) .15s both;}
body.giris .harf {
 animation:wordArrive .6s cubic-bezier(.16,1,.3,1) both,pearlBreathe 8s ease-in-out infinite;
 animation-delay:calc(1.15s + var(--letter-i,0) * .075s),calc(1.8s + var(--letter-i,0) * .13s)!important;
}
@keyframes headlightOn {0%{opacity:0;transform:translateY(5px)}30%{opacity:.18}65%{opacity:.68}100%{opacity:1;transform:none}}
@keyframes wordArrive {from{opacity:0;transform:translateY(16px);clip-path:inset(100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes pearlBreathe {0%,68%,100%{filter:brightness(1) drop-shadow(0 0 0 transparent)}82%{filter:brightness(1.15) drop-shadow(0 0 9px var(--pearl-glint))}}
.sec__baslik,.detay-baslik {
 font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:700;
 background:var(--pearl-sheen);background-size:200% 100%;background-position:var(--pearl-x) 50%;
 background-clip:text;-webkit-background-clip:text;color:transparent;
}
.proj,.kutu,.menu-panel,.yukari,.btn--cerceve,.etiket {
 background-color:var(--surface);
 background-image:linear-gradient(var(--pearl-angle),transparent 15%,var(--pearl-wash) 40%,var(--pearl-warm) 52%,var(--pearl-cool) 65%,transparent 90%);
 background-size:220% 100%;background-position:var(--pearl-x) 50%;border-color:var(--line);
}
.rule {background:var(--pearl-sheen);background-size:220% 100%;background-position:var(--pearl-x) 50%;}
.logo {font-family:"Saira Condensed",sans-serif;font-weight:800;letter-spacing:.04em;}
.sec {border-top-color:var(--line);}
@media(max-width:700px){
 .hero__ic{width:88vw;padding:24px 0 40px;}
 .hero .word{font-size:23.4vw;letter-spacing:0;margin-top:0;}
 .far-crop{width:96%;}
}
@media(prefers-reduced-motion:reduce) {
 *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;}
 body.giris .far-crop,body.giris .harf,.hero .harf {animation:none!important;opacity:1;transform:none;clip-path:none;}
}
/* The pearl band spans the whole word instead of repeating on every letter. */
.hero .harf {
 background-size:700% 100%;
 background-position:calc(var(--letter-i,0) * 16.666% + var(--pearl-travel,0%)) 50%;
}
html[data-tema="koyu"] .hero .harf {
 --pearl-ink-b:#f1f0f4;--pearl-ink-c:#f5f4f0;
 background-image:linear-gradient(180deg,transparent 20%,rgba(13,14,16,.07) 100%),var(--pearl-sheen);
}
.far-crop:after {
 mask-image:url("../img/farlar-reference.jpg");mask-mode:luminance;mask-size:273.8% auto;mask-position:50% 40.54%;mask-repeat:no-repeat;
 mix-blend-mode:color;
 opacity:.65;
}


/* The photo must never pass through gray during theme changes.
   Blend/filter switch together; opening animates only opacity and transform. */
.far-crop {
 --far-mask:linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%);
 -webkit-mask-image:var(--far-mask);mask-image:var(--far-mask);
 -webkit-mask-composite:source-in;mask-composite:intersect;
 background:transparent;mix-blend-mode:multiply;
}
.far-crop img {filter:grayscale(1) invert(1);transition:none;}
.far-crop:after {display:none;}
html[data-tema="koyu"] .far-crop {background:transparent;mix-blend-mode:screen;}
html[data-tema="koyu"] .far-crop img {filter:grayscale(1);transition:none;}
@media(prefers-color-scheme:dark){
 html:not([data-tema="acik"]) .far-crop {background:transparent;mix-blend-mode:screen;}
 html:not([data-tema="acik"]) .far-crop img {filter:grayscale(1);transition:none;}
 html:not([data-tema="acik"]) .hero .harf {
 --pearl-ink-b:#f1f0f4;--pearl-ink-c:#f5f4f0;
 background-image:linear-gradient(180deg,transparent 20%,rgba(13,14,16,.07) 100%),var(--pearl-sheen);
 }
}