/* ═══════════════════════════════════════════════════════════
   Estetik yön seçimi — Tuğba & Salih
   Sayfanın kendisi nötr koyu; her yön kendi paletini
   --token'larla getiriyor, maket bileşeni tek yerde tanımlı.
   ═══════════════════════════════════════════════════════════ */

@font-face { font-family:'Cormorant'; src:url('assets/fonts/cormorant.woff2') format('woff2-variations');
             font-weight:300 700; font-display:swap; }
@font-face { font-family:'CoFo Sans'; src:url('assets/fonts/cofosans-regular.woff2') format('woff2');
             font-weight:400; font-display:swap; }
@font-face { font-family:'CoFo Sans'; src:url('assets/fonts/cofosans-medium.woff2') format('woff2');
             font-weight:500; font-display:swap; }

:root {
  --serif: 'Cormorant', Georgia, serif;
  --sans:  'CoFo Sans', ui-sans-serif, -apple-system, sans-serif;
  --page:  #171614;
  --page-2:#1F1D1A;
  --txt:   #E8E2D6;
  --txt-2: #9A9186;
  --hair:  rgba(232,226,214,.14);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--txt);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ── Giriş ──────────────────────────────────────────────── */
.intro {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(34px, 9vw, 72px) clamp(20px, 5vw, 32px) clamp(18px, 4vw, 30px);
}
.intro__kicker {
  font-weight: 500; font-size: 10px; letter-spacing: .3em;
  line-height: 1.7; color: var(--txt-2); margin: 0 0 1.6em;
}
.intro h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 10vw, 58px); line-height: 1.1;
  letter-spacing: .01em; margin: 0 0 .5em;
}
.intro__lede {
  font-size: clamp(14.5px, 3.8vw, 16px); line-height: 1.7;
  color: var(--txt-2); margin: 0 0 1em; max-width: 34em;
}
.intro__lede b { color: var(--txt); font-weight: 500; }
.intro__lede--soft { font-size: clamp(13.5px, 3.5vw, 15px); opacity: .82; }

/* ── Yön bloğu ──────────────────────────────────────────── */
.dir {
  border-top: 1px solid var(--hair);
  padding: clamp(30px, 7vw, 56px) clamp(20px, 5vw, 32px);
  max-width: 62rem;
  margin: 0 auto;
}
.dir__head {
  display: flex; gap: clamp(14px, 4vw, 22px);
  align-items: flex-start;
  max-width: 44rem;
  margin: 0 0 clamp(24px, 5vw, 38px);
}
.dir__n {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--hair); border-radius: 50%;
  font-family: var(--serif); font-size: 21px; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--txt);
}
.dir__name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 6.4vw, 34px); line-height: 1.2;
  margin: .1em 0 .4em;
}
.dir__desc {
  font-size: clamp(14px, 3.7vw, 15.5px); line-height: 1.7;
  color: var(--txt-2); margin: 0 0 .8em;
}
.dir__risk {
  font-size: clamp(13px, 3.4vw, 14px); line-height: 1.65;
  color: #8B8073; margin: 0;
}
.dir__risk b { color: #A99C8B; font-weight: 500; }

.dir__stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 5vw, 40px);
  align-items: start;
}
.slot { min-width: 0; }
.slot__cap {
  font-size: 9.5px; letter-spacing: .26em; line-height: 1.7;
  color: #6E665C; margin: 14px 0 0; text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   MAKET — her yön aynı iskeleti kendi paletiyle boyar
   ═══════════════════════════════════════════════════════════ */
.m-env, .m-let {
  --ink:   #2E2823;
  --soft:  #6E6153;
  --faint: #A2917E;
  --paper: #F7F2E9;
  --acc:   #B4796B;
  --disp:  var(--serif);
  --lbl:   var(--sans);
  position: relative;
  background: var(--paper);
  color: var(--ink);
}

/* Zarf */
.m-env {
  width: 100%;
  aspect-ratio: 1 / .655;
  font-size: min(2.6cqw, 9px);
  container-type: inline-size;
  border-radius: 2px;
  box-shadow: var(--sh, 0 14px 30px -16px rgba(0,0,0,.5));
  overflow: hidden;
}
.m-env__flap {
  position: absolute; inset: 0 0 auto 0; height: 49%;
  background: var(--paper2, var(--paper));
  box-shadow: 0 2px 5px -2px rgba(80,60,40,.32);
}
.m-env__crease {
  position: absolute; left: 0; right: 0; top: 49%; height: 1px;
  background: var(--crease, rgba(150,124,96,.34));
}

.m-stamp {
  position: absolute; top: 7%; right: 6%;
  width: 19%; aspect-ratio: 1 / 1.25;
  transform: rotate(2.2deg);
  background: var(--stamp-bg, #FBF7EE);
  border: 1px solid var(--stamp-br, rgba(126,98,72,.5));
  padding: 3%;
  display: flex; flex-direction: column; gap: 3%;
}
.m-stamp__sky {
  position: relative; flex: 1;
  background: var(--sky, radial-gradient(70% 60% at 50% 45%, #EFE0C4, #CDB48C));
  overflow: hidden;
}
.m-orbits { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-orbits circle {
  fill: none; stroke: var(--orbit, rgba(96,72,48,.45));
  stroke-width: 1; stroke-dasharray: 1.5 3; vector-effect: non-scaling-stroke;
}
.m-jup {
  position: absolute; left: 50%; top: 50%;
  width: 52%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background: url('assets/jupiter.webp') center/contain no-repeat;
}
.m-stamp__cap {
  font-family: var(--disp); font-weight: 500;
  font-size: 1.5em; line-height: 1; text-align: center;
  color: var(--ink);
}

.m-seal {
  position: absolute; left: 50%; top: 49%;
  width: 17%; aspect-ratio: 1;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: var(--seal-bg, var(--acc));
  display: flex; align-items: center; justify-content: center; gap: 8%;
  box-shadow: 0 2px 5px rgba(90,50,40,.4);
}
.m-seal i {
  font-family: var(--disp); font-style: normal; font-weight: 500;
  font-size: 2.6em; line-height: 1; color: var(--seal-fg, #FFF8F4);
}
.m-seal span {
  width: 1px; height: 44%; background: var(--seal-fg, #FFF8F4); opacity: .8;
}

.m-addr {
  position: absolute; left: 50%; bottom: 8%;
  width: 84%; transform: translateX(-50%);
  text-align: center;
}
.m-addr b {
  display: block; font-family: var(--disp); font-weight: 500;
  font-size: 2.1em; line-height: 1.2; color: var(--ink);
}
.m-addr i {
  display: block; font-family: var(--disp); font-style: normal;
  font-weight: 400; font-size: 1.25em; line-height: 1.5;
  color: var(--soft); margin-top: .3em;
}
.m-addr u {
  display: block; font-family: var(--lbl); text-decoration: none;
  font-size: .85em; letter-spacing: .26em; line-height: 1.7;
  color: var(--faint); margin-top: .7em;
}

/* Mektup */
.m-let {
  width: 100%;
  aspect-ratio: 1 / 1.36;
  container-type: inline-size;
  font-size: min(3.4cqw, 12px);
  border-radius: 1px;
  box-shadow: var(--sh, 0 14px 30px -16px rgba(0,0,0,.5));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 9% 8%;
  overflow: hidden;
}
.m-let__jup { display: none; }
.m-eyebrow {
  font-family: var(--lbl); font-weight: 500;
  font-size: .82em; letter-spacing: .3em; line-height: 1.7;
  color: var(--faint); margin: 0;
}
.m-rule {
  width: 3.4em; height: 1px; background: var(--faint);
  opacity: .75; margin: 1.5em 0;
}
.m-name {
  font-family: var(--disp); font-weight: 300;
  font-size: 3.1em; line-height: 1.1; margin: 0; color: var(--ink);
}
.m-name b {
  display: block; font-weight: 700; font-size: .55em;
  letter-spacing: .13em; line-height: 1.5; margin-top: .1em;
}
.m-amp {
  font-family: var(--disp); font-style: italic; font-weight: 300;
  font-size: 1.9em; line-height: 1; color: var(--acc); margin: .5em 0;
}
.m-when {
  font-family: var(--lbl); font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: .88em; letter-spacing: .18em; line-height: 1.7;
  color: var(--ink); margin: 0;
  display: flex; align-items: center; gap: .9em;
}
.m-when s { width: 1px; height: 1em; background: var(--faint); }
.m-concept {
  font-family: var(--disp); font-style: italic; font-weight: 300;
  font-size: 1.5em; line-height: 1.5; color: var(--acc);
  margin: 1.6em 0 0;
}

/* ═══════════════════════════════════════════════════════════
   1 · GECE GÖĞÜ
   ═══════════════════════════════════════════════════════════ */
.dir[data-d="1"] {
  background:
    radial-gradient(120% 80% at 50% 0%, #1B2740 0%, #0C1220 62%, #080C15 100%);
}
.dir[data-d="1"] .m-env,
.dir[data-d="1"] .m-let {
  --paper: #F4EEE1;
  --paper2:#F7F2E7;
  --ink:   #1B1710;
  --soft:  #5C5142;
  --faint: #9A8A72;
  --acc:   #A8842F;
  --seal-bg: #8C6A22;
  --crease: rgba(120,96,60,.4);
  --sh: 0 26px 60px -20px rgba(0,0,0,.85), 0 0 60px -18px rgba(168,132,47,.4);
  --sky: radial-gradient(70% 60% at 50% 45%, #22304C, #0D1424);
  --stamp-bg: #101827;
  --stamp-br: rgba(168,132,47,.55);
  --orbit: rgba(200,170,110,.55);
}
.dir[data-d="1"] .m-stamp__cap { color: #E4D3A6; }
.dir[data-d="1"] .m-let__jup {
  display: block;
  width: 46%; aspect-ratio: 1;
  background: url('assets/jupiter.webp') center/contain no-repeat;
  margin-bottom: .6em;
  filter: drop-shadow(0 0 1.4em rgba(168,132,47,.45));
}
.dir[data-d="1"] .m-let { justify-content: flex-start; padding-top: 7%; }
.dir[data-d="1"] .m-name { font-size: 2.5em; }
.dir[data-d="1"] .m-rule { margin: 1em 0; }
.dir[data-d="1"] .m-concept { font-size: 1.3em; margin-top: 1em; }

/* ═══════════════════════════════════════════════════════════
   2 · EDİTORYAL
   ═══════════════════════════════════════════════════════════ */
.dir[data-d="2"] { background: #DCD8CF; }
.dir[data-d="2"] .m-env,
.dir[data-d="2"] .m-let {
  --paper: #FBFAF8;
  --paper2:#FFFFFF;
  --ink:   #14130F;
  --soft:  #4A473F;
  --faint: #14130F;
  --acc:   #B4241F;
  --seal-bg: #B4241F;
  --crease: rgba(20,19,15,.2);
  --sh: 0 10px 24px -14px rgba(0,0,0,.45);
  --sky: #EDEAE3;
  --stamp-bg: #FFFFFF;
  --stamp-br: rgba(20,19,15,.65);
  --orbit: rgba(20,19,15,.4);
  --disp: var(--sans);
}
.dir[data-d="2"] .m-env, .dir[data-d="2"] .m-let { border-radius: 0; }
.dir[data-d="2"] .m-let {
  align-items: flex-start; text-align: left; justify-content: flex-end;
  padding: 10%;
}
.dir[data-d="2"] .m-eyebrow { font-size: .78em; letter-spacing: .34em; }
.dir[data-d="2"] .m-rule { width: 100%; margin: 1.2em 0; background: var(--ink); opacity: 1; }
.dir[data-d="2"] .m-name {
  font-family: var(--sans); font-weight: 500;
  font-size: 3.4em; line-height: .98; letter-spacing: -.02em;
}
.dir[data-d="2"] .m-name b {
  font-family: var(--sans); font-weight: 500;
  font-size: 1em; letter-spacing: -.02em; margin: 0;
}
.dir[data-d="2"] .m-amp { display: none; }
.dir[data-d="2"] .m-when { font-size: .84em; letter-spacing: .22em; }
.dir[data-d="2"] .m-concept {
  font-family: var(--sans); font-style: normal; font-weight: 400;
  font-size: .92em; letter-spacing: .04em; margin-top: 1.4em;
}
.dir[data-d="2"] .m-addr b { font-family: var(--sans); font-weight: 500; font-size: 1.7em; }
.dir[data-d="2"] .m-seal { border-radius: 0; }

/* ═══════════════════════════════════════════════════════════
   3 · GERÇEK KÂĞIT
   ═══════════════════════════════════════════════════════════ */
.dir[data-d="3"] {
  background:
    radial-gradient(120% 90% at 50% 0%, #A9906F 0%, #7E6647 70%, #6A5439 100%);
}
.dir[data-d="3"] .m-env,
.dir[data-d="3"] .m-let {
  --paper: #FBF6EA;
  --paper2:#FDFAF1;
  --ink:   #2A2118;
  --soft:  #6B5B47;
  --faint: #A2907A;
  --acc:   #A8443A;
  --seal-bg: #A8443A;
  --crease: rgba(120,90,58,.42);
  --sh: 0 30px 44px -18px rgba(40,26,12,.62), 0 4px 10px -4px rgba(40,26,12,.4);
}
.dir[data-d="3"] .m-env, .dir[data-d="3"] .m-let {
  background-image:
    repeating-linear-gradient(102deg, rgba(150,120,80,.05) 0 2px, rgba(150,120,80,0) 2px 5px),
    repeating-linear-gradient(14deg,  rgba(150,120,80,.04) 0 3px, rgba(150,120,80,0) 3px 7px);
}
.dir[data-d="3"] .m-env { transform: rotate(-1.1deg); }
.dir[data-d="3"] .m-let { transform: rotate(.7deg); }
.dir[data-d="3"] .m-seal {
  width: 20%;
  background:
    radial-gradient(60% 55% at 38% 32%, #C15A4C 0%, #A8443A 55%, #863128 100%);
  box-shadow: 0 3px 7px rgba(60,20,14,.55), inset 0 -1px 3px rgba(70,22,16,.6);
}

/* ═══════════════════════════════════════════════════════════
   4 · SESSİZ
   ═══════════════════════════════════════════════════════════ */
.dir[data-d="4"] { background: #F2F2F0; }
.dir[data-d="4"] .m-env,
.dir[data-d="4"] .m-let {
  --paper: #FFFFFF;
  --paper2:#FDFDFC;
  --ink:   #1C1C1A;
  --soft:  #7A7A75;
  --faint: #B4B4AE;
  --acc:   #1C1C1A;
  --seal-bg: #E4E3DF;
  --seal-fg: #1C1C1A;
  --crease: rgba(28,28,26,.1);
  --sh: 0 12px 34px -22px rgba(0,0,0,.35);
  --sky: #F4F4F2;
  --stamp-bg: #FFFFFF;
  --stamp-br: rgba(28,28,26,.22);
  --orbit: rgba(28,28,26,.22);
}
.dir[data-d="4"] .m-env, .dir[data-d="4"] .m-let { border-radius: 0; }
.dir[data-d="4"] .m-jup { filter: grayscale(1) opacity(.55); }
.dir[data-d="4"] .m-eyebrow { font-size: .68em; letter-spacing: .4em; }
.dir[data-d="4"] .m-name { font-size: 2.2em; font-weight: 300; }
.dir[data-d="4"] .m-name b { font-weight: 400; font-size: .5em; letter-spacing: .22em; }
.dir[data-d="4"] .m-amp { font-size: 1.2em; margin: .7em 0; }
.dir[data-d="4"] .m-rule { width: 1.6em; margin: 2.2em 0; }
.dir[data-d="4"] .m-when { font-size: .74em; letter-spacing: .26em; }
.dir[data-d="4"] .m-concept { font-size: 1.05em; margin-top: 2.2em; }
.dir[data-d="4"] .m-seal i { font-size: 1.9em; }
.dir[data-d="4"] .m-addr b { font-size: 1.7em; font-weight: 400; }

/* ═══════════════════════════════════════════════════════════
   5 · GÖK ATLASI
   ═══════════════════════════════════════════════════════════ */
.dir[data-d="5"] { background: #C4B392; }
.dir[data-d="5"] .m-env,
.dir[data-d="5"] .m-let {
  --paper: #F2E7CE;
  --paper2:#F5EBD6;
  --ink:   #33291D;
  --soft:  #6A5B44;
  --faint: #9B8A6C;
  --acc:   #7A4F35;
  --seal-bg: #7A4F35;
  --crease: rgba(90,72,45,.45);
  --sh: 0 18px 34px -18px rgba(60,44,20,.6);
  --sky: #EFE2C6;
  --stamp-bg: #F5EBD6;
  --stamp-br: rgba(51,41,29,.7);
  --orbit: rgba(51,41,29,.6);
}
.dir[data-d="5"] .m-jup,
.dir[data-d="5"] .m-let__jup { filter: grayscale(1) contrast(2.1) sepia(.75) opacity(.85); }
.dir[data-d="5"] .m-stamp { border-width: 1px; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px rgba(51,41,29,.5); }
.dir[data-d="5"] .m-let__jup {
  display: block; width: 34%; aspect-ratio: 1;
  background: url('assets/jupiter.webp') center/contain no-repeat;
  margin-bottom: 1em;
}
.dir[data-d="5"] .m-rule {
  width: 5em; height: 3px; background: none; opacity: 1;
  border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint);
}
.dir[data-d="5"] .m-let { justify-content: flex-start; padding-top: 8%; }
.dir[data-d="5"] .m-name { font-size: 2.5em; }

/* ── Sorular ────────────────────────────────────────────── */
.qa {
  border-top: 1px solid var(--hair);
  max-width: 46rem; margin: 0 auto;
  padding: clamp(34px, 8vw, 64px) clamp(20px, 5vw, 32px);
}
.qa h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 6.4vw, 32px); margin: 0 0 1.4em;
}
.q { display: flex; gap: clamp(14px, 4vw, 20px); margin-bottom: clamp(26px, 6vw, 38px); }
.q__n {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--hair); border-radius: 50%;
  font-family: var(--serif); font-size: 15px; margin: 2px 0 0; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.q__t { font-size: clamp(15px, 4vw, 17px); font-weight: 500; margin: 0 0 .5em; line-height: 1.5; }
.q__d { font-size: clamp(13.5px, 3.6vw, 14.5px); line-height: 1.7; color: var(--txt-2); margin: 0 0 .7em; }
.q__a { font-size: clamp(13.5px, 3.6vw, 14.5px); line-height: 1.7; color: #A99C8B; margin: 0; }
.q__a b { color: var(--txt); font-weight: 500; }
.qa__foot {
  font-size: clamp(13.5px, 3.6vw, 15px); line-height: 1.7;
  color: var(--txt-2); border-left: 2px solid var(--hair);
  padding-left: 1.2em; margin: clamp(26px, 6vw, 38px) 0 0;
}

.foot {
  border-top: 1px solid var(--hair);
  padding: 26px clamp(20px, 5vw, 32px) 44px;
  max-width: 46rem; margin: 0 auto;
}
.foot p { font-size: 12px; letter-spacing: .06em; color: #6E665C; margin: 0; }

/* ── Açık zeminli yönlerde başlık metni okunur olmalı ───── */
.dir__name   { color: var(--hd,  var(--txt)); }
.dir__desc   { color: var(--hd2, var(--txt-2)); }
.dir__risk   { color: var(--hd3, #8B8073); }
.dir__risk b { color: var(--hd2, #A99C8B); }
.dir__n      { color: var(--hd, var(--txt)); border-color: var(--hdl, var(--hair)); }
.slot__cap   { color: var(--cap, #6E665C); }

.dir[data-d="1"] { --cap: #7E8CA6; }
.dir[data-d="2"] {
  --hd: #14130F; --hd2: #4A473F; --hd3: #6B685F;
  --hdl: rgba(20,19,15,.28); --cap: #6B685F;
}
.dir[data-d="3"] {
  --hd: #FBF3E4; --hd2: #E3D5BC; --hd3: #CBBB9C;
  --hdl: rgba(251,243,228,.32); --cap: #D6C6A8;
}
.dir[data-d="4"] {
  --hd: #1C1C1A; --hd2: #5E5E58; --hd3: #86867F;
  --hdl: rgba(28,28,26,.24); --cap: #86867F;
}
.dir[data-d="5"] {
  --hd: #2B2318; --hd2: #57492F; --hd3: #6E6046;
  --hdl: rgba(43,35,24,.32); --cap: #6E6046;
}