/* ============================================================
   NEHİR — Triko & Penye  ·  luxury single page
   ============================================================ */

:root{
  --ink:#0c0b08;
  --ink-2:#13110d;
  --ink-3:#1b1812;
  --paper:#f1ebdc;
  --paper-dim:rgba(241,235,220,.62);
  --paper-faint:rgba(241,235,220,.34);
  --line:rgba(241,235,220,.14);
  --gold:#c7a14b;
  --gold-2:#e7c878;
  --gold-deep:#9a7a35;

  --serif:"Bodoni Moda", "Times New Roman", serif;
  --sans:"Jost", system-ui, sans-serif;
  --round:"Comfortaa", system-ui, sans-serif;
  --script:"Pinyon Script", cursive;

  --pad: clamp(22px, 5vw, 84px);
  --maxw: 1320px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* film grain + vignette overlays --------------------------------- */
.grain{
  position:fixed; inset:-200% ; z-index:200; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-2%,2%)}
  80%{transform:translate(4%,1%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:198; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 32%, transparent 52%, rgba(0,0,0,.55) 100%);
}

/* ---- shared type helpers ---- */
.eyebrow{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(10px,.78vw,12px); letter-spacing:.42em;
  text-transform:uppercase; color:var(--gold);
}
.eyebrow .dot{ display:inline-block; width:5px;height:5px;border-radius:50%;
  background:var(--gold); margin:0 .8em; vertical-align:middle; }

.section-pad{ padding-left:var(--pad); padding-right:var(--pad); }
.wrap{ max-width:var(--maxw); margin:0 auto; width:100%; }

/* =========================================================
   LOADER
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:300; background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .9s ease, visibility .9s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader__mark{
  font-family:var(--round); font-weight:600; letter-spacing:-.04em;
  font-size:clamp(40px,9vw,104px); color:var(--paper);
  display:flex; overflow:hidden;
}
.loader__mark span{
  display:inline-block; transform:translateY(110%);
  animation:loadUp .8s cubic-bezier(.22,1,.36,1) forwards;
}
.loader__bar{
  position:absolute; bottom:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-2));
  animation:loadBar 1.5s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes loadUp{ to{ transform:translateY(0); } }
@keyframes loadBar{ to{ width:100%; } }

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2.2vw,26px) var(--pad);
  transition:background .5s ease, padding .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
.topbar.scrolled{
  background:rgba(12,11,8,.74); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:clamp(10px,1.6vw,16px); padding-bottom:clamp(10px,1.6vw,16px);
}
/* brand lockup ------------------------------------------------- */
.brand{ display:flex; flex-direction:column; gap:1px; line-height:1;
  text-decoration:none; }
.brand__word{ font-family:var(--round); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(26px,3vw,38px); color:var(--paper); position:relative;
  display:inline-flex; align-items:flex-start; }
.brand__i{ position:relative; }
.brand__i::after{ content:""; position:absolute; left:50%; top:.04em;
  width:.2em; height:.2em; border-radius:50%; transform:translateX(-50%);
  background:radial-gradient(circle at 35% 30%, #f6e09a, var(--gold) 58%, var(--gold-deep));
  box-shadow:0 0 5px rgba(231,200,120,.7); }
.brand__r{ font-size:.3em; color:var(--gold-2); top:-.2em; margin-left:.12em;
  font-weight:600; }
.brand__script{ font-family:var(--script); color:var(--gold);
  font-size:clamp(18px,1.9vw,24px); line-height:1; margin-left:.3em;
  margin-top:-.12em; white-space:nowrap; }
.topbar__links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); }
.topbar__links a{
  color:var(--paper); text-decoration:none; font-size:11px;
  letter-spacing:.24em; text-transform:uppercase; font-weight:400;
  position:relative;
}
.topbar__links a.is-cta{
  border:1px solid var(--gold); color:var(--gold-2);
  padding:11px 18px; letter-spacing:.18em;
}
.topbar__links a.is-cta::after{ display:none; }
.topbar__links a.is-cta:hover{ background:var(--gold); color:var(--ink); }
.topbar__links a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0;
  background:currentColor; transition:width .4s ease;
}
.topbar__links a:not(.is-cta):hover::after{ width:100%; }
@media(max-width:600px){
  .topbar__links a:not(.is-cta){ display:none; }
  .brand__script{ display:none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden;
  padding:14vh var(--pad) 9vh;
}
/* flowing gold river (svg) */
.hero__river{ position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; transform-origin:50% 50%;
  animation:riverBreathe 18s ease-in-out infinite; }
.hero__river path{ fill:none; stroke-linecap:round; }
/* faint base lines, drawn in on load */
.thread .base{ stroke:url(#riverGrad); stroke-width:1.1; opacity:.34;
  stroke-dasharray:2700; stroke-dashoffset:2700;
  animation:drawRiver 2.8s cubic-bezier(.65,0,.35,1) forwards; }
.thread.t2 .base{ animation-delay:.14s; }
.thread.t3 .base{ animation-delay:.28s; }
.thread.t4 .base{ animation-delay:.42s; }
/* travelling light along each thread */
.thread .flow{ stroke:url(#flowGrad); stroke-width:1.8; opacity:.9;
  stroke-dasharray:200 2600; stroke-dashoffset:2800;
  filter:drop-shadow(0 0 6px rgba(231,200,120,.45));
  animation:flowMove 9s linear infinite; }
.thread.t1 .flow{ animation-duration:9.5s;  animation-delay:-1s; }
.thread.t2 .flow{ animation-duration:12s;   animation-delay:-5s; }
.thread.t3 .flow{ animation-duration:10.5s; animation-delay:-8s; }
.thread.t4 .flow{ animation-duration:13.5s; animation-delay:-3s; }
@keyframes drawRiver{ to{ stroke-dashoffset:0; } }
@keyframes flowMove{ from{ stroke-dashoffset:2800; } to{ stroke-dashoffset:0; } }
@keyframes riverBreathe{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-16px) scale(1.03); }
}

.hero__inner{ position:relative; z-index:3; }
.hero__eyebrow{ margin-bottom:clamp(22px,3vw,40px); opacity:0;
  animation:fadeUp 1s ease 1.2s forwards; }

.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(56px,15.5vw,260px); line-height:.86;
  letter-spacing:-.02em; color:var(--paper);
}
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .ln > span{ display:block; transform:translateY(108%);
  animation:lineUp 1.1s cubic-bezier(.22,1,.36,1) forwards; }
.hero__title .ln:nth-child(1) > span{ animation-delay:1.35s; }
.hero__title .ln:nth-child(2) > span{ animation-delay:1.5s; }
.hero__title em{ font-style:italic; color:var(--gold-2);
  font-family:var(--serif); }
.hero__title .amp{ font-family:var(--script); font-style:normal;
  color:var(--gold); font-size:.62em; padding:0 .12em;
  position:relative; top:.04em; }

.hero__foot{
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,60px);
  align-items:flex-end; justify-content:space-between;
  margin-top:clamp(34px,6vw,80px); opacity:0;
  animation:fadeUp 1.1s ease 1.9s forwards;
}
.hero__lede{ max-width:46ch; font-size:clamp(14px,1.15vw,17px);
  color:var(--paper-dim); font-weight:300; line-height:1.7; }
.hero__lede b{ color:var(--paper); font-weight:400; }

/* scroll cue */
.scrollcue{ display:flex; align-items:center; gap:12px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--paper-faint); white-space:nowrap; }
.scrollcue .ln2{ width:64px; height:1px; background:var(--line);
  position:relative; overflow:hidden; }
.scrollcue .ln2::after{ content:""; position:absolute; inset:0;
  background:var(--gold); transform:translateX(-100%);
  animation:cueSlide 2.4s ease-in-out infinite; }
@keyframes cueSlide{ 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* floating editorial image, top-right of hero */
.hero__photo{
  position:absolute; z-index:2; top:16vh; right:var(--pad);
  width:clamp(150px,17vw,260px); aspect-ratio:3/4;
  opacity:0; animation:fadeIn 1.4s ease 1.6s forwards;
}
.hero__photo image-slot{ width:100%; height:100%; display:block; }
.hero__photo .cap{ position:absolute; bottom:-22px; left:0;
  font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--paper-faint); }
@media(max-width:880px){ .hero__photo{ display:none; } }

/* =========================================================
   MARQUEE strip
   ========================================================= */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:clamp(14px,1.8vw,22px) 0; background:var(--ink-2); }
.marquee__row{ display:flex; gap:2.4em; width:max-content;
  animation:marq 26s linear infinite; }
.marquee__row span{ font-family:var(--serif); font-style:italic;
  font-size:clamp(20px,2.6vw,38px); color:var(--paper);
  display:inline-flex; align-items:center; gap:2.4rem; white-space:nowrap; }
.marquee__row span i{ color:var(--gold); font-style:normal;
  font-size:.5em; font-family:var(--sans); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* =========================================================
   STATEMENT / philosophy
   ========================================================= */
.statement{ padding:clamp(90px,16vh,200px) 0; position:relative; }
.statement__grid{ display:grid; grid-template-columns:1fr; gap:clamp(40px,7vw,110px); }
@media(min-width:980px){ .statement__grid{ grid-template-columns:1.15fr .85fr; align-items:center; } }
.statement__big{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(30px,4.6vw,68px); line-height:1.12; letter-spacing:-.01em;
  color:var(--paper); text-wrap:balance;
}
.statement__big .hl{ color:var(--gold-2); font-style:normal; position:relative; }
.statement__side{ display:flex; flex-direction:column; gap:26px; }
.statement__side p{ color:var(--paper-dim); font-size:clamp(14px,1.05vw,16px);
  line-height:1.85; max-width:42ch; }
.statement__metrics{ display:flex; gap:clamp(28px,4vw,56px); margin-top:8px; }
.metric .n{ font-family:var(--serif); font-size:clamp(30px,3.4vw,52px);
  color:var(--paper); line-height:1; }
.metric .n em{ color:var(--gold); font-style:italic; }
.metric .l{ font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-faint); margin-top:10px; }

/* twin photos */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(12px,1.6vw,24px); padding-bottom:clamp(80px,12vh,160px); }
.gallery image-slot{ display:block; width:100%; }
.gallery .g1{ grid-column:1/8; aspect-ratio:16/11; }
.gallery .g2{ grid-column:8/13; aspect-ratio:3/4; align-self:end; }
@media(max-width:720px){ .gallery .g1{ grid-column:1/13; } .gallery .g2{ grid-column:1/13; aspect-ratio:16/12; } }
.gallery figure{ position:relative; }
.gallery figcaption{ margin-top:12px; font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--paper-faint); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ background:var(--ink-2); border-top:1px solid var(--line);
  padding:clamp(80px,13vh,170px) 0; position:relative; }
.contact__head{ display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:24px; margin-bottom:clamp(48px,7vw,90px); }
.contact__head h2{ font-family:var(--serif); font-weight:400;
  font-size:clamp(40px,8.5vw,128px); line-height:.9; letter-spacing:-.02em; }
.contact__head h2 em{ font-style:italic; color:var(--gold-2); }

.contact__grid{ display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); }
@media(min-width:760px){ .contact__grid{ grid-template-columns:repeat(2,1fr); } }
.card{ background:var(--ink-2); padding:clamp(28px,3.6vw,52px);
  display:flex; flex-direction:column; gap:14px; position:relative;
  transition:background .5s ease; }
.card:hover{ background:var(--ink-3); }
.card__k{ font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:10px; }
.card__k .idx{ color:var(--paper-faint); }
.card__v{ font-family:var(--serif); font-size:clamp(22px,2.5vw,34px);
  line-height:1.25; color:var(--paper); font-weight:400; }
.card__v a{ color:inherit; text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px; background-position:0 100%;
  background-repeat:no-repeat; transition:background-size .4s ease; }
.card__v a:hover{ background-size:100% 1px; color:var(--gold-2); }
.card__sub{ font-size:13px; color:var(--paper-dim); line-height:1.7; }
.placeholder-flag{ color:var(--gold); font-style:italic; }

.actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(34px,5vw,56px); }
.btn{ display:inline-flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; padding:18px 30px; border:1px solid var(--line);
  color:var(--paper); position:relative; overflow:hidden;
  transition:color .45s ease, border-color .45s ease; }
.btn span{ position:relative; z-index:2; }
.btn::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-2));
  transform:translateY(101%); transition:transform .45s cubic-bezier(.65,0,.35,1); }
.btn:hover{ color:#1a1408; border-color:transparent; }
.btn:hover::before{ transform:translateY(0); }
.btn--solid{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn .arr{ transition:transform .4s ease; }
.btn:hover .arr{ transform:translate(4px,-4px); }

/* =========================================================
   MAP
   ========================================================= */
.mapsec{ position:relative; }
.mapwrap{ position:relative; height:clamp(360px,56vh,620px); overflow:hidden;
  border-top:1px solid var(--line); background:var(--ink-3); }
.mapwrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:grayscale(1) invert(.92) hue-rotate(180deg) brightness(.92) contrast(.95);
  opacity:.85; }
.map-card{
  position:absolute; z-index:5; left:var(--pad); bottom:clamp(28px,5vw,56px);
  background:var(--ink); border:1px solid var(--line);
  padding:clamp(24px,3vw,40px); max-width:min(420px,84vw);
  backdrop-filter:blur(4px);
}
.map-card .eyebrow{ margin-bottom:18px; display:block; }
.map-card h3{ font-family:var(--serif); font-weight:400;
  font-size:clamp(22px,2.4vw,32px); line-height:1.2; margin-bottom:14px; }
.map-card p{ color:var(--paper-dim); font-size:14px; line-height:1.7; margin-bottom:22px; }
.map-stores{ display:flex; flex-wrap:wrap; gap:12px; }
.map-stores .btn{ padding:14px 22px; font-size:11px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ padding:clamp(60px,9vh,120px) 0 clamp(30px,4vw,46px);
  border-top:1px solid var(--line); }
.footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:flex-start; gap:40px; margin-bottom:clamp(50px,8vw,90px); }
.footer__brand{ display:flex; flex-direction:column; gap:6px; }
.footer__mark{ font-family:var(--round); font-weight:600;
  font-size:clamp(48px,9vw,120px); letter-spacing:-.045em; line-height:.9;
  color:var(--paper); }
.footer__mark sup{ font-size:.22em; color:var(--gold-2); top:-1.4em; }
.footer__script{ font-family:var(--script); color:var(--gold);
  font-size:clamp(26px,4vw,48px); line-height:1; margin-left:.4em; margin-top:-.2em; }
.footer__cols{ display:flex; gap:clamp(40px,6vw,90px); flex-wrap:wrap; }
.fcol h4{ font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--paper-faint); margin-bottom:18px; font-weight:500; }
.fcol a, .fcol p{ display:block; color:var(--paper-dim); text-decoration:none;
  font-size:14px; line-height:1.9; transition:color .3s ease; }
.fcol a:hover{ color:var(--gold-2); }
.footer__base{ display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:16px; padding-top:clamp(24px,3vw,36px); border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.1em; color:var(--paper-faint); }
.footer__base a{ color:var(--paper-faint); text-decoration:none; }
.footer__base a:hover{ color:var(--gold); }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(40px); }
.reveal.in{ opacity:1; transform:none;
  transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1); }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }

/* line mask reveal for headings */
.mask-rev{ display:block; overflow:hidden; }
.mask-rev > *{ display:block; transform:translateY(110%);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1); }
.mask-rev.in > *{ transform:translateY(0); }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }
@keyframes fadeIn{ from{ opacity:0;} to{ opacity:1;} }
@keyframes lineUp{ to{ transform:translateY(0);} }

@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-delay:0s !important;
     transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .mask-rev > *{ transform:none; }
}

/* photography -------------------------------------------------- */
.hero__photo img,
.gallery figure img{
  display:block; width:100%; height:100%; object-fit:cover;
  border:1px solid var(--line);
  filter:grayscale(.18) brightness(.92) contrast(1.04);
  transition:filter .8s ease, transform 1.2s cubic-bezier(.22,1,.36,1);
}
.gallery figure img{ aspect-ratio:inherit; }
.gallery figure:hover img{ filter:grayscale(0) brightness(1) contrast(1.05); }
.hero__photo img{ box-shadow:0 30px 70px -30px rgba(0,0,0,.7); }

/* =========================================================
   MOBILE — phones & small tablets
   ========================================================= */
@media(max-width:680px){
  :root{ --pad:20px; }
  .hero{ padding:18vh var(--pad) 12vh; min-height:92svh; }
  .hero__title{ font-size:clamp(64px,20vw,120px); }
  .hero__foot{ margin-top:34px; gap:26px; }
  .hero__lede{ max-width:100%; }
  .scrollcue{ display:none; }
  .marquee__row span{ font-size:24px; }
  .statement{ padding:clamp(70px,12vh,120px) 0; }
  .statement__big{ font-size:clamp(28px,8vw,40px); }
  .statement__metrics{ gap:32px; }
  .contact__head h2{ font-size:clamp(52px,17vw,80px); }
  .actions{ gap:10px; }
  .actions .btn{ flex:1 1 calc(50% - 10px); justify-content:center;
    padding:16px 18px; }
  .mapwrap{ height:clamp(320px,62vh,460px); }
  .map-card{ left:var(--pad); right:var(--pad); max-width:none;
    bottom:18px; padding:22px; }
  .map-stores .btn{ flex:1 1 auto; justify-content:center; }
  .footer__mark{ font-size:clamp(56px,16vw,96px); }
  .footer__cols{ gap:40px; }
}

/* extra-small phones */
@media(max-width:380px){
  .brand__word{ font-size:24px; }
  .hero__title{ font-size:clamp(56px,19vw,96px); }
  .actions .btn{ flex:1 1 100%; }
}

/* nicer tap behaviour on touch devices */
@media(hover:none){
  *{ -webkit-tap-highlight-color:rgba(199,161,75,.18); }
  .btn:hover::before{ transform:translateY(101%); }
  .btn:active::before{ transform:translateY(0); }
}