/* Dünya KOBİ Politikaları Forumu — coming soon
   Type block: her satır ölçüye tam oturur (bkz. assets/js/main.js) */

:root {
  --paper:  #E4E5E0;
  --ink:    #16211C;
  --petrol: #35605A;
  --muted:  #525A55;
  --brass:  #A0701C;

  --gutter: clamp(18px, 4.5vw, 68px);
  --indent: clamp(16px, 2.4vw, 38px);
  --measure: 1180px;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #121916;
    --ink:    #E4E5E0;
    --petrol: #8FB5AE;
    --muted:  #8A928C;
    --brass:  #C79A3E;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font-size: 14px;
  z-index: 2;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* Tek aksan: sayfayı boydan boya kesen pirinç kenar çizgisi */
.rule-margin {
  position: fixed;
  inset: 0 auto 0 var(--gutter);
  width: 1px;
  background: var(--brass);
  opacity: .6;
}

.wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(30px, 5.5vh, 62px);
  padding: clamp(40px, 10vh, 120px) var(--gutter) clamp(30px, 7vh, 72px)
           calc(var(--gutter) + var(--indent));
  width: 100%;
}

/* ---- Künye ---- */

.masthead {
  margin: 0;
  width: 100%;
  max-width: var(--measure);
  overflow: hidden;
  /* Ölçüm sırasında max-content satırlar sayfa genişliğini etkilemesin */
  contain: inline-size;
  font-weight: 400;
}

.masthead__tr {
  display: block;
  font-variation-settings: "wdth" 88, "wght" 620;
  letter-spacing: -0.005em;
  line-height: 0.90;
  color: var(--ink);
}

.fit {
  display: block;
  width: max-content;
  white-space: nowrap;
}

/* Ü ve İ noktalarının üst kenarda kırpılmaması için */
.fit:first-child { padding-top: .13em; }

/* JS kapalıysa / font yüklenene kadar geçerli yaklaşık ölçüler */
.fit:nth-child(1) { font-size: min(13vw, 140px); }
.fit:nth-child(2) { font-size: min(11.7vw, 126px); }
.fit:nth-child(3) { font-size: min(19.3vw, 208px); }

.masthead__en {
  display: block;
  width: max-content;
  white-space: nowrap;
  margin-top: clamp(14px, 2.2vh, 30px);
  color: var(--petrol);
  font-variation-settings: "wdth" 78, "wght" 400;
  font-size: clamp(17px, 3.2vw, 44px);
  letter-spacing: 0.005em;
}

/* ---- Alt blok ---- */

.foot__rule {
  height: 1px;
  background: var(--brass);
  opacity: .6;
  max-width: var(--fit-width, var(--measure));
  transform-origin: left center;
}

.foot__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 64px);
  max-width: var(--fit-width, var(--measure));
  margin-top: clamp(16px, 2.4vh, 26px);
}

.col { margin: 0; }

.status {
  margin: 0 0 .5em;
  font-variation-settings: "wdth" 82, "wght" 600;
  font-size: clamp(15px, 1.35vw, 20px);
  letter-spacing: .01em;
  color: var(--ink);
}

.note {
  margin: 0;
  max-width: 34ch;
  font-variation-settings: "wdth" 92, "wght" 400;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

@media (max-width: 620px) {
  .foot__cols { grid-template-columns: 1fr; gap: 22px; }
  .note { max-width: 40ch; }
}

/* ---- Tek bir açılış hareketi: satırlar soldan açılır, çizgi çizilir ---- */

.js .fit,
.js .masthead__en { clip-path: inset(-40% 100% -40% -4%); }
.js .foot__rule    { transform: scaleX(0); }
.js .foot__cols    { opacity: 0; }

.js.is-ready .fit,
.js.is-ready .masthead__en {
  animation: wipe 620ms cubic-bezier(.22,.61,.36,1) forwards;
}
.js.is-ready .fit:nth-child(1)  { animation-delay:  40ms; }
.js.is-ready .fit:nth-child(2)  { animation-delay: 140ms; }
.js.is-ready .fit:nth-child(3)  { animation-delay: 240ms; }
.js.is-ready .masthead__en      { animation-delay: 400ms; }

.js.is-ready .foot__rule {
  animation: draw 700ms cubic-bezier(.22,.61,.36,1) 500ms forwards;
}
.js.is-ready .foot__cols {
  animation: rise 600ms ease-out 700ms forwards;
}

@keyframes wipe { to { clip-path: inset(-40% -4% -40% -4%); } }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js .fit, .js .masthead__en { clip-path: none; }
  .js .foot__rule { transform: none; }
  .js .foot__cols { opacity: 1; }
  .js.is-ready .fit,
  .js.is-ready .masthead__en,
  .js.is-ready .foot__rule,
  .js.is-ready .foot__cols { animation: none; }
}