/*
 * Haşere Market — İlaçlama Hizmetleri Ortak Ön Yüz Sistemi
 * Dosya: hm-service-v1.css
 * Sürüm: 1.0
 * Tarih: 19.08.2026
 *
 * Mimari:
 * - Tüm seçiciler .hmServicePage altında scope edilir.
 * - Sayfa HTML'i içerik + semantik yapı taşır.
 * - Ortak görünüm Firebase'deki bu dosyadan gelir.
 * - Kritik içerik JavaScript'e bağlı değildir.
 */

/* =========================================================
   01. KÖK / TOKENLAR
   ========================================================= */

.hmServicePage,
.hmServicePage * {
  box-sizing: border-box;
}

.hmServicePage {
  --hm-service-green: #23661f;
  --hm-service-green-dark: #114616;
  --hm-service-green-deep: #0b3511;
  --hm-service-green-soft: #edf6ec;
  --hm-service-green-soft-2: #f7faf6;

  --hm-service-orange: #e85a22;
  --hm-service-orange-dark: #c94818;
  --hm-service-orange-soft: #fff4ee;

  --hm-service-blue: #236f9d;
  --hm-service-blue-dark: #185879;
  --hm-service-blue-soft: #eef6fa;

  --hm-service-ink: #172019;
  --hm-service-text: #354139;
  --hm-service-muted: #6b766f;

  --hm-service-line: #e2e8e3;
  --hm-service-line-strong: #d1dbd3;

  --hm-service-white: #ffffff;
  --hm-service-soft: #f7f9f7;
  --hm-service-warm: #fff9f5;

  --hm-service-radius-xs: 8px;
  --hm-service-radius-sm: 11px;
  --hm-service-radius: 16px;
  --hm-service-radius-lg: 22px;

  --hm-service-shadow-soft: 0 7px 22px rgba(23, 32, 25, .045);
  --hm-service-shadow: 0 14px 38px rgba(23, 32, 25, .075);

  --hm-service-wrap: 1240px;
  --hm-service-reading: 760px;
  --hm-service-gutter: clamp(14px, 2.2vw, 28px);

  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: clip;

  color: var(--hm-service-text);
  background: var(--hm-service-white);
  font: inherit;
  line-height: 1.58;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

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

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

.hmServicePage button,
.hmServicePage input,
.hmServicePage textarea,
.hmServicePage select {
  font: inherit;
}

.hmServicePage button {
  color: inherit;
}

.hmServicePage [hidden] {
  display: none !important;
}

.hmServicePage :where(a, button, summary):focus-visible {
  outline: 3px solid rgba(35, 111, 157, .28);
  outline-offset: 3px;
}

.hmServicePage :where(h1, h2, h3, p, li, a, span) {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.hmServicePage h1,
.hmServicePage h2,
.hmServicePage h3 {
  color: var(--hm-service-ink);
  font-weight: 800;
  letter-spacing: -.025em;
}


/* =========================================================
   02. GENEL LAYOUT
   ========================================================= */

.hmServicePage .hmServiceWrap {
  width: min(var(--hm-service-wrap), calc(100% - (var(--hm-service-gutter) * 2)));
  margin-inline: auto;
  min-width: 0;
}

.hmServicePage .hmServiceReading {
  width: min(var(--hm-service-reading), 100%);
  margin-inline: auto;
}

.hmServicePage .hmServiceSection {
  padding-block: clamp(38px, 5vw, 70px);
}

.hmServicePage .hmServiceSection--compact {
  padding-block: clamp(26px, 3.5vw, 44px);
}

.hmServicePage .hmServiceSection--soft {
  background: var(--hm-service-soft);
  border-block: 1px solid #edf1ed;
}

.hmServicePage .hmServiceSection--greenSoft {
  background: var(--hm-service-green-soft-2);
  border-block: 1px solid #e9efea;
}

.hmServicePage .hmServiceSection--warm {
  background: var(--hm-service-warm);
  border-block: 1px solid #f4ebe5;
}

.hmServicePage .hmServiceSectionHead {
  max-width: 800px;
  margin: 0 auto clamp(20px, 3vw, 32px);
  text-align: center;
}

.hmServicePage .hmServiceSectionHead--left {
  margin-inline: 0;
  text-align: left;
}

.hmServicePage .hmServiceEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--hm-service-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.hmServicePage .hmServiceEyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}

.hmServicePage .hmServiceSectionHead h2 {
  margin: 0;
  font-size: clamp(23px, 2.7vw, 32px);
  line-height: 1.16;
}

.hmServicePage .hmServiceSectionHead p {
  margin: 9px auto 0;
  max-width: 730px;
  color: var(--hm-service-muted);
  font-size: clamp(14px, 1.2vw, 16px);
}

.hmServicePage .hmServiceSectionHead--left p {
  margin-inline: 0;
}

.hmServicePage .hmServiceLead {
  color: var(--hm-service-muted);
  font-size: clamp(15px, 1.35vw, 17px);
}


/* =========================================================
   03. BREADCRUMB
   ========================================================= */

.hmServicePage .hmServiceBreadcrumb {
  padding-block: 14px 10px;
  color: var(--hm-service-muted);
  font-size: 12.5px;
}

.hmServicePage .hmServiceBreadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hmServicePage .hmServiceBreadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hmServicePage .hmServiceBreadcrumb li:not(:last-child)::after {
  content: "/";
  color: #a1aaa4;
}

.hmServicePage .hmServiceBreadcrumb a:hover {
  color: var(--hm-service-green);
}


/* =========================================================
   04. BUTONLAR / LİNKLER
   ========================================================= */

.hmServicePage .hmServiceActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.hmServicePage .hmServiceBtn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--hm-service-radius-sm);
  background: var(--hm-service-white);
  color: var(--hm-service-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.hmServicePage .hmServiceBtn:hover {
  transform: translateY(-1px);
}

.hmServicePage .hmServiceBtn--green {
  background: var(--hm-service-green);
  color: #fff;
  box-shadow: 0 9px 22px rgba(35, 102, 31, .17);
}

.hmServicePage .hmServiceBtn--green:hover {
  background: var(--hm-service-green-dark);
}

.hmServicePage .hmServiceBtn--orange {
  background: var(--hm-service-orange);
  color: #fff;
  box-shadow: 0 9px 22px rgba(232, 90, 34, .16);
}

.hmServicePage .hmServiceBtn--orange:hover {
  background: var(--hm-service-orange-dark);
}

.hmServicePage .hmServiceBtn--blue {
  background: var(--hm-service-blue);
  color: #fff;
}

.hmServicePage .hmServiceBtn--blue:hover {
  background: var(--hm-service-blue-dark);
}

.hmServicePage .hmServiceBtn--outline {
  border-color: var(--hm-service-line-strong);
  background: var(--hm-service-white);
  color: var(--hm-service-green-dark);
}

.hmServicePage .hmServiceBtn--outline:hover {
  border-color: #b8c9ba;
  background: var(--hm-service-green-soft-2);
}

.hmServicePage .hmServiceBtn--white {
  background: rgba(255,255,255,.98);
  color: var(--hm-service-green-dark);
}

.hmServicePage .hmServiceTextLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hm-service-blue);
  font-size: 13.5px;
  font-weight: 800;
}

.hmServicePage .hmServiceTextLink::after {
  content: "→";
  transition: transform .18s ease;
}

.hmServicePage .hmServiceTextLink:hover::after {
  transform: translateX(3px);
}


/* =========================================================
   05. HERO
   ========================================================= */

.hmServicePage .hmServiceHero {
  position: relative;
  isolation: isolate;
  min-height: clamp(450px, 42vw, 560px);
  overflow: hidden;
  background: #f3f6f3;
  border-bottom: 1px solid var(--hm-service-line);
}

.hmServicePage .hmServiceHero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hmServicePage .hmServiceHero__media picture,
.hmServicePage .hmServiceHero__media img {
  width: 100%;
  height: 100%;
}

.hmServicePage .hmServiceHero__media img {
  object-fit: cover;
  object-position: center right;
}

.hmServicePage .hmServiceHero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.985) 0%,
      rgba(255,255,255,.955) 33%,
      rgba(255,255,255,.78) 50%,
      rgba(255,255,255,.22) 72%,
      rgba(255,255,255,.04) 100%);
}

.hmServicePage .hmServiceHero__inner {
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(0, 590px) 1fr;
  align-items: center;
  gap: 28px;
  padding-block: clamp(34px, 5vw, 62px);
}

.hmServicePage .hmServiceHero__content {
  max-width: 590px;
}

.hmServicePage .hmServiceHero__tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 12px;
  padding: 5px 11px;
  border: 1px solid var(--hm-service-line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: var(--hm-service-green-dark);
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: 0 5px 16px rgba(23,32,25,.04);
}

.hmServicePage .hmServiceHero h1 {
  margin: 0;
  max-width: 620px;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.04;
}

.hmServicePage .hmServiceHero h1 span {
  color: var(--hm-service-green);
}

.hmServicePage .hmServiceHero__lead {
  max-width: 560px;
  margin: 15px 0 0;
  color: #39463e;
  font-size: clamp(15px, 1.45vw, 17px);
}

.hmServicePage .hmServiceHero__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  margin: 19px 0 0;
  padding: 0;
  list-style: none;
}

.hmServicePage .hmServiceHero__points li {
  position: relative;
  padding-left: 20px;
  color: #2e3a32;
  font-size: 13.5px;
  font-weight: 700;
}

.hmServicePage .hmServiceHero__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--hm-service-green);
  box-shadow: 0 0 0 4px rgba(35,102,31,.10);
}

.hmServicePage .hmServiceHero .hmServiceActions {
  margin-top: 22px;
}


/* =========================================================
   06. KISA GÜVEN BANDI
   ========================================================= */

.hmServicePage .hmTrustBar {
  position: relative;
  z-index: 3;
  margin-top: -18px;
}

.hmServicePage .hmTrustBar__grid {
  display: grid;
  grid-template-columns: repeat(var(--hm-trust-columns, 4), minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--hm-service-line);
  border-radius: var(--hm-service-radius);
  background: #fff;
  box-shadow: var(--hm-service-shadow);
}

.hmServicePage .hmTrustBar__item {
  min-width: 0;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-right: 1px solid var(--hm-service-line);
}

.hmServicePage .hmTrustBar__item:last-child {
  border-right: 0;
}

.hmServicePage .hmTrustBar__item img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
}

.hmServicePage .hmTrustBar__item strong {
  display: block;
  color: var(--hm-service-ink);
  font-size: 13px;
  line-height: 1.25;
}


/* =========================================================
   07. 30 SANİYELİK KARAR ÖZETİ
   ========================================================= */

.hmServicePage .hmDecisionSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--hm-service-line);
  border-radius: var(--hm-service-radius-lg);
  background: #fff;
  box-shadow: var(--hm-service-shadow-soft);
}

.hmServicePage .hmDecisionCard {
  min-width: 0;
  padding: clamp(18px, 2.3vw, 26px);
  border-right: 1px solid var(--hm-service-line);
}

.hmServicePage .hmDecisionCard:last-child {
  border-right: 0;
}

.hmServicePage .hmDecisionCard__label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-bottom: 9px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--hm-service-green-soft);
  color: var(--hm-service-green-dark);
  font-size: 11.5px;
  font-weight: 800;
}

.hmServicePage .hmDecisionCard--blue .hmDecisionCard__label {
  background: var(--hm-service-blue-soft);
  color: var(--hm-service-blue-dark);
}

.hmServicePage .hmDecisionCard--orange .hmDecisionCard__label {
  background: var(--hm-service-orange-soft);
  color: #994219;
}

.hmServicePage .hmDecisionCard h3 {
  margin: 0 0 7px;
  font-size: 17px;
  line-height: 1.24;
}

.hmServicePage .hmDecisionCard p {
  margin: 0;
  color: var(--hm-service-muted);
  font-size: 13.5px;
}


/* =========================================================
   08. PROBLEM / RİSK KARTLARI
   ========================================================= */

.hmServicePage .hmProblemGrid {
  display: grid;
  grid-template-columns: repeat(var(--hm-problem-columns, 4), minmax(0, 1fr));
  gap: 16px;
}

.hmServicePage .hmProblemCard {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hm-service-line);
  border-radius: var(--hm-service-radius);
  background: #fff;
  box-shadow: var(--hm-service-shadow-soft);
}

.hmServicePage .hmProblemCard__media {
  position: relative;
  aspect-ratio: 4 / 2.6;
  overflow: hidden;
  background: var(--hm-service-green-soft);
}

.hmServicePage .hmProblemCard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hmServicePage .hmProblemCard__icon {
  position: absolute;
  left: 14px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 5px 15px rgba(23,32,25,.09);
}

.hmServicePage .hmProblemCard__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.hmServicePage .hmProblemCard__body {
  padding: 15px 16px 17px;
}

.hmServicePage .hmProblemCard h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.24;
}

.hmServicePage .hmProblemCard p {
  margin: 0;
  color: var(--hm-service-muted);
  font-size: 13.5px;
}

.hmServicePage .hmProblemCard__note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  color: var(--hm-service-green-dark);
  font-size: 12px;
  font-weight: 800;
}

.hmServicePage .hmProblemCard__note::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 99px;
}


/* =========================================================
   09. KENDİN UYGULA / PROFESYONEL DESTEK KARARI
   ========================================================= */

.hmServicePage .hmSplitChoice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.hmServicePage .hmSplitChoiceCard {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hm-service-line);
  border-radius: var(--hm-service-radius-lg);
  background: #fff;
  box-shadow: var(--hm-service-shadow);
  padding: clamp(22px, 3vw, 32px);
}

.hmServicePage .hmSplitChoiceCard--service {
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.10), transparent 30%),
    linear-gradient(135deg, var(--hm-service-green-deep), var(--hm-service-green));
}

.hmServicePage .hmSplitChoiceCard--service h2,
.hmServicePage .hmSplitChoiceCard--service h3 {
  color: #fff;
}

.hmServicePage .hmSplitChoiceCard--self {
  background: linear-gradient(135deg, #ffffff 0%, var(--hm-service-blue-soft) 100%);
}

.hmServicePage .hmSplitChoiceCard__content {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.hmServicePage .hmSplitChoiceCard--withMedia .hmSplitChoiceCard__content {
  max-width: 58%;
}

.hmServicePage .hmSplitChoiceCard h2,
.hmServicePage .hmSplitChoiceCard h3 {
  margin: 0 0 9px;
  font-size: clamp(21px, 2.3vw, 28px);
  line-height: 1.16;
}

.hmServicePage .hmSplitChoiceCard p {
  margin: 0;
  color: var(--hm-service-muted);
  font-size: 14px;
}

.hmServicePage .hmSplitChoiceCard--service p {
  color: rgba(255,255,255,.88);
}

.hmServicePage .hmSplitChoiceCard__list {
  display: grid;
  gap: 7px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.hmServicePage .hmSplitChoiceCard__list li {
  position: relative;
  padding-left: 19px;
  font-size: 13.5px;
}

.hmServicePage .hmSplitChoiceCard__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: currentColor;
}

.hmServicePage .hmSplitChoiceCard__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 16px;
}

.hmServicePage .hmSplitChoiceCard__actions {
  margin-top: 19px;
}

.hmServicePage .hmSplitChoiceCard__media {
  position: absolute;
  right: 14px;
  bottom: 0;
  width: min(40%, 290px);
  max-height: 88%;
  object-fit: contain;
  object-position: right bottom;
}

.hmServicePage .hmSelfApplyNote {
  margin-top: 15px;
  padding: 11px 13px;
  border: 1px solid #f1d8c8;
  border-radius: var(--hm-service-radius-sm);
  background: var(--hm-service-orange-soft);
  color: #7c421e;
  font-size: 12.5px;
  line-height: 1.45;
}


/* =========================================================
   10. YÖNTEMLER
   ========================================================= */

.hmServicePage .hmMethodGrid {
  display: grid;
  grid-template-columns: repeat(var(--hm-method-columns, 4), minmax(0, 1fr));
  gap: 14px;
}

.hmServicePage .hmMethodCard {
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 112px;
  padding: 17px;
  border: 1px solid var(--hm-service-line);
  border-radius: var(--hm-service-radius);
  background: #fff;
  box-shadow: var(--hm-service-shadow-soft);
}

.hmServicePage .hmMethodCard__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--hm-service-green-soft);
}

.hmServicePage .hmMethodCard__icon img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.hmServicePage .hmMethodCard h3 {
  margin: 1px 0 5px;
  color: var(--hm-service-green-dark);
  font-size: 15px;
  line-height: 1.23;
}

.hmServicePage .hmMethodCard p {
  margin: 0;
  color: var(--hm-service-muted);
  font-size: 12.8px;
}


/* =========================================================
   11. HİZMET SÜRECİ
   ========================================================= */

.hmServicePage .hmProcess {
  overflow: hidden;
  border: 1px solid var(--hm-service-line);
  border-radius: var(--hm-service-radius-lg);
  background: linear-gradient(180deg, #fff, var(--hm-service-green-soft-2));
  box-shadow: var(--hm-service-shadow-soft);
}

.hmServicePage .hmProcess__grid {
  display: grid;
  grid-template-columns: repeat(var(--hm-process-columns, 5), minmax(0, 1fr));
}

.hmServicePage .hmProcessStep {
  position: relative;
  min-width: 0;
  padding: clamp(18px, 2.3vw, 25px);
  border-right: 1px solid var(--hm-service-line);
}

.hmServicePage .hmProcessStep:last-child {
  border-right: 0;
}

.hmServicePage .hmProcessStep__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

.hmServicePage .hmProcessStep__num {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: var(--hm-service-green);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.hmServicePage .hmProcessStep__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #d8e6d9;
  border-radius: 99px;
  background: #fff;
}

.hmServicePage .hmProcessStep__icon img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.hmServicePage .hmProcessStep h3 {
  margin: 0 0 5px;
  font-size: 14.5px;
}

.hmServicePage .hmProcessStep p {
  margin: 0;
  color: var(--hm-service-muted);
  font-size: 12.5px;
}


/* =========================================================
   12. MEKÂN / DİĞER HİZMETLER YATAY RAIL
   ========================================================= */

.hmServicePage .hmRailBox {
  position: relative;
  min-width: 0;
}

.hmServicePage .hmRailHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.hmServicePage .hmRailHead h2 {
  margin: 0;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.16;
}

.hmServicePage .hmRailHead p {
  margin: 5px 0 0;
  color: var(--hm-service-muted);
  font-size: 14px;
}

.hmServicePage .hmRailControls {
  display: flex;
  gap: 8px;
}

.hmServicePage .hmRailButton {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--hm-service-line);
  border-radius: 99px;
  background: #fff;
  color: var(--hm-service-green-dark);
  box-shadow: var(--hm-service-shadow-soft);
  cursor: pointer;
}

.hmServicePage .hmRailButton::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.hmServicePage .hmRailButton[data-hm-scroll-prev]::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.hmServicePage .hmRailButton[data-hm-scroll-next]::before {
  transform: rotate(45deg);
  margin-right: 3px;
}

.hmServicePage .hmRailButton:disabled {
  opacity: .34;
  cursor: default;
}

.hmServicePage .hmRail {
  display: flex;
  gap: 13px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 12px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #cbd6cc #edf1ed;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.hmServicePage .hmRail::-webkit-scrollbar {
  height: 6px;
}

.hmServicePage .hmRail::-webkit-scrollbar-track {
  border-radius: 99px;
  background: #edf1ed;
}

.hmServicePage .hmRail::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: #cbd6cc;
}

.hmServicePage .hmAreaCard,
.hmServicePage .hmRelatedCard,
.hmServicePage .hmCaseCard {
  scroll-snap-align: start;
  flex: 0 0 var(--hm-rail-card-width, 210px);
  min-width: var(--hm-rail-card-width, 210px);
}

.hmServicePage .hmAreaCard,
.hmServicePage .hmRelatedCard {
  overflow: hidden;
  border: 1px solid var(--hm-service-line);
  border-radius: var(--hm-service-radius);
  background: #fff;
  box-shadow: var(--hm-service-shadow-soft);
}

.hmServicePage .hmAreaCard__media,
.hmServicePage .hmRelatedCard__media {
  aspect-ratio: 4 / 2.65;
  overflow: hidden;
  background: var(--hm-service-green-soft);
}

.hmServicePage .hmAreaCard__media img,
.hmServicePage .hmRelatedCard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hmServicePage .hmAreaCard__body,
.hmServicePage .hmRelatedCard__body {
  padding: 13px 14px 15px;
}

.hmServicePage .hmAreaCard h3,
.hmServicePage .hmRelatedCard h3 {
  margin: 0 0 5px;
  font-size: 14.5px;
  line-height: 1.23;
}

.hmServicePage .hmAreaCard p,
.hmServicePage .hmRelatedCard p {
  margin: 0;
  color: var(--hm-service-muted);
  font-size: 12.4px;
}

.hmServicePage .hmRelatedCard:hover {
  border-color: #c9d8ca;
}


/* =========================================================
   13. BİLGİ / DERİN LİNK AĞI
   ========================================================= */

.hmServicePage .hmKnowledgeGrid {
  display: grid;
  grid-template-columns: repeat(var(--hm-knowledge-columns, 4), minmax(0, 1fr));
  gap: 14px;
}

.hmServicePage .hmKnowledgeCard {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--hm-service-line);
  border-radius: var(--hm-service-radius);
  background: #fff;
  box-shadow: var(--hm-service-shadow-soft);
}

.hmServicePage .hmKnowledgeCard__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--hm-service-green-soft);
}

.hmServicePage .hmKnowledgeCard__icon img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.hmServicePage .hmKnowledgeCard h3 {
  margin: 0 0 5px;
  font-size: 14.5px;
}

.hmServicePage .hmKnowledgeCard p {
  margin: 0 0 8px;
  color: var(--hm-service-muted);
  font-size: 12.6px;
}


/* =========================================================
   14. GERÇEK VAKA
   ========================================================= */

.hmServicePage .hmCaseGrid {
  display: grid;
  grid-template-columns: repeat(var(--hm-case-columns, 3), minmax(0, 1fr));
  gap: 16px;
}

.hmServicePage .hmCaseCard {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hm-service-line);
  border-radius: var(--hm-service-radius);
  background: #fff;
  box-shadow: var(--hm-service-shadow-soft);
}

.hmServicePage .hmCaseCard__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hm-service-green-soft);
}

.hmServicePage .hmCaseCard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hmServicePage .hmCaseCard__body {
  padding: 15px;
}

.hmServicePage .hmCaseCard__meta {
  margin-bottom: 7px;
  color: var(--hm-service-green);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.hmServicePage .hmCaseCard h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
}

.hmServicePage .hmCaseCard p {
  margin: 0;
  color: var(--hm-service-muted);
  font-size: 12.8px;
}


/* =========================================================
   15. SSS / DETAILS
   ========================================================= */

.hmServicePage .hmFaq {
  overflow: hidden;
  border: 1px solid var(--hm-service-line);
  border-radius: var(--hm-service-radius);
  background: #fff;
  box-shadow: var(--hm-service-shadow-soft);
}

.hmServicePage .hmFaq details {
  border-bottom: 1px solid var(--hm-service-line);
}

.hmServicePage .hmFaq details:last-child {
  border-bottom: 0;
}

.hmServicePage .hmFaq summary {
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 14px 48px 14px 17px;
  color: var(--hm-service-ink);
  font-size: 14px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.hmServicePage .hmFaq summary::-webkit-details-marker {
  display: none;
}

.hmServicePage .hmFaq summary::before,
.hmServicePage .hmFaq summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 99px;
  background: var(--hm-service-green);
  transform: translateY(-50%);
}

.hmServicePage .hmFaq summary::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform .18s ease;
}

.hmServicePage .hmFaq details[open] summary::after {
  transform: translateY(-50%) rotate(0deg);
}

.hmServicePage .hmFaq__answer {
  padding: 0 17px 16px;
  color: var(--hm-service-muted);
  font-size: 13.5px;
}

.hmServicePage .hmFaq__answer p {
  margin: 0;
}


/* =========================================================
   16. BİLGİ NOTLARI / UYARILAR
   ========================================================= */

.hmServicePage .hmNotice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--hm-service-line);
  border-radius: var(--hm-service-radius-sm);
  background: #fff;
}

.hmServicePage .hmNotice--green {
  border-color: #d8e7d9;
  background: var(--hm-service-green-soft-2);
}

.hmServicePage .hmNotice--orange {
  border-color: #f0d9ca;
  background: var(--hm-service-orange-soft);
}

.hmServicePage .hmNotice__icon {
  width: 28px;
  height: 28px;
}

.hmServicePage .hmNotice__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hmServicePage .hmNotice strong {
  display: block;
  margin-bottom: 3px;
  color: var(--hm-service-ink);
  font-size: 13.5px;
}

.hmServicePage .hmNotice p {
  margin: 0;
  color: var(--hm-service-muted);
  font-size: 12.8px;
}


/* =========================================================
   17. FINAL CTA
   ========================================================= */

.hmServicePage .hmFinalCta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(24px, 3.4vw, 38px);
  border-radius: var(--hm-service-radius-lg);
  background:
    radial-gradient(circle at 82% 10%, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(135deg, var(--hm-service-green-deep), var(--hm-service-green));
  color: #fff;
  box-shadow: var(--hm-service-shadow);
}

.hmServicePage .hmFinalCta__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.hmServicePage .hmFinalCta h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(23px, 2.9vw, 34px);
  line-height: 1.12;
}

.hmServicePage .hmFinalCta p {
  margin: 9px 0 0;
  max-width: 720px;
  color: rgba(255,255,255,.88);
  font-size: 14.5px;
}

.hmServicePage .hmFinalCta .hmServiceActions {
  margin-top: 18px;
}

.hmServicePage .hmFinalCta__media {
  width: min(260px, 26vw);
  max-height: 210px;
  align-self: end;
  object-fit: contain;
  object-position: right bottom;
}


/* =========================================================
   18. İKİLİ / ÜÇLÜ YARDIMCI GRIDLER
   ========================================================= */

.hmServicePage .hmGrid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.hmServicePage .hmGrid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.hmServicePage .hmPanel {
  min-width: 0;
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid var(--hm-service-line);
  border-radius: var(--hm-service-radius);
  background: #fff;
  box-shadow: var(--hm-service-shadow-soft);
}

.hmServicePage .hmPanel h2,
.hmServicePage .hmPanel h3 {
  margin: 0 0 8px;
}

.hmServicePage .hmPanel p {
  margin: 0;
  color: var(--hm-service-muted);
}


/* =========================================================
   19. MİKRO ETKİLEŞİM / DURUM
   ========================================================= */

.hmServicePage [data-hm-scroll] {
  scroll-padding-inline: 2px;
}

.hmServicePage [data-hm-scroll].is-at-start + .hmRailControls [data-hm-scroll-prev],
.hmServicePage .hmRailButton.is-disabled {
  opacity: .34;
}

.hmServicePage .hmServiceJsOnly {
  display: none;
}

.hmServicePage.hmServicePage--js .hmServiceJsOnly {
  display: initial;
}


/* =========================================================
   20. TABLET
   ========================================================= */

@media (max-width: 1080px) {
  .hmServicePage .hmTrustBar__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hmServicePage .hmTrustBar__item:nth-child(2n) {
    border-right: 0;
  }

  .hmServicePage .hmTrustBar__item {
    border-bottom: 1px solid var(--hm-service-line);
  }

  .hmServicePage .hmTrustBar__item:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .hmServicePage .hmProblemGrid,
  .hmServicePage .hmMethodGrid,
  .hmServicePage .hmKnowledgeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .hmServicePage .hmProcessStep {
    border-right: 1px solid var(--hm-service-line);
    border-bottom: 1px solid var(--hm-service-line);
  }

  .hmServicePage .hmProcessStep:nth-child(2n) {
    border-right: 0;
  }

  .hmServicePage .hmProcessStep:nth-last-child(-n+2) {
    border-bottom: 0;
  }

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


/* =========================================================
   21. MOBİL / KÜÇÜK TABLET
   ========================================================= */

@media (max-width: 760px) {
  .hmServicePage {
    --hm-service-gutter: 13px;
  }

  .hmServicePage .hmServiceSection {
    padding-block: 34px;
  }

  .hmServicePage .hmServiceSection--compact {
    padding-block: 25px;
  }

  .hmServicePage .hmServiceBreadcrumb {
    padding-block: 10px 6px;
    font-size: 11.5px;
  }

  .hmServicePage .hmServiceHero {
    min-height: 665px;
  }

  .hmServicePage .hmServiceHero__media img {
    object-position: center bottom;
  }

  .hmServicePage .hmServiceHero::after {
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.985) 0%,
        rgba(255,255,255,.965) 35%,
        rgba(255,255,255,.78) 54%,
        rgba(255,255,255,.28) 76%,
        rgba(255,255,255,.05) 100%);
  }

  .hmServicePage .hmServiceHero__inner {
    min-height: inherit;
    display: flex;
    align-items: flex-start;
    padding-block: 27px 22px;
  }

  .hmServicePage .hmServiceHero__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 610px;
  }

  .hmServicePage .hmServiceHero h1 {
    font-size: clamp(29px, 9vw, 36px);
  }

  .hmServicePage .hmServiceHero__lead {
    font-size: 14.5px;
  }

  .hmServicePage .hmServiceHero__points {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 15px;
  }

  .hmServicePage .hmServiceHero .hmServiceActions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: auto;
    gap: 9px;
  }

  .hmServicePage .hmServiceHero .hmServiceBtn {
    width: 100%;
    min-height: 50px;
  }

  .hmServicePage .hmTrustBar {
    margin-top: 0;
  }

  .hmServicePage .hmTrustBar__grid {
    grid-template-columns: 1fr;
    border-radius: 0;
    border-inline: 0;
    box-shadow: none;
  }

  .hmServicePage .hmTrustBar__item,
  .hmServicePage .hmTrustBar__item:nth-child(2n),
  .hmServicePage .hmTrustBar__item:nth-last-child(-n+2) {
    min-height: 58px;
    border-right: 0;
    border-bottom: 1px solid var(--hm-service-line);
  }

  .hmServicePage .hmTrustBar__item:last-child {
    border-bottom: 0;
  }

  .hmServicePage .hmDecisionSummary {
    grid-template-columns: 1fr;
  }

  .hmServicePage .hmDecisionCard {
    border-right: 0;
    border-bottom: 1px solid var(--hm-service-line);
  }

  .hmServicePage .hmDecisionCard:last-child {
    border-bottom: 0;
  }

  .hmServicePage .hmProblemGrid,
  .hmServicePage .hmMethodGrid,
  .hmServicePage .hmKnowledgeGrid,
  .hmServicePage .hmCaseGrid,
  .hmServicePage .hmGrid2,
  .hmServicePage .hmGrid3 {
    grid-template-columns: 1fr;
  }

  .hmServicePage .hmSplitChoice {
    grid-template-columns: 1fr;
  }

  .hmServicePage .hmSplitChoiceCard {
    padding: 21px;
  }

  .hmServicePage .hmSplitChoiceCard--withMedia .hmSplitChoiceCard__content {
    max-width: 100%;
  }

  .hmServicePage .hmSplitChoiceCard__media {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(88%, 300px);
    max-height: 240px;
    margin: 20px auto -21px;
    object-position: center bottom;
  }

  .hmServicePage .hmSplitChoiceCard__links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hmServicePage .hmProcess__grid {
    grid-template-columns: 1fr;
  }

  .hmServicePage .hmProcessStep,
  .hmServicePage .hmProcessStep:nth-child(2n),
  .hmServicePage .hmProcessStep:nth-last-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid var(--hm-service-line);
  }

  .hmServicePage .hmProcessStep:last-child {
    border-bottom: 0;
  }

  .hmServicePage .hmRailHead {
    align-items: flex-start;
  }

  .hmServicePage .hmRailControls {
    display: none;
  }

  .hmServicePage .hmAreaCard,
  .hmServicePage .hmRelatedCard,
  .hmServicePage .hmCaseCard {
    flex-basis: min(78vw, 255px);
    min-width: min(78vw, 255px);
  }

  .hmServicePage .hmFinalCta {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 22px;
  }

  .hmServicePage .hmFinalCta__media {
    width: min(230px, 82%);
    max-height: 190px;
    justify-self: center;
    object-position: center bottom;
    order: 2;
  }

  .hmServicePage .hmFinalCta .hmServiceActions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hmServicePage .hmFinalCta .hmServiceBtn {
    width: 100%;
  }
}


/* =========================================================
   22. ÇOK KÜÇÜK MOBİL
   ========================================================= */

@media (max-width: 390px) {
  .hmServicePage .hmServiceHero {
    min-height: 630px;
  }

  .hmServicePage .hmServiceHero__content {
    min-height: 575px;
  }

  .hmServicePage .hmServiceHero__tag {
    font-size: 11.5px;
  }
}


/* =========================================================
   23. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .hmServicePage *,
  .hmServicePage *::before,
  .hmServicePage *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}