/* ===========================================================
   HESUNA STUDIOS — hesuna.com
   Visual direction A "Living Worlds" · brand rules: MARKA_KILAVUZU.md
   Sections:  1 tokens · 2 base · 3 header · 4 hero · 5 buttons
              6 sections/cards · 7 forms · 8 footer · 9 page bits
              10 motion/reduced-motion · 11 responsive
   =========================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --night:#0B1220;
  --surface:#121B2B;
  --sea:#16324F;
  --amber:#F5B94D;
  --gold:#FFD79A;
  --ember:#C97B34;
  --foam:#E8EDF4;
  --muted:#9AA8BC;
  --signal:#4FD1A5;
  --line:rgba(245,185,77,.16);
  --line-soft:rgba(232,237,244,.10);

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --pad:clamp(20px,5vw,64px);
  --maxw:1180px;
  --radius:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. BASE ---------- */
@font-face{
  font-family:"Manrope";
  src:url("/assets/fonts/manrope-variable-latin.woff2") format("woff2-variations"),
      url("/assets/fonts/manrope-variable-latin.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("/assets/fonts/instrument-serif-400-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/jetbrains-mono-600-latin.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:92px; scroll-behavior:smooth}
body{
  margin:0; background:var(--night); color:var(--foam);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--amber); text-decoration:none}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:4px}
::selection{background:rgba(245,185,77,.28); color:#fff}

h1,h2,h3{margin:0; font-weight:400; line-height:1.08; letter-spacing:-.01em; font-family:var(--serif)}
h1{font-size:clamp(40px,7.2vw,84px)}
h2{font-size:clamp(30px,4.2vw,48px)}
h3{font-size:clamp(21px,2.2vw,26px)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:var(--night); padding:12px 18px;
  font-weight:700; border-radius:0 0 8px 0;
}
.skip:focus{left:0}

.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--amber);
  display:flex; align-items:center; gap:12px; margin:0 0 18px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--amber); opacity:.7}
.lead{font-size:clamp(18px,2vw,20px); color:var(--muted); max-width:62ch}
.muted{color:var(--muted)}

/* ---------- 3. HEADER ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s var(--ease),backdrop-filter .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(11,18,32,.86); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line-soft);
}
.bar{
  max-width:var(--maxw); margin-inline:auto; padding:16px var(--pad);
  display:flex; align-items:center; gap:20px;
}
.brand{display:flex; align-items:center; flex:0 0 auto}
.brand img{height:30px; width:auto}
.nav{margin-left:auto; display:flex; align-items:center; gap:28px}
.nav a{
  color:var(--foam); font-size:14.5px; font-weight:500; letter-spacing:.01em;
  opacity:.82; transition:opacity .2s,color .2s; position:relative;
}
.nav a:hover{opacity:1; color:var(--amber)}
.nav a[aria-current="page"]{color:var(--amber); opacity:1}
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--amber); opacity:.6;
}
.sound-btn{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); background:transparent; border:1px solid var(--line-soft);
  border-radius:999px; padding:7px 14px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; transition:color .2s,border-color .2s;
}
.sound-btn:hover{color:var(--amber); border-color:var(--line)}
.sound-btn .dot{width:6px; height:6px; border-radius:50%; background:var(--muted); transition:background .2s,box-shadow .2s}
.sound-btn[aria-pressed="true"]{color:var(--amber); border-color:var(--line)}
.sound-btn[aria-pressed="true"] .dot{background:var(--amber); box-shadow:0 0 8px var(--amber)}
.menu-btn{
  display:none; font-family:var(--sans); font-size:14px; font-weight:600;
  color:var(--foam); background:transparent; border:1px solid var(--line-soft);
  border-radius:10px; padding:8px 14px; cursor:pointer;
}

/* ---------- 4. HERO ---------- */
.hero{
  position:relative; min-height:100svh; min-height:100vh;
  display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;
}
.hero-media{position:absolute; inset:0; z-index:-3}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:60% 50%}
.hero-scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(to bottom,rgba(11,18,32,.58) 0%,rgba(11,18,32,.12) 32%,rgba(11,18,32,.46) 70%,var(--night) 100%),
    linear-gradient(to right,rgba(11,18,32,.62) 0%,rgba(11,18,32,.06) 55%,rgba(11,18,32,.26) 100%);
}
/* drifting mist + amber horizon glow (section 10 turns these off for reduced motion) */
.hero-mist{
  position:absolute; inset:-10% -20%; z-index:-1; pointer-events:none; opacity:.5;
  background:
    radial-gradient(58% 34% at 22% 62%,rgba(232,237,244,.12),transparent 70%),
    radial-gradient(46% 26% at 72% 70%,rgba(232,237,244,.09),transparent 72%);
  animation:drift 46s ease-in-out infinite alternate;
}
.hero-glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(30% 18% at 34% 52%,rgba(245,185,77,.17),transparent 70%);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,-1.5%,0) scale(1.06)}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:.95}}

.hero-inner{
  position:relative; width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:150px var(--pad) clamp(72px,12vh,132px);
}
.hero h1{max-width:16ch; text-shadow:0 2px 40px rgba(11,18,32,.55)}
.hero .lead{margin-top:22px; color:#C9D4E2; max-width:46ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); opacity:.7;
}
.scroll-cue span.line{width:1px; height:34px; background:linear-gradient(to bottom,var(--amber),transparent); animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.5); transform-origin:top; opacity:.4}50%{transform:scaleY(1); opacity:1}}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:.01em;
  padding:14px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease),background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.btn-primary{background:var(--amber); color:#14202F; box-shadow:0 10px 30px -14px rgba(245,185,77,.85)}
.btn-primary:hover{background:var(--gold); color:#14202F; transform:translateY(-2px)}
.btn-ghost{border-color:rgba(232,237,244,.24); color:var(--foam); background:rgba(11,18,32,.28)}
.btn-ghost:hover{border-color:var(--amber); color:var(--amber); transform:translateY(-2px)}
.arrow-link{
  display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15.5px; color:var(--amber);
}
.arrow-link .a{transition:transform .2s var(--ease)}
.arrow-link:hover .a{transform:translateX(5px)}

/* ---------- 6. SECTIONS + CARDS ---------- */
section{padding:clamp(64px,8vw,104px) 0; position:relative; scroll-margin-top:80px}
.section-head{max-width:70ch; margin-bottom:clamp(34px,5vw,56px)}
.section-head p{margin-top:16px}
.rule{height:1px; background:linear-gradient(to right,var(--line),transparent); border:0; margin:0}

.band{background:linear-gradient(to bottom,rgba(18,27,43,0),rgba(18,27,43,.75) 18%,rgba(18,27,43,.75) 82%,rgba(18,27,43,0))}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(20px,3vw,32px)}
.card{
  position:relative; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
  transform-style:preserve-3d;
}
.card:hover{border-color:var(--line); box-shadow:0 26px 60px -34px rgba(0,0,0,.9)}
.card-media{position:relative; aspect-ratio:16/9; overflow:hidden; background:#0d1626}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.card:hover .card-media img{transform:scale(1.045)}
.card-media::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(18,27,43,.95),rgba(18,27,43,.05) 55%)}
.card-body{padding:clamp(22px,3vw,30px); display:flex; flex-direction:column; gap:12px; flex:1}
.card-body h3{font-family:var(--serif)}
.card-body p{color:var(--muted); font-size:15.5px}
.card-foot{margin-top:auto; padding-top:6px}

.chip{
  position:absolute; left:18px; top:18px; z-index:2;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal); background:rgba(11,18,32,.72); border:1px solid rgba(79,209,165,.32);
  padding:6px 11px; border-radius:999px; backdrop-filter:blur(6px);
}

.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(26px,4vw,56px); align-items:start}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(24px,3.4vw,44px)}
.principle h3{margin-bottom:10px}
.principle p{color:var(--muted); font-size:16px}
.principle .num{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--amber); opacity:.8;
  display:block; margin-bottom:14px;
}
.figure{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-soft)}
.figure img{width:100%}

.fact{display:grid; grid-template-columns:minmax(140px,200px) 1fr; gap:8px 24px; padding:14px 0; border-bottom:1px solid var(--line-soft)}
.fact:last-child{border-bottom:0}
.fact dt{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:4px}
.fact dd{margin:0}

.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.pill{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line-soft); border-radius:999px; padding:7px 14px;
}

.steps{display:grid; gap:2px; counter-reset:step}
.step{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:24px 0; border-top:1px solid var(--line-soft)}
.step:last-child{border-bottom:1px solid var(--line-soft)}
.step b{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--amber); font-weight:600; padding-top:5px}
.step p{color:var(--muted); font-size:16px}
.step h3{font-size:19px; font-family:var(--sans); font-weight:700; margin-bottom:6px; letter-spacing:0}

.prose{max-width:74ch}
.prose h2{margin:48px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:0; margin:30px 0 8px}
.prose p,.prose li{color:#C9D4E2; font-size:16.5px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:8px}
.prose .updated{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}
.note{
  border-left:2px solid var(--amber); background:rgba(245,185,77,.06);
  padding:16px 20px; border-radius:0 10px 10px 0; color:var(--muted); font-size:15.5px;
}

/* page header for inner pages */
.page-head{position:relative; padding:168px 0 clamp(40px,6vw,72px); overflow:hidden}
.page-head.with-art{padding-bottom:clamp(56px,8vw,96px)}
.page-head-art{position:absolute; inset:0; z-index:-2}
.page-head-art img{width:100%; height:100%; object-fit:cover; object-position:50% 42%}
.page-head-art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(11,18,32,.86),rgba(11,18,32,.72) 45%,var(--night) 100%);
}
.page-head h1{max-width:18ch}
.page-head .lead{margin-top:20px}

/* ---------- 7. FORMS ---------- */
.form-card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:clamp(24px,3.4vw,38px);
}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.field label{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea,.subscribe input{
  font-family:var(--sans); font-size:16px; color:var(--foam);
  background:rgba(11,18,32,.6); border:1px solid var(--line-soft); border-radius:10px;
  padding:13px 15px; width:100%; transition:border-color .2s,background .2s;
}
.field textarea{min-height:148px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.subscribe input:focus{border-color:var(--amber); outline:none; background:rgba(11,18,32,.85)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--muted); margin:4px 0 18px}
.consent input{width:18px; height:18px; margin-top:3px; accent-color:var(--amber); flex:0 0 auto}
.form-note{font-size:13.5px; color:var(--muted); margin-top:16px; max-width:62ch}
.form-msg{margin-top:16px; font-size:15px; display:none}
.form-msg.show{display:block}
.form-msg.ok{color:var(--signal)}
.form-msg.err{color:#FFAE8C}

.subscribe{display:flex; gap:12px; flex-wrap:wrap}
.subscribe input{flex:1 1 240px; width:auto}
.subscribe input::placeholder{color:#7F8DA3}
.subscribe .btn{flex:0 0 auto}

/* ---------- 8. FOOTER ---------- */
.site-footer{border-top:1px solid var(--line-soft); background:#090F1A; padding-top:clamp(56px,7vw,84px)}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:44px}
.footer-grid h4{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 16px;
}
.footer-brand img{height:28px; margin-bottom:18px}
.footer-links{display:flex; flex-direction:column; gap:10px}
.footer-links a{color:var(--foam); opacity:.8; font-size:15px}
.footer-links a:hover{opacity:1; color:var(--amber)}
.addr{font-style:normal; color:var(--muted); font-size:15px; line-height:1.8}
.addr a{color:var(--foam)}
.ticker{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  overflow:hidden; padding:12px 0; white-space:nowrap;
}
.ticker-inner{display:inline-block; animation:ticker 54s linear infinite; will-change:transform}
.ticker span{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); opacity:.65; padding-right:56px;
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.legal{padding:28px 0 40px; color:var(--muted); font-size:13.5px; max-width:86ch}
.legal p{margin-bottom:.7em}
.legal a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.legal a:hover{color:var(--amber)}
.hook{
  margin-top:22px; padding-top:22px; border-top:1px solid var(--line-soft);
  color:var(--foam); font-size:15px;
}

/* ---------- 9. PAGE BITS ---------- */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.map-dot{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.map-dot i{
  width:9px; height:9px; border-radius:50%; background:var(--amber); position:relative; display:inline-block;
}
.map-dot i::after{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--amber);
  opacity:.5; animation:ping 3.2s ease-out infinite;
}
@keyframes ping{0%{transform:scale(.6); opacity:.7}100%{transform:scale(1.5); opacity:0}}
.big-404{font-family:var(--serif); font-size:clamp(84px,18vw,200px); line-height:.9; color:var(--amber); opacity:.9}

/* ---------- 10. MOTION ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .js .reveal{opacity:1; transform:none}
  .hero-mist,.hero-glow{animation:none}
  .ticker-inner{animation:none}
}

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:760px){
  .menu-btn{display:inline-flex}
  .nav{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(11,18,32,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line-soft); padding:8px var(--pad) 22px;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .25s var(--ease),transform .25s var(--ease);
  }
  .nav.open{transform:none; opacity:1; pointer-events:auto}
  .nav a{padding:15px 0; border-bottom:1px solid var(--line-soft); font-size:17px; opacity:1}
  .nav a[aria-current="page"]::after{display:none}
  .bar{gap:12px}
  .sound-btn{margin-left:auto; padding:7px 12px}
  .sound-btn .label{display:none}
  .hero{min-height:92svh}
  .hero-inner{padding-top:120px}
  .field-row{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr; gap:2px}
  .step{grid-template-columns:44px 1fr; gap:12px}
  .page-head{padding-top:132px}
}
@media (max-width:420px){
  body{font-size:16px}
  .brand img{height:26px}
}