/* Font, element defaults and shared building blocks (eyebrow, primary button, captions). */

/* Nunito: https://github.com/google/fonts/tree/main/ofl/nunito
   The bundled variable font covers çÇğĞıİöÖşŞüÜ. See assets/fonts/OFL-Nunito.txt. */
@font-face {
  font-family: 'Kuzucuklar Nunito';
  src: url('../assets/fonts/Nunito-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--page-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-synthesis: none;
  transition: background var(--theme-fade), color var(--theme-fade);
}

h1, h2, h3, p { margin: 0; }
h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
}
h1 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--text-h3); }
em { font-style: normal; color: var(--color-accent); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 6px; }

.skip { position: fixed; top: -100px; left: 20px; z-index: 100; background: var(--color-surface); padding: 15px; }
.skip:focus { top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Small label above a heading */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  font-size: var(--text-250);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
}

.caption { margin-top: 12px; text-align: center; font-size: var(--text-150); line-height: var(--leading-snug); color: var(--color-muted); }

.offer { display: flex; align-items: center; gap: 9px; margin-top: 17px; font-size: var(--text-200); font-weight: var(--weight-semibold); color: var(--color-muted); }

/* Primary button: one fill in every state; hover only adds lift and light. */
.primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  min-height: 54px;
  padding: 15px 29px;
  border: 1px solid var(--btn-edge);
  border-radius: var(--radius-button);
  background: var(--btn-fill);
  color: var(--btn-text);
  font-size: var(--text-350);
  font-weight: var(--weight-bold);
  box-shadow: var(--btn-shadow);
  transition: transform .25s, box-shadow .25s;
}
.primary:hover { box-shadow: var(--btn-shadow-hover); transform: translateY(-2px); }
.primary:active { transform: translateY(0); }

/* "Şimdi dene": letter spacing opens on hover, a short press dips the button. */
.primary.create {
  width: min(200px, 100%);
  letter-spacing: 1.5px;
  transition: letter-spacing .7s ease, box-shadow .7s ease, transform .5s ease;
}
@media (hover: hover) {
  .primary.create:hover { letter-spacing: 4px; box-shadow: inset 0 1px 1px var(--btn-highlight), 0 6px 25px var(--btn-glow); transform: none; }
}
.primary.create:active {
  letter-spacing: 3px;
  box-shadow: inset 0 1px 1px var(--btn-highlight), 0 3px 15px var(--btn-glow);
  transform: translateY(10px);
  transition-duration: 100ms;
}

@media (max-width: 700px) {
  .eyebrow { justify-content: center; margin-bottom: 19px; font-size: var(--text-100); letter-spacing: .06em; }
  .caption { font-size: var(--text-100); }
  .offer { justify-content: center; gap: 7px; font-size: var(--text-100); }
  .primary { min-height: 53px; padding-inline: 26px; font-size: var(--text-300); }
}
@media (max-width: 360px) {
  .offer { font-size: var(--text-75); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .primary.create, .primary.create:hover, .primary.create:active { transform: none; letter-spacing: 1.5px; }
}
@media (forced-colors: active) {
  .primary { border: 1px solid ButtonText; }
}