/* ============================================================
   OVIELLA — MAISON  ·  styles
   Palette: warm ink · cream · champagne gold
   ============================================================ */

:root{
  --ink:      #0b0a09;
  --ink-soft: #17140f;
  --cream:    #f2ece1;
  --cream-2:  #e7dfd0;
  --gold:     #c6a667;
  --gold-dim: #9e8551;
  --muted:    #8d8578;
  --line:     rgba(242,236,225,.14);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.19,1,.22,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
em{ font-family:var(--serif); font-style:italic; }
img{ max-width:100%; display:block; }
::selection{ background:var(--gold); color:var(--ink); }

.eyebrow{
  font-size:.66rem; letter-spacing:.42em; color:var(--gold);
  text-transform:uppercase; font-weight:400;
}
.section-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.1rem,5.2vw,4.4rem);
  line-height:1.02; letter-spacing:.01em; margin:.5em 0 .6em;
}
.section-note{ color:var(--muted); max-width:44ch; line-height:1.9; font-size:.92rem; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block; margin-top:2.4rem;
  padding:1.05rem 2.4rem;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:.68rem; letter-spacing:.34em; text-transform:uppercase;
  background:transparent; cursor:pointer;
  transition:color .6s var(--ease), background .6s var(--ease), letter-spacing .6s var(--ease);
}
.btn:hover{ background:var(--gold); color:var(--ink); letter-spacing:.42em; }
.btn--ghost{ border-color:var(--line); color:var(--cream); }
.btn--ghost:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* ============================================================
   INTRO CURTAIN
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:1000;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem;
  transition:transform 1.1s var(--ease), opacity .6s ease 1s;
}
.intro.done{ transform:translateY(-101%); pointer-events:none; }
.intro__mark{
  display:flex; gap:.28em;
  font-family:var(--sans); font-weight:200;
  font-size:clamp(1.8rem,7vw,4.2rem); letter-spacing:.12em; color:var(--cream);
}
.intro__mark span{
  opacity:0; transform:translateY(1.1em);
  animation:letterUp .9s var(--ease) forwards;
}
.intro__mark span:nth-child(1){ animation-delay:.10s }
.intro__mark span:nth-child(2){ animation-delay:.19s }
.intro__mark span:nth-child(3){ animation-delay:.28s }
.intro__mark span:nth-child(4){ animation-delay:.37s }
.intro__mark span:nth-child(5){ animation-delay:.46s }
.intro__mark span:nth-child(6){ animation-delay:.55s }
.intro__mark span:nth-child(7){ animation-delay:.64s }
.intro__sub{
  font-size:.62rem; letter-spacing:.6em; color:var(--gold);
  opacity:0; animation:fadeIn .8s ease .95s forwards;
}
@keyframes letterUp{ to{ opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ to{ opacity:1; } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:1.6rem clamp(1.2rem,4vw,3rem);
  mix-blend-mode:difference;
  transition:padding .5s var(--ease);
}
.nav.shrink{ padding:1rem clamp(1.2rem,4vw,3rem); }
.nav a{ color:#fff; }
.nav__left, .nav__right{ display:flex; gap:2.1rem; }
.nav__right{ justify-content:flex-end; }
.nav__left a, .nav__right a{
  font-size:.64rem; letter-spacing:.26em; position:relative; padding-bottom:2px;
}
.nav__left a::after, .nav__right a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:#fff; transition:width .5s var(--ease);
}
.nav__left a:hover::after, .nav__right a:hover::after{ width:100%; }
.nav__logo{
  font-family:var(--sans); font-weight:300;
  font-size:1.15rem; letter-spacing:.42em; text-indent:.42em;
  text-align:center; white-space:nowrap;
}
.nav__toggle{ display:none; }

/* ---------- MOBILE MENU ---------- */
.mobilemenu{
  position:fixed; inset:0; z-index:850;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.8rem;
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease);
}
.mobilemenu.open{ opacity:1; pointer-events:auto; }
.mobilemenu a{
  font-family:var(--serif); font-size:2rem; letter-spacing:.1em; color:var(--cream);
}

/* ============================================================
   EDITORIAL MEDIA PLACEHOLDERS
   (swap for real photos — see README)
   ============================================================ */
[data-editorial]{
  position:relative; overflow:hidden;
  background-color:#151210;
  background-size:cover; background-position:center;
}
[data-editorial]::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(198,166,103,.22), transparent 55%),
    radial-gradient(130% 120% at 85% 90%, rgba(20,16,12,.9), transparent 60%),
    linear-gradient(160deg, #1c1813 0%, #0c0a08 60%, #050403 100%);
}
[data-editorial]::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
/* Gerçek görsel varken: opak dolguyu şeffaf karartma perdesine çevir */
[data-editorial].has-image::before{
  background:linear-gradient(180deg, rgba(11,10,9,.30), rgba(11,10,9,.20) 45%, rgba(11,10,9,.70));
}
[data-editorial].has-image::after{ opacity:.16; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; height:100vh; min-height:640px; overflow:hidden; }
.hero__media{ position:absolute; inset:0; transform:scale(1.08); animation:slowZoom 14s var(--ease) forwards; }
@keyframes slowZoom{ to{ transform:scale(1); } }
.hero__grain{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,10,9,.35), rgba(11,10,9,.15) 40%, rgba(11,10,9,.85)); }
.hero__content{
  position:absolute; left:clamp(1.4rem,6vw,6rem); bottom:clamp(3rem,10vh,7rem);
  max-width:min(90vw,760px);
}
.hero__eyebrow{ font-size:.64rem; letter-spacing:.42em; color:var(--gold); text-transform:uppercase; }
.hero__title{ font-weight:300; margin:1.1rem 0 1.4rem; }
.hero__title span{ display:block; }
.hero__title .reveal:first-child{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,3vw,2.1rem); color:var(--cream-2);
}
.hero__word{
  font-family:var(--sans); font-weight:200;
  font-size:clamp(3.2rem,13vw,9rem); letter-spacing:.06em; line-height:.94;
}
.hero__lede{ color:var(--cream-2); font-size:1.05rem; max-width:46ch; line-height:1.6; }
.hero__scroll{
  position:absolute; right:clamp(1.2rem,4vw,3rem); bottom:2.4rem;
  font-size:.58rem; letter-spacing:.4em; color:var(--muted);
  writing-mode:vertical-rl;
}
.hero__scroll::after{ content:""; display:block; width:1px; height:44px; margin:.8rem auto 0;
  background:linear-gradient(var(--gold),transparent); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ border-block:1px solid var(--line); padding:1.1rem 0; overflow:hidden; background:var(--ink-soft); }
.marquee__track{ display:flex; white-space:nowrap; width:max-content; animation:scrollX 32s linear infinite; }
.marquee__track span{ font-family:var(--serif); font-style:italic;
  font-size:1.5rem; letter-spacing:.05em; color:var(--cream-2); padding-right:1rem; }
@keyframes scrollX{ to{ transform:translateX(-33.33%); } }

/* ============================================================
   SPLIT
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; height:82vh; min-height:560px; }
.split__side{ position:relative; display:flex; align-items:center; justify-content:center;
  filter:grayscale(.35) brightness(.72); transition:filter 1s var(--ease), flex 1s var(--ease); }
.split__side:hover{ filter:grayscale(0) brightness(.95); }
.split__side + .split__side{ border-left:1px solid var(--line); }
.split__label{ position:relative; z-index:2; text-align:center; }
.split__num{ font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--gold); }
.split__label h2{ font-family:var(--sans); font-weight:200;
  font-size:clamp(2.4rem,6vw,5rem); letter-spacing:.24em; text-indent:.24em; margin:.4rem 0; }
.split__cta{ font-size:.62rem; letter-spacing:.34em; color:var(--cream-2);
  opacity:0; transform:translateY(10px); transition:.6s var(--ease); display:inline-block; }
.split__side:hover .split__cta{ opacity:1; transform:translateY(0); }

/* ============================================================
   PIECES / GRID
   ============================================================ */
.pieces{ padding:clamp(4rem,11vw,9rem) clamp(1.2rem,5vw,5rem); }
.pieces__head{ max-width:640px; margin:0 auto clamp(3rem,6vw,5rem); text-align:center; }
.pieces__head .section-note{ margin:0 auto; }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2.2rem); }
.card{ cursor:pointer; }
.card__media{ position:relative; aspect-ratio:3/4; overflow:hidden;
  background:#151210 center/cover no-repeat; }
.card__media::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(160deg,#211c16,#0c0a08 65%,#050403); }
.card__media::after{ content:""; position:absolute; inset:0; opacity:.45; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
/* Gerçek fotoğraf varken: opak placeholder katmanını kaldır, ince alt karartma bırak */
.card__media.has-image::before{
  background:linear-gradient(180deg, rgba(11,10,9,0) 55%, rgba(11,10,9,.45));
}
.card__media.has-image::after{ opacity:0; }
.card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.card:hover .card__media{ transform:none; }
.card__media{ transition:filter .8s var(--ease); }
.card:hover .card__media.has-image{ filter:brightness(1.06); }
.card__badge{ position:absolute; top:1rem; left:1rem; z-index:2;
  font-size:.54rem; letter-spacing:.28em; color:var(--gold); border:1px solid var(--gold-dim);
  padding:.35rem .6rem; text-transform:uppercase; }
.card__initial{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:8rem; color:rgba(198,166,103,.14); z-index:1;
  transition:transform 1.1s var(--ease), color .6s ease; }
.card:hover .card__initial{ transform:scale(1.12); color:rgba(198,166,103,.24); }
.card__info{ display:flex; justify-content:space-between; align-items:baseline;
  padding:1rem .1rem 0; border-top:1px solid var(--line); margin-top:1rem; }
.card__name{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; }
.card__meta{ font-size:.7rem; color:var(--muted); letter-spacing:.06em; }
.card__price{ font-family:var(--serif); font-size:1.05rem; color:var(--gold); }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{ padding:clamp(5rem,14vw,11rem) 1.2rem; text-align:center; border-block:1px solid var(--line); }
.manifesto__text{ font-family:var(--serif); font-weight:300;
  font-size:clamp(1.6rem,4.4vw,3.4rem); line-height:1.35; letter-spacing:.01em; }

/* ============================================================
   THE HOUSE
   ============================================================ */
.house{ display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; }
.house__media{ min-height:520px; }
.house__body{ padding:clamp(3rem,7vw,7rem) clamp(1.6rem,5vw,5rem); align-self:center; max-width:620px; }
.house__body p{ color:var(--cream-2); line-height:1.95; margin-top:1.3rem; font-size:.98rem; max-width:50ch; }

/* ============================================================
   ACCESS
   ============================================================ */
.access{ padding:clamp(5rem,13vw,10rem) 1.2rem; text-align:center; }
.access__inner{ max-width:620px; margin:0 auto; }
.access .section-note{ margin:0 auto 2.6rem; }
.access__form{ display:flex; max-width:480px; margin:0 auto; border-bottom:1px solid var(--gold); }
.access__form input{ flex:1; background:transparent; border:0; color:var(--cream);
  padding:1rem .4rem; font-family:var(--sans); letter-spacing:.14em; font-size:.8rem; }
.access__form input::placeholder{ color:var(--muted); letter-spacing:.24em; }
.access__form input:focus{ outline:none; }
.access__form button{ background:transparent; border:0; color:var(--gold); cursor:pointer;
  font-size:.68rem; letter-spacing:.3em; padding:0 .6rem; transition:letter-spacing .5s var(--ease); }
.access__form button:hover{ letter-spacing:.44em; }
.access__msg{ margin-top:1.4rem; color:var(--gold); font-size:.78rem; letter-spacing:.16em;
  min-height:1.2em; opacity:0; transition:opacity .5s ease; }
.access__msg.show{ opacity:1; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding:clamp(3rem,7vw,6rem) clamp(1.4rem,5vw,5rem) 2.4rem; border-top:1px solid var(--line); }
.footer__mark{ font-family:var(--sans); font-weight:200;
  font-size:clamp(2.6rem,11vw,8rem); letter-spacing:.14em; text-indent:.14em;
  color:var(--ink-soft); -webkit-text-stroke:1px var(--line); text-align:center; margin-bottom:3rem; }
.footer__cols{ display:flex; flex-wrap:wrap; gap:3rem 5rem; justify-content:center; margin-bottom:3.5rem; }
.footer__cols h4{ font-size:.62rem; letter-spacing:.3em; color:var(--gold); margin-bottom:1.1rem; font-weight:400; }
.footer__cols a{ display:block; font-size:.82rem; color:var(--cream-2); letter-spacing:.06em;
  margin-bottom:.7rem; transition:color .4s ease; }
.footer__cols a:hover{ color:var(--gold); }
.footer__base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  border-top:1px solid var(--line); padding-top:1.8rem;
  font-size:.6rem; letter-spacing:.24em; color:var(--muted); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .nav__left, .nav__right{ display:none; }
  .nav{ grid-template-columns:auto 1fr; mix-blend-mode:normal; background:linear-gradient(var(--ink),transparent); }
  .nav__logo{ text-align:left; }
  .nav__toggle{ display:flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
  .nav__toggle span{ width:26px; height:1px; background:var(--cream); transition:.4s var(--ease); }
  .nav__toggle.x span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
  .nav__toggle.x span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }
  .split{ grid-template-columns:1fr; height:auto; }
  .split__side{ height:52vh; }
  .split__side + .split__side{ border-left:0; border-top:1px solid var(--line); }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .house{ grid-template-columns:1fr; }
  .house__media{ min-height:60vh; }
  .footer__base{ justify-content:center; text-align:center; }
}
@media (max-width:520px){
  .grid{ grid-template-columns:1fr; }
  .hero__lede{ font-size:.95rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}