/* Sylenus — sylenus.com · sistem: Sylenus DESIGN.md (0010 renk, 0011 değerler, 0012 tipografi, 0013 ızgara) */
@font-face{font-family:"Literata";src:url("fonts/Literata-Roman-VF.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url("fonts/Literata-Italic-VF.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url("fonts/FragmentMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* renk: varsayılan koyu, seçilebilir açık */
:root{
  --ground:#0b0908; --surface:#16120f; --hair:#2b2420;
  --text:#d9dbde; --text-2:#9a9da2; --wine:#6a0f1c; --oxblood:#4a0404;
  --on-field:#d9dbde; --mark:var(--text);
  --body-wght:380; --body-lh:1.7;
  color-scheme:dark;
}
:root[data-mode="light"]{
  --ground:#f2f0ed; --surface:#e6e3df; --hair:#d3cec8;
  --text:#15120f; --text-2:#5d5853; --mark:var(--oxblood);
  --body-wght:400; --body-lh:1.66;
  color-scheme:light;
}
:root{
  --read:"Literata", Georgia, serif;
  --trace:"Fragment Mono", ui-monospace, Consolas, monospace;
  --inset:clamp(16px, 5vw, 88px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--hair) var(--ground)}
body{margin:0;background:var(--ground);color:var(--text);font:400 1rem/1.6 var(--read);font-optical-sizing:auto;font-synthesis:none;-webkit-font-smoothing:antialiased;font-variant-numeric:oldstyle-nums proportional-nums;caret-color:var(--mark)}
::selection{background:var(--wine);color:var(--on-field)}
a{color:inherit;text-decoration-color:var(--mark);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:1.5px solid var(--mark);outline-offset:3px}
p,h1,h2,figure{margin:0}
h1,h2{font-weight:400;text-wrap:balance}
img{max-width:100%;display:block;height:auto}
em{font-style:italic}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sc{font-variant-caps:all-small-caps;letter-spacing:.07em;font-variant-numeric:lining-nums tabular-nums}
.trace{font-family:var(--trace);font-size:.8125rem;line-height:1.6;font-feature-settings:"zero" 1;font-variant-numeric:normal}
.skip{position:absolute;left:-999px;top:0;z-index:2;background:var(--text);color:var(--ground);padding:8px 12px}
.skip:focus{left:var(--inset)}

/* hero: pencereyi doldurur; her iki modda koyu levha */
.hero{--text:#d9dbde;--text-2:#9a9da2;--mark:#d9dbde;position:relative;height:100svh;min-height:520px;overflow:hidden;background:#000;color:var(--text);isolation:isolate}
.bar{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,2vw,24px) var(--inset)}
.mark{width:clamp(38px,3.4vw,52px);aspect-ratio:1;background:var(--text);-webkit-mask:url("img/emblem-alfa.png") center/contain no-repeat;mask:url("img/emblem-alfa.png") center/contain no-repeat}
.mode{font:inherit;font-size:.9375rem;font-variant-caps:all-small-caps;letter-spacing:.07em;color:var(--text-2);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:8px 0}
.mode:hover{color:var(--text)}
.mode::before{content:"";width:10px;height:10px;border-radius:50%;border:1px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}

.lockup{position:absolute;z-index:2;left:var(--inset);top:calc(clamp(14px,2vw,24px) + clamp(38px,3.4vw,52px) + clamp(28px,5vh,64px));width:clamp(280px,22vw,420px);container-type:inline-size}
.lockup h1{margin:0;line-height:0}
.wm-lg{display:block;width:100%;aspect-ratio:830/420;background:var(--text);-webkit-mask:url("img/wordmark.png") left center/contain no-repeat;mask:url("img/wordmark.png") left center/contain no-repeat}
/* slogan: y kuyruğunun sağından başlar, son s ile biter (wordmark ölçüsü 830: kuyruk ~225, s kenarı 803) */
.lockup .slogan{position:absolute;left:30.2cqw;right:3.3cqw;top:35cqw;margin:0;white-space:nowrap;font:400 4.3cqw/1.2 var(--read);letter-spacing:.03em;color:var(--text);text-align:justify;text-align-last:justify}

/* levha */
.hero-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 22%),linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 38%)}

@media (prefers-reduced-motion:no-preference){
  .hero-plate img{animation:settle 2.4s var(--ease) both}
  .lockup{animation:rise 1.6s .5s var(--ease) both}
  @keyframes settle{from{filter:blur(10px) brightness(.55);transform:scale(1.025)}to{filter:none;transform:none}}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (max-width:860px){
  .hero{height:86svh}
  .hero-plate img{object-position:93% 50%}
  .hero::before{background:linear-gradient(180deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.45) 34%,rgba(0,0,0,0) 52%)}
}

/* sayfa ızgarası: [ray] dış pay · [metin] en çok 64ch · [kenar] paragrafın ikinci sesi */
.page{padding:clamp(40px,4vw,72px) var(--inset) clamp(72px,9vw,144px)}
.spread{--fs:clamp(1.0625rem, .45vw + .85rem, 1.4rem);font-size:var(--fs);display:grid;
  grid-template-columns:[rail] minmax(9rem,1fr) [text] minmax(0,64ch) [margin] minmax(15rem,28rem) [end];
  column-gap:clamp(24px,3vw,56px)}

.head{grid-column:rail / end;display:grid;grid-template-columns:subgrid;row-gap:clamp(18px,2vw,28px);padding-bottom:clamp(40px,5vw,80px)}
.title{grid-column:text / end;max-width:22ch;font:300 clamp(2.5rem,5.6vw,5.25rem)/1.02 var(--read);font-variation-settings:"opsz" 72;letter-spacing:-.02em}
.hmeta{grid-column:margin / end;display:grid;gap:4px;font-size:.9375rem;line-height:1.45;color:var(--text-2);padding-left:14px;border-left:1px solid var(--hair);align-self:start}
.hmeta .sc{color:var(--text)}

/* okuma: her satır bir cümle ve onun Türkçe özgünü */
.row{display:contents}
.prose{grid-column:text / margin;font-size:1em;line-height:var(--body-lh);font-weight:var(--body-wght);letter-spacing:.003em;margin-bottom:1.15em}
.prose .open{font-variant-caps:all-small-caps;letter-spacing:.05em}
.side{grid-column:margin / end;font-size:max(.875rem,.74em);line-height:1.5;color:var(--text-2);padding-top:.35em}
.tr{border-left:1px solid var(--hair);padding-left:12px;display:grid;gap:4px;transition:border-color .5s var(--ease)}
.tr .lang{font-size:.8125rem;font-variant-caps:all-small-caps;letter-spacing:.07em}
.tr p{font-size:.9375rem;line-height:1.55;transition:color .5s var(--ease)}
.row.lit .tr{border-color:var(--mark)}
.row.lit .tr p{color:var(--text)}

h2.sec{grid-column:text / margin;font:400 clamp(1.6rem,2.6vw,2.1rem)/1.15 var(--read);font-variation-settings:"opsz" 48;margin:1.6em 0 .7em}

/* künye */
.foot{padding:28px var(--inset) 40px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;font-size:.875rem;color:var(--text-2)}
.foot .wm{width:84px;aspect-ratio:830/420;background:var(--text);-webkit-mask:url("img/wordmark.png") center/contain no-repeat;mask:url("img/wordmark.png") center/contain no-repeat}
.foot .slogan{letter-spacing:.02em;margin-right:auto}
.foot .copy{font-variant-numeric:lining-nums}

/* dar ekran: önce ray düşer, sonra Türkçe ses cümlenin altına iner */
@media (max-width:1180px){
  .spread{grid-template-columns:[rail text] minmax(0,64ch) [margin] minmax(13rem,1fr) [end]}
}
@media (max-width:860px){
  .spread{grid-template-columns:[rail text margin] minmax(0,1fr) [end]}
  .head{row-gap:18px}
  .hmeta{padding-left:0;border-left:0;display:flex;flex-wrap:wrap;gap:4px 16px;margin:0}
  .prose{margin-bottom:.6em}
  .side{padding:0 0 1.6em}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}