/* KSC V3 COLOR FORCE - mustafaerciyas.com.tr visual match */
:root {
  --ksc-force-black: #000000;
  --ksc-force-bg: #050505;
  --ksc-force-panel: #111109;
  --ksc-force-panel-2: #17170d;
  --ksc-force-yellow: #FFD300;
  --ksc-force-yellow-2: #f2bf00;
  --ksc-force-white: #fff8df;
  --ksc-force-muted: #c8bea0;
  --ksc-force-faint: #8e8468;
  --ksc-force-line: rgba(255, 212, 0, 0.30);
  --ksc-force-line-strong: rgba(255, 212, 0, 0.58);
}

/* absolute page force */
html body.ksc-public-visual-alignment-v3 {
  background-color: #000000 !important;
  background-image:
    linear-gradient(rgba(255,212,0,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,212,0,0.045) 1px, transparent 1px),
    radial-gradient(circle at 16% 0%, rgba(255,212,0,0.14), transparent 30%),
    radial-gradient(circle at 82% 4%, rgba(255,212,0,0.10), transparent 24%),
    linear-gradient(180deg, #090905 0%, #000000 100%) !important;
  background-size: 58px 58px, 58px 58px, auto, auto, auto !important;
  color: var(--ksc-force-white) !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
}

/* kill old brown/olive tones */
html body.ksc-public-visual-alignment-v3 main,
html body.ksc-public-visual-alignment-v3 section,
html body.ksc-public-visual-alignment-v3 .section,
html body.ksc-public-visual-alignment-v3 .hero,
html body.ksc-public-visual-alignment-v3 .intro,
html body.ksc-public-visual-alignment-v3 .book-hero,
html body.ksc-public-visual-alignment-v3 .auth-hero,
html body.ksc-public-visual-alignment-v3 article,
html body.ksc-public-visual-alignment-v3 .card,
html body.ksc-public-visual-alignment-v3 .panel,
html body.ksc-public-visual-alignment-v3 .box,
html body.ksc-public-visual-alignment-v3 .surface,
html body.ksc-public-visual-alignment-v3 [data-ksc-book-card],
html body.ksc-public-visual-alignment-v3 .ksc-book-card,
html body.ksc-public-visual-alignment-v3 .ksc-durak-card,
html body.ksc-public-visual-alignment-v3 .ksc-public-auth-card,
html body.ksc-public-visual-alignment-v3 .ksc-public-auth-shell {
  background-color: #101009 !important;
  background-image:
    linear-gradient(rgba(255,212,0,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,212,0,0.030) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0.008)) !important;
  background-size: 44px 44px, 44px 44px, auto !important;
  border-color: var(--ksc-force-line) !important;
  color: var(--ksc-force-white) !important;
}

/* header */
html body.ksc-public-visual-alignment-v3 header,
html body.ksc-public-visual-alignment-v3 nav {
  background: #000000 !important;
  border-bottom: 1px solid rgba(255,212,0,0.22) !important;
}

/* text */
html body.ksc-public-visual-alignment-v3 p,
html body.ksc-public-visual-alignment-v3 li,
html body.ksc-public-visual-alignment-v3 span,
html body.ksc-public-visual-alignment-v3 label,
html body.ksc-public-visual-alignment-v3 small,
html body.ksc-public-visual-alignment-v3 div {
  color: var(--ksc-force-muted);
}

html body.ksc-public-visual-alignment-v3 h1,
html body.ksc-public-visual-alignment-v3 h2,
html body.ksc-public-visual-alignment-v3 h3,
html body.ksc-public-visual-alignment-v3 h4,
html body.ksc-public-visual-alignment-v3 h5,
html body.ksc-public-visual-alignment-v3 h6,
html body.ksc-public-visual-alignment-v3 strong,
html body.ksc-public-visual-alignment-v3 .title,
html body.ksc-public-visual-alignment-v3 .headline {
  color: var(--ksc-force-white) !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
  text-shadow: 0 2px 28px rgba(0,0,0,0.45);
}

html body.ksc-public-visual-alignment-v3 h1 {
  font-size: clamp(50px, 7.8vw, 104px) !important;
}

html body.ksc-public-visual-alignment-v3 h2 {
  font-size: clamp(38px, 5.2vw, 72px) !important;
}

html body.ksc-public-visual-alignment-v3 h3 {
  font-size: clamp(24px, 2.9vw, 38px) !important;
}

html body.ksc-public-visual-alignment-v3 a,
html body.ksc-public-visual-alignment-v3 nav a,
html body.ksc-public-visual-alignment-v3 header a {
  color: var(--ksc-force-yellow) !important;
}

html body.ksc-public-visual-alignment-v3 nav a,
html body.ksc-public-visual-alignment-v3 header a {
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

/* cards */
html body.ksc-public-visual-alignment-v3 article,
html body.ksc-public-visual-alignment-v3 .card,
html body.ksc-public-visual-alignment-v3 .panel,
html body.ksc-public-visual-alignment-v3 .box,
html body.ksc-public-visual-alignment-v3 .surface,
html body.ksc-public-visual-alignment-v3 [data-ksc-book-card],
html body.ksc-public-visual-alignment-v3 .ksc-book-card,
html body.ksc-public-visual-alignment-v3 .ksc-durak-card,
html body.ksc-public-visual-alignment-v3 .ksc-public-auth-card,
html body.ksc-public-visual-alignment-v3 .ksc-public-auth-shell {
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52) !important;
}

html body.ksc-public-visual-alignment-v3 [data-ksc-book-card],
html body.ksc-public-visual-alignment-v3 .ksc-book-card,
html body.ksc-public-visual-alignment-v3 .ksc-durak-card,
html body.ksc-public-visual-alignment-v3 article.card,
html body.ksc-public-visual-alignment-v3 .card {
  padding: 24px !important;
}

html body.ksc-public-visual-alignment-v3 [data-ksc-book-card]:hover,
html body.ksc-public-visual-alignment-v3 .ksc-book-card:hover,
html body.ksc-public-visual-alignment-v3 .ksc-durak-card:hover,
html body.ksc-public-visual-alignment-v3 article.card:hover,
html body.ksc-public-visual-alignment-v3 .card:hover {
  border-color: var(--ksc-force-line-strong) !important;
  transform: translateY(-2px);
}

/* buttons */
html body.ksc-public-visual-alignment-v3 button,
html body.ksc-public-visual-alignment-v3 .btn,
html body.ksc-public-visual-alignment-v3 a.btn,
html body.ksc-public-visual-alignment-v3 .button,
html body.ksc-public-visual-alignment-v3 .ksc-public-auth-button,
html body.ksc-public-visual-alignment-v3 [role="button"] {
  background: transparent !important;
  color: var(--ksc-force-yellow) !important;
  border: 1px solid rgba(255,212,0,0.54) !important;
  border-radius: 999px !important;
  min-height: 48px !important;
  padding: 12px 22px !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

html body.ksc-public-visual-alignment-v3 .btn-primary,
html body.ksc-public-visual-alignment-v3 .primary,
html body.ksc-public-visual-alignment-v3 .button-primary,
html body.ksc-public-visual-alignment-v3 .ksc-public-auth-button.primary,
html body.ksc-public-visual-alignment-v3 a.btn-primary,
html body.ksc-public-visual-alignment-v3 button.primary {
  background: var(--ksc-force-yellow) !important;
  color: #000000 !important;
  border-color: var(--ksc-force-yellow) !important;
  box-shadow: 0 16px 44px rgba(255,212,0,0.27) !important;
}

html body.ksc-public-visual-alignment-v3 button:hover,
html body.ksc-public-visual-alignment-v3 .btn:hover,
html body.ksc-public-visual-alignment-v3 a.btn:hover,
html body.ksc-public-visual-alignment-v3 .button:hover,
html body.ksc-public-visual-alignment-v3 .ksc-public-auth-button:hover,
html body.ksc-public-visual-alignment-v3 [role="button"]:hover {
  transform: translateY(-1px);
}

/* badges */
html body.ksc-public-visual-alignment-v3 .badge,
html body.ksc-public-visual-alignment-v3 .pill,
html body.ksc-public-visual-alignment-v3 .tag,
html body.ksc-public-visual-alignment-v3 .chip,
html body.ksc-public-visual-alignment-v3 small.badge {
  background: rgba(255,212,0,0.12) !important;
  color: var(--ksc-force-yellow) !important;
  border: 1px solid rgba(255,212,0,0.44) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  padding: 7px 12px !important;
}

/* forms */
html body.ksc-public-visual-alignment-v3 input,
html body.ksc-public-visual-alignment-v3 select,
html body.ksc-public-visual-alignment-v3 textarea {
  background: #090909 !important;
  color: var(--ksc-force-white) !important;
  border: 1px solid rgba(255,212,0,0.36) !important;
}

/* layout */
html body.ksc-public-visual-alignment-v3 main,
html body.ksc-public-visual-alignment-v3 .container,
html body.ksc-public-visual-alignment-v3 .page-wrap,
html body.ksc-public-visual-alignment-v3 .page-shell,
html body.ksc-public-visual-alignment-v3 .content-wrap {
  width: min(100% - 72px, 1180px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* locked */
html body.ksc-public-visual-alignment-v3 .locked,
html body.ksc-public-visual-alignment-v3 .is-locked,
html body.ksc-public-visual-alignment-v3 [data-locked="true"],
html body.ksc-public-visual-alignment-v3 .soon,
html body.ksc-public-visual-alignment-v3 .passive {
  opacity: 0.92 !important;
  filter: saturate(0.88);
}

/* mobile */
@media (max-width: 768px) {
  html body.ksc-public-visual-alignment-v3 main,
  html body.ksc-public-visual-alignment-v3 .container,
  html body.ksc-public-visual-alignment-v3 .page-wrap,
  html body.ksc-public-visual-alignment-v3 .page-shell,
  html body.ksc-public-visual-alignment-v3 .content-wrap {
    width: min(100% - 24px, 1180px) !important;
  }

  html body.ksc-public-visual-alignment-v3 h1 {
    font-size: clamp(40px, 13vw, 62px) !important;
  }

  html body.ksc-public-visual-alignment-v3 h2 {
    font-size: clamp(32px, 10vw, 48px) !important;
  }

  html body.ksc-public-visual-alignment-v3 .hero,
  html body.ksc-public-visual-alignment-v3 .intro,
  html body.ksc-public-visual-alignment-v3 .book-hero,
  html body.ksc-public-visual-alignment-v3 .auth-hero {
    padding: 26px !important;
  }
}