/* ===== Fulya Demirci — tema sistemi + stiller ===== */
:root{
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --maxw:1280px;
}
/* KOYU tema */
.theme-dark{
  --bg:#0c0b0a; --bg2:#141210; --ink:#ece7df; --muted:#8c857a;
  --line:rgba(236,231,223,.14); --accent:#b8462f; --accent-soft:#c9b3a8;
  --hero-grad:linear-gradient(180deg,rgba(8,7,6,.55) 0%,rgba(8,7,6,.12) 38%,rgba(8,7,6,.72) 100%);
}
/* TERRACOTA tema */
.theme-terra{
  --bg:#2a1610; --bg2:#371e16; --ink:#f3e6dc; --muted:#b6917f;
  --line:rgba(243,230,220,.16); --accent:#e0744a; --accent-soft:#e3b8a4;
  --hero-grad:linear-gradient(180deg,rgba(42,22,16,.5) 0%,rgba(42,22,16,.12) 36%,rgba(42,22,16,.82) 100%);
}

*{margin:0;padding:0;box-sizing:border-box}
/* screenshot modu: hero ekran yüksekliği yerine sabit (marquee akışı çalışmaya devam eder) */
.shotmode .hero{height:760px;min-height:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.6;transition:background .4s ease,color .4s ease}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.sec-num{font-size:12px;letter-spacing:.28em;color:var(--accent);text-transform:uppercase;margin-bottom:22px;font-weight:500}
.eyebrow{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-weight:400}
h2{font-family:var(--serif);font-size:clamp(34px,5vw,64px);line-height:1.04;letter-spacing:-.01em}
.serif-it,h2 i{font-style:italic}

/* NAV */
.site-head{position:absolute;top:0;left:0;right:0;z-index:30}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 40px}
.brand{font-family:var(--serif);font-size:24px;letter-spacing:.02em;line-height:1.05}
.brand small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.4em;color:var(--muted);text-transform:uppercase;margin-top:3px}
.menu{display:flex;gap:38px;list-style:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.menu a{opacity:.82;transition:opacity .2s}
.menu a:hover,.menu a.is-active{opacity:1;color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:22px}
.lang{font-size:12px;letter-spacing:.1em;color:var(--muted);display:flex;gap:7px}
.lang a.on{color:var(--ink)}
.lang a:hover{color:var(--accent)}
.nav-cta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);padding:12px 22px;border-radius:40px;transition:border-color .2s,color .2s}
.nav-cta:hover{border-color:var(--accent);color:var(--accent)}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);font-size:24px;cursor:pointer}

/* HERO */
.hero{position:relative;height:100vh;min-height:680px;overflow:hidden;display:flex;align-items:flex-end}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero-slide.on{opacity:1}
.hero-slides::after{content:"";position:absolute;inset:0;background:var(--hero-grad);z-index:1}
.hero-inner{position:relative;z-index:2;width:100%;padding:0 40px 70px}
.hero-inner .max{max-width:var(--maxw);margin:0 auto}
.hero h1{font-family:var(--serif);font-size:clamp(56px,11vw,150px);line-height:.92;letter-spacing:-.02em;white-space:pre-line}
.hero .rot{font-family:var(--serif);font-style:italic;font-size:clamp(20px,3vw,34px);opacity:.92;margin-bottom:24px;min-height:1.3em}
.hero .rot::before{content:"— "}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:32px;flex-wrap:wrap;gap:20px}
.hero-bottom p{max-width:360px;color:var(--accent-soft);font-size:14.5px}
.scroll-tag{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* MARQUEE — eğik foto kolajı üzerinde 2 satır yarı saydam kayan yazı (Sable tarzı) */
.showcase{position:relative;overflow:hidden;border-bottom:1px solid var(--line);min-height:640px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:80px 0}
.showcase-bg{position:absolute;inset:-12% -6%;display:flex;gap:18px;transform:rotate(-8deg);z-index:0}
.showcase-bg .col{flex:1;display:flex;flex-direction:column;gap:18px}
.showcase-bg .col:nth-child(even){margin-top:-70px}
.showcase-bg img{width:100%;height:330px;object-fit:cover;border-radius:2px}
.showcase::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,6,.32),rgba(8,7,6,.5));z-index:1}
.theme-terra .showcase::before{background:linear-gradient(180deg,rgba(42,22,16,.34),rgba(42,22,16,.55))}

.marquee{overflow:hidden;position:relative;z-index:2}
.marquee-track{display:flex;width:max-content;will-change:transform;animation:marquee-l 24s linear infinite}
.marquee.reverse .marquee-track{animation:marquee-r 28s linear infinite}
.showcase:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--serif);font-size:clamp(54px,10vw,150px);font-style:italic;font-weight:500;white-space:nowrap;padding:0 28px;line-height:1.02;
  color:rgba(255,255,255,.24);
  -webkit-text-stroke:1px rgba(255,255,255,.55)}
.marquee span .dot{color:var(--accent);-webkit-text-stroke:0;margin:0 8px;opacity:.95}
@keyframes marquee-l{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
@keyframes marquee-r{0%{transform:translate3d(-50%,0,0)}100%{transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.marquee-track,.foot-marquee-track{animation-duration:60s}}

/* VIDEO bölümü */
.videosec{padding:100px 0;border-bottom:1px solid var(--line)}
.videosec .grid{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:center}
.videobox{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.videobox video,.videobox img{width:100%;height:100%;object-fit:cover}
.videobox .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.videobox .play span{width:74px;height:74px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:rgba(0,0,0,.25);backdrop-filter:blur(2px)}
.videosec h2{max-width:12ch;margin-bottom:18px}
.videosec p{color:var(--muted);font-size:15.5px;max-width:42ch}

/* INTRO / about */
.intro{padding:120px 0 90px;border-bottom:1px solid var(--line)}
.intro .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:start}
.intro h2{max-width:14ch}
.intro .body{color:var(--accent-soft);font-size:16px;display:flex;flex-direction:column;gap:20px;padding-top:8px}

/* STATS */
.stats{padding:90px 0;border-bottom:1px solid var(--line)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.stat .num{font-family:var(--serif);font-size:clamp(48px,6vw,82px);line-height:1;letter-spacing:-.02em}
.stat .lbl{color:var(--muted);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:14px}

/* SERVICES */
.services{padding:100px 0;border-bottom:1px solid var(--line)}
.svc-head{margin-bottom:54px}
.svc-head h2{max-width:18ch}
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:60px 1fr 1.3fr 40px;gap:30px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line);transition:padding-left .25s}
.svc:hover{padding-left:14px}
.svc .n{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--muted)}
.svc .t{font-family:var(--serif);font-size:30px}
.svc .d{color:var(--muted);font-size:14.5px}
.svc .ar{justify-self:end;color:var(--accent);font-size:20px}

/* WORKS masonry */
.works{padding:100px 0;border-bottom:1px solid var(--line)}
.works-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:54px;gap:30px;flex-wrap:wrap}
.works-head p{color:var(--muted);max-width:300px;font-size:14.5px}
.masonry{column-count:3;column-gap:22px}
.card{break-inside:avoid;margin-bottom:22px;position:relative;overflow:hidden;background:var(--bg2);display:block}
.card img{height:auto;transition:transform .7s ease}
.card:hover img{transform:scale(1.045)}
.card .meta{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(0deg,rgba(8,7,6,.86),transparent);display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.card .meta h3{font-family:var(--serif);font-size:25px}
.card .meta span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft)}
.card.tall img{min-height:420px}

/* CTA */
.cta{padding:140px 0 110px;text-align:center}
.cta .eyebrow{margin-bottom:30px;display:block}
.cta h2{font-size:clamp(42px,8vw,108px);line-height:.98}
.cta .mail{display:inline-block;margin-top:40px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,34px);border-bottom:1px solid var(--accent);padding-bottom:6px}

/* page hero (iç sayfalar) */
.page-hero{padding:200px 0 70px;border-bottom:1px solid var(--line)}
.page-hero h1{font-family:var(--serif);font-size:clamp(46px,8vw,104px);line-height:.98;letter-spacing:-.02em}
.page-hero .eyebrow{margin-bottom:24px;display:block}

/* work detail */
.work-detail{padding:70px 0 40px}
.work-detail .lead{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:60px}
.work-detail .lead .body{color:var(--accent-soft);font-size:16px;display:flex;flex-direction:column;gap:18px}
.work-detail .gallery{display:flex;flex-direction:column;gap:22px}
.work-meta{display:flex;gap:40px;flex-wrap:wrap;color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:30px}
.work-meta b{color:var(--ink);font-weight:400;display:block;margin-top:6px;font-size:15px;letter-spacing:.04em;text-transform:none}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:70px 0 120px}
.contact-grid .big{font-family:var(--serif);font-size:clamp(28px,3.5vw,46px);line-height:1.1}
.contact-grid a.mail{color:var(--accent);border-bottom:1px solid var(--accent)}
.cinfo{display:flex;flex-direction:column;gap:26px;font-size:15px}
.cinfo .lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}

/* FOOTER */
.site-foot{border-top:1px solid var(--line);padding:50px 0 40px;overflow:hidden}
.foot-marquee{overflow:hidden;margin-top:40px}
.foot-marquee-track{display:flex;width:max-content;animation:marquee-l 32s linear infinite}
.site-foot:hover .foot-marquee-track{animation-play-state:paused}
.foot-marquee span{font-family:var(--serif);font-size:clamp(64px,13vw,180px);line-height:.95;color:var(--ink);white-space:nowrap;font-weight:500;letter-spacing:-.02em}
.foot-marquee .dot{color:var(--accent);margin:0 10px}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.foot-brand{font-size:20px}
.soc{display:flex;gap:26px;list-style:none;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.soc a{color:var(--muted)}
.soc a:hover{color:var(--accent)}
.cp{font-size:12px;color:var(--muted)}

/* RESPONSIVE */
@media(max-width:900px){
  .wrap,.nav,.hero-inner{padding-left:22px;padding-right:22px}
  .menu,.nav-cta{display:none}
  .nav-toggle{display:block}
  .menu.open{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;gap:22px;background:var(--bg);padding:30px 22px;border-bottom:1px solid var(--line)}
  .intro .grid,.videosec .grid,.work-detail .lead,.contact-grid{grid-template-columns:1fr;gap:34px}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .masonry{column-count:1}
  .svc{grid-template-columns:30px 1fr;gap:14px}
  .svc .d,.svc .ar{display:none}
  .page-hero{padding:150px 0 50px}
}