/* KSC Public Visual Alignment V2 - Mustafa Erciyas style bridge */
:root {
  --ksc-ms-black: #050606;
  --ksc-ms-ink: #0b0c0c;
  --ksc-ms-panel: #12130f;
  --ksc-ms-panel-2: #181914;
  --ksc-ms-grid: rgba(255, 211, 0, 0.045);
  --ksc-ms-line: rgba(255, 211, 0, 0.22);
  --ksc-ms-line-strong: rgba(255, 211, 0, 0.48);
  --ksc-ms-yellow: #ffd300;
  --ksc-ms-yellow-2: #f0bc00;
  --ksc-ms-white: #f6f2df;
  --ksc-ms-muted: #c9c1a9;
  --ksc-ms-faint: #8e876f;
  --ksc-ms-shadow: 0 22px 60px rgba(0, 0, 0, 0.46);
  --ksc-ms-radius: 20px;
}

body.ksc-public-visual-alignment-v2 {
  background:
    linear-gradient(rgba(255,211,0,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,211,0,0.035) 1px, transparent 1px),
    radial-gradient(circle at 20% 0%, rgba(255,211,0,0.13), transparent 34%),
    radial-gradient(circle at 80% 8%, rgba(255,211,0,0.08), transparent 28%),
    #060706 !important;
  background-size: 58px 58px, 58px 58px, auto, auto, auto !important;
  color: var(--ksc-ms-white) !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.005em;
}

body.ksc-public-visual-alignment-v2 * {
  box-sizing: border-box;
}

body.ksc-public-visual-alignment-v2 p,
body.ksc-public-visual-alignment-v2 li,
body.ksc-public-visual-alignment-v2 span,
body.ksc-public-visual-alignment-v2 small,
body.ksc-public-visual-alignment-v2 label {
  color: var(--ksc-ms-muted);
}

body.ksc-public-visual-alignment-v2 h1,
body.ksc-public-visual-alignment-v2 h2,
body.ksc-public-visual-alignment-v2 h3,
body.ksc-public-visual-alignment-v2 h4,
body.ksc-public-visual-alignment-v2 .title,
body.ksc-public-visual-alignment-v2 .headline {
  color: var(--ksc-ms-white) !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

body.ksc-public-visual-alignment-v2 h1 {
  font-size: clamp(46px, 7vw, 92px) !important;
}

body.ksc-public-visual-alignment-v2 h2 {
  font-size: clamp(34px, 4.6vw, 62px) !important;
}

body.ksc-public-visual-alignment-v2 h3 {
  font-size: clamp(22px, 2.5vw, 34px) !important;
}

body.ksc-public-visual-alignment-v2 a {
  color: var(--ksc-ms-yellow);
  text-decoration-color: rgba(255,211,0,0.44);
}

body.ksc-public-visual-alignment-v2 header,
body.ksc-public-visual-alignment-v2 nav {
  background: rgba(0, 0, 0, 0.82) !important;
  border-bottom: 1px solid rgba(255,211,0,0.18) !important;
  backdrop-filter: blur(10px);
}

body.ksc-public-visual-alignment-v2 nav a,
body.ksc-public-visual-alignment-v2 header a {
  color: rgba(246,242,223,0.82) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.ksc-public-visual-alignment-v2 nav a:hover,
body.ksc-public-visual-alignment-v2 header a:hover {
  color: var(--ksc-ms-yellow) !important;
}

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

body.ksc-public-visual-alignment-v2 .hero,
body.ksc-public-visual-alignment-v2 .intro,
body.ksc-public-visual-alignment-v2 .book-hero,
body.ksc-public-visual-alignment-v2 .auth-hero,
body.ksc-public-visual-alignment-v2 article,
body.ksc-public-visual-alignment-v2 .card,
body.ksc-public-visual-alignment-v2 .panel,
body.ksc-public-visual-alignment-v2 .box,
body.ksc-public-visual-alignment-v2 [data-ksc-book-card],
body.ksc-public-visual-alignment-v2 .ksc-book-card,
body.ksc-public-visual-alignment-v2 .ksc-durak-card,
body.ksc-public-visual-alignment-v2 .ksc-public-auth-card,
body.ksc-public-visual-alignment-v2 .ksc-public-auth-shell,
body.ksc-public-visual-alignment-v2 .surface {
  background:
    linear-gradient(rgba(255,211,0,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,211,0,0.026) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(16, 17, 13, 0.90) !important;
  background-size: 44px 44px, 44px 44px, auto, auto !important;
  border: 1px solid var(--ksc-ms-line) !important;
  border-radius: var(--ksc-ms-radius) !important;
  box-shadow: var(--ksc-ms-shadow) !important;
}

body.ksc-public-visual-alignment-v2 .hero,
body.ksc-public-visual-alignment-v2 .intro,
body.ksc-public-visual-alignment-v2 .book-hero,
body.ksc-public-visual-alignment-v2 .auth-hero {
  padding: clamp(32px, 5vw, 64px) !important;
  position: relative;
  overflow: hidden;
}

body.ksc-public-visual-alignment-v2 .hero::after,
body.ksc-public-visual-alignment-v2 .intro::after,
body.ksc-public-visual-alignment-v2 .book-hero::after,
body.ksc-public-visual-alignment-v2 .auth-hero::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: 22px;
  width: 220px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ksc-ms-yellow));
  opacity: 0.70;
  transform: rotate(-4deg);
}

body.ksc-public-visual-alignment-v2 [data-ksc-book-card],
body.ksc-public-visual-alignment-v2 .ksc-book-card,
body.ksc-public-visual-alignment-v2 .ksc-durak-card,
body.ksc-public-visual-alignment-v2 article.card,
body.ksc-public-visual-alignment-v2 .card {
  padding: 22px !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body.ksc-public-visual-alignment-v2 [data-ksc-book-card]:hover,
body.ksc-public-visual-alignment-v2 .ksc-book-card:hover,
body.ksc-public-visual-alignment-v2 .ksc-durak-card:hover,
body.ksc-public-visual-alignment-v2 article.card:hover,
body.ksc-public-visual-alignment-v2 .card:hover {
  transform: translateY(-2px);
  border-color: var(--ksc-ms-line-strong) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.56) !important;
}

body.ksc-public-visual-alignment-v2 .badge,
body.ksc-public-visual-alignment-v2 .pill,
body.ksc-public-visual-alignment-v2 .tag,
body.ksc-public-visual-alignment-v2 .chip,
body.ksc-public-visual-alignment-v2 small.badge {
  background: rgba(255,211,0,0.10) !important;
  color: var(--ksc-ms-yellow) !important;
  border: 1px solid rgba(255,211,0,0.35) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 7px 12px !important;
}

body.ksc-public-visual-alignment-v2 button,
body.ksc-public-visual-alignment-v2 .btn,
body.ksc-public-visual-alignment-v2 a.btn,
body.ksc-public-visual-alignment-v2 .button,
body.ksc-public-visual-alignment-v2 .ksc-public-auth-button,
body.ksc-public-visual-alignment-v2 [role="button"] {
  min-height: 48px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,211,0,0.38) !important;
  padding: 11px 20px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

body.ksc-public-visual-alignment-v2 .btn-primary,
body.ksc-public-visual-alignment-v2 .primary,
body.ksc-public-visual-alignment-v2 .button-primary,
body.ksc-public-visual-alignment-v2 .ksc-public-auth-button.primary,
body.ksc-public-visual-alignment-v2 a.btn-primary,
body.ksc-public-visual-alignment-v2 button.primary {
  background: linear-gradient(180deg, #ffd300 0%, #e0ad00 100%) !important;
  color: #090909 !important;
  border-color: rgba(255,211,0,0.86) !important;
  box-shadow: 0 15px 38px rgba(255,211,0,0.23) !important;
}

body.ksc-public-visual-alignment-v2 .btn-secondary,
body.ksc-public-visual-alignment-v2 .secondary,
body.ksc-public-visual-alignment-v2 .button-secondary,
body.ksc-public-visual-alignment-v2 a.btn-secondary,
body.ksc-public-visual-alignment-v2 button.secondary {
  background: rgba(255,211,0,0.035) !important;
  color: var(--ksc-ms-yellow) !important;
}

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

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

body.ksc-public-visual-alignment-v2 .muted,
body.ksc-public-visual-alignment-v2 .subtle,
body.ksc-public-visual-alignment-v2 .secondary-text {
  color: var(--ksc-ms-faint) !important;
}

body.ksc-public-visual-alignment-v2 input,
body.ksc-public-visual-alignment-v2 select,
body.ksc-public-visual-alignment-v2 textarea {
  background: rgba(0,0,0,0.28) !important;
  color: var(--ksc-ms-white) !important;
  border: 1px solid var(--ksc-ms-line) !important;
  border-radius: 14px !important;
  min-height: 48px !important;
}

body.ksc-public-visual-alignment-v2 input:focus,
body.ksc-public-visual-alignment-v2 select:focus,
body.ksc-public-visual-alignment-v2 textarea:focus,
body.ksc-public-visual-alignment-v2 *:focus-visible {
  outline: 2px solid rgba(255,211,0,0.88) !important;
  outline-offset: 2px !important;
}

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

  body.ksc-public-visual-alignment-v2 h1 {
    font-size: clamp(38px, 12vw, 58px) !important;
    line-height: 1.02 !important;
  }

  body.ksc-public-visual-alignment-v2 h2 {
    font-size: clamp(30px, 9vw, 46px) !important;
  }

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