/* ponytail: Google Fonts siteye gömüldü; @import render-blocking bir dış tur açıyordu. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --og-bg: #09090a;
  --og-surface: #121214;
  --og-surface-deep: #080809;
  --og-text: #f7f7f5;
  --og-muted: #b4b3b0;
  --og-dim: #737276;
  --og-accent: #f1f1ef;
  --og-border: #2b2b2f;
  --og-border-strong: #3b3b41;
  --og-radius: .9rem;
  --og-danger: #ef7b7b;
  --og-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--og-bg);
  color: var(--og-text);
  font-family: var(--og-font);
}

.og-shell {
  width: min(100%, 42rem);
  padding: 1.5rem 1rem 2.5rem;
}

.brand {
  display: grid;
  justify-items: center;
  gap: .15rem;
  margin-bottom: 1.15rem;
  text-align: center;
}

.brand-lockup {
  width: min(100%, 20rem);
  aspect-ratio: 450 / 78;
  overflow: hidden;
}

.brand-lockup img {
  display: block;
  width: 100%;
  height: auto;
}

.brand-tagline {
  margin: 0;
  color: var(--og-muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .035em;
  line-height: 1;
}

.offgrid-wordmark {
  display: inline-block;
  font-weight: 400;
  letter-spacing: .28em;
}

footer,
.eyebrow {
  margin: 0;
  color: var(--og-dim);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .31rem;
}

.og-panel {
  border: 1px solid var(--og-border-strong);
  border-radius: 1.2rem;
  background: var(--og-surface);
  box-shadow: 0 1.6rem 4rem rgb(0 0 0 / 38%), inset 0 1px 0 rgb(255 255 255 / 4%);
  padding: clamp(1.35rem, 3.5vw, 2.35rem);
}

.og-panel h1,
.wheel-panel h2 {
  max-width: 38rem;
  margin: .65rem auto 1rem;
  font-size: clamp(1.85rem, 4.8vw, 2.7rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.055em;
  text-align: center;
}

.eyebrow {
  color: var(--og-muted);
  text-align: center;
}

.lead-copy {
  max-width: 34rem;
  margin: 0 auto 2.2rem;
  color: var(--og-muted);
  font-size: clamp(.9rem, 2.2vw, 1.05rem);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
}

#entry-form {
  max-width: 36rem;
  margin: 0 auto;
}

.form-label {
  color: var(--og-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .24rem;
}

.form-control {
  min-height: 4.5rem;
  border: 1px solid var(--og-border-strong);
  border-radius: var(--og-radius);
  background: var(--og-surface-deep);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%), 0 .7rem 1.8rem rgb(0 0 0 / 18%);
  color: var(--og-text);
  font-size: 1rem;
  font-weight: 600;
  padding: .9rem 1.15rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.form-control::placeholder {
  color: #77777f;
}

.form-control:focus {
  border-color: var(--og-accent);
  background: #0d0d0f;
  color: var(--og-text);
  box-shadow: 0 0 0 .22rem rgb(241 241 239 / 11%), inset 0 1px 0 rgb(255 255 255 / 4%), 0 1rem 2.4rem rgb(0 0 0 / 25%);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}

.form-check-input {
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  margin-top: .1rem;
  border: 1px solid #8a8a91;
  border-radius: .35rem !important;
  background-color: var(--og-surface-deep);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

.form-check-input:checked {
  border-color: var(--og-accent);
  background-color: var(--og-accent);
}

.form-check-label,
.terms-copy {
  color: #85858a;
  font-size: .82rem;
  line-height: 1.5;
}

.form-check-label .offgrid-wordmark {
  color: var(--og-muted);
  font-size: .92em;
  letter-spacing: .2em;
}

.terms-copy {
  margin: -.5rem 0 1.6rem;
}

#entry-panel {
  padding-bottom: .9rem;
}

.terms-copy a {
  color: var(--og-muted);
}

.og-button {
  min-height: 4.6rem;
  border: 1px solid var(--og-text);
  border-radius: var(--og-radius);
  background: var(--og-text);
  box-shadow: 0 .9rem 2.2rem rgb(0 0 0 / 32%), inset 0 -1px 0 rgb(0 0 0 / 14%);
  color: var(--og-bg);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .17rem;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.og-button:hover,
.og-button:focus-visible {
  border-color: var(--og-accent);
  background: var(--og-accent);
  box-shadow: 0 1.1rem 2.8rem rgb(0 0 0 / 42%), inset 0 -1px 0 rgb(0 0 0 / 14%);
  color: var(--og-bg);
  transform: translateY(-2px);
}

.og-button:active {
  box-shadow: 0 .55rem 1.5rem rgb(0 0 0 / 30%), inset 0 1px 0 rgb(0 0 0 / 16%);
  transform: translateY(0);
}

.og-button:disabled {
  border-color: #777;
  background: #777;
  box-shadow: none;
  color: #222;
  transform: none;
}

.status-message {
  min-height: 1.5rem;
  margin: 1rem 0 0;
  color: var(--og-danger);
  font-weight: 700;
  text-align: center;
}

.status-message:not(:empty) {
  border: 1px solid rgb(239 123 123 / 34%);
  border-radius: .7rem;
  background: rgb(239 123 123 / 7%);
  padding: .85rem 1rem;
}

.wheel-panel {
  display: grid;
  justify-items: center;
  width: 100%;
  overflow: hidden;
  padding-top: 1rem;
}

.wheel-stage {
  position: relative;
  width: min(86vw, 34rem);
  margin-top: 1.5rem;
  padding: .8rem;
}

.wheel-pointer {
  position: absolute;
  z-index: 2;
  top: -.35rem;
  left: 50%;
  width: 2.2rem;
  height: 2.8rem;
  background: var(--og-text);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}

.prize-wheel {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: .7rem solid #28282c;
  border-radius: 50%;
  background: conic-gradient(
    #68686c 0deg 45deg,
    #111113 45deg 90deg,
    #3f3f43 90deg 135deg,
    #19191c 135deg 180deg,
    #68686c 180deg 225deg,
    #111113 225deg 270deg,
    #3f3f43 270deg 315deg,
    #19191c 315deg 360deg
  );
  box-shadow: 0 0 0 .2rem #0b0b0c, 0 1.5rem 4rem rgb(0 0 0 / 45%);
  transition: transform 5.6s cubic-bezier(.12, .68, .08, 1);
}

.prize-wheel::after {
  position: absolute;
  inset: 39%;
  border: .2rem solid #3a3a40;
  border-radius: 50%;
  background: var(--og-bg);
  content: "";
}

.prize-wheel > img {
  position: absolute;
  z-index: 1;
  top: 42%;
  left: 42%;
  width: 16%;
  height: 16%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
  transform: rotate(calc(-1 * var(--spin, 0deg)));
  transition: transform 5.6s cubic-bezier(.12, .68, .08, 1);
}

.wheel-label {
  --angle: calc(var(--sector) * 45deg + 22.5deg);
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  --label-width: clamp(5rem, 15vw, 7.5rem);
  width: var(--label-width);
  height: 2.4rem;
  margin-top: -1.2rem;
  margin-left: calc(var(--label-width) / -2);
  color: var(--og-text);
  font-size: clamp(.9rem, 3vw, 1.45rem);
  font-weight: 900;
  letter-spacing: .05rem;
  line-height: 1.05;
  text-align: center;
  /* ponytail: --spin çarkın dönüşünü geri alır, yazılar hep düz kalır; süre/easing çarkla birebir aynı. */
  transform: rotate(var(--angle)) translateY(calc(-1 * min(28vw, 11rem)))
    rotate(calc(-1 * var(--angle) - var(--spin, 0deg)));
  transform-origin: center;
  transition: transform 5.6s cubic-bezier(.12, .68, .08, 1);
}

.wheel-label-small {
  font-size: clamp(.65rem, 2.5vw, 1rem);
}

.wheel-spin-button {
  width: min(86vw, 34rem);
  margin-top: 1.6rem;
}

.result-panel {
  padding-top: 4.1rem;
  padding-bottom: 2.5rem;
  text-align: center;
}

.result-badge {
  display: inline-block;
  margin: 0 0 1.2rem;
  border: 1px solid #6c6c70;
  border-radius: 999px;
  background: var(--og-surface-deep);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  color: var(--og-accent);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .3rem;
  padding: .7rem 1.4rem;
}

.result-panel h2 {
  margin: 0;
  color: var(--og-muted);
  font-size: 1rem;
  letter-spacing: .18rem;
  text-transform: uppercase;
}

.prize-label {
  margin: .8rem 0 1.8rem;
  font-size: clamp(2.4rem, 7vw, 3.7rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.code-card {
  position: relative;
  border: 1px solid var(--og-border-strong);
  border-radius: 1rem;
  background: var(--og-surface-deep);
  box-shadow: 0 1rem 2.8rem rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 4%);
  padding: 2rem 1rem 1.8rem;
}

.code-copy {
  position: absolute;
  top: .75rem;
  right: .75rem;
  border: 1px solid var(--og-border-strong);
  border-radius: 999px;
  background: #17171a;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  color: var(--og-accent);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08rem;
  padding: .55rem .7rem;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.code-copy:hover,
.code-copy:focus-visible {
  border-color: var(--og-accent);
  background: var(--og-accent);
  color: var(--og-bg);
}

.code-card span {
  display: block;
  color: var(--og-dim);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .25rem;
}

.code-card strong {
  display: block;
  overflow-wrap: anywhere;
  margin-top: .7rem;
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  letter-spacing: .2rem;
}

.result-instruction {
  margin: 1.8rem auto .7rem;
  color: var(--og-muted);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.6;
}

.result-expiry,
.email-note {
  color: var(--og-dim);
  font-size: .8rem;
  margin-bottom: 0;
}

.result-panel:focus-visible {
  outline: none;
}

.staff-shell {
  max-width: 45rem;
}

.delivery-code {
  text-transform: uppercase;
}

.staff-result {
  min-height: 5rem;
  margin-top: 1.5rem;
  border-left: .2rem solid var(--og-border);
  color: var(--og-muted);
  padding: .9rem 1rem;
}

.staff-result[data-status="success"] {
  border-color: var(--og-accent);
  color: var(--og-text);
}

.staff-result[data-status="error"] {
  border-color: var(--og-danger);
  color: var(--og-danger);
}

.og-button-outline {
  width: min(100%, 25rem);
  min-height: 3.7rem;
  margin-top: 1rem;
  border-color: var(--og-border);
  background: transparent;
  color: var(--og-text);
  font-size: .95rem;
}

footer {
  padding-top: 2rem;
  text-align: center;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--og-accent);
  outline-offset: 3px;
}

@media (max-width: 575.98px) {
  .og-shell {
    padding-top: 1rem;
  }

  .brand {
    margin-bottom: 1rem;
  }

  .brand-lockup {
    width: min(100%, 17rem);
  }

  .brand-tagline {
    font-size: 1.15rem;
    letter-spacing: .025em;
  }

  footer,
  .eyebrow {
    font-size: .68rem;
    letter-spacing: .24rem;
  }

  .og-panel {
    padding: 1.35rem 1.1rem;
  }

  .result-panel {
    padding-top: 3rem;
  }

  #entry-panel {
    padding-bottom: .75rem;
  }

  .form-control {
    min-height: 4rem;
    font-size: .95rem;
  }

  .og-button {
    min-height: 4rem;
    font-size: 1rem;
  }

  .code-copy {
    position: static;
    min-height: 2.75rem;
    margin-top: 1rem;
    padding: .65rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-control,
  .og-button,
  .code-copy {
    transition: none;
  }

  .prize-wheel,
  .prize-wheel > img,
  .wheel-label {
    transition-duration: 100ms;
  }
}