
:root {
  --cts-bg: #f5fafb;
  --cts-card: #ffffff;
  --cts-line: #deeaed;
  --cts-blue: #103f6d;
  --cts-teal: #2c7a86;
  --cts-teal-dark: #195a66;
  --cts-coral: #dc7a7f;
  --cts-green: #12b05c;
  --cts-text: #51697d;
  --cts-heading: #183751;
  --cts-soft: #eef6f8;
  --cts-soft-2: #f8fbfc;
  --cts-warning: #fbf6e4;
}
body.cts-page-body {
  background: radial-gradient(circle at top left, rgba(31, 120, 138, 0.08), transparent 30%), linear-gradient(180deg, #fbfefe 0%, #f5f9fb 100%);
}
.cts-main { padding: 28px 0 56px; }
.cts-shell { width: min(1220px, calc(100% - 40px)); margin: 0 auto; }
.cts-card { background: var(--cts-card); border: 1px solid var(--cts-line); border-radius: 16px; box-shadow: 0 10px 26px rgba(26,58,92,.04); }
.cts-row { display: grid; gap: 14px; margin-top: 14px; }
.cts-row-top, .cts-row-mid { grid-template-columns: 1fr 1.25fr; }
/* compact mid row override */
.cts-row-mid { grid-template-columns: 1fr; }
.cts-row-mid .cts-panel { padding-bottom: 18px; }
.cts-stage-card { min-height: 150px; }
.cts-panel-intro { margin-bottom: 14px; }
.cts-metastasis-strip img { max-height: 210px; object-fit: contain; }
.cts-meta-labels span { font-size: 11px; line-height: 1.25; }

.cts-row-three, .cts-row-bottom { grid-template-columns: repeat(3, 1fr); }
.cts-row-bottom { grid-template-columns: 1fr 1.35fr; }
.cts-panel, .cts-panel-wide, .cts-approach, .cts-process-panel { padding: 18px 18px 16px; margin-top: 14px; }
.cts-panel-wide, .cts-approach, .cts-process-panel, .cts-bottom-cta { margin-top: 14px; }
.cts-hero { display: grid; grid-template-columns: 1.15fr .92fr .7fr; overflow: hidden; }
.cts-hero-copy, .cts-hero-contact { padding: 22px 22px 18px; }
.cts-hero-copy h1 { margin: 0; color: var(--cts-blue); font-size: clamp(30px, 3.6vw, 38px); line-height: .96; letter-spacing: -.03em; font-weight: 800; }
.cts-subtitle { margin: 8px 0 14px; color: #2a6c87; font-size: 18px; font-weight: 600; }
.cts-hero-copy p { color: var(--cts-text); font-size: 13px; line-height: 1.72; }
.cts-service-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; }
.cts-service-pill { min-height: 90px; padding: 12px 8px; border: 1px solid #d9e5ed; border-radius: 13px; background: #fff; color: var(--cts-heading); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.cts-service-pill i { color: var(--cts-teal); font-size: 28px; }
.cts-service-pill span { font-size: 13px; font-weight: 700; line-height: 1.25; }
.cts-hero-visual { position: relative; min-height: 274px; background: linear-gradient(180deg, rgba(237,246,250,.95), rgba(225,238,244,.97)); }
.cts-hero-bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,0) 24%, rgba(255,255,255,0) 78%, rgba(255,255,255,.15)), center/cover no-repeat url('../assets/kanser-tedavi-destegi/hero-clinic-bg.png'); opacity: .38; }
.cts-doctor { position: absolute; right: 18px; bottom: 0; width: min(88%, 330px); object-fit: contain; z-index: 2; }
.cts-doctor-tag { position: absolute; right: 30px; bottom: 26px; z-index: 3; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.95); box-shadow: 0 12px 20px rgba(15,62,90,.12); display: flex; flex-direction: column; gap: 5px; }
.cts-doctor-tag strong { color: var(--cts-heading); font-size: 13px; line-height: 1.2; }
.cts-doctor-tag span { color: #59748a; font-size: 10px; }
.cts-hero-contact, .cts-bottom-cta { background: linear-gradient(180deg, #0f466f, #0b395c); color: #fff; display: flex; flex-direction: column; }
.cts-hero-contact h2, .cts-bottom-copy h2 { margin: 0 0 12px; color: #fff; font-size: 24px; line-height: 1.1; font-weight: 800; }
.cts-hero-contact p, .cts-bottom-copy p { margin: 0 0 18px; color: rgba(229,242,249,.95); font-size: 13px; line-height: 1.6; }
.cts-btn { display:flex; align-items:center; justify-content:center; gap:10px; min-height: 52px; margin-top: 10px; border-radius: 12px; font-size: 18px; font-weight: 700; text-align: center; }
.cts-btn-white { background:#fff; color: var(--cts-blue); }
.cts-btn-green { background: #15b45f; color:#fff; }
.cts-hero-contact small { margin-top: auto; font-size: 12px; color:#d8e7f1; display:flex; align-items:center; gap:8px; }
.cts-number-title { display:flex; align-items:center; gap:10px; margin:0 0 12px; color: var(--cts-blue); font-size: clamp(18px, 2vw, 20px); font-weight: 800; }
.cts-number-title.centered { justify-content:center; text-align:center; }
.cts-number-title span { width: 28px; height: 28px; border-radius: 8px; background: var(--cts-blue); color:#fff; display:grid; place-items:center; font-size: 15px; }
.cts-cancer-def { display: grid; grid-template-columns: 158px 1fr; gap: 16px; align-items: start; }
.cts-cancer-def img { width: 100%; border-radius: 10px; display:block; border:1px solid #d3e6ec; background:#e9f5f8; }
.cts-cancer-def p, .cts-panel p, .cts-check-list li, .cts-steps-list li { color: var(--cts-text); font-size: 13px; line-height: 1.68; }
.cts-step-icons { display:grid; grid-template-columns: repeat(13, auto); align-items:start; gap: 6px; }
.cts-step { text-align:center; width: 92px; }
.cts-step b { display:block; margin-top: 8px; color: var(--cts-heading); font-size: 14px; }
.cts-step h3 { margin: 5px 0 0; color: var(--cts-heading); font-size: 13px; line-height: 1.35; }
.cts-icon-circle { width: 62px; height: 62px; border-radius: 50%; border: 1px solid #cfe3ea; background: linear-gradient(180deg, #fbfefe, #eef7f9); display:grid; place-items:center; margin:0 auto; color: var(--cts-teal); font-size: 28px; }
.cts-step-arrow { display:grid; place-items:center; color:#6b8ea0; padding-top: 19px; }
.cts-stage-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cts-stage-card { min-height: 175px; border:1px solid #d8e8ec; border-radius: 14px; padding:16px 14px; background: #fff; }
.cts-stage-card i { font-size: 30px; }
.cts-stage-card h3 { margin: 12px 0 2px; font-size: 18px; color: var(--cts-heading); }
.cts-stage-card strong { display:block; margin-bottom: 8px; font-size: 13px; }
.cts-stage-card p { margin:0; }
.cts-stage-card.is-teal { background:#f1faf9; color:#1b7c7c; }
.cts-stage-card.is-green { background:#f6fbf2; color:#4c7c3f; }
.cts-stage-card.is-amber { background:#fff8ef; color:#b5792f; }
.cts-stage-card.is-pink { background:#fff2f4; color:#cf6d83; }
.cts-inline-note, .cts-inline-tip, .cts-warning-note { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border:1px solid #e8e2c9; background: var(--cts-warning); color:#705f33; font-size: 13px; display:flex; align-items:flex-start; gap:10px; line-height:1.55; }
.cts-inline-note b{color:#594722;}
.cts-panel-intro { margin: 2px 0 12px; }
.cts-metastasis-strip img { width: 100%; border-radius: 12px; background: #f8fbfc; border:1px solid #dbe7eb; }
.cts-meta-labels { display:grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.cts-meta-labels span { text-align:center; font-size:12px; color:var(--cts-heading); font-weight:700; }
.cts-cancer-types-grid { display:grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.cts-type-card { min-height: 110px; border:1px solid #d9e7ed; border-radius: 14px; background: #fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 12px; padding: 12px 8px; text-align:center; color: var(--cts-heading); font-size: 13px; font-weight: 700; }
.cts-type-card i { font-size: 30px; color: var(--cts-teal); }
.cts-approach .cts-center-intro, .cts-process-panel .cts-center-intro { text-align:center; margin: -3px auto 16px; max-width: 880px; color: var(--cts-text); font-size: 13px; }
.cts-approach-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cts-approach-card { min-height: 220px; border:1px solid #d9e7ed; border-radius: 14px; background: #fffdfa; padding: 16px 14px; position:relative; }
.cts-badge { position:absolute; top: 14px; left: 14px; width: 24px; height: 24px; border-radius:999px; background:#1c8791; color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; }
.cts-approach-card h3 { margin: 32px 0 10px; color: var(--cts-blue); font-size: 18px; }
.cts-approach-card p { margin:0; font-size:13px; }
.cts-icon-list { display:grid; gap: 16px; margin-top: 18px; }
.cts-icon-list.six-cols { grid-template-columns: repeat(5, 1fr); }
.cts-icon-list div { text-align:center; }
.cts-icon-list i { font-size: 30px; color: var(--cts-teal); }
.cts-icon-list span { display:block; margin-top: 8px; color: var(--cts-heading); font-size: 13px; font-weight: 700; }
.cts-check-list { list-style:none; padding:0; margin: 12px 0 0; display:grid; gap: 10px; }
.cts-check-list li { position:relative; padding-left: 28px; }
.cts-check-list li::before { content:'\ea5e'; font-family:'remixicon'; position:absolute; left:0; top:0; color:#1b8e5e; font-size:18px; }
.cts-steps-list { list-style:none; counter-reset:item; padding:0; margin: 14px 0 0; display:grid; gap: 11px; }
.cts-steps-list li { position:relative; padding-left: 36px; }
.cts-steps-list li::before { counter-increment:item; content: counter(item); position:absolute; left:0; top:1px; width: 22px; height: 22px; border-radius:999px; background:#0e7a80; color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; }
.cts-location-note { display:flex; gap: 10px; align-items:flex-start; margin-top:16px; padding: 12px 14px; border-radius: 12px; background:#f3fafb; border:1px solid #d9e8ec; color: var(--cts-heading); }
.cts-location-note i { font-size: 22px; color: var(--cts-teal); }
.cts-process-line { display:grid; grid-template-columns: repeat(5, 1fr); align-items: start; gap: 10px; margin-top: 10px; }
.cts-process-step { text-align:center; }
.cts-process-step b { display:block; margin: 8px 0 4px; color: var(--cts-teal); font-size: 13px; letter-spacing:.04em; }
.cts-process-step h3 { margin: 0 0 8px; color: var(--cts-heading); font-size: 15px; line-height: 1.35; }
.cts-process-step p { margin: 0; font-size: 12px; }
.cts-process-arrow { position:relative; display:none; }
.cts-reports-grid { display:grid; grid-template-columns: 1.1fr .7fr; gap: 12px; align-items:center; }
.cts-reports-grid img { width: 100%; max-width: 220px; justify-self:end; }
.cts-report-footer { margin: 10px 0 0; }
.cts-faq-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cts-faq-item { border:1px solid #dce8ed; border-radius: 12px; overflow:hidden; background:#fff; }
.cts-faq-item button { width:100%; border:0; background:#fff; padding: 14px 16px; display:flex; align-items:center; justify-content:space-between; gap: 10px; color: var(--cts-heading); font-size: 13px; font-weight: 700; text-align:left; cursor:pointer; }
.cts-faq-answer { display:none; padding: 0 16px 14px; }
.cts-faq-item.open .cts-faq-answer { display:block; }
.cts-faq-item.open button i { transform: rotate(180deg); }
.cts-bottom-cta { display:grid; grid-template-columns: 1.2fr 1fr; align-items:center; padding: 18px 22px; }
.cts-bottom-actions { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 981px) {
  .cts-process-line { grid-template-columns: repeat(9, 1fr); }
  .cts-process-step:nth-child(1), .cts-process-step:nth-child(3), .cts-process-step:nth-child(5), .cts-process-step:nth-child(7), .cts-process-step:nth-child(9) { grid-column: span 1; }
  .cts-process-arrow { display:block; min-height: 60px; }
  .cts-process-arrow::before { content:''; display:block; margin-top: 30px; border-top:2px solid #9fc2ce; position:relative; }
  .cts-process-arrow::after { content:''; position:absolute; right: -2px; top: 25px; width: 10px; height: 10px; border-right:2px solid #9fc2ce; border-top:2px solid #9fc2ce; transform: rotate(45deg); }
}
@media (max-width: 1200px) {
  .cts-hero { grid-template-columns: 1.1fr .9fr .8fr; }
  .cts-cancer-types-grid { grid-template-columns: repeat(4, 1fr); }
  .cts-approach-grid { grid-template-columns: repeat(3, 1fr); }
  .cts-service-grid { grid-template-columns: repeat(3, 1fr); }
  .cts-step-icons { grid-template-columns: repeat(3, 1fr); }
  .cts-step-arrow { display:none; }
  .cts-step { width:auto; }
}
@media (max-width: 980px) {
  .cts-hero, .cts-row-top, .cts-row-mid, .cts-row-three, .cts-row-bottom, .cts-bottom-cta { grid-template-columns: 1fr; }
  .cts-hero-visual { min-height: 420px; overflow: hidden; }
  .cts-doctor { right: 50%; width: min(72%, 330px); transform: translateX(50%); }
  .cts-process-line { grid-template-columns: repeat(2, 1fr); }
  .cts-process-arrow { display:none !important; }
  .cts-cancer-def, .cts-reports-grid { grid-template-columns: 1fr; }
  .cts-reports-grid img { justify-self:center; }
  .cts-faq-grid, .cts-stage-grid { grid-template-columns: 1fr; }
  .cts-meta-labels { grid-template-columns: repeat(2, 1fr); }
  .cts-cancer-types-grid { grid-template-columns: repeat(2, 1fr); }
  .cts-approach-grid { grid-template-columns: 1fr; }
  .cts-icon-list.six-cols { grid-template-columns: repeat(2, 1fr); }
  .cts-bottom-actions { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cts-shell { width: min(100% - 20px, 1220px); }
  .cts-main { padding: 18px 0 40px; }
  .cts-hero-visual { min-height: 335px; }
  .cts-doctor { width: min(68vw, 260px); }
  .cts-doctor-tag { right: 14px; bottom: 24px; }
  .cts-hero-copy, .cts-hero-contact, .cts-panel, .cts-panel-wide, .cts-approach, .cts-process-panel, .cts-bottom-cta { padding: 16px; }
  .cts-service-grid, .cts-process-line { grid-template-columns: 1fr; }
  .cts-service-pill { min-height: 84px; }
  .cts-cancer-types-grid { grid-template-columns: 1fr 1fr; }
}


/* Compact first information row */
.cts-row-top{align-items:start;}
.cts-row-top>.cts-card{align-self:start;}
.cts-row-top .cts-panel{padding:14px 16px;}
.cts-row-top .cts-number-title{margin-bottom:10px;}
.cts-row-top .cts-cancer-def{grid-template-columns:132px 1fr;gap:14px;align-items:center;}
.cts-row-top .cts-cancer-def img{height:132px;object-fit:cover;}
.cts-row-top .cts-cancer-def p{margin:0;font-size:12px;line-height:1.55;}
.cts-row-top .cts-icon-circle{width:54px;height:54px;font-size:24px;}
.cts-row-top .cts-step b{margin-top:5px;}
.cts-row-top .cts-step h3{margin-top:3px;font-size:12px;}

/* final compact override for stages and metastasis */
.cts-row-mid { grid-template-columns: 1fr !important; }
.cts-stage-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cts-stage-card { min-height: 138px !important; padding: 14px 12px; }
.cts-stage-card h3 { margin: 8px 0 2px; font-size: 16px; }
.cts-stage-card strong { margin-bottom: 6px; font-size: 12px; line-height: 1.3; }
.cts-stage-card p { font-size: 12px; line-height: 1.5; }
.cts-panel-intro { margin: 0 0 10px; }
.cts-metastasis-strip img { max-height: 180px; object-fit: contain; }
.cts-meta-labels { margin-top: 8px; gap: 4px; }
.cts-meta-labels span { font-size: 11px; line-height: 1.25; }
@media (max-width: 900px) {
  .cts-stage-grid { grid-template-columns: repeat(2, 1fr); }
  .cts-meta-labels { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .cts-stage-grid, .cts-meta-labels { grid-template-columns: 1fr; }
}
