/* ————— henüz. ————— */
:root {
  --cream: #ece8de;
  --terra: #c2492c;
  --ink: #141310;
  --yellow: #ffea5c;
  --blue: #2020a8;
  --serif: "EB Garamond", "Times New Roman", serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--serif);
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

::selection { background: var(--terra); color: var(--cream); }

a { color: inherit; text-decoration: none; }

/* ————— header ————— */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.6rem 3.2rem 0;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  animation: fadeDown 1.1s cubic-bezier(.22,1,.36,1) both;
}

.brand { color: var(--terra); position: relative; }
.brand::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.brand:hover::after { transform: scaleX(1); transform-origin: left; }

.head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

.loc { color: var(--terra); letter-spacing: .04em; }
.loc span { display: inline-block; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.loc:hover span { transform: translateY(-2px); }

/* ————— hero ————— */
.hero {
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 2;
  padding: 0 3.2rem;
}

.mark {
  position: relative;
  z-index: 3;
  width: 55vh;
  aspect-ratio: 857 / 956;
  flex: none;
  max-width: 90vw;
  margin: 0 0 0 2.2vw;
  font-weight: 500;
  opacity: 0;
  animation: fadeUp 1.2s cubic-bezier(.22,1,.36,1) .25s forwards;
}

.mark .bloom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mark .blot-img {
  position: absolute;
  left: 22%;
  top: 17%;
  width: 46%;
  transform: rotate(-66deg);
  transform-origin: 50% 50%;
  height: auto;
  opacity: .88;
  pointer-events: none;
}

.mark .word {
  position: absolute;
  left: 9%;
  top: 28.5%;
  font-size: 8vh;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.mark .ink { color: var(--ink); }
.mark .light { color: var(--cream); }

.tagline {
  position: absolute;
  right: 8vw;
  top: 42vh;
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  line-height: 1.25;
  color: var(--ink);
  opacity: 0;
  animation: fadeUp 1.2s cubic-bezier(.22,1,.36,1) .8s forwards;
}
.tagline em { font-style: normal; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

.band-left {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-items: flex-start;
}

.ne-link {
  color: var(--terra);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  opacity: 0;
  animation: fadeUp 1.2s cubic-bezier(.22,1,.36,1) 1.15s forwards;
}
.ne-link span {
  display: inline-block;
  position: relative;
}
.ne-link span::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.ne-link:hover span::after { transform: scaleX(1); transform-origin: left; }

/* ————— yellow band ————— */
.band {
  position: relative;
  z-index: 1;
  background: var(--yellow);
  min-height: 12vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1.2rem 4.5vw 1.5rem;
  flex: none;
  overflow: visible;
  animation: bandUp 1.1s cubic-bezier(.22,1,.36,1) .3s both;
}
/* krem → sarı yumuşak eritme */
.band::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 20vh;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,234,92,0) 0%,
    rgba(255,234,92,.32) 52%,
    rgba(255,234,92,.78) 82%,
    var(--yellow) 100%);
}
@keyframes bandUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.band .note {
  font-size: clamp(.72rem, .8vw, .85rem);
  letter-spacing: .04em;
  color: var(--ink);
  margin-top: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* zar şeridi (slot makinesi) */
.dice-window {
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  vertical-align: bottom;
}
.dice-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.dice-strip span {
  display: block;
  height: 1.3em;
  line-height: 1.3em;
  white-space: nowrap;
}

.band .mail {
  color: var(--terra);
  position: relative;
  z-index: 2;
  font-size: clamp(.85rem, 1vw, 1.1rem);
  letter-spacing: .04em;
  border-bottom: 1px solid var(--terra);
  padding-bottom: .12rem;
  margin-bottom: 1.1rem;
  transition: letter-spacing .45s cubic-bezier(.22,1,.36,1);
}
.band .mail:hover { letter-spacing: .02em; }

.band .arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.band .arc path {
  fill: none;
  stroke: var(--terra);
  stroke-width: 2;
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation: drawArc 2.2s cubic-bezier(.4,0,.2,1) 1s forwards;
}
@keyframes drawArc { to { stroke-dashoffset: 0; } }

/* ————— blue page (ne?) ————— */
body.blue {
  background: var(--blue);
  color: var(--cream);
}
body.blue .brand,
body.blue .loc { color: var(--cream); }
body.blue ::selection { background: var(--cream); color: var(--blue); }

.values {
  flex: 1;
  padding: 2vh 4.5vw 8vh;
}

.values h1 {
  font-weight: 500;
  font-size: clamp(3rem, 6.5vw, 6.5rem);
  color: var(--cream);
  opacity: 0;
  animation: fadeUp 1s cubic-bezier(.22,1,.36,1) .25s forwards;
}

.values .intro .ink { color: var(--yellow); }

.values .intro {
  margin-top: 5vh;
  max-width: 30ch;
  font-size: clamp(1.6rem, 3vw, 3rem);
  line-height: 1.3;
  letter-spacing: .01em;
  color: rgba(236, 232, 222, .85);
  opacity: 0;
  animation: fadeUp 1s cubic-bezier(.22,1,.36,1) .4s forwards;
}

.value {
  margin-top: 8vh;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s cubic-bezier(.22,1,.36,1) forwards;
}
.value:nth-of-type(1) { animation-delay: .6s; }
.value:nth-of-type(2) { animation-delay: .85s; }
.value:nth-of-type(3) { animation-delay: 1.1s; }

.value h2 {
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.value h2::before {
  content: "";
  width: .32em; height: .32em;
  border-radius: 50%;
  background: var(--cream);
  flex: none;
  transition: transform .4s ease;
}
.value:hover h2::before { transform: scale(1.35); }

.value p {
  margin-top: 2.6rem;
  margin-left: clamp(2.5rem, 9vw, 9rem);
  font-size: clamp(1rem, 1.5vw, 1.45rem);
  letter-spacing: .06em;
  color: rgba(236, 232, 222, .92);
  display: flex;
  align-items: baseline;
  gap: .8rem;
}
.value p::before {
  content: "○";
  font-size: .75em;
  flex: none;
}

/* page transition veil */
.veil {
  position: fixed;
  inset: 0;
  background: var(--terra);
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
  z-index: 50;
  transition: transform .55s cubic-bezier(.7,0,.3,1);
}
.veil.on { transform: scaleY(1); }

@media (max-width: 720px) {
  body.blue { background-attachment: scroll; }
  .site-header { padding: 1.2rem 1.4rem 0; }
  .hero { padding: 0 1.4rem; }
  .tagline { right: 6vw; top: 52vh; font-size: 1.15rem; }
  .mark { width: 78vw; margin: -1vh 0 0 -3vw; }
.mark .word { font-size: 8.5vw; left: 18%; top: 29%; }
  /* mobilde de footer yan yana */
  .band {
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
    padding: 2rem 5vw 3.4rem;
    min-height: 24vh;
  }
  .band::before { height: 14vh; }
  .band .note { font-size: .68rem; margin-top: 0; }
  .band .mail { font-size: .8rem; }
}