/* 4. Evre Kolon ve Rektum Kanseri — page-specific layout */
.k4-page {
  --k4-navy: #17324c;
  --k4-teal: #075d5f;
  --k4-teal-2: #087b6f;
  --k4-green: #0a8b58;
  --k4-soft: #f7f9fa;
  --k4-border: #dfe7e9;
  --k4-muted: #617181;
  --k4-shadow: 0 8px 25px rgba(21, 52, 67, .06);
  color: var(--k4-navy);
  background: #fff;
  font-family: "Poppins", Arial, sans-serif;
}
.k4-page * { box-sizing: border-box; }
.k4-wrap { width: min(1180px, calc(100% - 54px)); margin: 0 auto; }
.k4-page h1,
.k4-page h2 { font-family: "DM Serif Display", Georgia, serif; color: var(--k4-navy); font-weight: 400; }
.k4-page p { color: var(--k4-muted); }
.k4-page a { text-decoration: none; }

/* Hero */
.k4-hero { padding: 52px 0 34px; background: #fff; }
.k4-hero-grid { display: grid; grid-template-columns: 1.45fr .78fr; gap: 52px; align-items: start; }
.k4-eyebrow { margin-bottom: 12px; color: #0a6c65; font-size: 16.25px; font-weight: 700; letter-spacing: .02em; }
.k4-hero h1 { margin: 0; font-size: clamp(38px, 4vw, 56px); line-height: 1.04; }
.k4-lead { max-width: 700px; margin: 20px 0 27px; font-size: 17.5px; line-height: 1.75; }
.k4-metastasis-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 34px; }
.k4-meta-item { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.k4-round-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: #075a5d; font-size: 31.25px; box-shadow: 0 7px 16px rgba(6,80,82,.13); }
.k4-meta-item h3 { margin: 1px 0 5px; color: var(--k4-navy); font-size: 18.75px; line-height: 1.25; }
.k4-meta-item p { margin: 0; font-size: 14.38px; line-height: 1.55; }
.k4-hero-card { position: relative; min-height: 330px; overflow: hidden; padding: 31px 155px 24px 31px; border-radius: 22px; background: radial-gradient(circle at 80% 46%, rgba(36,162,170,.28), transparent 40%), linear-gradient(145deg,#063944,#04303b 55%,#042936); box-shadow: 0 15px 35px rgba(3,51,60,.14); }
.k4-hero-card::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 88% 20%, rgba(49,151,167,.16), transparent 27%); pointer-events:none; }
.k4-hero-card-copy { position: relative; z-index: 2; }
.k4-hero-card h2 { margin: 0 0 16px; color: #fff; font-family: "Poppins", Arial, sans-serif; font-size: 25px; font-weight: 700; line-height: 1.3; }
.k4-hero-card p { margin: 0 0 16px; color: rgba(255,255,255,.83); font-size: 14.38px; line-height: 1.55; }
.k4-hero-card ul { margin: 0 0 18px; padding: 0; list-style: none; }
.k4-hero-card li { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: #fff; font-size: 13.75px; }
.k4-hero-card li i { color: #39d27a; font-size: 20px; font-weight: 700; }
.k4-colon-img { position: absolute; right: -2px; bottom: 0; z-index: 1; width: 155px; height: 240px; object-fit: cover; object-position: left center; mix-blend-mode: screen; opacity: .95; }

/* Buttons */
.k4-btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; border-radius: 6px; font-size: 13.75px; font-weight: 700; text-align: center; transition: transform .18s ease, box-shadow .18s ease; }
.k4-btn:hover { transform: translateY(-1px); }
.k4-btn-solid { color: #fff; background: linear-gradient(90deg,#098b58,#0a7f50); box-shadow: 0 7px 18px rgba(7,126,78,.14); }
.k4-btn-outline { color: #0a715f; background: #fff; border: 1px solid #0c8b74; }
.k4-btn-dark-outline { color: #fff; border: 1px solid rgba(255,255,255,.75); background: transparent; }
.k4-hero-card .k4-btn { width: 100%; }

/* Generic sections */
.k4-section { padding: 34px 0; background: #fff; border-top: 1px solid #edf1f2; }
.k4-section-soft { background: linear-gradient(180deg,#fbfcfd 0%,#f8fafb 100%); }
.k4-section-head { margin-bottom: 20px; }
.k4-section-head h2 { margin: 0 0 7px; font-size: 32.5px; }
.k4-section-head p { margin: 0; font-size: 14.38px; line-height: 1.55; }
.k4-section-head.compact { margin-bottom: 18px; }

/* Treatment cards */
.k4-six-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.k4-option-card { min-height: 205px; padding: 20px 14px 16px; border: 1px solid var(--k4-border); border-radius: 11px; background: #fff; text-align: center; box-shadow: 0 3px 12px rgba(31,57,67,.025); }
.k4-option-card > i { display: block; margin-bottom: 12px; color: #159174; font-size: 41.25px; font-weight: 400; }
.k4-option-card h3 { min-height: 39px; margin: 0 0 9px; color: var(--k4-navy); font-size: 16.25px; line-height: 1.45; }
.k4-option-card p { margin: 0; font-size: 12.5px; line-height: 1.58; }

/* Molecular profile flow */
.k4-profile-section { padding-block: 27px; }
.k4-profile-grid { display: grid; grid-template-columns: .82fr 1.75fr; gap: 26px; align-items: center; }
.k4-profile-copy h2 { margin: 0 0 8px; font-size: 30px; }
.k4-profile-copy p { margin: 0; font-size: 13.13px; line-height: 1.55; }
.k4-profile-flow { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.k4-profile-node { width: 118px; height: 118px; flex: 0 0 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 50%; color: #08745f; background: #f0f8f7; border: 1px solid #bfdad5; text-align: center; }
.k4-profile-node i { font-size: 38.75px; }
.k4-profile-node strong { font-size: 15px; line-height: 1.25; }
.k4-profile-node.final { width: 122px; height: 122px; flex-basis: 122px; color: #fff; background: #075b5d; border-color: #075b5d; }
.k4-profile-box { flex: 1; min-height: 94px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; gap: 10px; padding: 10px; border: 1px solid #bfdad5; border-radius: 46px; background: #fbfefe; }
.k4-profile-box span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 50%; color: #0b5c59; background: #fff; border: 1px solid #d9e7e5; box-shadow: 0 5px 12px rgba(20,80,80,.04); font-size: 15px; font-weight: 700; text-align: center; line-height: 1.2; }
.k4-profile-box small { margin-top: 3px; font-size: 8.75px; font-weight: 600; }
.flow-arrow { color: #0b6d64; font-size: 35px; }

/* Molecular therapy */
.k4-molecular-section { position: relative; overflow: hidden; background: linear-gradient(90deg,#fbfefe,#fff); }
.k4-molecular-grid { display: grid; grid-template-columns: .86fr 1.68fr; gap: 27px; align-items: center; }
.k4-molecular-copy { position: relative; min-height: 230px; padding: 16px 0 12px 96px; }
.k4-dna-img { position: absolute; left: -28px; top: 3px; width: 125px; height: 215px; object-fit: cover; object-position: right center; opacity: .95; }
.k4-small-label { margin-bottom: 8px; color: #0a7164; font-size: 12.5px; font-weight: 700; }
.k4-molecular-copy h2 { margin: 0 0 12px; font-size: 35px; line-height: 1.1; }
.k4-molecular-copy p { margin: 0 0 16px; font-size: 13.13px; line-height: 1.6; }
.k4-copy-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.k4-copy-actions .k4-btn:first-child { min-width: 268px; }
.k4-copy-actions .k4-btn:last-child { min-width: 135px; }
.k4-five-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.k4-step-card { min-height: 178px; padding: 15px 11px; border: 1px solid var(--k4-border); border-radius: 9px; background: rgba(255,255,255,.94); text-align: center; box-shadow: 0 4px 14px rgba(28,57,66,.035); }
.k4-step-card > i { display: block; margin-bottom: 4px; color: #169275; font-size: 37.5px; }
.k4-step-card > b { display: block; margin-bottom: 3px; color: #0d7a66; font-size: 13.75px; }
.k4-step-card h3 { min-height: 34px; margin: 0 0 8px; color: var(--k4-navy); font-size: 14.38px; line-height: 1.35; }
.k4-step-card p { margin: 0; font-size: 11.5px; line-height: 1.52; }

/* Fitotherapy */
.k4-fit-section { padding-top: 24px; padding-bottom: 23px; }
.k4-fit-grid { display: grid; grid-template-columns: .82fr 1.65fr; gap: 35px; align-items: center; }
.k4-fit-copy h2 { margin: 0 0 9px; font-size: 31.25px; }
.k4-fit-copy p { margin: 0; font-size: 13.13px; line-height: 1.55; }
.k4-fit-copy img { width: 100%; max-width: 360px; height: 145px; margin-top: 9px; object-fit: cover; object-position: center; }
.k4-four-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.k4-four-grid .k4-step-card { min-height: 170px; }
.k4-wide-btn { width: min(390px,100%); margin: 12px auto 0; display: flex; }

/* Nutrition */
.k4-nutrition-section { padding-top: 25px; padding-bottom: 20px; background: #fbfcfc; }
.k4-nutrition-grid { display: grid; grid-template-columns: 250px 1fr; gap: 35px; align-items: center; }
.k4-food-img { width: 250px; height: 155px; object-fit: cover; object-position: center; }
.k4-five-grid.mini { gap: 12px; }
.k4-mini-card { min-height: 122px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 14px 8px; border: 1px solid var(--k4-border); border-radius: 9px; background: #fff; text-align: center; }
.k4-mini-card i { color: #159174; font-size: 38.75px; }
.k4-mini-card strong { color: var(--k4-navy); font-size: 13.13px; line-height: 1.35; }

/* Stories */
.k4-stories-section { padding-top: 12px; padding-bottom: 30px; }
.k4-stories-layout { display: grid; grid-template-columns: 230px 1fr; gap: 25px; align-items: end; }
.k4-story-food img { width: 230px; height: 165px; object-fit: cover; }
.k4-stories-content h2 { margin: 0 0 13px; font-size: 30px; }
.k4-stories-grid { display: grid; grid-template-columns: 1.1fr .8fr .9fr; gap: 14px; align-items: stretch; }
.k4-video-card { position: relative; overflow: hidden; min-height: 150px; border-radius: 8px; background: #142d36; }
.k4-video-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.03); }
.k4-video-card::after { content:""; position:absolute; inset:42% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.72)); }
.k4-video-card strong { position: absolute; left: 13px; bottom: 12px; z-index: 2; color: #fff; font-size: 13.75px; line-height: 1.35; }
.k4-play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 43px; height: 43px; transform: translate(-50%,-50%); display: inline-flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; color: #fff; background: rgba(0,0,0,.16); font-size: 27.5px; }
.k4-play.small { width: 29px; height: 29px; font-size: 18.75px; }
.k4-small-videos { display: flex; flex-direction: column; gap: 10px; }
.k4-video-row { min-height: 70px; display: grid; grid-template-columns: 100px 1fr; gap: 9px; align-items: center; border-radius: 7px; background: #f3f5f6; overflow: hidden; }
.k4-video-row > div { position: relative; height: 70px; }
.k4-video-row img { width: 100%; height: 100%; object-fit: cover; }
.k4-video-row p { margin: 0; padding-right: 8px; color: var(--k4-navy); font-size: 11.88px; font-weight: 600; line-height: 1.35; }
.k4-video-row small { float: right; color: #8b959e; font-size: 10px; font-weight: 400; }
.k4-story-actions { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.k4-story-actions .k4-btn { width: 100%; }
.k4-info-note { display: grid; grid-template-columns: 25px 1fr; gap: 8px; padding: 12px; border: 1px solid var(--k4-border); border-radius: 8px; background: #fff; }
.k4-info-note i { color: #527291; font-size: 25px; }
.k4-info-note p { margin: 0; font-size: 10.63px; line-height: 1.45; }

/* Report form */
.k4-report-section { padding-top: 22px; background: #f7f9fa; }
.k4-report-head { text-align: center; margin-bottom: 14px; }
.k4-report-head h2 { margin: 0 0 4px; font-size: 31.25px; }
.k4-report-head p { margin: 0; font-size: 11.88px; }
.k4-report-form { display: grid; grid-template-columns: 1.55fr .75fr .7fr; gap: 12px; padding: 18px; border: 1px solid #e3e8ea; border-radius: 10px; background: rgba(255,255,255,.82); }
.k4-form-main { display: flex; flex-direction: column; gap: 8px; }
.k4-field-grid { display: grid; grid-template-columns: .85fr .85fr 1.2fr; gap: 8px; }
.k4-report-form input,
.k4-report-form textarea { width: 100%; border: 1px solid #e2e8ea; border-radius: 6px; background: #fff; color: #415468; font: inherit; font-size: 11.88px; outline: 0; }
.k4-report-form input { height: 40px; padding: 0 11px; }
.k4-report-form textarea { min-height: 77px; padding: 11px; resize: vertical; }
.k4-report-form input:focus,
.k4-report-form textarea:focus { border-color: #77b7a7; box-shadow: 0 0 0 3px rgba(45,139,113,.08); }
.k4-upload-panel { padding: 10px 12px; border-radius: 6px; background: #fff; border: 1px solid #e5eaec; }
.k4-upload-panel h3 { margin: 0; color: var(--k4-navy); font-size: 15px; }
.k4-upload-panel > p { margin: 2px 0 8px; font-size: 10px; }
.k4-upload-inner { display: grid; grid-template-columns: 1fr .92fr; gap: 8px; align-items: stretch; }
.k4-upload-inner ul { margin: 0; padding: 0; list-style: none; }
.k4-upload-inner li { display: flex; gap: 5px; align-items: center; margin: 4px 0; color: #405268; font-size: 10.63px; }
.k4-upload-inner li i { color: #07935a; font-size: 15px; }
.k4-dropzone { min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px; border: 1px dashed #bccbd0; border-radius: 7px; color: #44627e; text-align: center; cursor: pointer; }
.k4-dropzone input { display: none; }
.k4-dropzone i { font-size: 38.75px; color: #3b76b5; }
.k4-dropzone span { font-size: 9.38px; line-height: 1.35; }
.k4-dropzone small { color: #8d9aa4; font-size: 8.13px; }
.k4-form-actions { display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.k4-form-actions .k4-btn { width: 100%; min-height: 43px; }
.k4-privacy { display: flex; align-items: center; gap: 7px; justify-content: center; margin-top: 3px; color: #608091; font-size: 11.25px; }
.k4-privacy i { color: #075d5f; font-size: 22.5px; }

/* FAQ */
.k4-faq-section { padding-top: 17px; padding-bottom: 26px; }
.k4-faq-section h2 { margin: 0 0 14px; font-size: 28.75px; }
.k4-faq-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px 12px; }
.k4-faq { border: 1px solid #e0e7e9; border-radius: 6px; overflow: hidden; background: #fff; }
.k4-faq button { width: 100%; min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 0; color: #31485d; background: #fff; font: inherit; font-size: 11.25px; font-weight: 600; text-align: left; cursor: pointer; }
.k4-faq button i { color: #0d6780; font-size: 20px; transition: transform .2s ease; }
.k4-faq > div { display: none; padding: 0 12px 11px; }
.k4-faq.open > div { display: block; }
.k4-faq.open button i { transform: rotate(45deg); }
.k4-faq p { margin: 0; font-size: 11px; line-height: 1.5; }

/* Bottom CTA */
.k4-bottom-cta { padding: 0 0 28px; background: #fff; }
.k4-bottom-cta-inner { min-height: 122px; display: grid; grid-template-columns: 70px 1fr 280px; gap: 22px; align-items: center; padding: 22px 28px; border-radius: 16px; background: linear-gradient(90deg,#063c47,#034954 65%,#06404b); box-shadow: 0 10px 24px rgba(4,56,65,.12); }
.k4-cta-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); color: #79c8b9; font-size: 41.25px; }
.k4-bottom-cta h2 { margin: 0 0 4px; color: #fff; font-size: 32.5px; }
.k4-bottom-cta p { max-width: 700px; margin: 0; color: rgba(255,255,255,.86); font-size: 12.5px; line-height: 1.5; }
.k4-bottom-actions { display: flex; flex-direction: column; gap: 8px; }
.k4-bottom-actions .k4-btn { width: 100%; }

/* Responsive */
@media (max-width: 1100px) {
  .k4-hero-grid { grid-template-columns: 1fr; }
  .k4-hero-card { max-width: 720px; }
  .k4-six-grid { grid-template-columns: repeat(3,1fr); }
  .k4-profile-grid,
  .k4-molecular-grid,
  .k4-fit-grid { grid-template-columns: 1fr; }
  .k4-profile-flow { justify-content: flex-start; }
  .k4-molecular-copy { max-width: 600px; }
  .k4-nutrition-grid { grid-template-columns: 200px 1fr; }
  .k4-stories-layout { grid-template-columns: 1fr; }
  .k4-story-food { display: none; }
  .k4-report-form { grid-template-columns: 1fr 1fr; }
  .k4-form-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .k4-form-actions .k4-btn { width: auto; flex: 1; }
  .k4-privacy { min-width: 180px; }
}

@media (max-width: 820px) {
  .k4-wrap { width: min(100% - 28px, 680px); }
  .k4-hero { padding-top: 32px; }
  .k4-hero h1 { font-size: 48.75px; }
  .k4-metastasis-grid { grid-template-columns: 1fr; }
  .k4-six-grid { grid-template-columns: repeat(2,1fr); }
  .k4-profile-flow { flex-wrap: wrap; }
  .k4-profile-box { flex-basis: 100%; order: 3; }
  .k4-profile-node.final { order: 4; }
  .flow-arrow { display: none; }
  .k4-five-grid { grid-template-columns: repeat(2,1fr); }
  .k4-five-grid .k4-step-card:last-child { grid-column: 1 / -1; }
  .k4-four-grid { grid-template-columns: repeat(2,1fr); }
  .k4-nutrition-grid { grid-template-columns: 1fr; }
  .k4-five-grid.mini { grid-template-columns: repeat(2,1fr); }
  .k4-five-grid.mini .k4-mini-card:last-child { grid-column: 1 / -1; }
  .k4-stories-grid { grid-template-columns: 1fr; }
  .k4-report-form { grid-template-columns: 1fr; }
  .k4-field-grid { grid-template-columns: 1fr; }
  .k4-form-actions { grid-column: auto; flex-direction: column; }
  .k4-form-actions .k4-btn { width: 100%; }
  .k4-faq-grid { grid-template-columns: 1fr; }
  .k4-bottom-cta-inner { grid-template-columns: 1fr; text-align: center; }
  .k4-cta-icon { margin: 0 auto; }
  .k4-bottom-actions { width: min(360px,100%); margin: 0 auto; }
}

@media (max-width: 560px) {
  .k4-hero-card { padding-right: 105px; }
  .k4-colon-img { width: 115px; height: 205px; }
  .k4-six-grid,
  .k4-four-grid,
  .k4-five-grid,
  .k4-five-grid.mini { grid-template-columns: 1fr; }
  .k4-five-grid .k4-step-card:last-child,
  .k4-five-grid.mini .k4-mini-card:last-child { grid-column: auto; }
  .k4-profile-box { grid-template-columns: repeat(2,1fr); border-radius: 24px; }
  .k4-profile-box span { aspect-ratio: auto; min-height: 72px; border-radius: 50%; }
  .k4-molecular-copy { padding-left: 70px; }
  .k4-dna-img { width: 95px; }
  .k4-copy-actions .k4-btn { width: 100%; min-width: 0 !important; }
  .k4-upload-inner { grid-template-columns: 1fr; }
  .k4-video-row { grid-template-columns: 110px 1fr; }
}


/* updated generated media */
.k4-colon-img{object-fit:cover; object-position:center;}
.k4-dna-img{object-fit:contain; object-position:left center;}
.k4-fit-copy img{object-fit:contain; object-position:center;}
.k4-food-img,.k4-story-food img{object-fit:cover; object-position:center;}
.k4-video-card img{object-position:center center;}
.k4-video-row img{object-position:center top;}

/* Hero CTA artwork: use the source as a full card background without cropping it into a narrow strip. */
.k4-hero-card .k4-colon-img{
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  mix-blend-mode:normal;
  opacity:.68;
}
.k4-hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(90deg,rgba(3,43,52,.98) 0%,rgba(3,43,52,.92) 48%,rgba(3,43,52,.35) 72%,rgba(3,43,52,.06) 100%);
  pointer-events:none;
}
.k4-hero-card-copy{max-width:58%;z-index:3}
@media(max-width:560px){
  .k4-hero-card{padding-right:24px}
  .k4-hero-card-copy{max-width:72%}
  .k4-hero-card .k4-colon-img{width:100%;height:100%}
}