:root {
  color-scheme: dark;
  --color-paper: #11100f;
  --color-paper-2: #181716;
  --color-paper-3: #262321;
  --color-kraft: #8b6e55;
  --color-ink: #f3e7d4;
  --color-ink-2: #cbbdac;
  --color-ink-3: #958b80;
  --color-brick: #b52c34;
  --color-tea: #762028;
  --color-ochre: #2667ad;
  --noir-old-paper: #d8c3a3;
  --noir-old-paper-deep: #c3a57c;
  --noir-paper-ink: #241d18;
  --noir-red-text: #e85a63;
  --noir-red-on-blue: #ff8c91;
}

html {
  background: #11100f;
}

body {
  color: #f3e7d4;
  background-image:
    linear-gradient(180deg, rgb(17 16 15 / 0.14), rgb(13 13 13 / 0.32)),
    url("/assets/textures/noir-paper-background.png");
  background-color: #11100f;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: #f3e7d4;
  opacity: 0.045;
  -webkit-mask: url("/assets/textures/grain.svg") repeat;
  mask: url("/assets/textures/grain.svg") repeat;
}

::selection {
  color: #f3e7d4;
  background: #b52c34;
}

header {
  color: #f3e7d4 !important;
  background: rgb(17 16 15 / 0.94) !important;
  box-shadow: 0 12px 35px rgb(0 0 0 / 0.22);
  backdrop-filter: blur(14px);
}

header [class*="border-ink"],
header nav {
  border-color: rgb(243 231 212 / 0.18) !important;
}

header a[href="#iletisim"].bg-ink {
  color: #f3e7d4 !important;
  background: #b52c34 !important;
}

header a[href="#iletisim"].bg-ink:hover {
  background: #2667ad !important;
}

dialog[aria-label="Menü"] {
  color: #f3e7d4 !important;
  background:
    linear-gradient(145deg, rgb(9 42 82 / 0.96), rgb(17 16 15 / 0.98) 55%),
    #11100f !important;
}

dialog[aria-label="Menü"]::backdrop {
  background: rgb(0 0 0 / 0.72);
  backdrop-filter: blur(4px);
}

dialog[aria-label="Menü"] nav a,
dialog[aria-label="Menü"] > div > div:first-child {
  border-color: rgb(243 231 212 / 0.18) !important;
}

dialog[aria-label="Menü"] nav a:hover,
dialog[aria-label="Menü"] nav a:focus-visible {
  color: #f3e7d4 !important;
  background: #b52c34;
  outline: none;
}

dialog[aria-label="Menü"] a[href="#iletisim"].bg-brick {
  background: #b52c34 !important;
}

main > section {
  isolation: isolate;
}

#top {
  color: #f3e7d4;
  background:
    linear-gradient(90deg, rgb(17 16 15 / 0.88), rgb(17 16 15 / 0.68)),
    radial-gradient(circle at 82% 22%, rgb(181 44 52 / 0.22), transparent 22rem),
    radial-gradient(circle at 10% 82%, rgb(38 103 173 / 0.18), transparent 28rem);
}

#top::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: 8%;
  z-index: -1;
  width: 22rem;
  height: 8rem;
  background: #103f7a;
  opacity: 0.62;
  transform: rotate(-7deg);
  clip-path: polygon(3% 12%, 98% 0, 94% 91%, 0 100%);
}

#top h1,
#top .text-ink,
#top .text-ink-2,
#top .text-ink-3 {
  color: #f3e7d4 !important;
}

#top h1 .text-brick,
#top .text-brick {
  color: #cf343d !important;
}

#top .bg-paper-2 {
  color: var(--noir-paper-ink) !important;
  background:
    linear-gradient(104deg, rgb(255 255 255 / 0.08), transparent 38%),
    repeating-linear-gradient(0deg, rgb(84 59 35 / 0.035) 0 1px, transparent 1px 4px),
    var(--noir-old-paper) !important;
  border: 1px solid rgb(78 55 35 / 0.28);
  box-shadow: 0 16px 34px -24px rgb(0 0 0 / 0.75) !important;
}

#top .bg-paper-2.text-ink,
#top .bg-paper-2 .text-ink {
  color: var(--noir-paper-ink) !important;
}

#top .bg-paper-2 .text-brick {
  color: #762028 !important;
}

#top dl {
  border-color: rgb(243 231 212 / 0.14) !important;
  background: rgb(0 0 0 / 0.18);
}

#hakkimizda {
  color: #f3e7d4;
  background:
    linear-gradient(135deg, rgb(9 42 82 / 0.88), rgb(16 63 122 / 0.9)) !important;
  border-block: 1px solid rgb(243 231 212 / 0.16);
}

#hakkimizda::after,
#ekip::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 18px;
  background: #11100f;
  clip-path: polygon(0 68%, 3% 25%, 7% 70%, 12% 34%, 17% 75%, 22% 31%, 28% 72%, 34% 27%, 40% 68%, 47% 30%, 54% 74%, 61% 23%, 68% 70%, 74% 32%, 81% 75%, 88% 28%, 94% 69%, 100% 34%, 100% 100%, 0 100%);
}

#hakkimizda .text-ink,
#hakkimizda .text-ink-2,
#hakkimizda .text-ink-3,
#ekip .text-ink,
#ekip .text-ink-2,
#ekip .text-ink-3 {
  color: #f3e7d4 !important;
}

#hakkimizda blockquote {
  color: #f3e7d4;
  border-color: #b52c34 !important;
}

#hakkimizda li {
  border-color: rgb(243 231 212 / 0.14) !important;
}

#hakkimizda li:nth-child(-n + 2),
#hakkimizda li:nth-child(-n + 2) .text-paper,
#hakkimizda li:nth-child(-n + 2) .text-ink,
#hakkimizda li:nth-child(-n + 2) .text-ink-2,
#hakkimizda li:nth-child(-n + 2) p,
#hakkimizda li:nth-child(-n + 2) h3 {
  color: #f3e7d4 !important;
}

#hizmetler {
  color: #f3e7d4;
  background:
    radial-gradient(circle at 10% 18%, rgb(181 44 52 / 0.14), transparent 24rem),
    radial-gradient(circle at 92% 78%, rgb(38 103 173 / 0.14), transparent 25rem),
    linear-gradient(rgb(17 16 15 / 0.82), rgb(17 16 15 / 0.9)) !important;
}

#hizmetler .bg-ink {
  color: #f3e7d4 !important;
  background: #171616 !important;
  border: 1px solid rgb(243 231 212 / 0.14);
  box-shadow: 0 26px 55px -34px rgb(0 0 0 / 0.95);
}

#hizmetler li:nth-child(3n + 2) .bg-ink {
  background: #092a52 !important;
}

#hizmetler li:nth-child(3n) .bg-ink {
  background: #762028 !important;
}

#hizmetler .text-paper,
#hizmetler .text-paper\/65,
#hizmetler .text-paper\/70,
#hizmetler .text-paper\/75,
#hizmetler .text-paper\/80,
#hizmetler .text-paper\/85 {
  color: #f3e7d4 !important;
}

#portfoy {
  color: #f3e7d4 !important;
  background:
    linear-gradient(rgb(11 11 12 / 0.86), rgb(11 11 12 / 0.94)),
    radial-gradient(circle at 50% 0, rgb(16 63 122 / 0.72), transparent 45%) !important;
  border-block: 1px solid rgb(243 231 212 / 0.12);
}

#portfoy .text-paper,
#portfoy .text-paper\/65,
#portfoy .text-paper\/70,
#portfoy .text-paper\/75,
#portfoy .text-paper\/80,
#portfoy .text-paper\/85,
#portfoy .text-paper\/90 {
  color: #f3e7d4 !important;
}

#portfoy button {
  border-color: rgb(243 231 212 / 0.18) !important;
}

#ekip {
  color: #f3e7d4;
  background:
    linear-gradient(150deg, rgb(9 42 82 / 0.9), rgb(12 50 96 / 0.88)) !important;
}

#ekip article {
  color: #f3e7d4;
  background: #171616 !important;
  border: 1px solid rgb(243 231 212 / 0.17);
  box-shadow: 0 26px 48px -30px rgb(0 0 0 / 0.9) !important;
}

#ekip li:nth-child(2n) article {
  background: #121f32 !important;
}

#ekip .tape {
  background:
    linear-gradient(100deg, rgb(255 255 255 / 0.08), transparent 55%),
    repeating-linear-gradient(0deg, rgb(84 59 35 / 0.035) 0 1px, transparent 1px 4px),
    var(--noir-old-paper) !important;
  border-color: rgb(92 67 43 / 0.3) !important;
  box-shadow: 0 5px 12px rgb(0 0 0 / 0.18);
}

#ekip li:nth-child(2n) .tape {
  background:
    linear-gradient(100deg, rgb(255 255 255 / 0.08), transparent 55%),
    repeating-linear-gradient(0deg, rgb(84 59 35 / 0.035) 0 1px, transparent 1px 4px),
    var(--noir-old-paper) !important;
}

#yorumlar {
  color: #f3e7d4;
  background:
    radial-gradient(circle at 86% 18%, rgb(181 44 52 / 0.18), transparent 27rem),
    linear-gradient(rgb(17 16 15 / 0.84), rgb(17 16 15 / 0.92)) !important;
}

#yorumlar .text-ink,
#yorumlar .text-ink-2,
#yorumlar .text-ink-3 {
  color: #f3e7d4 !important;
}

#yorumlar figure {
  color: #f3e7d4;
  background: #092a52 !important;
  border: 1px solid rgb(243 231 212 / 0.17);
  box-shadow: 0 24px 50px -28px rgb(0 0 0 / 0.92) !important;
}

#yorumlar li:nth-child(2n) figure {
  background: #762028 !important;
}

#yorumlar button {
  border-color: rgb(243 231 212 / 0.35) !important;
}

#yorumlar button.bg-ink {
  color: #f3e7d4 !important;
  background: #b52c34 !important;
}

#iletisim {
  color: #f3e7d4;
  background:
    linear-gradient(135deg, rgb(17 16 15 / 0.9), rgb(9 42 82 / 0.8)) !important;
  border-top: 1px solid rgb(243 231 212 / 0.14);
}

#iletisim .text-ink,
#iletisim .text-ink-2,
#iletisim .text-ink-3 {
  color: #f3e7d4 !important;
}

#iletisim .bg-paper-2 {
  color: #f3e7d4 !important;
  background: #151c27 !important;
  border: 1px solid rgb(243 231 212 / 0.16);
}

#iletisim input,
#iletisim textarea,
#iletisim select {
  color: #f3e7d4 !important;
  background: rgb(0 0 0 / 0.16) !important;
  border-color: rgb(243 231 212 / 0.3) !important;
}

#iletisim input::placeholder,
#iletisim textarea::placeholder {
  color: rgb(203 189 172 / 0.68) !important;
}

#iletisim button[type="submit"] {
  color: #f3e7d4 !important;
  background: #b52c34 !important;
}

#iletisim button[type="submit"]:hover {
  background: #2667ad !important;
}

footer {
  color: #f3e7d4 !important;
  background: linear-gradient(rgb(8 8 9 / 0.9), rgb(8 8 9 / 0.96)) !important;
  border-top: 1px solid rgb(243 231 212 / 0.16);
}

footer .text-paper,
footer .text-paper\/45,
footer .text-paper\/65,
footer .text-paper\/70,
footer .text-paper\/75,
footer .text-paper\/80,
footer .text-paper\/85,
footer .text-paper\/90,
footer .text-ink,
footer .text-ink-2 {
  color: #f3e7d4 !important;
}

footer .text-brick,
footer .text-ochre {
  color: #4b86c9 !important;
}

footer a:hover {
  color: #4b86c9 !important;
}

.eyebrow,
.text-brick {
  color: var(--noir-red-text) !important;
}

.text-ochre {
  color: #4b86c9 !important;
}

.bg-brick {
  background-color: #b52c34 !important;
}

.bg-ochre {
  background-color: #2667ad !important;
}

/* Accessible color roles: surface red and text red are intentionally separate. */
.bg-brick.text-paper,
dialog[aria-label="Menü"] a[href="#iletisim"].bg-brick {
  color: #f3e7d4 !important;
}

#hakkimizda .eyebrow,
#hakkimizda h2 .text-brick,
#ekip .eyebrow,
#ekip h2 .text-brick {
  color: var(--noir-red-on-blue) !important;
}

#ekip article .text-brick {
  color: var(--noir-red-text) !important;
}

#hakkimizda li:nth-child(3) .text-ochre {
  color: #103f7a !important;
}

#portfoy .bg-ink.text-paper\/80 {
  color: var(--noir-paper-ink) !important;
  background:
    linear-gradient(104deg, rgb(255 255 255 / 0.08), transparent 42%),
    repeating-linear-gradient(0deg, rgb(84 59 35 / 0.035) 0 1px, transparent 1px 4px),
    var(--noir-old-paper) !important;
  border-color: rgb(36 29 24 / 0.24) !important;
}

#portfoy .bg-ink.text-paper\/80 .text-ochre {
  color: #103f7a !important;
}

@media (max-width: 639px) {
  body {
    background-attachment: scroll;
    background-position: 42% top;
  }

  body::before {
    opacity: 0.035;
  }

  #top::after {
    right: -9rem;
    bottom: 4%;
  }

  #ekip article {
    background: #151515 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    position: absolute;
  }
}