/* ============================================================
   Servisdr — klimakombibakimservisi.com
   Concept: "Magazine Cover" — deep purple / coral / white.
   Display: Anton · Body: Figtree. Class prefix: mg (camelCase).
   ============================================================ */

/* ---- Fonts (self-hosted, latin + latin-ext, Turkish glyphs) ---- */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-017F;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-017F;
}

/* ---- Tokens ---- */
:root {
  --mgInk: #2E0A4A;
  --mgInkDeep: #1B0630;
  --mgInk2: #421770;
  --mgCoral: #FF5A4E;
  --mgCoralDeep: #E23B2C;
  --mgPaper: #FFFFFF;
  --mgLilac: #F3ECFA;
  --mgLilacEdge: #E6D8F5;
  --mgText: #2A1540;
  --mgMuted: #6E5C86;
  --mgLine: #E7DBF4;

  --mgDisplay: "Anton", "Figtree", system-ui, sans-serif;
  --mgBody: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --mgMax: 1240px;
  --mgGut: clamp(1.15rem, 0.6rem + 2.4vw, 3.25rem);
  --mgHeaderH: 76px;

  --mgEase: cubic-bezier(0.22, 1, 0.36, 1);
  --mgShadow: 0 26px 60px -30px rgba(27, 6, 48, 0.55);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  font-family: var(--mgBody);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  color: var(--mgText);
  background: var(--mgPaper);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.mgLocked { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
svg { display: block; }

:focus-visible {
  outline: 3px solid var(--mgCoral);
  outline-offset: 3px;
  border-radius: 2px;
}

.mgSkip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--mgCoral);
  color: #fff;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: 3px;
  transition: transform 0.2s var(--mgEase);
}
.mgSkip:focus { transform: translateY(0); }

.mgWrap {
  width: 100%;
  max-width: var(--mgMax);
  margin-inline: auto;
  padding-inline: var(--mgGut);
}

/* Reveal fail-safe: hidden only while html.mgJs is set (JS removes it / inline timeout) */
.mgReveal { opacity: 1; }
html.mgJs .mgReveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--mgEase), transform 0.7s var(--mgEase);
  transition-delay: calc(var(--mgD, 0) * 90ms);
}
html.mgJs .mgRevealIn { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.mgJs .mgReveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Kicker / department label (magazine device, not a chrome eyebrow) ---- */
.mgKicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mgDisplay);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  line-height: 1;
  color: var(--mgCoral);
  letter-spacing: 0.01em;
}
.mgKicker::before {
  content: "";
  width: clamp(28px, 5vw, 54px);
  height: 4px;
  background: var(--mgCoral);
  display: inline-block;
}
.mgKicker--paper { color: var(--mgInk); }
.mgKicker--paper::before { background: var(--mgInk); }

/* ---- Section shell + editorial heading ---- */
.mgSection { padding: clamp(4rem, 2.4rem + 6vw, 7.5rem) 0; position: relative; }
.mgSection--lilac { background: var(--mgLilac); }
.mgSection--tight { padding-block: clamp(2rem, 1rem + 3vw, 3.25rem); }

.mgSectionHead { max-width: 60ch; margin-bottom: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); }
.mgSectionHead--wide { max-width: 100%; }
.mgTitle {
  font-family: var(--mgDisplay);
  font-weight: 400;
  font-size: clamp(2.15rem, 1.35rem + 3.4vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.005em;
  color: var(--mgInk);
  margin-top: 1rem;
  text-wrap: balance;
}
.mgSection--dark .mgTitle,
.mgSection--dark .mgKicker--paper { color: #fff; }
.mgLede {
  margin-top: 1.15rem;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--mgMuted);
  max-width: 56ch;
}
.mgSection--dark .mgLede { color: rgba(255, 255, 255, 0.78); }

/* ---- Buttons ---- */
.mgBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 800;
  letter-spacing: 0.005em;
  padding: 0.95em 1.5em;
  border-radius: 3px;
  border: 2px solid transparent;
  transition: transform 0.18s var(--mgEase), background 0.18s var(--mgEase), color 0.18s var(--mgEase), box-shadow 0.18s var(--mgEase);
  line-height: 1.1;
  white-space: nowrap;
}
.mgBtn svg { width: 1.15em; height: 1.15em; flex: none; }
.mgBtn--coral { background: var(--mgCoral); color: #fff; box-shadow: 0 14px 30px -14px rgba(255, 90, 78, 0.9); }
.mgBtn--coral:hover { background: var(--mgCoralDeep); transform: translateY(-2px); }
.mgBtn--ink { background: var(--mgInk); color: #fff; }
.mgBtn--ink:hover { background: var(--mgInkDeep); transform: translateY(-2px); }
.mgBtn--ghost { border-color: currentColor; }
.mgBtn--ghost:hover { background: currentColor; }
.mgBtn--ghostInk { color: var(--mgInk); border-color: var(--mgInk); }
.mgBtn--ghostInk:hover { background: var(--mgInk); color: #fff; }
.mgBtn--onDark { background: #fff; color: var(--mgInk); }
.mgBtn--onDark:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.5); }
.mgBtn--block { width: 100%; justify-content: center; }
.mgBtn--lg { font-size: 1.05rem; padding: 1.05em 1.7em; }

/* Text link (no arrow glyph, magazine underline swipe) */
.mgLink {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 800;
  color: var(--mgInk);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--mgCoral), var(--mgCoral));
  background-size: 0% 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s var(--mgEase);
}
.mgLink:hover { background-size: 100% 3px; }
.mgLink svg { width: 0.9em; height: 0.9em; }
.mgSection--dark .mgLink { color: #fff; }

/* ============================================================
   TOPBAR
   ============================================================ */
.mgTopbar {
  background: var(--mgInkDeep);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  font-weight: 500;
}
.mgTopbar .mgWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding-block: 7px;
}
.mgTopbarL { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; align-items: center; }
.mgTopbarR { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; align-items: center; }
.mgTopbar b { color: var(--mgCoral); font-weight: 800; }
.mgTopbar a:hover { color: #fff; }
@media (max-width: 720px) {
  .mgTopbarHideSm { display: none; }
}

/* ============================================================
   HEADER / MASTHEAD
   ============================================================ */
.mgHeader {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--mgLine);
  transition: box-shadow 0.25s var(--mgEase), border-color 0.25s var(--mgEase);
}
.mgHeaderStuck { box-shadow: 0 12px 30px -20px rgba(27, 6, 48, 0.5); border-bottom-color: transparent; }
.mgHeader .mgWrap {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: var(--mgHeaderH);
}

.mgLogo { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; }
.mgLogoMark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--mgCoral);
  color: #fff;
  font-family: var(--mgDisplay);
  font-size: 1.7rem;
  border-radius: 4px;
  transform: rotate(-4deg);
  box-shadow: 4px 4px 0 var(--mgInk);
}
.mgLogoText { display: flex; flex-direction: column; line-height: 0.92; }
.mgLogoName { font-family: var(--mgDisplay); font-size: 1.4rem; color: var(--mgInk); letter-spacing: 0.01em; }
.mgLogoName span { color: var(--mgCoral); }
.mgLogoSub { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mgMuted); margin-top: 3px; }

.mgNav { display: none; }
.mgHeaderSpacer { margin-left: auto; }
.mgHeaderCta { display: none; }
.mgHeaderPhone {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}
.mgHeaderPhone small { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mgMuted); }
.mgHeaderPhone b { font-family: var(--mgDisplay); font-size: 1.25rem; color: var(--mgInk); font-weight: 400; white-space: nowrap; }

.mgBurger {
  margin-left: auto;
  width: 48px; height: 44px;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 0 11px;
  background: var(--mgInk);
  border: none; border-radius: 4px;
}
.mgBurger span { height: 2.5px; background: #fff; border-radius: 2px; transition: transform 0.2s var(--mgEase); }

@media (min-width: 1040px) {
  .mgNav { display: flex; align-items: center; gap: 0.15rem; }
  .mgBurger { display: none; }
  .mgHeaderPhone { display: flex; }
  .mgHeaderCta { display: inline-flex; }
  .mgHeaderSpacer { margin-left: auto; }
  .mgNavItem { position: relative; }
  .mgNavLink {
    display: inline-flex; align-items: center; gap: 0.3em;
    padding: 0.5rem 0.52rem;
    font-weight: 700; font-size: 0.9rem; color: var(--mgInk);
    border-radius: 3px; white-space: nowrap;
    transition: color 0.16s var(--mgEase), background 0.16s var(--mgEase);
  }
  .mgNavLink:hover { color: var(--mgCoral); }
  .mgNavCaret { width: 0.7em; height: 0.7em; opacity: 0.6; }
  .mgNavPanel {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 232px;
    background: #fff;
    border: 1px solid var(--mgLine);
    border-radius: 6px;
    box-shadow: var(--mgShadow);
    padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 0.18s var(--mgEase), transform 0.18s var(--mgEase), visibility 0.18s;
  }
  .mgNavItem:hover .mgNavPanel,
  .mgNavItem:focus-within .mgNavPanel { opacity: 1; visibility: visible; transform: translateY(0); }
  .mgNavPanel a { display: block; padding: 0.6rem 0.75rem; border-radius: 4px; font-weight: 600; font-size: 0.92rem; }
  .mgNavPanel a:hover { background: var(--mgLilac); color: var(--mgCoral); }
  .mgHeaderPhone { margin-left: 0.4rem; }
}

/* ============================================================
   DRAWER
   ============================================================ */
.mgScrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(27, 6, 48, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.35s var(--mgEase);
}
.mgScrimOpen { opacity: 1; }
.mgDrawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(400px, 90vw);
  background: var(--mgInk);
  color: #fff;
  padding: 1.4rem 1.5rem 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.42s var(--mgEase);
  display: flex; flex-direction: column; gap: 1rem;
}
.mgDrawerOpen { transform: translateX(0); }
.mgDrawerTop { display: flex; align-items: center; justify-content: space-between; }
.mgDrawerTop .mgLogoName { color: #fff; }
.mgDrawerTop .mgLogoSub { color: rgba(255, 255, 255, 0.6); }
.mgDrawerClose {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1); border: none; border-radius: 4px; color: #fff;
}
.mgDrawerClose svg { width: 22px; height: 22px; }
.mgDrawerNav { display: flex; flex-direction: column; }
.mgDrawerNav > a, .mgDrawerGroup > a {
  padding: 0.85rem 0;
  font-family: var(--mgDisplay); font-size: 1.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mgDrawerNav > a:hover { color: var(--mgCoral); }
.mgDrawerGroup { display: flex; flex-direction: column; }
.mgDrawerSub { display: flex; flex-direction: column; padding: 0.4rem 0 0.7rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.mgDrawerSub a { padding: 0.5rem 0; color: rgba(255, 255, 255, 0.78); font-weight: 600; }
.mgDrawerSub a:hover { color: #fff; }
.mgDrawerCta { margin-top: 0.4rem; }
.mgDrawerMeta { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; font-size: 0.9rem; }
.mgDrawerMeta div span { display: block; color: var(--mgCoral); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2px; }

/* ============================================================
   HERO — THE COVER
   ============================================================ */
.mgHero {
  position: relative;
  background: var(--mgInk);
  color: #fff;
  overflow: hidden;
  padding-top: clamp(2rem, 1rem + 4vw, 3.5rem);
  padding-bottom: clamp(3rem, 2rem + 5vw, 5rem);
  isolation: isolate;
}
.mgHero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(66, 23, 112, 0.9), transparent 55%),
    radial-gradient(90% 70% at 4% 100%, rgba(255, 90, 78, 0.16), transparent 60%);
}
/* diagonal coral wedge — the single bold structural gesture */
.mgHero::after {
  content: "";
  position: absolute; z-index: -1;
  right: -6%; top: -14%;
  width: 46%; height: 130%;
  background: var(--mgCoral);
  transform: skewX(-11deg);
  opacity: 0.16;
}
.mgHeroGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}
.mgHeroKicker { color: var(--mgCoral); }
.mgHeroTitle {
  font-family: var(--mgDisplay);
  font-weight: 400;
  font-size: clamp(3rem, 1.4rem + 11vw, 8.75rem);
  line-height: 0.86;
  letter-spacing: -0.01em;
  margin: 1.1rem 0 0;
  text-wrap: balance;
}
.mgHeroTitle em { font-style: normal; color: var(--mgCoral); }
.mgHeroText {
  margin-top: 1.4rem;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.mgHeroText strong { color: #fff; font-weight: 800; }
.mgHeroActions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }
.mgCoverLines { margin-top: 1.9rem; display: grid; gap: 0.7rem; }
.mgCoverLine {
  display: flex; align-items: center; gap: 0.75rem;
  font-weight: 700; font-size: 1.02rem;
  padding-left: 1rem;
  border-left: 4px solid var(--mgCoral);
}
.mgCoverLine svg { width: 1.15em; height: 1.15em; color: var(--mgCoral); flex: none; }

/* Cover photo + call-card */
.mgHeroMedia { position: relative; }
.mgHeroFrame {
  position: relative;
  border: 8px solid #fff;
  box-shadow: 22px 22px 0 rgba(255, 90, 78, 0.9);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  transform: rotate(1.4deg);
}
.mgHeroFrame img { width: 100%; height: 100%; object-fit: cover; }
.mgHeroStamp {
  position: absolute; left: -14px; top: 20px;
  background: var(--mgInkDeep); color: #fff;
  font-family: var(--mgDisplay); font-size: 0.9rem;
  padding: 0.5rem 0.9rem; border-radius: 3px;
  transform: rotate(-5deg);
  border: 2px solid var(--mgCoral);
}
.mgCallCard {
  position: relative;
  margin-top: -3.5rem;
  margin-left: auto;
  width: min(360px, 100%);
  background: #fff;
  color: var(--mgText);
  border-radius: 6px;
  padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: var(--mgShadow);
  transform: rotate(-1.5deg);
  z-index: 2;
}
.mgCallCardTitle { font-family: var(--mgDisplay); font-size: 1.5rem; color: var(--mgInk); line-height: 1; }
.mgCallCardSub { margin-top: 0.6rem; color: var(--mgMuted); font-size: 0.92rem; }
.mgCallCard .mgBtn { margin-top: 1rem; }
.mgCallList { margin-top: 1.1rem; display: grid; gap: 0.55rem; }
.mgCallList li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; font-weight: 600; }
.mgCallList svg { width: 1.05em; height: 1.05em; color: var(--mgCoral); flex: none; margin-top: 0.15em; }
.mgCallNote { margin-top: 1rem; font-size: 0.8rem; color: var(--mgMuted); }

@media (min-width: 940px) {
  .mgHeroGrid { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
  .mgHeroMedia { padding-top: 1rem; }
}

/* ============================================================
   STAT STRIP (kurumsal göstergeler) — on paper
   ============================================================ */
.mgStrip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--mgLine);
  border: 1px solid var(--mgLine);
  border-radius: 6px;
  overflow: hidden;
}
.mgStripItem { background: #fff; padding: clamp(1.3rem, 1rem + 1.5vw, 2rem) clamp(1rem, 0.6rem + 1vw, 1.6rem); }
.mgStripNum {
  font-family: var(--mgDisplay); color: var(--mgInk);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); line-height: 0.9;
  display: flex; align-items: baseline; gap: 0.08em;
  font-variant-numeric: tabular-nums;
}
.mgStripNum span:last-child { color: var(--mgCoral); font-size: 0.5em; }
.mgStripLabel { margin-top: 0.6rem; font-weight: 700; color: var(--mgMuted); font-size: 0.95rem; }
@media (min-width: 860px) { .mgStrip { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   SERVICES — editorial photo tiles
   ============================================================ */
.mgServices { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
@media (min-width: 720px) { .mgServices { grid-template-columns: repeat(2, 1fr); } }

.mgServiceCard {
  position: relative;
  background: #fff;
  border: 1px solid var(--mgLine);
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.28s var(--mgEase), box-shadow 0.28s var(--mgEase);
}
.mgServiceCard:hover { transform: translateY(-6px); box-shadow: var(--mgShadow); }
.mgServicePhoto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mgLilac); }
.mgServicePhoto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--mgEase); }
.mgServiceCard:hover .mgServicePhoto img { transform: scale(1.05); }
.mgServiceIndex {
  position: absolute; top: 0; left: 0;
  font-family: var(--mgDisplay); color: #fff;
  background: var(--mgInk);
  font-size: 1.35rem; line-height: 1;
  padding: 0.4rem 0.7rem;
  border-bottom-right-radius: 8px;
}
.mgServiceBody { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.mgServiceTitle { font-family: var(--mgDisplay); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); color: var(--mgInk); line-height: 1; }
.mgServiceTitle a:hover { color: var(--mgCoral); }
.mgServiceDesc { color: var(--mgMuted); font-size: 0.98rem; }
.mgTags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.mgTag {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em;
  padding: 0.3em 0.7em; border-radius: 999px;
  background: var(--mgLilac); color: var(--mgInk2);
}
.mgServiceFoot { margin-top: auto; padding-top: 0.4rem; }
.mgSectionCta { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }

/* ============================================================
   FEATURES — numbered dossier (a real sequence)
   ============================================================ */
.mgFeatures { display: grid; gap: clamp(1.25rem, 0.8rem + 2vw, 2rem); }
@media (min-width: 640px) { .mgFeatures { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mgFeatures { grid-template-columns: repeat(3, 1fr); } }
.mgFeature {
  position: relative;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  background: #fff;
  border: 1px solid var(--mgLine);
  border-radius: 8px;
  border-top: 5px solid var(--mgInk);
  transition: border-top-color 0.25s var(--mgEase), transform 0.25s var(--mgEase);
}
.mgFeature:hover { border-top-color: var(--mgCoral); transform: translateY(-4px); }
.mgFeatureNum {
  font-family: var(--mgDisplay); color: var(--mgLilacEdge);
  font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 0.8;
  -webkit-text-stroke: 1px var(--mgLilacEdge);
}
.mgFeature:hover .mgFeatureNum { color: var(--mgCoral); -webkit-text-stroke-color: var(--mgCoral); }
.mgFeatureTitle { font-family: var(--mgDisplay); font-size: 1.4rem; color: var(--mgInk); line-height: 1.02; margin-top: 0.5rem; }
.mgFeatureDesc { margin-top: 0.7rem; color: var(--mgMuted); font-size: 0.96rem; }

/* ============================================================
   ABOUT (kurumsal) — overlapping spread
   ============================================================ */
.mgAbout { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 940px) { .mgAbout { grid-template-columns: 0.95fr 1.05fr; } }
.mgAboutMedia { position: relative; }
.mgAboutMain {
  border-radius: 8px; overflow: hidden;
  border: 6px solid #fff; box-shadow: var(--mgShadow);
  aspect-ratio: 4 / 5;
}
.mgAboutMain img { width: 100%; height: 100%; object-fit: cover; }
.mgAboutInset {
  position: absolute; right: -10px; bottom: -24px;
  width: 42%; max-width: 208px;
  aspect-ratio: 1 / 1;
  border-radius: 6px; overflow: hidden;
  border: 5px solid var(--mgCoral);
  box-shadow: var(--mgShadow);
  transform: rotate(3deg);
  background: #fff;
}
.mgAboutInset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgBadge {
  position: absolute; left: -14px; top: 22px; z-index: 3;
  background: var(--mgInk); color: #fff;
  padding: 0.75rem 1rem; border-radius: 5px;
  max-width: 200px;
  box-shadow: var(--mgShadow);
  transform: rotate(-3deg);
}
.mgBadge b { font-family: var(--mgDisplay); font-size: 0.95rem; display: block; line-height: 1.05; }
.mgBadge small { font-size: 0.72rem; color: rgba(255, 255, 255, 0.72); }
.mgAboutText p { margin-top: 1.1rem; color: var(--mgText); }
.mgDefs { margin-top: 1.6rem; display: grid; gap: 0.9rem; }
.mgDef { display: flex; gap: 0.85rem; }
.mgDef svg { width: 1.4em; height: 1.4em; color: var(--mgCoral); flex: none; margin-top: 0.1em; }
.mgDef b { font-weight: 800; color: var(--mgInk); }
.mgDef span { color: var(--mgMuted); }
.mgAboutActions { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ============================================================
   DARK STATS (rakamlarla)
   ============================================================ */
.mgSection--dark { background: var(--mgInkDeep); color: #fff; }
.mgStatBand { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 0.6rem + 1.5vw, 2rem); }
@media (min-width: 900px) { .mgStatBand { grid-template-columns: repeat(4, 1fr); } }
.mgStat { padding-top: 1.4rem; border-top: 3px solid rgba(255, 255, 255, 0.18); }
.mgStatIcon { color: var(--mgCoral); }
.mgStatIcon svg { width: 30px; height: 30px; }
.mgStatNum {
  font-family: var(--mgDisplay); font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem); line-height: 0.9;
  margin-top: 0.7rem; display: flex; align-items: baseline; gap: 0.1em;
  font-variant-numeric: tabular-nums;
}
.mgStatNum span:last-child { color: var(--mgCoral); font-size: 0.42em; }
.mgStatLabel { margin-top: 0.5rem; color: rgba(255, 255, 255, 0.72); font-weight: 600; }

/* ============================================================
   PROCESS — numbered timeline (a real sequence)
   ============================================================ */
.mgSteps { display: grid; gap: clamp(1rem, 0.6rem + 1.5vw, 1.5rem); counter-reset: mgStep; }
@media (min-width: 720px) { .mgSteps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .mgSteps { grid-template-columns: repeat(5, 1fr); } }
.mgStep {
  position: relative;
  padding: 1.4rem 1.3rem;
  background: #fff; border: 1px solid var(--mgLine); border-radius: 8px;
}
.mgStepNum {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mgInk); color: #fff;
  font-family: var(--mgDisplay); font-size: 1.6rem; line-height: 1;
  border: 3px solid var(--mgCoral);
}
.mgStepTitle { font-family: var(--mgDisplay); font-size: 1.25rem; color: var(--mgInk); margin-top: 1rem; }
.mgStepDesc { margin-top: 0.5rem; color: var(--mgMuted); font-size: 0.92rem; }
.mgProcessCta {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  background: var(--mgInk); color: #fff;
  border-radius: 10px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
}
.mgProcessCta h3 { font-family: var(--mgDisplay); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1; }
.mgProcessCta p { margin-top: 0.5rem; color: rgba(255, 255, 255, 0.78); }

/* ============================================================
   BRANDS — index grid
   ============================================================ */
.mgBrands {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--mgLine);
  border: 1px solid var(--mgLine); border-radius: 8px; overflow: hidden;
}
@media (min-width: 640px) { .mgBrands { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .mgBrands { grid-template-columns: repeat(4, 1fr); } }
.mgBrand {
  background: #fff; padding: 1.2rem 1.25rem;
  display: flex; align-items: center; gap: 0.9rem;
  transition: background 0.2s var(--mgEase);
}
.mgBrand:hover { background: var(--mgLilac); }
.mgBrandInitial {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; border-radius: 5px;
  background: var(--mgInk); color: #fff;
  font-family: var(--mgDisplay); font-size: 1.5rem;
  transition: background 0.2s var(--mgEase);
}
.mgBrand:hover .mgBrandInitial { background: var(--mgCoral); }
.mgBrandName { font-family: var(--mgDisplay); font-size: 1.15rem; color: var(--mgInk); line-height: 1; }
.mgBrandCats { display: block; font-size: 0.78rem; color: var(--mgMuted); font-weight: 600; margin-top: 4px; }

/* ============================================================
   FAULT DIRECTORY — tabbed columns
   ============================================================ */
.mgFaults { display: grid; gap: clamp(1.25rem, 0.8rem + 2vw, 2rem); }
@media (min-width: 820px) { .mgFaults { grid-template-columns: repeat(3, 1fr); } }
.mgFaultCol {
  background: #fff; border: 1px solid var(--mgLine); border-radius: 8px;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.mgFaultColTitle {
  font-family: var(--mgDisplay); font-size: 1.35rem; color: var(--mgInk);
  padding-bottom: 0.8rem; margin-bottom: 0.4rem;
  border-bottom: 3px solid var(--mgCoral);
}
.mgFaultCol ul li {
  padding: 0.7rem 0; border-bottom: 1px solid var(--mgLine);
  display: flex; gap: 0.65rem; align-items: baseline;
  font-weight: 600; color: var(--mgText); font-size: 0.95rem;
}
.mgFaultCol ul li:last-child { border-bottom: none; }
.mgFaultCol ul li::before { content: ""; width: 7px; height: 7px; background: var(--mgCoral); border-radius: 50%; flex: none; transform: translateY(-1px); }

/* ============================================================
   REGIONS
   ============================================================ */
.mgRegions { display: grid; gap: clamp(1.25rem, 0.8rem + 2vw, 2rem); }
@media (min-width: 820px) { .mgRegions { grid-template-columns: repeat(3, 1fr); } }
.mgRegion {
  background: #fff; border: 1px solid var(--mgLine); border-radius: 8px; overflow: hidden;
}
.mgRegionHead { background: var(--mgInk); color: #fff; padding: 1.2rem 1.4rem; }
.mgRegionName { font-family: var(--mgDisplay); font-size: 1.7rem; line-height: 1; }
.mgRegionMeta { color: var(--mgCoral); font-weight: 800; font-size: 0.85rem; margin-top: 0.4rem; }
.mgRegionList { padding: 1.2rem 1.4rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem 1rem; }
.mgRegionList li { font-weight: 600; color: var(--mgText); font-size: 0.95rem; display: flex; gap: 0.5rem; align-items: center; }
.mgRegionList li::before { content: ""; width: 6px; height: 6px; background: var(--mgCoral); flex: none; }

/* ============================================================
   REVIEWS — static pull-quote grid (no autoplay)
   ============================================================ */
.mgReviews { display: grid; gap: clamp(1.25rem, 0.8rem + 2vw, 1.75rem); }
@media (min-width: 720px) { .mgReviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .mgReviews { grid-template-columns: repeat(3, 1fr); } }
.mgReview {
  background: #fff; border: 1px solid var(--mgLine); border-radius: 10px;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  display: flex; flex-direction: column; gap: 1.1rem;
  position: relative;
}
.mgReview::before {
  content: "\201C";
  font-family: var(--mgDisplay); color: var(--mgCoral);
  font-size: 3.4rem; line-height: 0.6; height: 0.55em; display: block;
}
.mgReviewText { color: var(--mgText); font-size: 1rem; line-height: 1.55; flex: 1; }
.mgReviewWho { display: flex; align-items: center; gap: 0.8rem; border-top: 1px solid var(--mgLine); padding-top: 1rem; }
.mgReviewInitials {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mgLilac); color: var(--mgInk);
  font-family: var(--mgDisplay); font-size: 1.1rem;
}
.mgReviewName { font-weight: 800; color: var(--mgInk); }
.mgReviewMeta { font-size: 0.82rem; color: var(--mgMuted); margin-top: 2px; }

/* ============================================================
   BLOG / KNOWLEDGE
   ============================================================ */
.mgPosts { display: grid; gap: clamp(1.25rem, 0.8rem + 2vw, 2rem); }
@media (min-width: 760px) { .mgPosts { grid-template-columns: repeat(3, 1fr); } }
.mgPost {
  background: #fff; border: 1px solid var(--mgLine); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.26s var(--mgEase), box-shadow 0.26s var(--mgEase);
}
.mgPost:hover { transform: translateY(-5px); box-shadow: var(--mgShadow); }
.mgPostPhoto { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.mgPostPhoto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--mgEase); }
.mgPost:hover .mgPostPhoto img { transform: scale(1.05); }
.mgPostCat {
  position: absolute; left: 12px; top: 12px;
  background: var(--mgCoral); color: #fff;
  font-family: var(--mgDisplay); font-size: 0.85rem;
  padding: 0.25rem 0.7rem; border-radius: 3px;
}
.mgPostBody { padding: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.mgPostMeta { font-size: 0.78rem; font-weight: 700; color: var(--mgMuted); display: flex; gap: 0.7rem; }
.mgPostTitle { font-family: var(--mgDisplay); font-size: 1.3rem; line-height: 1.05; color: var(--mgInk); }
.mgPostTitle a:hover { color: var(--mgCoral); }
.mgPostExcerpt { color: var(--mgMuted); font-size: 0.92rem; }
.mgPostFoot { margin-top: auto; padding-top: 0.3rem; }

/* ============================================================
   FAQ + sidebar
   ============================================================ */
.mgFaqGrid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
@media (min-width: 940px) { .mgFaqGrid { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.mgAccordion { border-top: 2px solid var(--mgInk); }
.mgAccItem { border-bottom: 1px solid var(--mgLine); }
.mgAccToggle {
  width: 100%; text-align: left; background: none; border: none;
  padding: 1.25rem 3rem 1.25rem 0;
  font-family: var(--mgDisplay); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  color: var(--mgInk); line-height: 1.1;
  position: relative;
}
.mgAccToggle::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  background: var(--mgCoral);
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform 0.25s var(--mgEase);
}
.mgAccItemOpen .mgAccToggle::after { transform: rotate(135deg); }
.mgAccPanel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--mgEase); }
.mgAccItemOpen .mgAccPanel { grid-template-rows: 1fr; }
.mgAccPanelInner { overflow: hidden; }
.mgAccPanelInner p { padding: 0 0 1.4rem; color: var(--mgMuted); max-width: 62ch; }

.mgSidebar { display: grid; gap: 1.25rem; }
.mgSideCard { border-radius: 10px; padding: 1.5rem 1.6rem; }
.mgSideCard--ink { background: var(--mgInk); color: #fff; }
.mgSideCard--lilac { background: var(--mgLilac); border: 1px solid var(--mgLilacEdge); }
.mgSideTitle { font-family: var(--mgDisplay); font-size: 1.4rem; line-height: 1; margin-bottom: 0.5rem; }
.mgSideCard--ink .mgSideTitle { color: #fff; }
.mgSideCard--lilac .mgSideTitle { color: var(--mgInk); }
.mgSideCard--ink p { color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; }
.mgSidePhone { font-family: var(--mgDisplay); font-size: 1.9rem; color: #fff; display: block; margin: 0.6rem 0; }
.mgSideLinks { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.mgSideLinks a { font-weight: 700; color: var(--mgInk); }
.mgSideLinks a:hover { color: var(--mgCoral); }
.mgHours { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.mgHours div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--mgLilacEdge); }
.mgHours div:last-child { border-bottom: none; }
.mgHours dt { color: var(--mgMuted); font-weight: 600; }
.mgHours dd { margin: 0; font-weight: 800; color: var(--mgInk); }

/* ============================================================
   CTA BAND
   ============================================================ */
.mgCta {
  background: var(--mgCoral); color: #fff;
  position: relative; overflow: hidden;
}
.mgCta::before {
  content: ""; position: absolute; right: -8%; top: -40%;
  width: 40%; height: 180%; background: var(--mgCoralDeep);
  transform: skewX(-12deg); opacity: 0.5;
}
.mgCtaInner { position: relative; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.mgCtaTitle { font-family: var(--mgDisplay); font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); line-height: 0.95; max-width: 20ch; }
.mgCtaSub { margin-top: 0.8rem; font-size: 1.05rem; max-width: 46ch; color: rgba(255, 255, 255, 0.92); }
.mgCtaActions { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }

/* ============================================================
   FOOTER
   ============================================================ */
.mgFooter { background: var(--mgInkDeep); color: rgba(255, 255, 255, 0.72); padding-top: clamp(3rem, 2rem + 4vw, 5rem); }
.mgFooterTop { display: grid; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
@media (min-width: 780px) { .mgFooterTop { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.mgFooterBrand .mgLogoName { color: #fff; }
.mgFooterBrand .mgLogoSub { color: rgba(255, 255, 255, 0.55); }
.mgFooterAbout { margin-top: 1rem; font-size: 0.92rem; max-width: 40ch; }
.mgFooterColTitle { font-family: var(--mgDisplay); font-size: 1.15rem; color: #fff; margin-bottom: 0.9rem; }
.mgFooterCol ul { display: grid; gap: 0.55rem; }
.mgFooterCol a { font-size: 0.92rem; }
.mgFooterCol a:hover { color: var(--mgCoral); }
.mgFooterContact dt { color: var(--mgCoral); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.9rem; }
.mgFooterContact dd { margin: 0.25rem 0 0; font-size: 0.92rem; }
.mgFooterContact dd a:hover { color: #fff; }
.mgPopular { padding: 2rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.mgPopular h3 { font-family: var(--mgDisplay); font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); margin-bottom: 1rem; }
.mgPopularList { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; }
.mgPopularList a { font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; }
.mgPopularList a:hover { border-color: var(--mgCoral); color: #fff; }
.mgFooterBottom { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; align-items: center; justify-content: space-between; padding: 1.6rem 0; font-size: 0.82rem; }
.mgFooterBottomLinks { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; }
.mgFooterBottomLinks a:hover { color: var(--mgCoral); }

/* ============================================================
   MOBILE STICKY CALL BAR
   ============================================================ */
.mgCallBar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--mgCoral); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.85rem 1rem;
  font-family: var(--mgDisplay); font-size: 1.15rem;
  box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, 0.6);
}
.mgCallBar svg { width: 1.1em; height: 1.1em; }
@media (min-width: 760px) { .mgCallBar { display: none; } }
body { padding-bottom: 0; }
@media (max-width: 759px) { body { padding-bottom: 60px; } }