@font-face{font-family:"Newsreader";src:url("/fonts/newsreader.woff") format("woff");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("/fonts/geist.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"PortradayLogo";src:url("/fonts/inter-logo.woff") format("woff");font-weight:600;font-display:swap}

:root{
  --bg:#07060a; --ink:#f3eee8; --mute:rgba(243,238,232,.6); --dim:rgba(243,238,232,.38); --line:rgba(255,255,255,.09);
  --c1:#fecfad; --c2:#e58a63; --c3:#a85573; --c4:#7b385d;
  --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --pad:clamp(20px,4.4vw,72px); color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh}
body:before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit;text-decoration:none}
[id]{scroll-margin-top:84px}
canvas{display:block}
:focus-visible{outline:2px solid var(--c1);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:#fff;color:#111;padding:10px 14px;border-radius:10px;font-size:14px}
.skip:focus{top:12px}

/* menü */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--pad);transition:background .35s,backdrop-filter .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(7,6,10,.66);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--line)}
.logo{display:inline-flex;align-items:center;gap:10px;font:600 22px/1 "PortradayLogo",var(--sans);letter-spacing:-.03em}
.logo svg{height:24px;width:auto;display:block}.logo i{font-style:normal;background:linear-gradient(90deg,#a85573,#7b385d);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:34px;font-size:14.5px;color:var(--mute)}
.nav-links a{transition:color .2s}.nav-links a:hover{color:var(--ink)}
.nav-cta{font-size:14px;font-weight:500;color:#120d10;background:var(--ink);padding:9px 18px;border-radius:999px;transition:transform .25s,background .25s}
.nav-cta:hover{background:#fff;transform:translateY(-1px)}
@media(max-width:760px){.nav-links{display:none}}

/* sağdaki nokta çubuğu: özellik sırası */
.rail{position:fixed;right:clamp(12px,2vw,28px);top:50%;z-index:40;display:flex;flex-direction:column;gap:9px;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .4s}
.rail.on{opacity:1;pointer-events:auto}
.rail a{position:relative;display:block;width:9px;height:9px;border-radius:50%;background:rgba(243,238,232,.22);transition:background .3s,transform .3s}
.rail a.cur{background:var(--c1);transform:scale(1.5);box-shadow:0 0 14px rgba(254,207,173,.7)}
.rail a span{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12.5px;color:var(--mute);opacity:0;pointer-events:none;transition:opacity .2s}
.rail a:hover span{opacity:1}
@media(max-width:900px){.rail{display:none}}

/* satır maskesi: başlıklar satır satır yükselir */
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ln>span{display:block;transform:translateY(112%);transition:transform 1.15s cubic-bezier(.2,.8,.2,1)}
.ln:nth-child(2)>span{transition-delay:.1s}.ln:nth-child(3)>span{transition-delay:.2s}
.in .ln>span,.ln.in>span{transform:none}
.rv:not(h2){opacity:0;transform:translateY(14px);transition:opacity 1s .25s ease,transform 1s .25s cubic-bezier(.2,.8,.2,1)}
.rv.in:not(h2){opacity:1;transform:none}

/* ilk ekran */
.hero{position:relative;min-height:max(100svh,720px);padding:clamp(104px,15vh,150px) var(--pad) 0;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.hero-title{position:relative;z-index:2;font-family:var(--serif);font-weight:300;font-size:clamp(48px,8.6vw,138px);line-height:.98;letter-spacing:-.04em;font-optical-sizing:auto}
.hero-title .ln>span{transition-duration:1.5s}
.hero-title .ln:nth-child(2)>span{transition-delay:.16s}
.hero-sub{position:relative;z-index:2;max-width:560px;margin-top:clamp(20px,3.4vh,34px);font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--mute);opacity:0;animation:fade 1.4s .9s ease-out forwards}
.hero-status{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;margin-top:clamp(14px,2.4vh,24px);font-size:14px;color:var(--ink);opacity:0;animation:fade 1.4s 1.2s ease-out forwards}
.live{position:relative;width:7px;height:7px;border-radius:50%;background:#ee9a74;box-shadow:0 0 12px #ee9a74}
.live:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(238,154,116,.55);animation:ping 2.4s cubic-bezier(.2,.7,.3,1) infinite}
#art-hero{position:absolute;left:0;bottom:0;width:100%;height:68%;z-index:1}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(7,6,10,0),var(--bg))}
@keyframes fade{to{opacity:1}}
@keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.9);opacity:0}}

/* özellikler */
.features{position:relative}
.feat{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:clamp(28px,6vw,110px);max-width:1320px;margin:0 auto;padding:clamp(44px,10vh,110px) var(--pad)}
.feat:nth-child(even) .feat-art{order:-1}
.feat:nth-child(even){grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.feat h2,.contact h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,76px);line-height:1.02;letter-spacing:-.035em}
.feat p{margin-top:clamp(20px,3vh,32px);max-width:440px;font-size:clamp(16px,1.25vw,18.5px);line-height:1.65;color:var(--mute)}
.pro{display:inline-block;margin-left:6px;padding:1px 9px;border:1px solid rgba(238,154,116,.5);border-radius:999px;font-size:12px;font-weight:500;line-height:1.7;color:#f2b08e;vertical-align:1px}
.feat-art{position:relative;aspect-ratio:1/1;width:100%}
.feat-art canvas{width:100%;height:100%}
@media(max-width:860px){
  .feat,.feat:nth-child(even){grid-template-columns:1fr;gap:18px}
  .feat:nth-child(even) .feat-art{order:0}
  .feat-art{max-width:520px;margin:0 auto}
}

/* çok yakında */
.soon{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(80px,18vh,200px) var(--pad) clamp(80px,16vh,180px);overflow:hidden}
.soon:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 52% 46% at 50% 50%,rgba(168,85,115,.34),rgba(229,138,99,.1) 52%,transparent 100%);pointer-events:none}
.soon-big{position:relative;font-family:var(--serif);font-weight:200;font-size:clamp(64px,13vw,210px);line-height:1;letter-spacing:-.05em}
.soon-big .ln>span{transition-duration:1.6s}
.soon-sub{position:relative;margin-top:clamp(10px,2vh,22px);font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.6vw,38px);letter-spacing:-.025em;color:var(--mute)}
#art-soon{position:relative;width:min(760px,88vw);height:30px;margin-top:clamp(34px,6vh,64px)}

/* iletişim */
.contact{position:relative;padding:clamp(40px,8vh,100px) var(--pad) clamp(80px,14vh,160px)}
.contact:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 46% 60% at 76% 46%,rgba(168,85,115,.3),rgba(229,138,99,.08) 55%,transparent 100%);pointer-events:none}
.contact-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:clamp(28px,5vw,90px);max-width:1320px;margin:0 auto}
.contact h2{font-size:clamp(42px,5.4vw,84px)}
.contact-text>p{margin-top:clamp(20px,3vh,30px);max-width:470px;font-size:clamp(16px,1.3vw,19px);line-height:1.65;color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;margin-top:clamp(24px,4vh,36px);padding:15px 30px;border-radius:999px;background:var(--ink);color:#120d10;font-size:16px;font-weight:500;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s;box-shadow:0 14px 40px -14px rgba(254,207,173,.5)}
.btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 20px 50px -14px rgba(254,207,173,.7)}
.menu{list-style:none;margin-top:clamp(36px,6vh,60px);max-width:520px;border-top:1px solid var(--line)}
.menu li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.menu b{display:block;font-weight:400;font-size:13.5px;color:var(--dim);margin-bottom:3px}
.menu a{font-size:clamp(16px,1.35vw,19px);letter-spacing:-.01em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s}
.menu a:hover{background-size:100% 1px}
.menu button{flex:none;font:500 13px var(--sans);color:var(--mute);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.menu button:hover{color:var(--ink);border-color:rgba(255,255,255,.28)}
.menu button.ok{color:#7be0b0;border-color:rgba(123,224,176,.4)}
.contact-art{position:relative;aspect-ratio:1/1.12;width:100%}
.contact-art canvas{width:100%;height:100%}
@media(max-width:900px){.contact-in{grid-template-columns:1fr}.contact-art{max-width:420px;margin:0 auto;order:-1;aspect-ratio:1/.9}}

/* alt bilgi */
.foot{border-top:1px solid var(--line);padding:clamp(40px,7vh,72px) var(--pad) 28px}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;max-width:1320px;margin:0 auto}
.foot-brand p{margin-top:16px;max-width:300px;font-size:14.5px;line-height:1.6;color:var(--dim)}
.foot-col{display:flex;flex-direction:column;gap:11px;font-size:14.5px;color:var(--mute)}
.foot-col b{font-weight:500;font-size:13.5px;color:var(--dim);margin-bottom:4px}
.foot-col a{transition:color .2s}.foot-col a:hover{color:var(--ink)}
.foot-base{display:flex;justify-content:space-between;gap:24px;max-width:1320px;margin:clamp(36px,6vh,64px) auto 0;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--dim)}
.foot-base span:last-child{max-width:560px;text-align:right}
@media(max-width:760px){.foot-in{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}.foot-base{flex-direction:column;gap:8px}.foot-base span:last-child{text-align:left}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ln>span{transform:none!important;transition:none!important}
  .rv:not(h2),.hero-sub,.hero-status{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .live:after{animation:none}
}