@import 'tailwindcss';

@theme {
  --color-white: #F1F4F5;
  --color-light: #DFEDEE;
  --color-highlight: #3FA0C7;
  --color-softlight: #8FCFE1;
  --color-dark: #3C393D;
  --font-sans: "MucoFont", ui-sans-serif, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-handwritten: "MucoFont Handwritten", ui-sans-serif, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

@font-face {
  font-family: "MucoFont";
  src: url("./assets/fonts/mucofont-xlig.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MucoFont";
  src: url("./assets/fonts/mucofont-book.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MucoFont";
  src: url("./assets/fonts/mucofont-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MucoFont";
  src: url("./assets/fonts/mucofont-demi.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MucoFont";
  src: url("./assets/fonts/mucofont-bold.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MucoFont Handwritten";
  src: url("./assets/fonts/mucofont-handwritten.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

html,
body {
  @apply text-dark bg-white scroll-smooth;
  font-family: var(--font-sans);
}

main {
  padding: 0;
}

a {
  @apply transition-colors duration-300;
}

button {
  @apply cursor-pointer transition-colors duration-300;
}

/* Markdown içerik stilleri */
@layer components {
  .markdown {
    @apply text-base leading-7 text-dark;
  }

  /* Başlıklar */
  .markdown h1,
  .markdown h2,
  .markdown h3,
  .markdown h4,
  .markdown h5,
  .markdown h6 {
    @apply font-bold tracking-tight text-dark scroll-mt-24;
  }

  .markdown h1 {
    @apply text-3xl sm:text-4xl my-3;
  }

  .markdown h2 {
    @apply text-2xl sm:text-3xl my-3;
  }

  .markdown h3 {
    @apply text-xl my-3;
  }

  .markdown h4 {
    @apply text-lg my-3;
  }

  .markdown h5 {
    @apply text-base my-3;
  }

  .markdown h6 {
    @apply text-sm my-3 text-dark;
  }

  /* Paragraflar */
  .markdown p {
    @apply my-4;
  }

  /* Linkler */
  .markdown a {
    @apply underline underline-offset-2 text-highlight hover:text-softlight wrap-break-word;
  }

  /* Listeler */
  .markdown ul,
  .markdown ol {
    @apply my-4 ml-6;
  }

  .markdown ul {
    @apply list-disc;
  }

  .markdown ol {
    @apply list-decimal;
  }

  .markdown li {
    @apply my-1;
  }

  .markdown li>p {
    @apply my-0;
  }

  /* Blockquote */
  .markdown blockquote {
    @apply my-6 border-l-4 border-light pl-4 text-dark;
  }

  /* Yatay çizgi */
  .markdown hr {
    @apply my-8 border-t border-dark;
  }

  /* Görseller */
  .markdown img {
    @apply block max-w-full h-auto my-4 rounded-lg;
  }

  /* Tablolar */
  .markdown table {
    @apply block overflow-x-auto;
    @apply w-full text-left text-sm my-6 border-collapse;
  }

  .markdown thead th {
    @apply border border-dark bg-light px-3 py-2 font-semibold;
  }

  .markdown tbody td {
    @apply border border-dark px-3 py-2 align-top;
  }

  .markdown tbody tr:nth-child(even) td {
    @apply bg-dark/50;
  }

  /* Kod satırlarında uzun kelime kırma için yardımcı */
  .markdown .break-lines pre,
  .markdown .break-lines code {
    @apply whitespace-pre-wrap wrap-break-word;
  }

  /* İçerik genişliği (opsiyonel) */
  .markdown.prose {
    @apply max-w-[72ch];
  }

  .markdown strong {
    @apply underline
  }
}