@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Archivo:wght@400;500;600;700&display=swap');

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--terracotta);color:var(--paper)}
img{max-width:100%;display:block}
a{color:inherit}
input,textarea,button{font-family:inherit}
button{cursor:pointer}

/* ── keyframes ── */
@keyframes npKen{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@keyframes npRise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes npCue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(8px);opacity:1}}
@keyframes npPage{from{transform:translateY(9px);opacity:0}to{transform:none;opacity:1}}
@keyframes npMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.np-page{animation:npPage var(--dur-page) ease both}

/* ── header ── */
.np-head{position:fixed;top:0;left:0;right:0;z-index:60;transition:background var(--dur-header) ease,box-shadow var(--dur-header) ease}
.np-head a,.np-head span{color:var(--paper)}
.np-head.np-solid{background:rgba(244,241,234,.94);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(28,26,23,.08)}
.np-head.np-solid a,.np-head.np-solid span{color:var(--ink)}
/* Mobil menü açıkken header zemini açık renge döner -> yazılar da mürekkep rengi olur */
.np-head.np-menu-open a,.np-head.np-menu-open span{color:var(--ink)}
.np-link.np-on{color:var(--sand) !important}
.np-head.np-solid .np-link.np-on{color:var(--terracotta) !important}
.np-head .np-mm-link.np-on{color:var(--terracotta) !important}
.np-cta{background:var(--terracotta);color:var(--paper) !important;transition:background .3s,color .3s;text-decoration:none;display:inline-block}
.np-cta:hover{background:var(--terracotta-dark);color:var(--paper) !important}
.np-head.np-solid .np-cta{background:var(--terracotta);color:var(--paper) !important}
.np-head.np-solid .np-cta:hover{background:var(--terracotta-dark);color:var(--paper) !important}

/* ── hero slider ── */
.np-hero-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-crossfade) ease}
.np-hero-slide.np-hero-on{opacity:1}
.np-hero-slide.np-hero-on img{animation:npKen var(--dur-ken) ease-out both}
.np-dot{width:30px;height:2px;background:rgba(244,241,234,.38);cursor:pointer;transition:background .35s;border:none;padding:0;display:block}
.np-dot.on{background:var(--sand)}

/* ── entrance / motion (triggered by IntersectionObserver adding .np-in, see main.js) ── */
.np-rise,.np-rev{opacity:0}
.np-rise.np-in{animation:npRise var(--dur-rise) var(--ease-np) both}
.np-rev.np-in{animation:npRise var(--dur-rev) var(--ease-np) both}
.np-cue{animation:npCue 2.2s ease-in-out infinite}

.np-zoom{overflow:hidden;position:relative}
.np-zoom img{transition:transform var(--dur-zoom) var(--ease-np);will-change:transform}
.np-zoom:hover img{transform:scale(1.06)}

.np-line{position:relative;text-decoration:none;display:inline-block}
.np-line::after{content:'';position:absolute;left:0;bottom:-3px;height:1px;width:0;background:currentColor;transition:width var(--dur-line) var(--ease-np)}
.np-line:hover::after{width:100%}

.np-outline{color:transparent;-webkit-text-stroke:1.5px rgba(246,243,236,.7)}
.np-vrail{writing-mode:vertical-rl;text-orientation:mixed}
.np-heronum{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.np-scene:hover .np-scene-title{transform:translateY(-6px)}
.np-scene-title{transition:transform .6s var(--ease-np)}
.np-bignum{font-family:var(--font-serif);font-weight:400;line-height:.78;letter-spacing:-4px}

.np-marquee{display:flex;width:max-content;animation:npMarquee 34s linear infinite}
.np-marquee-slow{animation-duration:52s}
.np-marq-item{font-family:var(--font-serif);font-weight:400;font-size:clamp(56px,11vw,180px);line-height:.9;letter-spacing:-2px;white-space:nowrap;padding:0 .28em;display:flex;align-items:center;gap:.28em}
.np-marq-dot{width:12px;height:12px;border-radius:50%;background:var(--terracotta);flex:none}

@media (prefers-reduced-motion: reduce){
  .np-hero-slide.np-hero-on img{animation:none}
  .np-rise,.np-rev{animation:none !important;opacity:1;transform:none}
  .np-cue{animation:none}
  .np-marquee{animation:none}
  .np-zoom img{transition:none}
  .np-zoom:hover img{transform:none}
  html{scroll-behavior:auto}
}