/* ===== RÊVERIE · avant-garde / otherworldly coffee ===== */
:root{
  --void:#08060A; --void2:#0E0A10; --cream:#EFE6D6; --muted:#8a8079;
  --amber:#FF7A3D; --mint:#76E0C2; --line:rgba(239,230,214,.14);
  --maxw:1320px; --disp:'Syne',system-ui,sans-serif; --mono:'Space Mono',monospace; --body:'DM Sans',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-font-smoothing:antialiased}
body{background:var(--void);color:var(--cream);font-family:var(--body);line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kx{font-family:var(--disp);font-weight:800;line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.kx.out{color:transparent;-webkit-text-stroke:1.5px var(--cream)}
em{font-style:normal;color:var(--amber)}
[data-rev]{opacity:0}
.char{display:inline-block;will-change:transform}
.word{display:inline-block;overflow:hidden;vertical-align:top}

/* dokular */
.grain{position:fixed;inset:-30%;z-index:90;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:gr 1.1s steps(4) infinite}
@keyframes gr{50%{transform:translate(2%,-2%)}100%{transform:translate(-2%,2%)}}
.noise-veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 80% at 50% -10%,rgba(255,122,61,.10),transparent 50%),radial-gradient(90% 70% at 80% 110%,rgba(118,224,194,.07),transparent 55%)}

/* custom cursor */
.cur{position:fixed;top:0;left:0;z-index:300;width:36px;height:36px;border:1px solid var(--amber);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:difference;transition:width .3s,height .3s,background .3s}
.cur.big{width:90px;height:90px;background:rgba(255,122,61,.15)}
body.has-cur{cursor:none}@media(hover:none){.cur{display:none}body.has-cur{cursor:auto}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,4vw,48px);transition:.4s}
.nav.solid{background:rgba(8,6,10,.6);backdrop-filter:blur(12px)}
.brand{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:.02em}
.brand sup{color:var(--amber)}
.nav-co{display:none}
@media(min-width:900px){.nav-co{display:block}}
.nav-links{display:flex;gap:24px;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.nav-links a{color:var(--muted);transition:.2s}.nav-links a:hover{color:var(--amber)}
@media(max-width:620px){.nav-links{gap:14px}}

/* HERO */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.orb{position:absolute;top:50%;left:50%;width:min(72vw,720px);aspect-ratio:1;transform:translate(-50%,-54%);z-index:0;filter:saturate(1.05)}
.orb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;animation:float 7s ease-in-out infinite}
.orb::after{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(255,122,61,.28),transparent 62%);filter:blur(30px);z-index:-1}
@keyframes float{50%{transform:translateY(-22px)}}
.hero-type{position:relative;z-index:2;mix-blend-mode:exclusion}
.hero .kx{font-size:clamp(58px,15vw,230px)}
.hero-sub{position:relative;z-index:2;margin-top:28px;font-size:12px;color:var(--cream)}
.c{position:absolute;z-index:3}
.c.tl{top:14%;left:clamp(18px,4vw,48px)}.c.tr{top:14%;right:clamp(18px,4vw,48px)}
.c.bl{bottom:13%;left:clamp(18px,4vw,48px)}.c.br{bottom:13%;right:clamp(18px,4vw,48px)}
.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}

/* marquee çift */
.marq-wrap{position:relative;z-index:2;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--void2);overflow:hidden}
.marq{display:flex;white-space:nowrap;font-family:var(--disp);font-weight:800;font-size:clamp(34px,7vw,86px);letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.marq span{padding-right:.3em}
.marq:not(.rev){animation:ml 30s linear infinite}
.marq.rev{color:transparent;-webkit-text-stroke:1px var(--muted);animation:mr 30s linear infinite;margin-top:6px}
@keyframes ml{to{transform:translateX(-50%)}}
@keyframes mr{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* manifesto */
.manifesto{position:relative;z-index:2;padding:clamp(110px,18vw,240px) clamp(20px,6vw,90px)}
.mf{font-family:var(--disp);font-weight:700;font-size:clamp(30px,5.6vw,82px);line-height:1.04;letter-spacing:-.02em;max-width:22ch}
.mf-meta{margin-top:50px;display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.mf-meta span:first-child{color:var(--amber)}

/* menü */
.menu{position:relative;z-index:2;padding:clamp(60px,8vw,120px) clamp(20px,4vw,48px)}
.menu-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:40px}
.kx.s{font-size:clamp(40px,8vw,120px)}
.mx{list-style:none;border-top:1px solid var(--line)}
.mx li{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,4vw,50px);align-items:center;padding:clamp(20px,3vw,38px) 6px;border-bottom:1px solid var(--line);position:relative;transition:padding .4s,color .4s}
.mx li .ix{font-family:var(--mono);font-size:13px;color:var(--muted)}
.mx li .nm{font-family:var(--disp);font-weight:700;font-size:clamp(26px,4.4vw,60px);text-transform:uppercase;letter-spacing:-.02em;transition:transform .4s}
.mx li .pr{font-family:var(--mono);font-size:clamp(15px,1.6vw,20px);color:var(--cream)}
.mx li::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,122,61,.12),transparent 70%);opacity:0;transition:.4s}
.mx li:hover::before{opacity:1}
.mx li:hover{padding-left:24px}
.mx li:hover .nm{color:var(--amber);transform:translateX(6px)}
.mx li:hover .pr{color:var(--amber)}

/* liquid band */
.liquid{position:relative;z-index:2;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.lq-bg{position:absolute;inset:0;z-index:0}
.lq-bg img{width:100%;height:118%;object-fit:cover;opacity:.7}
.liquid::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(100% 100% at 50% 50%,transparent,rgba(8,6,10,.7))}
.lq-type{position:relative;z-index:2}
.liquid .kx{font-size:clamp(64px,18vw,300px);color:transparent;-webkit-text-stroke:1.5px var(--cream);mix-blend-mode:difference}
.lq-type p{margin-top:20px}

/* ziyaret */
.visit{position:relative;z-index:2;padding:clamp(110px,16vw,220px) clamp(20px,4vw,48px);text-align:center}
.kx.big{font-size:clamp(64px,16vw,260px)}
.coords{margin:60px auto 0;max-width:880px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:left;border-top:1px solid var(--line);padding-top:36px}
@media(max-width:720px){.coords{grid-template-columns:1fr;gap:18px}}
.coords span{display:block;color:var(--amber);margin-bottom:8px}
.coords div{color:var(--cream);font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none}
.visit-cta{margin-top:48px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:17px 30px;background:var(--amber);color:#0a0604;border-radius:2px;transition:transform .3s,background .3s;will-change:transform}
.btn:hover{background:var(--mint);color:#06100c}
.btn.line{background:transparent;color:var(--cream);border:1px solid var(--line)}
.btn.line:hover{border-color:var(--amber);color:var(--amber)}

footer{position:relative;z-index:2;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:30px clamp(20px,4vw,48px);border-top:1px solid var(--line)}
footer a:hover{color:var(--amber)}

@media(prefers-reduced-motion:reduce){*{animation:none!important}[data-rev]{opacity:1!important}}
