/* Diş Sıkma Masterclass — project design system (tokens, base type, states, animations) */

:root {
  --paper: #f6f1ea;
  --paper-2: #efe7dc;
  --ink: #241e2a;
  --muted: #6b6270;
  --plum: #4a2e52;
  --plum-soft: #ece1ee;
  --honey: #d07e1f;
  --honey-soft: #f7e6c8;
  --cta-bg: #8f5210;
  --cta-ink: #fdf6ea;
  --sage: #55654f;
  --line: #ddd1c3;
  --shadow: rgba(36, 30, 42, 0.16);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

html.dark {
  --paper: #16121b;
  --paper-2: #1e1826;
  --ink: #f3ece3;
  --muted: #b3a6b8;
  --plum: #c7a3d4;
  --plum-soft: #2a2133;
  --honey: #e9b25a;
  --honey-soft: #3a2e1c;
  --cta-bg: #d99a3f;
  --cta-ink: #221607;
  --sage: #9fb199;
  --line: #342b3d;
  --shadow: rgba(0, 0, 0, 0.5);
}

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

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

/* --- Scroll reveal (opacity + transform only) --- */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Signature "release line": tight tension easing into a quiet wave --- */
html.js .tension-path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}

html.js .reveal.is-visible .tension-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2s var(--ease-out);
}

/* --- FAQ accordion (CSS-only state) --- */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s var(--ease-out);
}

.faq-answer > div {
  overflow: hidden;
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-icon {
  transition: transform 0.28s var(--ease-out);
}

.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
}

/* --- Press feedback --- */
.btn-press {
  transition: transform 0.16s var(--ease-out);
}

.btn-press:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js .tension-path {
    stroke-dashoffset: 0;
  }

  .faq-answer,
  .faq-icon,
  .btn-press {
    transition: none;
  }
}