/* =========================
   THREADBOX – SOFT TEXTILE
========================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');


/* --------- ROOT COLORS --------- */
:root {
    /* Zemin */
    --bg-cream: #F6F4EE;

    /* İplik renkleri */
    --thread-sage:  #AEBCAF;
    --thread-lilac: #B7AECF;
    --thread-black: #2B2B2B;
    --thread-white: #FFFFFF;

    /* Metin */
    --text-main: #2B2B2B;
    --text-soft: #6F6F6F;

    /* UI */
    --border-soft: rgba(0,0,0,0.08);
    --grid-line: rgba(0,0,0,0.03);
    
    --purple: #7B5CFF;
    --purple-soft: #6a4fe0;
}

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

html, body {
    margin: 0;
    padding: 0;
}

/* --------- BODY BACKGROUND --------- */
body {
    min-height: 100vh;
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    color: var(--text-main);

     background-image:
        radial-gradient(
          circle at center,
          transparent 70%
        ),
        radial-gradient(
          rgba(0,0,0,0.2) 1px,
          transparent 1px
        );

      background-size:
        100% 100%,
        24px 24px;

      background-repeat: no-repeat, repeat;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* --------- MAIN CONTAINER --------- */
.container {
    width: 100%;
    max-width: 1100px;
    padding: 48px;
}

/* --------- CARD / PANEL --------- */
.card {
  width: 100%;
  max-width: 380px;

  /* 🎨 KREM KART */
  background: var(--thread-cream); /* style.css içinde tanımlı */

  border-radius: 18px;
  padding: 28px 24px;

  display: flex;
  flex-direction: column;
  gap: 18px;

  /* 🖤 SİYAH KENAR */
  border: 2px solid var(--thread-black);

  /* Hafif ama kaliteli gölge */
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* --------- TYPOGRAPHY --------- */
h1, h2, h3 {
    margin: 0 0 12px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

h1 { font-size: 2.3rem; }
h2 { font-size: 1.6rem; }

p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.6;
}

/* =========================
   BUTTONS – SOFT TEXTILE
========================= */

.button {
    appearance: none;
    border: 1px solid var(--border-soft);
    cursor: pointer;

    font-family: inherit;
    font-weight: 500;

    padding: 14px 22px;
    border-radius: 14px;

    color: var(--thread-black);

    /* DÜZ RENK + DOKU */
    background-color: var(--thread-lilac);
    background-repeat: repeat;
    background-size: auto;
    background-blend-mode: multiply;

    box-shadow: none;

    transition:
        background-color 0.2s ease,
        transform 0.15s ease;
}

/* Hover = sadece biraz koyulaşır */
.button:hover {
    background-color: #A89FC4;
}

/* Active = basılmış kumaş hissi */
.button:active {
    transform: translateY(1px);
}

/* --------- PRIMARY / SAGE --------- */
.button-primary {
    background-color: var(--thread-sage);
}

.button-primary:hover {
    background-color: #9FAE9F;
}

/* --------- DARK BUTTON --------- */
.button-dark {
    background-color: var(--thread-black);
    color: var(--thread-white);
}

.button-dark:hover {
    background-color: #1F1F1F;
}

/* --------- INPUTS --------- */
input, textarea {
    width: 100%;
    padding: 12px 14px;

    border-radius: 12px;
    border: 1px solid var(--border-soft);

    background: var(--thread-white);
    font-family: inherit;
    outline: none;
}

input:focus,
textarea:focus {
    border-color: var(--thread-sage);
}

/* --------- FOOTER --------- */
.footer-note {
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--text-soft);
    text-align: center;
}

/* --------- RESPONSIVE --------- */
@media (max-width: 768px) {
    .container { padding: 24px; }
    .card { padding: 24px; }
    h1 { font-size: 1.9rem; }
}