/* Süreç 08 — yalnızca karot iş süreci ve koyu vitrinle birleşiminde geçerlidir. */
#karot-surec-08 {
  --ks08-ink: #0b0d10;
  --ks08-amber: #ffb100;
  --ks08-height: clamp(720px, 53vw, 1020px);
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--ks08-ink);
  color: #fff;
  font-family: "K09Sans", Rubik, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#karot-surec-08 *, #karot-surec-08 *::before, #karot-surec-08 *::after { box-sizing: border-box; }
#karot-surec-08 .ks08-stage { position: relative; isolation: isolate; width: 100%; max-width: 1920px; min-height: var(--ks08-height); margin: 0 auto; background: var(--ks08-ink); }
#karot-surec-08 .ks08-photo { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; }
#karot-surec-08 .ks08-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 54%; }
#karot-surec-08 .ks08-stage::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(190px, 20vw, 360px);
  background: linear-gradient(to bottom, #0b0d10 0%, rgba(11,13,16,.98) 12%, rgba(11,13,16,.86) 34%, rgba(11,13,16,.5) 62%, rgba(11,13,16,.12) 85%, rgba(11,13,16,0) 100%);
  content: "";
  pointer-events: none;
}
#karot-surec-08 .ks08-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(140px, 16vw, 300px); min-height: var(--ks08-height); padding: clamp(42px, 3.6vw, 68px) clamp(24px, 3.35vw, 64px) clamp(32px, 2.4vw, 46px); }
#karot-surec-08 .ks08-heading { align-self: center; max-width: 100%; }
#karot-surec-08 .ks08-title { margin: 0; color: #fff !important; font-family: "K09Display", Oswald, Impact, "Arial Narrow", sans-serif; font-size: clamp(46px, 4.8vw, 86px); font-weight: 600 !important; line-height: 1.13; letter-spacing: -.025em; text-transform: none; overflow-wrap: break-word; }
#karot-surec-08 .ks08-accent { display: block; width: clamp(36px, 3.4vw, 62px); height: 4px; margin-top: 19px; background: var(--ks08-amber); }
#karot-surec-08 .ks08-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; margin: 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.23); border-radius: 16px; background: rgba(11,13,16,.92); list-style: none; }
#karot-surec-08 .ks08-step { min-width: 0; margin: 0; padding: clamp(22px, 1.9vw, 34px) clamp(22px, 1.85vw, 34px); border-left: 1px solid rgba(255,255,255,.25); }
#karot-surec-08 .ks08-step:first-child { border-left: 0; }
#karot-surec-08 .ks08-step-top { display: flex; align-items: center; gap: clamp(24px, 2.5vw, 42px); margin-bottom: 15px; }
#karot-surec-08 .ks08-number { display: block; flex: 0 0 auto; color: var(--ks08-amber); font-family: "K09Display", Oswald, Impact, "Arial Narrow", sans-serif; font-size: clamp(44px, 4.1vw, 72px); font-weight: 600; line-height: 1; letter-spacing: -.015em; }
#karot-surec-08 .ks08-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 43px; height: 43px; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; color: #eef0f1; }
#karot-surec-08 .ks08-icon svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#karot-surec-08 .ks08-step-title { margin: 0 0 10px; color: #fff !important; font-family: "K09Display", Oswald, Impact, "Arial Narrow", sans-serif; font-size: clamp(23px, 1.75vw, 30px); font-weight: 600 !important; line-height: 1.2; letter-spacing: -.01em; text-transform: none; overflow-wrap: break-word; }
#karot-surec-08 .ks08-step-description { margin: 0; color: #d3d6d8; font-size: clamp(16px, 1.2vw, 20px); font-weight: 400; line-height: 1.55; overflow-wrap: break-word; }
@media (max-width: 991px) {
  #karot-surec-08 { --ks08-mobile-hero: clamp(380px, 58vw, 560px); }
  #karot-surec-08 .ks08-stage { min-height: 0; }
  #karot-surec-08 .ks08-photo { right: 0; bottom: auto; left: 0; height: var(--ks08-mobile-hero); }
  #karot-surec-08 .ks08-photo::after { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,13,16,0) 65%, rgba(11,13,16,.5) 85%, #0b0d10 100%); content: ""; pointer-events: none; }
  #karot-surec-08 .ks08-content { display: block; min-height: 0; padding: 0 28px 40px; }
  #karot-surec-08 .ks08-heading { display: flex; flex-direction: column; align-items: center; min-height: var(--ks08-mobile-hero); padding-top: 40px; text-align: center; }
  #karot-surec-08 .ks08-title { font-size: clamp(40px, 6.2vw, 60px); }
  #karot-surec-08 .ks08-accent { width: 46px; margin-top: 18px; }
  #karot-surec-08 .ks08-steps { position: relative; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: -48px; border-radius: 13px; }
  #karot-surec-08 .ks08-step { padding: 26px; }
  #karot-surec-08 .ks08-step:nth-child(3) { border-left: 0; }
  #karot-surec-08 .ks08-step:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.25); }
  #karot-surec-08 .ks08-step-top { gap: 26px; margin-bottom: 14px; }
  #karot-surec-08 .ks08-number { font-size: 48px; }
  #karot-surec-08 .ks08-icon { width: 37px; height: 37px; }
  #karot-surec-08 .ks08-icon svg { width: 22px; height: 22px; }
  #karot-surec-08 .ks08-step-title { font-size: 26px; }
  #karot-surec-08 .ks08-step-description { font-size: 17px; }
}
@media (max-width: 575px) {
  #karot-surec-08 { --ks08-mobile-hero: clamp(310px, 80vw, 430px); }
  #karot-surec-08 .ks08-photo { top: calc(var(--ks08-mobile-hero) - 56.25vw); bottom: auto; height: 56.25vw; }
  #karot-surec-08 .ks08-photo img { object-position: center; }
  #karot-surec-08 .ks08-photo::after { background: linear-gradient(to bottom, #0b0d10 0, rgba(11,13,16,.82) 22px, rgba(11,13,16,.25) 54px, rgba(11,13,16,0) 80px), linear-gradient(to top, #0b0d10 0, rgba(11,13,16,0) 44px); }
  #karot-surec-08 .ks08-stage::before { display: none; }
  #karot-surec-08 .ks08-content { padding: 0 20px 28px; }
  #karot-surec-08 .ks08-heading { padding-top: 34px; }
  #karot-surec-08 .ks08-title { font-size: clamp(35px, 8.8vw, 46px); line-height: 1.16; }
  #karot-surec-08 .ks08-accent { width: 36px; height: 3px; margin-top: 16px; }
  #karot-surec-08 .ks08-steps { grid-template-columns: minmax(0,1fr); margin-top: -16px; border-radius: 11px; }
  #karot-surec-08 .ks08-step { display: grid; grid-template-columns: 44px minmax(0,1fr); column-gap: 16px; row-gap: 7px; padding: 20px 18px; border-left: 0; }
  #karot-surec-08 .ks08-step:nth-child(n+2) { border-top: 1px solid rgba(255,255,255,.25); }
  #karot-surec-08 .ks08-step-top { grid-column: 1; grid-row: 1 / 3; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
  #karot-surec-08 .ks08-number { font-size: 38px; }
  #karot-surec-08 .ks08-icon { width: 29px; height: 29px; }
  #karot-surec-08 .ks08-icon svg { width: 18px; height: 18px; }
  #karot-surec-08 .ks08-step-title { grid-column: 2; margin: 0; font-size: 24px; }
  #karot-surec-08 .ks08-step-description { grid-column: 2; font-size: 16px; line-height: 1.6; }
}