/* MANROPE self-host (02.08; latin-ext TR diakritik tam) */
@font-face { font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif; src: url("/assets/fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif; src: url("/assets/fonts/manrope-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif; src: url("/assets/fonts/manrope-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --primary: #1f4e79;
  --primary-dark: #10263b;
  --accent: #ff8a3d;
  --navy: #082f49;
  --navy-deep: #061f33;
  --surface: #ffffff;
  --background: #f6f8fa;
  --text: #172033;
  --muted: #5b677a;
  --line: #dbe4ec;
  --success: #15803d;
  --danger: #b91c1c;
  --shadow-sm: 0 8px 24px rgba(7, 89, 133, 0.08);
  --shadow-lg: 0 28px 70px rgba(7, 89, 133, 0.2);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --container: 1180px;
  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--background);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
a {
  font-family: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.02em;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
summary {
  font: inherit;
}

button {
  border: 0;
}

:focus-visible {
  outline: 3px solid rgba(242, 183, 5, 0.7);
  outline-offset: 3px;
}

[id] {
  scroll-margin-top: 136px;
}

.container {
  width: min(calc(100% - 32px), var(--container));
  margin-inline: auto;
}

.section {
  padding: 76px 0;
}

.section-header {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
  content: "";
}

.section-title {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.section-copy {
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid rgba(219, 228, 236, 0.78);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 32px rgba(8, 47, 73, 0.05);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.navbar {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.logo-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(145deg, var(--primary), var(--primary-dark));
  box-shadow: 0 8px 18px rgba(2, 132, 199, 0.25);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.logo-text {
  font-size: 1rem;
  line-height: 1.1;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid rgba(219, 228, 236, 0.9);
  border-radius: 999px;
  color: #3c485a;
  background: rgba(238, 244, 248, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 18px rgba(8, 47, 73, 0.05);
  font-size: 0.9rem;
  font-weight: 750;
}

.nav-links a {
  padding: 8px 13px;
  border-radius: 999px;
  white-space: nowrap;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"],
.nav-links a.is-active {
  color: var(--primary-dark);
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(7, 89, 133, 0.12);
}

.nav-links a:active {
  color: #ffffff;
  background: var(--primary);
  transform: translateY(1px);
}

.header-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
}

.login-link {
  display: none;
  color: var(--primary-dark);
  font-size: 0.92rem;
  font-weight: 800;
  transition: color 180ms ease;
}

.login-link:hover {
  color: var(--primary);
}

.mobile-nav-strip {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border-top: 1px solid rgba(219, 228, 236, 0.65);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-strip::-webkit-scrollbar {
  display: none;
}

.mobile-nav-inner {
  display: flex;
  width: max-content;
  min-width: 100%;
  gap: 7px;
  padding: 8px max(16px, calc((100vw - var(--container)) / 2));
}

.mobile-nav-inner a {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid #d8e5ed;
  border-radius: 999px;
  color: #405064;
  background: rgba(246, 249, 251, 0.94);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.mobile-nav-inner a:hover,
.mobile-nav-inner a:focus-visible,
.mobile-nav-inner a:active {
  border-color: #9ed4ef;
  color: var(--primary-dark);
  background: #eaf7fd;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 19px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.2;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: #ffffff;
  background: var(--primary);
  box-shadow: 0 12px 26px rgba(2, 132, 199, 0.23);
}

.button-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 15px 30px rgba(7, 89, 133, 0.27);
}

.button-secondary {
  border-color: #bdd7e7;
  color: var(--primary-dark);
  background: #ffffff;
}

.button-secondary:hover {
  border-color: var(--primary);
  background: #eff9ff;
}

.button-compact {
  min-height: 42px;
  padding: 10px 15px;
  font-size: 0.88rem;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 68px 0 58px;
  background:
    radial-gradient(circle at 90% 12%, rgba(2, 132, 199, 0.14), transparent 32%),
    radial-gradient(circle at 4% 80%, rgba(242, 183, 5, 0.1), transparent 27%),
    linear-gradient(180deg, #ffffff 0%, var(--background) 100%);
}

.hero::before {
  position: absolute;
  top: 34px;
  right: 7%;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(2, 132, 199, 0.13);
  border-radius: 50%;
  content: "";
}

.hero-grid {
  position: relative;
  display: grid;
  gap: 50px;
  align-items: center;
}

.hero-content {
  max-width: 680px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 7px 12px;
  border: 1px solid #cce6f4;
  border-radius: 999px;
  color: var(--primary-dark);
  background: #eff9ff;
  font-size: 0.82rem;
  font-weight: 800;
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(242, 183, 5, 0.16);
}

.hero h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.35rem, 7vw, 2.875rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.hero h1 span {
  color: var(--primary);
}

.hero-copy {
  max-width: 630px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(1.04rem, 3vw, 1.19rem);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}

.hero-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  color: #465468;
  font-size: 0.91rem;
  font-weight: 500;
}

.hero-note svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--success);
}

.app-visual {
  position: relative;
  width: min(100%, 540px);
  margin-inline: auto;
  perspective: 1300px;
}

.app-visual::before {
  position: absolute;
  inset: 12% 4% -5%;
  border-radius: 38px;
  background: rgba(2, 132, 199, 0.18);
  filter: blur(38px);
  content: "";
}

.app-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid #cddde7;
  border-radius: 26px;
  background: #ffffff;
  box-shadow:
    0 34px 80px rgba(7, 89, 133, 0.2),
    0 8px 24px rgba(7, 89, 133, 0.1);
  transform: rotateY(-4deg) rotateX(1.5deg) rotateZ(0.5deg);
  transform-origin: center;
}

.proof-bar {
  border-block: 1px solid var(--line);
  background: #ffffff;
}

.proof-grid {
  display: grid;
}

.proof-item {
  display: grid;
  justify-items: center;
  padding: 22px 12px;
  text-align: center;
}

.proof-item + .proof-item {
  border-top: 1px solid var(--line);
}

.proof-icon {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  place-items: center;
  border-radius: 12px;
  color: var(--primary-dark);
  background: #eaf7fd;
}

.proof-item:nth-child(2) .proof-icon {
  color: #765a00;
  background: #fff7d6;
}

.proof-item:nth-child(3) .proof-icon {
  color: var(--success);
  background: #eaf8ee;
}

.proof-item strong {
  display: block;
  color: var(--navy);
  font-size: 1.08rem;
  line-height: 1.25;
}

.proof-item span:not(.proof-icon) {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
}

.steps-grid,
.subjects-grid,
.feature-pair {
  display: grid;
  gap: 18px;
}

.step-card,
.subject-card,
.feature-card {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.step-card {
  min-height: 100%;
  padding: 26px;
  border-radius: var(--radius-md);
}

.step-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  place-items: center;
  border-radius: 15px;
  color: var(--primary-dark);
  background: #e9f7ff;
}

.step-card:nth-child(2) .step-icon {
  color: #765a00;
  background: #fff7d6;
}

.step-card:nth-child(3) .step-icon {
  color: var(--success);
  background: #eaf8ee;
}

.step-card h3,
.subject-card h3,
.feature-card h3 {
  margin: 0;
  color: var(--navy);
  line-height: 1.25;
}

.step-card p,
.feature-card p {
  margin: 10px 0 0;
  color: var(--muted);
}

.subjects-section {
  background: #ffffff;
}

.subject-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.subject-card:hover {
  transform: translateY(-3px);
  border-color: #9ed4ef;
  box-shadow: 0 16px 34px rgba(7, 89, 133, 0.12);
}

.subject-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: var(--primary-dark);
  background: #eef8fd;
}

.ai-section {
  position: relative;
  overflow: hidden;
  padding: 82px 0;
  color: #ffffff;
  background:
    radial-gradient(circle at 90% 15%, rgba(2, 132, 199, 0.32), transparent 31%),
    linear-gradient(140deg, var(--navy-deep), var(--navy));
}

.ai-section::after {
  position: absolute;
  right: -100px;
  bottom: -150px;
  width: 350px;
  height: 350px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  content: "";
}

.ai-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 40px;
  align-items: center;
}

.ai-copy {
  max-width: 570px;
}

.ai-copy .eyebrow {
  color: #8dd7ff;
}

.ai-copy h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.1rem, 7vw, 2.875rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.ai-copy > p {
  margin: 18px 0 0;
  color: #c7ddea;
  font-size: 1.06rem;
}

.ai-points {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.ai-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #e8f5fb;
  font-weight: 500;
}

.ai-points svg {
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--accent);
}

.chat-panel {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 17px;
  color: #ffffff;
  font-weight: 800;
}

.ai-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: var(--navy);
  background: var(--accent);
}

.chat-status {
  display: block;
  color: #b8d2df;
  font-size: 0.8rem;
  font-weight: 500;
}

.chat-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: #eef5f8;
}

.chat-bubble {
  max-width: 93%;
  padding: 15px 17px;
  border-radius: 22px;
  font-size: 0.95rem;
  line-height: 1.65;
}

.chat-bubble.user {
  justify-self: end;
  border-bottom-right-radius: 8px;
  color: #ffffff;
  background: #0276b3;
}

.chat-bubble.ai {
  justify-self: start;
  border: 1px solid #d3e1e8;
  border-bottom-left-radius: 8px;
  color: #1f3042;
  background: #ffffff;
}

.chat-bubble strong {
  display: block;
  margin-bottom: 5px;
  color: var(--primary-dark);
}

.feature-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: var(--radius-md);
}

.feature-card::after {
  position: absolute;
  top: -34px;
  right: -34px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.07);
  content: "";
}

.feature-card.accent::after {
  background: rgba(242, 183, 5, 0.13);
}

.feature-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(145deg, var(--primary), var(--primary-dark));
  box-shadow: 0 12px 24px rgba(2, 132, 199, 0.21);
}

.feature-card.accent .feature-icon {
  color: var(--navy);
  background: var(--accent);
  box-shadow: 0 12px 24px rgba(242, 183, 5, 0.22);
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.feature-tags span {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary-dark);
  background: #edf8fd;
  font-size: 0.79rem;
  font-weight: 800;
}

.try-section {
  position: relative;
  overflow: hidden;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 8%, rgba(2, 132, 199, 0.11), transparent 27%),
    radial-gradient(circle at 88% 86%, rgba(242, 183, 5, 0.08), transparent 25%),
    linear-gradient(180deg, #f9fcfe 0%, #edf6fa 100%);
}

.try-section::before {
  position: absolute;
  top: 100px;
  right: -90px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(2, 132, 199, 0.12);
  border-radius: 50%;
  content: "";
}

.demo-heading-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.demo-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #e8d27a;
  border-radius: 999px;
  color: #665000;
  background: #fff7d6;
  box-shadow: 0 6px 16px rgba(118, 90, 0, 0.08);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  line-height: 1;
  white-space: nowrap;
}

.try-grid {
  position: relative;
  display: grid;
  gap: 22px;
}

.try-block {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 27px 25px 25px;
  border: 1px solid #d1e1ea;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow:
    0 22px 52px rgba(7, 89, 133, 0.13),
    0 4px 12px rgba(8, 47, 73, 0.05);
}

.try-block::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), #38bdf8);
  content: "";
}

.try-block:nth-child(2)::before {
  background: linear-gradient(90deg, var(--accent), #f7d65c);
}

.try-block:nth-child(3)::before {
  background: linear-gradient(90deg, var(--success), #6cc987);
}

.try-block-wide {
  grid-column: 1 / -1;
}

.try-block-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.try-icon {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(145deg, var(--primary), var(--primary-dark));
  box-shadow: 0 10px 22px rgba(2, 132, 199, 0.2);
}

.try-block:nth-child(2) .try-icon {
  color: var(--navy);
  background: var(--accent);
  box-shadow: 0 10px 22px rgba(242, 183, 5, 0.2);
}

.try-block:nth-child(3) .try-icon {
  background: linear-gradient(145deg, #1f9a4c, var(--success));
  box-shadow: 0 10px 22px rgba(21, 128, 61, 0.18);
}

.try-block h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.22rem;
  line-height: 1.25;
}

.try-block-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

#ds-alan {
  min-height: 260px;
}

.ds-start {
  display: grid;
  min-height: 210px;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 28px;
  border: 1px dashed #9fcce2;
  border-radius: 17px;
  background: #f5fbfe;
  text-align: center;
}

.ds-start p {
  max-width: 510px;
  margin: 0;
  color: var(--muted);
}

.ds-kart {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
}

.ds-ders {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary-dark);
  background: #eaf7fd;
  font-size: 0.78rem;
  font-weight: 800;
}

.ds-soru {
  margin: 18px 0;
  color: var(--text);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.55;
}

.ds-siklar {
  display: grid;
  gap: 10px;
}

.ds-sik {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: #ffffff;
  cursor: pointer;
  font-weight: 600;
  text-align: left;
}

.ds-sik:hover {
  border-color: var(--primary);
  background: #f3faff;
}

.ds-sik.dogru {
  border-color: #86c99a;
  color: #11632d;
  background: #eaf8ee;
}

.ds-sik.yanlis {
  border-color: #e6a3a3;
  color: #991b1b;
  background: #fff0f0;
}

.ds-aciklama {
  display: none;
  margin-top: 16px;
  padding: 15px;
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  color: #34465a;
  background: #edf8fd;
}

.ds-aciklama.is-visible,
.ds-aciklama.goster {
  display: block;
}

.ds-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.88rem;
}

#da-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#da-soru {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #cddde7;
  border-radius: 12px;
  color: var(--text);
  background: #ffffff;
}

#da-soru::placeholder {
  color: #7a8798;
}

#da-soru:focus {
  border-color: var(--primary);
  outline: 3px solid rgba(2, 132, 199, 0.12);
}

#da-log {
  display: grid;
  min-height: 145px;
  max-height: 320px;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f4f8fa;
}

.da-empty {
  place-self: center;
  margin: 0;
  color: #738194;
  font-size: 0.9rem;
  text-align: center;
}

.da-ben,
.da-ai {
  max-width: 88%;
  padding: 11px 13px;
  border-radius: 15px;
  font-size: 0.92rem;
  line-height: 1.55;
}

.da-ben {
  justify-self: end;
  border-bottom-right-radius: 5px;
  color: #ffffff;
  background: var(--primary);
}

.da-ai {
  justify-self: start;
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  color: var(--text);
  background: #ffffff;
}

.try-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.exam-showcase {
  display: grid;
  gap: 22px;
}

.exam-copy h4 {
  margin: 0;
  color: var(--navy);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.exam-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.exam-badges span {
  padding: 7px 10px;
  border: 1px solid #cce1ec;
  border-radius: 999px;
  color: var(--primary-dark);
  background: #f1f9fd;
  font-size: 0.78rem;
  font-weight: 800;
}

.report-mockup {
  overflow: hidden;
  border: 1px solid #d3e1e8;
  border-radius: 18px;
  background: #f8fbfc;
}

.report-mockup svg {
  width: 100%;
  height: auto;
}

.exam-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.faq-section {
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.faq-layout {
  display: grid;
  gap: 30px;
}

.faq-intro {
  max-width: 470px;
}

.faq-intro .section-title {
  font-size: clamp(2rem, 6vw, 2.65rem);
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--background);
}

.faq-item[open] {
  border-color: #a8d8ef;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  color: var(--navy);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  content: "";
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(225deg);
}

.faq-answer {
  padding: 0 20px 20px;
  color: var(--muted);
}

.faq-answer p {
  margin: 0;
}

.site-footer {
  padding: 48px 0 28px;
  color: #c2d5e1;
  background: var(--navy-deep);
}

.footer-grid {
  display: grid;
  gap: 32px;
}

.footer-brand {
  max-width: 520px;
}

.footer-brand .logo {
  color: #ffffff;
}

.footer-brand p {
  margin: 16px 0 0;
  color: #9fb9c8;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-content: start;
}

.footer-links a {
  color: #d7e7ef;
  font-size: 0.92rem;
  font-weight: 700;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-bottom {
  display: grid;
  gap: 8px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  color: #849fac;
  font-size: 0.82rem;
}

.responsibility-note {
  max-width: 850px;
  margin: 0;
  color: #9fb9c8;
}

@media (min-width: 560px) {
  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .subjects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .proof-item + .proof-item {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  #da-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ds-siklar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .section {
    padding: 96px 0;
  }

  .steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feature-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .try-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exam-showcase {
    grid-template-columns: minmax(230px, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
  }

  .footer-grid {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }

  .footer-links {
    justify-content: flex-end;
  }
}

@media (min-width: 940px) {
  [id] {
    scroll-margin-top: 94px;
  }

  .nav-links {
    display: flex;
  }

  .login-link {
    display: inline-flex;
  }

  .mobile-nav-strip {
    display: none;
  }
}

@media (min-width: 980px) {
  .hero {
    padding: 96px 0 82px;
  }

  .hero-grid,
  .ai-grid,
  .faq-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .hero-content {
    grid-column: span 7;
  }

  .app-visual {
    grid-column: span 5;
  }

  .subjects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-copy {
    grid-column: span 6;
  }

  .chat-panel {
    grid-column: 8 / span 5;
  }

  .faq-intro {
    grid-column: span 5;
  }

  .faq-list {
    grid-column: 6 / span 7;
  }
}

@media (max-width: 719px) {
  .app-frame {
    transform: none;
  }
}

@media (max-width: 520px) {
  .logo-text {
    max-width: 112px;
    font-size: 0.9rem;
  }

  .navbar {
    gap: 10px;
  }

  .header-actions {
    gap: 8px;
  }

  .header-actions .button {
    min-height: 40px;
    padding: 9px 13px;
    font-size: 0.84rem;
  }

  .try-block {
    padding: 24px 20px 20px;
  }

  .demo-heading-line {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ═══ HEADER GUVENCE BLOGU (02.08, kurucu 17080: "komple degissin, sen yap") ═══
   Tur4 CSS'i header siniflarini eksik birakmisti; bu blok en sonda oldugu icin kazanir. */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(7,89,133,.10) }
.site-header .navbar { display: flex; align-items: center; gap: 22px; max-width: 1160px; margin: 0 auto; padding: 12px 22px }
.site-header .logo { display: flex; align-items: center; gap: 10px; text-decoration: none }
.site-header .logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #10263b; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .3px; box-shadow: inset 0 -4px 0 #ff8a3d }
.site-header .logo-text { font-weight: 800; font-size: 16.5px; color: #0c2d3f; letter-spacing: -.2px }
.site-header .nav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; padding: 5px; background: #eef4f8; border-radius: 999px }
.site-header .nav-links a { padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #33566b; text-decoration: none; transition: background .15s, color .15s }
.site-header .nav-links a:hover { background: #fff; color: #10263b; box-shadow: 0 2px 8px rgba(7,89,133,.10) }
.site-header .header-actions { display: flex; align-items: center; gap: 14px }
.site-header .login-link { font-size: 14px; font-weight: 700; color: #33566b; text-decoration: none }
.site-header .login-link:hover { color: #10263b }
.site-header .header-actions .button { background: #1f4e79; color: #fff; font-weight: 800; font-size: 13.5px; padding: 10px 20px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 16px rgba(2,132,199,.28) }
.site-header .header-actions .button:hover { background: #10263b }
.mobile-nav-strip { display: none }
@media (max-width: 899px) {
  .site-header .nav-links { display: none }
  .site-header .navbar { padding: 10px 16px }
  .site-header .logo-text { font-size: 15px }
  .mobile-nav-strip { display: block; border-top: 1px solid rgba(7,89,133,.08); background: rgba(255,255,255,.95) }
  .mobile-nav-inner { display: flex; gap: 6px; overflow-x: auto; padding: 8px 14px; -webkit-overflow-scrolling: touch }
  .mobile-nav-inner a { flex: none; padding: 7px 14px; border-radius: 999px; background: #eef4f8; font-size: 12.5px; font-weight: 700; color: #33566b; text-decoration: none; white-space: nowrap }
}

/* 17184: destek balonu mobilde yalniz ikon (standalone landing k26.css kullanir) */
@media (max-width: 680px) {
  #dw-ac .dw-yazi { display: none !important }
  #dw-ac { width: 54px; height: 54px; justify-content: center; align-items: center; gap: 0 !important; padding: 0 !important;
           border-radius: 50% !important; right: 12px; bottom: 12px; font-size: 22px; line-height: 1 }
  #dw-ac .dw-ikon { display: block; line-height: 1 }
}

/* ===== 17222: OS semasi + Kimi-3 kimligi (hero) ===== */
.k26-hero{background:#f6f8fb;padding:26px 0 34px}
.k26-hero-ic{max-width:1160px;margin:0 auto;padding:0 20px}
.k26-h1{margin:0;max-width:400px;color:#16222e;font-size:clamp(38px,11.2vw,52px);font-weight:900;line-height:.95;letter-spacing:-1.8px;text-wrap:balance}
.kh-ust{display:block;color:#10263b;font-size:.52em;font-weight:750;line-height:1.22;letter-spacing:-.3px;margin-bottom:10px}
.kh-kalin,.kh-satir{display:block}
.kh-kalin{font-weight:900;letter-spacing:-.02em}
.kh-vurgu{display:inline-block;padding:3px 12px 6px;color:#16222e;background:#ff8a3d;border-radius:6px;transform:rotate(-1deg)}
.kh-alt{display:block;margin-top:10px;color:#1f4e79;font-size:.82em;font-weight:900;white-space:nowrap}
@keyframes k26yanip{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.45)}50%{opacity:.45;box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.k26-ozellik{list-style:none;margin:18px 0 20px;padding:0;display:grid;gap:9px;max-width:430px}
.k26-ozellik li{position:relative;padding-left:28px;color:#10263b;font-size:15.5px;font-weight:800;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k26-ozellik li::before{content:"✓";position:absolute;left:0;top:0;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#10263b;color:#fff;font-size:11px;font-weight:900}
.k26-guven{margin-top:26px;border-top:1px solid #dbe3ec;padding-top:16px}
.kg-baslik{font-size:11.5px;letter-spacing:.06em;color:#5c6b7a;font-weight:800;text-align:center;margin-bottom:12px}
.kg-serit{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.kg-ic{display:flex;gap:48px;width:max-content;animation:k26kay 26s linear infinite;align-items:center}
.kg-ic span{font-family:"Trebuchet MS","Segoe UI",sans-serif;font-weight:700;font-size:18px;color:#1f4e79;opacity:.75;white-space:nowrap}
@keyframes k26kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.kg-ic{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.kc-isik{animation:none}}
@media (max-width:680px){
  .k26-h1{font-size:clamp(32px,9.6vw,44px)}
  .kh-alt{font-size:.74em}
  .k26-sinav b{font-size:12.5px}
  .kk-kutular b{font-size:23px}
}

/* 17222: header (OS gnav semasi + kimi kimligi) */
.k26-nav{width:100%;background:#fff;border-top:4px solid #ff8a3d;border-bottom:1px solid rgba(16,38,59,.12);position:sticky;top:0;z-index:50}
.k26-nav-ic{max-width:1160px;min-height:64px;margin:0 auto;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.k26-logo{min-width:0;display:flex;align-items:center;gap:9px;color:#10263b;text-decoration:none}
.k26-mono{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:13px;background:#10263b;color:#fff;font-size:14px;font-weight:900;letter-spacing:-.5px}
.k26-mono i{position:absolute;right:-5px;bottom:-5px;width:18px;height:18px;border:4px solid #ff8a3d;border-radius:50%}
.k26-marka{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
.k26-marka strong{font-family:"Trebuchet MS","Segoe UI",sans-serif;font-size:15px;font-weight:850;letter-spacing:-.3px}
.k26-marka span{margin-top:4px;color:#5c6b7a;font-size:10px;font-weight:800;letter-spacing:1.7px}
.k26-menu{display:flex;align-items:center;justify-content:flex-end;gap:2px;white-space:nowrap}
.k26-menu a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 11px;color:#1f4e79;font-size:13.5px;font-weight:700;text-decoration:none;border-radius:10px}
.k26-menu a:hover{background:#eaf0f7}
.k26-menu .k26-cta{padding:0 16px;background:#ff8a3d;color:#16222e;font-weight:850;border-radius:11px;box-shadow:0 3px 0 #d96c22;margin-left:5px}
.k26-menu .k26-cta:hover{background:#ffa05e}
@media(max-width:400px){.k26-menu a{padding:0 8px;font-size:12.5px}.k26-menu .k26-cta{padding:0 13px}}

/* ===== HEADER MOBIL KURGUSU (kurucu 17225: yazi boyutlari buyuk, kenarlar kisik) ===== */
@media (max-width:860px) {
  .gnav-in, .k26-nav-ic { padding:7px 16px; min-height:58px; gap:6px }
  .gnav-mono, .k26-mono { width:36px; height:36px; flex:0 0 36px; border-radius:11px; font-size:14px }
  .gnav-mono i, .k26-mono i { width:14px; height:14px; border-width:3px; right:-4px; bottom:-4px }
  .gnav-marka strong, .k26-marka strong { font-size:13.5px; letter-spacing:-.3px }
  .gnav-marka span, .k26-marka span { font-size:8.5px; letter-spacing:1.3px; margin-top:3px }
  .gnav-menu, .k26-menu { gap:0 }
  .gnav-menu a, .k26-menu a { font-size:12.5px; padding:0 8px; min-height:40px; border-radius:9px }
  .gnav-menu .gnav-cta, .k26-menu .k26-cta { padding:0 13px; font-size:12.5px; margin-left:4px; border-radius:10px }
}
@media (max-width:600px) {
  /* ucuncu link "Basla" butonunu kenara yapistiriyordu: en az onemli baglanti mobilde gizlenir (menude ve footer'da var) */
  .gnav-menu a.gnav-ikincil, .k26-menu a.kn-ikincil { display:none }
  .gnav-in, .k26-nav-ic { padding:7px 14px }
  .gnav-menu a, .k26-menu a { font-size:12px; padding:0 7px }
  .gnav-menu .gnav-cta, .k26-menu .k26-cta { padding:0 12px }
}
@media (max-width:380px) {
  .gnav-marka span, .k26-marka span { display:none }
  .gnav-marka strong, .k26-marka strong { font-size:13px }
}

/* 17225 tek tasarim dili: yapi ortak, renk site-ozel */
:root { --os-koyu:#10263b; --os-vurgu:#ff8a3d; --os-line:#dbe4ec; --os-muted:#5b677a; --os-text:#172033 }

/* ===== HERO BILESENLERI v3 (kurucu 17225: sayac/sinav butonlari/CTA/kronometre yeniden)
   Tek tasarim dili: renk yalnizca degiskenden gelir, iki site ayni yapiyi paylasir.
   MOBIL VE MASAUSTU AYRI KURGU: mobil tek sutun akis, masaustu iki sutun. ===== */

/* --- hero iskeleti: masaustunde iki sutun, sag sutun aksiyon paneli --- */
.os-hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:44px; align-items:start }
.os-hero-aksiyon { display:flex; flex-direction:column; gap:14px; min-width:0 }

/* --- 1. CANLI SAYAC: koyu zemin, nabiz, vurgulu sayi (eski soluk beyaz pill degil) --- */
.os-canli-rozet {
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  background:var(--os-koyu); color:#fff; border-radius:999px;
  padding:7px 15px 7px 9px; font-size:13.5px; font-weight:600; letter-spacing:.1px;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.55); white-space:nowrap; max-width:100%;
}
.os-canli-etiket {
  display:inline-flex; align-items:center; gap:6px; flex:none;
  background:rgba(255,255,255,.14); border-radius:999px; padding:3px 9px 3px 7px;
  font-size:10.5px; font-weight:800; letter-spacing:1.2px;
}
.os-canli-isik { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:os-nabiz 1.9s infinite }
@keyframes os-nabiz { 0%{box-shadow:0 0 0 0 rgba(74,222,128,.65)} 70%{box-shadow:0 0 0 7px rgba(74,222,128,0)} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0)} }
.os-canli-rozet b { color:var(--os-vurgu); font-weight:800; font-variant-numeric:tabular-nums }

/* --- 2. SINAV BUTONLARI: masaustu 3 kart / mobil tam genislik satir, sarkma yok --- */
.os-sinav-butonlari { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.os-sinav-btn {
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0;
  background:#fff; border:1px solid var(--os-line); border-radius:13px;
  padding:13px 14px 13px 17px; text-decoration:none; color:var(--os-text); overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.os-sinav-btn::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--os-vurgu); transition:width .16s ease }
.os-sinav-btn b { font-size:14.5px; font-weight:800; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.os-sinav-btn span { font-size:12.5px; font-weight:700; color:var(--os-muted); font-variant-numeric:tabular-nums }
.os-sinav-btn:hover { transform:translateY(-2px); border-color:var(--os-koyu); box-shadow:0 10px 24px -16px rgba(16,35,28,.55) }
.os-sinav-btn:hover::before { width:6px }

/* --- 3. TUM SINAVLARI GOR: ikincil hiyerarsi, ince ve olculu (dev turuncu blok degil) --- */
.btn.os-btn-tumu {
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  background:#fff; color:var(--os-koyu); border:1.5px solid var(--os-koyu);
  border-radius:13px; padding:13px 18px; min-height:50px;
  font-size:14px; font-weight:800; letter-spacing:.4px; box-shadow:none;
  transition:background .16s ease, color .16s ease;
}
.btn.os-btn-tumu::after { content:"→"; font-size:16px; transition:transform .16s ease }
.btn.os-btn-tumu:hover { background:var(--os-koyu); color:#fff }
.btn.os-btn-tumu:hover::after { transform:translateX(3px) }

/* --- 4. KRONOMETRE: dijital saat kurgusu, kutucuk cercevesi yok, ayirici cizgi var --- */
.os-kronometre { background:var(--os-koyu); border-radius:15px; padding:13px 8px 12px; color:#fff; text-align:center }
.os-kronometre-baslik {
  font-size:10.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin-bottom:9px;
}
.os-kronometre-satir { display:grid; grid-template-columns:repeat(4,1fr) }
.os-kron-hane { position:relative; padding:0 4px }
.os-kron-hane + .os-kron-hane::before { content:""; position:absolute; left:0; top:14%; bottom:26%; width:1px; background:rgba(255,255,255,.16) }
.os-kron-hane b {
  display:block; font-size:30px; font-weight:800; line-height:1.05; color:var(--os-vurgu);
  font-variant-numeric:tabular-nums; letter-spacing:-.5px;
}
.os-kron-hane span { display:block; font-size:10.5px; font-weight:700; letter-spacing:.5px; color:rgba(255,255,255,.6); margin-top:3px }

/* ================= MOBIL: masaustunun kucultulmusu degil, kendi kurgusu ================= */
@media (max-width:860px) {
  .os-hero-grid { grid-template-columns:1fr; gap:20px }
  .os-hero-aksiyon { gap:11px }

  .os-canli-rozet { width:100%; justify-content:flex-start; font-size:12.5px; padding:6px 12px 6px 7px; border-radius:12px }
  .os-canli-etiket { font-size:9.5px; letter-spacing:1px; padding:3px 7px 3px 6px }

  /* mobilde 3 kart yan yana sikisip yaziyi ikinci satira dusuruyordu -> satir kurgusu */
  .os-sinav-butonlari { grid-template-columns:1fr; gap:8px }
  .os-sinav-btn { flex-direction:row; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px 12px 16px; min-height:52px; border-radius:12px }
  .os-sinav-btn b { font-size:15px }
  .os-sinav-btn span { font-size:12.5px; flex:none }
  .os-sinav-btn::after { content:"›"; font-size:19px; color:var(--os-muted); line-height:1; margin-left:2px; flex:none }

  .btn.os-btn-tumu { min-height:48px; font-size:13.5px; border-radius:12px }

  .os-kronometre { padding:11px 4px 10px; border-radius:13px }
  .os-kronometre-baslik { font-size:9.5px; letter-spacing:1.2px; margin-bottom:7px }
  .os-kron-hane b { font-size:26px }
  .os-kron-hane span { font-size:9.5px }
}
@media (max-width:380px) {
  .os-kron-hane b { font-size:23px }
  .os-sinav-btn b { font-size:14px }
}


/* ===== OS bilesenleri (17225) — renkler os-* degiskenlerinden ===== */
.wrap {
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}
.os-btn-yellow {
  color: var(--os-koyu) !important;
  background: var(--os-sari);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.13);
}
.os-btn-yellow:hover {
  background: #ffca25;
}
.os-btn-large {
  min-height: 54px;
  padding: 15px 25px;
  font-size: 15px;
}
.os-kicker {
  color: #806000;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.os-section {
  padding: 104px 0;
}
.os-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr);
  gap: 70px;
  align-items: end;
  margin-bottom: 35px;
}
.os-kicker {
  display: block;
  margin-bottom: 12px;
}
.os-faq h2 {
  margin-bottom: 0;
  color: var(--os-yesil);
  font-size: clamp(39px, 4.5vw, 57px);
}
.os-section-header > p {
  margin-bottom: 5px;
  color: var(--os-gri);
  font-size: 14px;
}
.os-process .os-kicker {
  color: var(--os-sari);
}
.os-faq-grid {
  display: grid;
  grid-template-columns: 0.65fr 1fr;
  gap: 90px;
  align-items: start;
}
.os-faq header {
  position: sticky;
  top: 30px;
}
.os-faq h2 {
  margin-bottom: 19px;
}
.os-faq header p {
  color: var(--os-gri);
  font-size: 14px;
}
.os-faq-list {
  border-top: 1px solid var(--os-cizgi);
}
.os-faq-list details {
  border-bottom: 1px solid var(--os-cizgi);
}
.os-faq-list summary {
  position: relative;
  padding: 23px 48px 23px 0;
  color: var(--os-yesil);
  cursor: pointer;
  font-family: var(--os-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
}
.os-faq-list summary::-webkit-details-marker {
  display: none;
}
.os-faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  color: var(--os-yesil);
  background: var(--os-acik);
  content: "+";
  font-family: var(--os-sans);
  font-size: 19px;
  transform: translateY(-50%);
}
.os-faq-list details[open] summary::after {
  content: "−";
}
.os-faq-list details div {
  padding: 0 48px 22px 0;
}
.os-faq-list p {
  margin-bottom: 0;
  color: var(--os-gri);
  font-size: 14px;
}
.os-final {
  padding: 0 0 80px;
}
.os-final-panel {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 65px;
  align-items: center;
  padding: 54px 58px;
  color: var(--os-beyaz);
  background:
    radial-gradient(circle at 92% 15%, rgba(242, 183, 5, 0.2), transparent 24%),
    var(--os-yesil);
}
.os-final-panel > div:first-child > span {
  display: block;
  margin-bottom: 11px;
  color: var(--os-sari);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
}
.os-final h2 {
  max-width: 720px;
  margin-bottom: 14px;
  color: var(--os-beyaz);
  font-size: clamp(35px, 4.4vw, 53px);
}
.os-final p {
  margin-bottom: 0;
  color: #c4d5ce;
}
.os-final-actions {
  display: flex;
  flex-direction: column;
  gap: 13px;
  text-align: center;
}
.os-final-actions small {
  color: #c4d5ce;
  font-size: 11px;
  line-height: 1.5;
}
  .os-faq-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .os-faq header {
    position: static;
  }
  .os-final-panel {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .os-final-actions {
    width: 100%;
    max-width: 360px;
    align-items: stretch;
  }
  .os-faq-grid {
    gap: 36px;
  }
  .os-faq-list summary {
    padding-right: 42px;
  }
  .os-faq-list details div {
    padding-right: 0;
  }
  .os-final {
    padding-bottom: 48px;
  }
  .os-final-panel {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 38px 24px;
  }
  .os-final-actions {
    width: 100%;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
  }
  .os-final-actions > a {
    width: 100%;
  }
.os-moduller-cta.os-btn-yellow {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
}
.os-guven-slider { margin-top:34px; border-top:1px solid rgba(13,59,46,.12); padding-top:18px }
.os-guven-baslik { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#5b6b63; font-weight:800; margin-bottom:12px; text-align:center }
.os-guven-serit { overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.os-guven-ic { display:flex; gap:54px; width:max-content; animation:os-kayan 26s linear infinite; align-items:center }
.os-guven-logo { font-family:var(--font-display); font-weight:700; font-size:19px; color:#22423a; opacity:.75; letter-spacing:.02em; white-space:nowrap }
  .os-section { padding: 34px 0 }
  .os-guven-slider { margin-top: 20px; padding-top: 12px }
  .os-final { padding: 30px 0 }
#dene { padding-bottom: 18px }
.os-faq { padding-top: 26px }
.os-ozellik-liste { list-style: none; margin: 20px 0 22px; padding: 0; display: grid; gap: 9px; max-width: 430px }
.os-ozellik-liste li { position: relative; padding-left: 26px; color: var(--os-koyu); font-size: 15.5px; font-weight: 850; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.os-ozellik-liste li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #eaf1f8; color: var(--os-koyu); font-size: 11px; font-weight: 900 }
.os-ozellik-liste li b { color: var(--os-koyu); font-weight: 850 }
.dene-wrap { max-width: 640px }
.dene-rozetler { display: flex; align-items: center; gap: 9px; margin-bottom: 12px }
.dene-canli { display: inline-flex; align-items: center; gap: 6px; background: #eaf1f8; color: var(--os-koyu); font-size: 11px; font-weight: 850; letter-spacing: .08em; padding: 5px 11px; border-radius: 99px }
.dene-canli i { width: 7px; height: 7px; border-radius: 99px; background: #16a34a; animation: os-yanip 1.6s ease-in-out infinite }
.dene-not2 { color: #557068; font-size: 12.5px }
.dene-baslik { font-size: clamp(24px, 6.4vw, 30px); line-height: 1.12; letter-spacing: -.7px; margin-bottom: 6px }
.dene-baslik span { color: #1c6a53 }
.dene-alt { color: #557068; font-size: 15px; line-height: 1.55; margin-bottom: 16px }
.dene-kutu { border: 1px solid #e3e8e5; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(13,59,46,.07); background: #fff }
.dene-sekmeler { display: grid; grid-template-columns: 1fr 1fr; background: #f4f7f5 }
.dene-sekme { border: 0; background: transparent; padding: 15px 10px; font-size: 14px; font-weight: 700; color: #557068; cursor: pointer; min-height: 50px; font-family: inherit }
.dene-sekme.on { background: #fff; color: var(--os-koyu); font-weight: 850; border-bottom: 3px solid var(--os-vurgu) }
.dene-govde { padding: 18px }
.dene-abone { display: flex; align-items: center; justify-content: center; min-height: 54px; max-width: 640px; margin-top: 16px; background: var(--os-vurgu); color: #10231c; font-weight: 850; border: 1px solid #edc33b; border-radius: 12px; box-shadow: 0 3px 0 #d7aa18 }
.dene-altnot { text-align: center; color: #557068; font-size: 12.5px; margin-top: 10px }
#dene .ds-sik { min-height: 48px }
  #dene .dene-govde { padding: 14px }
  #dene .ds-kart { border: 0; padding: 0 }
  #dene .ds-soru { font-size: 15px; line-height: 1.45 }
  #dene .ds-sik { min-height: 48px; height: auto; font-size: 14px; line-height: 1.35; padding: 11px 12px }
  #dene .ds-alt { flex-wrap: wrap; row-gap: 8px }
@media (max-width: 900px) {

  .os-hero-panel {
    width: 100%;
    min-width: 0;
  }

  .os-process-grid,
  .os-faq-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .os-faq header {
    position: static;
  }

  .os-final-panel {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .os-final-actions {
    width: 100%;
    max-width: 360px;
    align-items: stretch;
  }
}
@media (max-width: 700px) {
  .os-container {
    width: min(100% - 32px, var(--os-genislik));
  }


  .os-hero-panel {
    width: 100%;
    min-width: 0;
    padding: 28px 22px;
  }

  .os-exam-grid,
  .os-exams-grid,
  .os-exam-cards,
  .os-sinav-grid {
    grid-template-columns: 1fr;
  }

  .os-steps li {
    grid-template-columns: 46px 1fr;
    gap: 15px;
  }

  .os-faq-grid {
    gap: 36px;
  }

  .os-faq-list summary {
    padding-right: 42px;
  }

  .os-faq-list details div {
    padding-right: 0;
  }

  .os-final {
    padding-bottom: 48px;
  }

  .os-final-panel {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 38px 24px;
  }

  .os-final-actions {
    width: 100%;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
  }

  .os-final-actions > a {
    width: 100%;
  }
}
/* 17225: port artigi kaldirildi (K26 h1 olcegini eziyordu) */

/* 17147: mobil sadelestirme — zemin duz, bosluklar siki, nav tasmasi fix */
@media (max-width: 680px) {
  body { background: #ffffff !important }
  .os-hero { padding: 18px 0 26px; background: #ffffff !important }
  .os-hero::before, .os-hero::after { display: none !important }
  .os-section { padding: 34px 0 }
  .section { padding: 34px 0 }
  .os-guven-slider { margin-top: 20px; padding-top: 12px }
  .os-neden { margin-bottom: 10px; font-size: 15.5px }
  .os-btn-kanit { margin-bottom: 12px }
  .os-final { padding: 30px 0 }
  h2 { font-size: 24px }
  .nav-in { flex-wrap: nowrap; gap: 6px; padding: 8px 0; overflow: hidden }
  .nav-in .btn, .nav-links .btn { padding: 10px 12px !important; font-size: 13.5px; white-space: nowrap }
  .nav-logo { font-size: 16px; flex: 1; min-width: 0 }
  .nav-logo span { overflow: hidden; text-overflow: ellipsis }
}
@media (max-width: 360px) { .os-canli-rozet { font-size: 12px } .os-canli-etiket { padding: 4px 7px } }
/* 17173: demo bolumu ile SSS arasi bosluk azaltildi (buton kaldirilinca fazla nefes kalmisti) */
#dene { padding-bottom: 18px }
.os-faq { padding-top: 26px }
@media (max-width: 680px) { #dene { padding-bottom: 12px } .os-faq { padding-top: 20px } }

/* 17175: hero ozellik listesi + sinav butonlari + tumu butonu */
.os-ozellik-liste { list-style: none; margin: 20px 0 22px; padding: 0; display: grid; gap: 9px; max-width: 430px }
.os-ozellik-liste li { position: relative; padding-left: 26px; color: var(--os-koyu); font-size: 15.5px; font-weight: 850; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.os-ozellik-liste li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #eaf1f8; color: var(--os-koyu); font-size: 11px; font-weight: 900 }
.os-ozellik-liste li b { color: var(--os-koyu); font-weight: 850 }
@media (max-width: 400px) { .os-sinav-btn b { font-size: 13px } .os-sinav-btn span { font-size: 11px } }

/* 17175: canli demo v2 (kurucu secimi: Claude varyanti) — tek kart + sekme */
.dene-wrap { max-width: 640px }
.dene-rozetler { display: flex; align-items: center; gap: 9px; margin-bottom: 12px }
.dene-canli { display: inline-flex; align-items: center; gap: 6px; background: #eaf1f8; color: var(--os-koyu); font-size: 11px; font-weight: 850; letter-spacing: .08em; padding: 5px 11px; border-radius: 99px }
.dene-canli i { width: 7px; height: 7px; border-radius: 99px; background: #16a34a; animation: os-yanip 1.6s ease-in-out infinite }
.dene-not2 { color: #557068; font-size: 12.5px }
.dene-baslik { font-size: clamp(24px, 6.4vw, 30px); line-height: 1.12; letter-spacing: -.7px; margin-bottom: 6px }
.dene-baslik span { color: #1c6a53 }
.dene-alt { color: #557068; font-size: 15px; line-height: 1.55; margin-bottom: 16px }
.dene-kutu { border: 1px solid #e3e8e5; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(13,59,46,.07); background: #fff }
.dene-sekmeler { display: grid; grid-template-columns: 1fr 1fr; background: #f4f7f5 }
.dene-sekme { border: 0; background: transparent; padding: 15px 10px; font-size: 14px; font-weight: 700; color: #557068; cursor: pointer; min-height: 50px; font-family: inherit }
.dene-sekme.on { background: #fff; color: var(--os-koyu); font-weight: 850; border-bottom: 3px solid var(--os-vurgu) }
.dene-govde { padding: 18px }
.dene-abone { display: flex; align-items: center; justify-content: center; min-height: 54px; max-width: 640px; margin-top: 16px; background: var(--os-vurgu); color: #10231c; font-weight: 850; border: 1px solid #edc33b; border-radius: 12px; box-shadow: 0 3px 0 #d7aa18 }
.dene-altnot { text-align: center; color: #557068; font-size: 12.5px; margin-top: 10px }
#dene .ds-sik { min-height: 48px }

/* 17177: demo mobil sadelestirme + destek balonu icerigi kapatmasin */
@media (max-width: 680px) {
  #dene .dene-govde { padding: 14px }
  #dene .ds-kart { border: 0; padding: 0 }
  #dene .ds-soru { font-size: 15px; line-height: 1.45 }
  #dene .ds-sik { min-height: 48px; height: auto; font-size: 14px; line-height: 1.35; padding: 11px 12px }
  #dene .ds-alt { flex-wrap: wrap; row-gap: 8px }
  /* destek balonu: mobilde yalniz ikon (yazi gizli) -> soru metnini ortmez */
  #dw-ac .dw-yazi { display: none !important }
  #dw-ac { width: 54px; height: 54px; justify-content: center; align-items: center; gap: 0 !important; padding: 0 !important;
           border-radius: 50% !important; right: 12px; bottom: 12px; font-size: 22px; line-height: 1 }
  #dw-ac .dw-ikon { display: block; line-height: 1 }
}

/* ===== HEADER MOBIL KURGUSU (kurucu 17225: yazi boyutlari buyuk, kenarlar kisik) ===== */
@media (max-width:860px) {
  .gnav-in, .k26-nav-ic { padding:7px 16px; min-height:58px; gap:6px }
  .gnav-mono, .k26-mono { width:36px; height:36px; flex:0 0 36px; border-radius:11px; font-size:14px }
  .gnav-mono i, .k26-mono i { width:14px; height:14px; border-width:3px; right:-4px; bottom:-4px }
  .gnav-marka strong, .k26-marka strong { font-size:13.5px; letter-spacing:-.3px }
  .gnav-marka span, .k26-marka span { font-size:8.5px; letter-spacing:1.3px; margin-top:3px }
  .gnav-menu, .k26-menu { gap:0 }
  .gnav-menu a, .k26-menu a { font-size:12.5px; padding:0 8px; min-height:40px; border-radius:9px }
  .gnav-menu .gnav-cta, .k26-menu .k26-cta { padding:0 13px; font-size:12.5px; margin-left:4px; border-radius:10px }
}
@media (max-width:600px) {
  /* ucuncu link "Basla" butonunu kenara yapistiriyordu: en az onemli baglanti mobilde gizlenir (menude ve footer'da var) */
  .gnav-menu a.gnav-ikincil, .k26-menu a.kn-ikincil { display:none }
  .gnav-in, .k26-nav-ic { padding:7px 14px }
  .gnav-menu a, .k26-menu a { font-size:12px; padding:0 7px }
  .gnav-menu .gnav-cta, .k26-menu .k26-cta { padding:0 12px }
}
@media (max-width:380px) {
  .gnav-marka span, .k26-marka span { display:none }
  .gnav-marka strong, .k26-marka strong { font-size:13px }
}

/* 17225 duzeltme: mobilde sinav adi esner, soru sayisi oka yaslanir */
@media (max-width:860px){
  .os-sinav-btn b { flex:1 1 auto; min-width:0 }
  .os-sinav-btn span { margin-left:auto }
  .k26-ozellik { margin-bottom:2px }
}


/* 17225: hero ic bosluklar iki sitede esit */
.os-hero-copy .os-canli-rozet{margin-top:14px}
.k26-ozellik{margin-top:16px}
@media (max-width:860px){ .os-hero-grid{gap:18px} }

/* 17225 masaustu tipografi: H1 dar sariyordu, vurgu blogu ikiye bolunuyordu */
@media (min-width:861px){
  .k26-h1{max-width:none;font-size:clamp(40px,3.4vw,50px);letter-spacing:-1.5px}
  .kh-vurgu{white-space:nowrap}
  .os-hero-grid{gap:52px;align-items:center}
}


/* kanit seridi (17225, OS ile ayni yapi - K26 renkleri) */
.kanit{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  padding:9px 18px;background:#eef4fa;border-bottom:1px solid #d7e3ef;
  font-size:13.5px;color:#46586d;text-decoration:none;line-height:1.35;text-align:center}
.kanit:hover{background:#e5eef8;text-decoration:none}
.kanit b{color:var(--os-koyu);font-weight:700}
.kanit-ok{color:#1f4e79;font-weight:700;white-space:nowrap}
@media (max-width:640px){ .kanit{gap:14px;font-size:12.5px;padding:8px 14px} .kanit-son{display:none} }

/* ================= 17230 LANDING REVİZYONU =================
   Kurucu: tek font ailesi, tıklanan her şey belirgin buton, okunur renk, anlamlı boşluk.
   Font ailesi = header markasının fontu (Trebuchet MS ailesi). Times New Roman fallback'i
   tanımsız elemanlarda ortaya çıkıyordu, bu blok tüm landing'i tek aileye kilitler. */
.os-home, .os-home *, main, main *, .site-footer, .site-footer * {
  font-family:"Trebuchet MS","Segoe UI",Tahoma,Verdana,sans-serif !important;
}

/* --- 1. CANLI SAYAÇ: daha büyük, daha okunur --- */
.os-canli-rozet{ font-size:15.5px; padding:9px 18px 9px 10px; gap:11px; font-weight:700 }
.os-canli-etiket{ font-size:11.5px; letter-spacing:1.3px; padding:5px 11px 5px 9px }
.os-canli-isik{ width:9px; height:9px }
.os-canli-rozet b{ font-size:17px }

/* --- 2. KANIT ŞERİDİ: okunur ve "nasıl ölçtük" gerçek buton --- */
.kanit{ background:#eaf1f9; color:#26374b; font-size:14.5px; font-weight:600; padding:11px 18px; gap:18px; border-bottom:1px solid #cfdcea }
.kanit b{ color:var(--os-koyu); font-weight:800 }
.kanit-ok{ display:inline-flex; align-items:center; gap:6px; background:var(--os-koyu); color:#fff !important;
  font-size:13px; font-weight:800; padding:7px 15px; border-radius:99px; white-space:nowrap }
.kanit:hover .kanit-ok{ background:#1d3f5e }

/* --- 3. SINAV BUTONLARI: mobilde de yan yana üç dikdörtgen kutu --- */
@media (max-width:860px){
  .os-sinav-butonlari{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px }
  .os-sinav-btn{ flex-direction:column; align-items:flex-start; justify-content:center; gap:3px;
    min-height:64px; padding:10px 9px 10px 13px; text-align:left }
  .os-sinav-btn::after{ content:none }
  .os-sinav-btn b{ font-size:12.5px; white-space:normal; line-height:1.15; letter-spacing:-.2px }
  .os-sinav-btn span{ font-size:11.5px; margin-left:0 }
}
@media (max-width:380px){
  .os-sinav-btn b{ font-size:11.5px }
  .os-sinav-btn span{ font-size:11px }
  .os-sinav-btn{ padding:9px 7px 9px 11px }
}

/* --- 4. CANLI DEMO: okunur yazı, belirgin buton, anlamlı boşluk --- */
#dene{ padding:36px 0 34px }
#dene .dene-rozetler{ display:flex; align-items:center; gap:10px; margin-bottom:14px }
#dene .dene-canli{ display:inline-flex; align-items:center; gap:7px; background:var(--os-koyu); color:#fff;
  font-size:11.5px; font-weight:800; letter-spacing:1.2px; padding:6px 13px; border-radius:99px }
#dene .dene-canli i{ width:8px; height:8px; border-radius:50%; background:#4ade80; animation:os-nabiz 1.9s infinite }
#dene .dene-not2{ font-size:13px; font-weight:600; color:var(--os-muted) }
#dene .dene-baslik{ font-size:clamp(25px,6.4vw,34px); font-weight:900; line-height:1.16; letter-spacing:-.7px; color:var(--os-text); margin:0 0 8px }
#dene .dene-baslik span{ color:var(--os-koyu); background:linear-gradient(transparent 62%, #ffd9bd 62%); padding:0 3px }
#dene .dene-alt{ font-size:15px; line-height:1.55; color:#46586d; margin:0 0 18px; font-weight:500 }

#dene .dene-kutu{ background:#fff; border:1px solid #dbe4ec; border-radius:14px; overflow:hidden; box-shadow:0 12px 30px -22px rgba(16,38,59,.5) }
#dene .dene-sekmeler{ display:grid; grid-template-columns:1fr 1fr; background:#f1f5f9; border-bottom:1px solid #dbe4ec }
#dene .dene-sekme{ border:0; background:none; padding:15px 8px; font-size:14.5px; font-weight:800; color:#5b677a; cursor:pointer; border-bottom:3px solid transparent }
#dene .dene-sekme.on{ background:#fff; color:var(--os-koyu); border-bottom-color:var(--os-vurgu) }
#dene .dene-govde{ padding:18px 16px 20px }
#dene .ds-kart{ border:0; padding:0 }
#dene .ds-soru{ font-size:16px; font-weight:700; line-height:1.5; color:var(--os-text); margin:0 0 14px }
#dene .ds-alt{ display:flex; justify-content:center; margin-top:0 }
/* tiklanan her sey belirgin buton (kurucu 17230) */
#dene .ds-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0;
  background:var(--os-vurgu); color:#16222e; font-size:15px; font-weight:800; letter-spacing:.2px;
  padding:14px 26px; border-radius:11px; cursor:pointer; text-decoration:none; min-height:50px;
  box-shadow:0 8px 18px -10px rgba(255,138,61,.85) }
#dene .ds-cta:hover{ background:#ff9c58 }
#dene .ds-sik{ border:2px solid #dbe4ec; background:#fff; border-radius:11px; padding:14px 15px; font-size:15px; font-weight:600; min-height:52px; cursor:pointer; color:var(--os-text) }
#dene .ds-sik:hover{ border-color:var(--os-koyu); background:#f7fafd }
#dene .ds-sik.dogru{ border-color:#15803d; background:#e8f6ee }
#dene .ds-sik.yanlis{ border-color:#b91c1c; background:#fdecec }
#dene .ds-aciklama{ margin-top:14px; padding:14px 16px; border-left:4px solid var(--os-koyu); background:#f2f6fa; border-radius:9px; font-size:14.5px; line-height:1.6; color:#2c3e52 }
#dene #da-form{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap }
#dene #da-form input{ flex:1 1 190px; border:2px solid #dbe4ec; border-radius:11px; padding:13px 14px; font-size:15px; min-height:50px }
#dene .da-ben{ background:var(--os-koyu); color:#fff }
#dene .dene-not{ font-size:12.5px; color:var(--os-muted); margin-top:10px }
#dene .dene-abone{ display:flex; align-items:center; justify-content:center; width:100%; margin-top:18px;
  background:var(--os-koyu); color:#fff; border:0; border-radius:12px; min-height:54px; padding:15px 22px;
  font-size:15.5px; font-weight:800; letter-spacing:.3px; box-shadow:none }
#dene .dene-abone:hover{ background:#1d3f5e; color:#fff }
#dene .dene-altnot{ font-size:13px; color:#46586d; margin-top:10px; text-align:center; font-weight:500 }

/* --- 5. FİNAL CTA: okunur metin, iki gerçek buton --- */
.os-final{ padding:38px 0 44px; background:#f4f7fb; border-top:1px solid #e2eaf2 }
.os-final-panel > div:first-child > span{ display:block; font-size:11.5px; font-weight:800; letter-spacing:1.4px; color:var(--os-koyu); margin-bottom:10px }
.os-final h2{ font-size:clamp(26px,6.6vw,36px); font-weight:900; line-height:1.14; letter-spacing:-.8px; color:var(--os-text); margin:0 0 10px }
.os-final p{ font-size:15.5px; line-height:1.55; color:#46586d; margin:0 0 18px; font-weight:500 }
.os-final-actions{ display:flex; flex-direction:column; gap:11px; align-items:stretch }
.os-final-actions .btn.os-btn-yellow{ display:flex; align-items:center; justify-content:center; min-height:56px;
  background:var(--os-vurgu); color:#16222e; border:0; border-radius:12px; font-size:16px; font-weight:800; letter-spacing:.3px;
  box-shadow:0 10px 22px -12px rgba(255,138,61,.9) }
.os-final-actions .btn.os-btn-yellow:hover{ background:#ff9c58 }
.os-final-actions > a:not(.btn){ display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px;
  background:#fff; color:var(--os-koyu); border:2px solid var(--os-koyu); border-radius:12px;
  font-size:15px; font-weight:800; text-decoration:none }
.os-final-actions > a:not(.btn):hover{ background:var(--os-koyu); color:#fff }
.os-final-actions small{ display:block; text-align:center; font-size:13px; color:#46586d; margin-top:2px; font-weight:500 }
@media (min-width:861px){ .os-final-actions{ flex-direction:row; flex-wrap:wrap; align-items:center }
  .os-final-actions .btn.os-btn-yellow, .os-final-actions > a:not(.btn){ flex:0 1 auto; padding:0 30px }
  .os-final-actions small{ flex:1 0 100%; text-align:left } }

/* --- 6. HEADER: Giriş de buton, ikisi de mobilde okunur --- */
.k26-menu a{ font-size:14.5px; font-weight:800 }
.k26-menu a[href="/giris"]{ border:2px solid var(--os-koyu); color:var(--os-koyu); border-radius:11px; padding:0 16px; min-height:44px }
.k26-menu a[href="/giris"]:hover{ background:var(--os-koyu); color:#fff }
.k26-menu .k26-cta{ min-height:44px; padding:0 20px; font-size:14.5px; font-weight:900; border-radius:11px }
@media (max-width:860px){
  .k26-menu{ gap:7px }
  .k26-menu a{ font-size:14px; padding:0 12px; min-height:42px }
  .k26-menu a[href="/giris"]{ padding:0 14px; min-height:42px }
  .k26-menu .k26-cta{ padding:0 17px; font-size:14px; min-height:42px }
  .kanit{ font-size:13px; gap:11px; padding:10px 14px }
  .kanit-ok{ font-size:12px; padding:6px 12px }
}
@media (max-width:400px){
  .k26-menu a{ font-size:13.5px; padding:0 9px }
  .k26-menu .k26-cta{ padding:0 14px }
}

/* 17230 boşluk düzeltmesi: demo kutusunda 260px'lik boş rezerv, final panelinde çift dolgu vardı */
#dene #ds-alan{ min-height:0 }
#dene #da-log{ min-height:0 }
.os-final{ padding:30px 0 34px }
.os-final-panel{ padding:0 }
.os-final-panel > div:first-child{ margin-bottom:18px }
@media (min-width:861px){
  .os-final-panel{ display:grid; grid-template-columns:1.15fr .85fr; gap:38px; align-items:center }
  .os-final-panel > div:first-child{ margin-bottom:0 }
}

/* 17230: grid item taşma koruması (ÖS ile aynı) */
.os-hero-grid > *{ min-width:0 }
.os-hero-copy, .os-hero-aksiyon{ min-width:0; max-width:100% }
.os-canli-rozet{ max-width:100% }
.os-canli-rozet > span:last-child{ min-width:0 }

/* 17230: font kilidi tum siteye */
body, main, main *, .site-footer, .site-footer *, .k26-nav, .k26-nav *, .kanit, .kanit * {
  font-family:"Trebuchet MS","Segoe UI",Tahoma,Verdana,sans-serif !important;
}
/* 17230: genis tablo ve fiyat sekmeleri mobilde tasiyordu */
main table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
@media (max-width:860px){ main table{ font-size:13px } main table th, main table td{ white-space:nowrap } }
.fk-tab{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }

/* 2026-08-03 · tek seferlik fiyat karti (kurucu 17363: abonelik kalkti) */
.fk-tek-sarmal{display:flex;justify-content:center;margin-top:12px}
.fk-tek-kart{max-width:460px;width:100%}
.fk-tek-kart .p-amount{font-size:46px;line-height:1.05;margin:2px 0 2px}
.fk-tek-sure{font-size:13.5px;color:var(--muted);font-weight:600;margin:0 0 12px;text-align:center;line-height:1.5}
.fk-tek-kart .btn-lg{font-size:17px;padding:15px 20px}

/* ── 2026-08-03 · ödeme sayfası (kurucu 17363: "daha pro bir görünüm") ── */
.ode-sarmal{max-width:520px}
.ode-adimlar{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:22px}
.ode-adim{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.ode-adim.tamam{color:var(--ok)}
.ode-adim.aktif{color:var(--accent-text)}
.ode-cizgi{flex:0 1 34px;height:2px;background:var(--line);border-radius:2px}
.ode-baslik{font-size:27px;line-height:1.2;margin:0 0 18px;text-align:center}

.ode-ozet{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.ode-ozet-ust{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:18px 18px 14px}
.ode-urun{font-size:16.5px;font-weight:700;line-height:1.35}
.ode-kapsam{font-size:13px;color:var(--muted);font-weight:600;margin-top:3px}
.ode-tutar{font-size:34px;font-weight:800;color:var(--accent-text);line-height:1;white-space:nowrap}
.ode-tutar span{font-size:18px;margin-left:1px}
.ode-ozet-alt{display:flex;justify-content:space-between;padding:10px 18px;border-top:1px solid var(--line);
  background:var(--brand-l,#f4f8fc);font-size:12.5px;font-weight:700;color:var(--muted)}

.ode-guven{list-style:none;display:grid;gap:9px;margin:16px 0 0;padding:0}
.ode-guven li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.ode-guven li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--ok);opacity:.16}
.ode-guven li::after{content:"✓";position:absolute;left:3.5px;top:2px;font-size:10px;font-weight:900;color:var(--ok)}

.ode-form{display:grid;gap:13px;margin-top:20px}
.ode-alan{display:grid;gap:5px;font-size:13.5px;font-weight:700}
.ode-alan .input{font-weight:400}
.ode-alan small{font-weight:400;color:var(--muted);font-size:12px}
.ode-onay{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.5}
.ode-onay input{margin-top:2px;flex:none}
.ode-onay a{text-decoration:underline}
.ode-dugme{font-size:17px;padding:15px 20px;letter-spacing:.01em}

.ode-kartlar{display:flex;gap:7px;justify-content:center;align-items:center;margin-top:16px;flex-wrap:wrap}
.ode-kartlar span{border:1px solid var(--line);border-radius:7px;padding:5px 11px;font-size:11px;font-weight:800;
  color:var(--muted);letter-spacing:.4px}
.ode-dipnot{text-align:center;font-size:11.5px;color:var(--muted);margin-top:9px}
@media(max-width:420px){
  .ode-adim{font-size:10.5px}.ode-cizgi{flex-basis:18px}
  .ode-tutar{font-size:29px}.ode-baslik{font-size:23px}
}

/* kart kabul isaretleri (kurucu 17373) */
.ode-kart{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);
  border-radius:8px;padding:5px 9px;background:#fff;line-height:0}
.ode-kart svg{display:block}

/* 2026-08-03 · KPSS urununun uc oturumu kapsadigini soyleyen not */
.fk-seviye-not{font-size:13px;color:var(--muted);font-weight:600;line-height:1.5;margin:4px 0 0}

/* 2026-08-03 · KPSS uc oturum ayri urun olarak listelenir */
.fk-seviye-blok{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.fk-seviye-blok:first-of-type{margin-top:6px;padding-top:0;border-top:0}
.fk-seviye-baslik{font-size:19px;margin:0 0 10px;text-align:center}
.fk-seviye-baslik span{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-top:3px}

/* 2026-08-03 guven denetimi: onay kutusu 13x13 pikseldi (dokunma hedefi cok kucuk) ve
   sabit destek balonu odeme sayfasinin guvenlik satirini ortuyordu. Kutu buyutuldu,
   dipnota balonun yuksekligi kadar guvenli bosluk verildi. */
.ode-onay input{width:20px;height:20px;accent-color:var(--accent-text,#0284c7)}
.ode-dipnot{margin-bottom:74px}