/* ==========================================================================
   Mastercode — "Kontrast Hibrit" tasarım sistemi
   Koyu yüzeyler = Mastercode'un kendi sesi (header, hero, ürünler, kapanış, footer)
   Açık yüzeyler = içerik ve hizmetler
   Mobil öncelikli. Kırılımlar: 480 / 820 / 1100 / 1440
   Hareket: yalnızca transform + opacity; hepsi prefers-reduced-motion: no-preference içinde.

   Tek CSS dosyası: 1–25 ortak temel ve bileşenler, 26–31 sayfaya özel bölümler
   (dosyanın sonunda; ortak kurallardan sonra geldikleri için onları sayfa bazında ezer),
   32 her sayfada üstte duran çerez onay çubuğu.

   İçindekiler
    1. Fontlar            13. Sektörel çözüm + Servisly
    2. Token'lar          14. Yapay zekâ asistanı
    3. Temel              15. Süreç
    4. Tipografi          16. Çalışma ilkeleri
    5. Butonlar/bağlantı  17. Labs
    6. Header             18. SSS
    7. Mega menü          19. Kapanış CTA
    8. Mobil menü         20. Footer
    9. Hero               21. İç sayfa başlığı + breadcrumb
   10. Referans vitrini   22. Hizmet detayı
   11. Bölüm başlığı      23. WordPress: içerik (prose), sayfalama, formlar
   12. Hizmet dizini      24. Reveal ve hareket
                          25. Zenginleştirme (marka şekli, mavi bant, vurgu, logo şeridi,
                              kayan bant, kademeli reveal, hover dili, süreç çizgisi…)
   26. Sayfa: Ana sayfa
   27. Sayfa: Hizmetler ve hizmet detayları
   28. Sayfa: Kurumsal: iletişim, hakkımızda, blog, 404
   29. Sayfa: Referanslar ve Labs
   30. Sayfa: Servisly, Servisly sektörleri ve su arıtma
   31. Sayfa: KVKK Aydınlatma Metni
   32. Çerez onay çubuğu (+ footer'daki "Çerez tercihleri" düğmesi)
   ========================================================================== */

/* 1. Fontlar ---------------------------------------------------------------- */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-wght-normal.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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-wght-normal.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: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metrik uyarlamalı yerel yedekler (dosya indirilmez): font gelene kadar (swap) metin,
   Arial'ın web fontunun ortalama glif genişliğine ve dikey ölçülerine ölçeklenmiş hâliyle
   çizilir; font gelince satır kırılımı ve satır kutusu değişmez (CLS). Ölçüm: fontTools,
   hmtx ortalaması (Türkçe örnek metin) ve hhea ascent/descent; override = değer / size-adjust.
   Schibsted: beyan metninde 500 ağırlıkta ölçülen 104.9 % (44.68 / 42.58 px) korunur. */
@font-face {
  font-family: "Geist Yedek";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 102.4%;
  ascent-override: 98.1%;
  descent-override: 28.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Schibsted Yedek";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 104.9%;
  ascent-override: 93.1%;
  descent-override: 24.6%;
  line-gap-override: 0%;
}

/* 2. Token'lar -------------------------------------------------------------- */

:root {
  /* Koyu ölçek (logo zeminine uyumlu neredeyse-siyah) */
  --ink-950: #080b11;
  --ink-900: #0d1119;
  --ink-850: #121722;
  --ink-800: #181e2a;
  --ink-700: #252c39;
  --ink-600: #353d4c;

  /* Koyu zemin üzerinde metin */
  --on-dark: #f3f5f8;
  --on-dark-2: #c9cfd8;
  --on-dark-muted: #a3acba;   /* #080B11 üzerinde 8.6:1 */
  --on-dark-faint: #7f8898;   /* #080B11 üzerinde 5.4:1 */

  /* Açık ölçek */
  --paper: #ffffff;
  --paper-2: #f4f5f7;
  --paper-3: #ebedf0;
  --line: #e2e5ea;
  --line-strong: #c9ced6;

  /* Açık zemin üzerinde metin */
  --fg: #0b0f17;
  --fg-2: #353c49;
  --muted: #5a6272;           /* beyazda 6.1:1, #F4F5F7'de 5.6:1 */

  /* Marka mavisi */
  --blue: #0a7ef2;            /* koyu zeminde vurgu, odak halkası */
  --blue-btn: #0070e0;        /* beyaz metinli buton zemini, 4.8:1 */
  --blue-text: #0062d1;       /* açık zeminde metin, 5.7:1 */
  --blue-text-dark: #5aaaff;  /* koyu zeminde küçük metin, 7.4:1 */
  --blue-tint: #eaf3fe;
  --ok: #22a45d;

  /* Mavi bant (.on-blue): marka mavisini cesurca kullanan tam genişlik yüzey.
     #0070E0 bant olarak KULLANILMAZ: üzerinde #E6F0FF yalnızca 4.16:1 kalır. */
  --blue-band: #0062d1;       /* bant zemini: beyaz metin 5.73:1 */
  --blue-band-2: #0058bd;     /* hover katmanı, şeklin açık yüzü: beyaz 6.71:1, #E6F0FF 5.84:1 */
  --blue-band-3: #004fa8;     /* şeklin koyu yüzü: beyaz 7.82:1 */
  --on-blue: #ffffff;         /* bantta başlık/metin */
  --on-blue-2: #e6f0ff;       /* bantta gövde/lead/etiket: 4.98:1 */
  --line-on-blue: #3d8be0;    /* bantta ayırıcı çizgi (dekoratif) */

  /* Marka şekli dolguları (koyu zemin; ink-950 üzerinde ölçülü derinlik) */
  --sekil-1: #121722;         /* = ink-850: sol çubuk (logodaki mavi kesit; üstünde mavi şerit) */
  --sekil-2: #181e2a;         /* = ink-800: çapraz ve sağ çubuk (logodaki gümüş kesitler) */

  /* Tipografi */
  --font-display: "Schibsted Grotesk", "Schibsted Yedek", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Geist", "Geist Yedek", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.5rem, 1.2rem + 4.6vw, 5.25rem);
  --fs-h1: clamp(2.375rem, 1.5rem + 3.2vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.3vw, 3.375rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-lead: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-2xs: 0.75rem;

  --lh-display: 1.02;
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* Boşluk (8'lik sistem) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 2.5rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 5rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(4.5rem, 2.6rem + 5.6vw, 8rem);

  /* Yerleşim */
  --container: 1280px;
  --gutter: 20px;
  --gap: 24px;
  --header-h: 64px;
  --admin-bar: 0px;           /* body.admin-bar'da WP araç çubuğu yüksekliği */
  --prose: 48rem;             /* okunaklı metin kolonu (17px gövdede ≈68ch); rem: her öğede aynı sağ kenar */
  --overlap: clamp(180px, 100px + 14vw, 330px);

  /* Radius */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-pill: 999px;

  /* Gölge */
  --sh-1: 0 1px 2px rgba(8, 11, 17, 0.06);
  --sh-2: 0 1px 2px rgba(8, 11, 17, 0.05), 0 12px 28px -12px rgba(8, 11, 17, 0.16);
  --sh-panel: 0 24px 48px -20px rgba(8, 11, 17, 0.3);
  --sh-frame: 0 2px 6px rgba(8, 11, 17, 0.08), 0 36px 72px -28px rgba(8, 11, 17, 0.5);
  --sh-kaldir: 0 2px 6px rgba(8, 11, 17, 0.08), 0 28px 56px -24px rgba(8, 11, 17, 0.42); /* hover gölge katmanı */

  /* Hareket */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 0.16s;
  --dur-2: 0.26s;
  --dur-3: 0.7s;
}

@media (min-width: 820px) {
  :root {
    --gutter: 32px;
    --gap: 28px;
  }
}
@media (min-width: 1100px) {
  :root {
    --gutter: 40px;
    --gap: 32px;
    --header-h: 72px;
  }
}

/* WordPress araç çubuğu (yalnızca oturum açmış yöneticide) */
body.admin-bar {
  --admin-bar: 32px;
}
@media (max-width: 782px) {
  body.admin-bar {
    --admin-bar: 46px;
  }
}

/* 3. Temel ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink-950);
}
/* Yapışkan header'ın altında kalmasın diye kaydırma ofseti HEDEFLERDE (çapa, odak).
   html'de scroll-padding-top kullanılmaz: header içindeki bir öğe odak aldığında
   tarayıcı onu o dolgu bölgesinde "görünmüyor" sayıp sayfayı yukarı kaydırıyordu. */
.site-main,
.site-main *,
.site-footer * {
  scroll-margin-top: calc(var(--header-h) + var(--admin-bar) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Başlıklar dengeli, paragraflar öksüz kelime bırakmadan kırılır */
p,
li,
dd,
figcaption,
blockquote,
.lead {
  text-wrap: pretty;
}

/* Kırılmaz kelimeler: mc_nw() ve the_content filtresi "e-ticaret" gibi kelimeleri sarar */
.nw,
.nowrap {
  white-space: nowrap;
}
/* E-posta adresleri satır ortasından bölünmez */
a[href^="mailto:"] {
  white-space: nowrap;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
/* Skip link ile odaklanan <main> çerçeve göstermesin */
main:focus {
  outline: none;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: calc(12px + var(--admin-bar));
  z-index: 100;
  padding: 12px 16px;
  background: var(--paper);
  color: var(--fg);
  font-weight: 600;
  border-radius: var(--r-2);
  box-shadow: var(--sh-2);
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: none;
}

/* Ekranda görünmez, ekran okuyucuda okunur (WordPress çekirdeğinin sınıf adı) */
.screen-reader-text,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  word-wrap: normal;
}
.screen-reader-text:focus {
  position: fixed;
  left: 16px;
  top: calc(12px + var(--admin-bar));
  z-index: 100;
  width: auto;
  height: auto;
  padding: 12px 16px;
  margin: 0;
  clip: auto;
  clip-path: none;
  background: var(--paper);
  color: var(--fg);
  font-weight: 600;
  border-radius: var(--r-2);
  box-shadow: var(--sh-2);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* İkonlar mc_ikon() ile gelir; boyut width/height niteliğinden, renk currentColor */
.ikon {
  flex: none;
}

/* Yüzeyler (bölüm zeminleri)
   .section            → beyaz (varsayılan, --paper)
   .section.on-paper-2 → açık gri panel zemini
   .section.on-dark    → koyu (Mastercode'un kendi sesi: hero, ürün, kapanış)
   Aynı zeminli iki bölüm art arda gelirse ikincisine .section--devam verilir
   (üst boşluk kalkar, ince ayırıcı çizgi gelir). */
.on-dark {
  background: var(--ink-950);
  color: var(--on-dark);
}
.on-paper {
  background: var(--paper);
}
.on-paper-2 {
  background: var(--paper-2);
}

.section {
  padding-block: var(--section-y);
}
.section--devam {
  padding-top: 0;
}
.section--devam > .container {
  padding-top: var(--section-y);
  border-top: 1px solid var(--line);
}
.on-dark.section--devam > .container {
  border-top-color: var(--ink-700);
}
.section--sik {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}

/* Duyarlı ızgaralar: 1 kolon → 600px'te 2 → 1100px'te n kolon */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--sp-5) var(--gap);
}
@media (min-width: 600px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* 12 kolonluk ızgara (≥1100px); altında tek kolon */
.grid-12 {
  display: grid;
  gap: var(--sp-6) var(--gap);
}
@media (min-width: 1100px) {
  .grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* 4. Tipografi yardımcıları ------------------------------------------------- */

.idx {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}
.idx-num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--blue-text);
  font-variant-numeric: tabular-nums;
}
.idx-num::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--line-strong);
}
.on-dark .idx,
.panel-dark .idx {
  color: var(--on-dark-muted);
}
.on-dark .idx-num,
.panel-dark .idx-num {
  color: var(--blue-text-dark);
}
.on-dark .idx-num::after,
.panel-dark .idx-num::after {
  background: var(--ink-600);
}

/* Numarasız etiket (kalıp tekrarını kırmak için: no boş) */
.idx--yalin::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--blue);
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.038em;
}
.h1 {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.h4 {
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
/* İki tonlu başlık: ikinci cümle gri tonda */
.h-ton2 {
  color: var(--muted);
}
.on-dark .h-ton2,
.panel-dark .h-ton2 {
  color: var(--on-dark-faint);
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
}
.on-dark .lead,
.panel-dark .lead {
  color: var(--on-dark-2);
}
.muted {
  color: var(--muted);
}
.on-dark .muted,
.panel-dark .muted {
  color: var(--on-dark-muted);
}
.small {
  font-size: var(--fs-sm);
}
.kicker {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.on-dark .kicker,
.panel-dark .kicker {
  color: var(--blue-text-dark);
}

.prose p + p {
  margin-top: var(--sp-2);
}

/* 5. Butonlar ve bağlantılar ------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
}
.btn--primary {
  background: var(--blue-btn);
  color: #fff;
}
.btn--primary:hover {
  background: var(--blue-text);
}
.btn--ghost {
  border-color: var(--ink-600);
  color: var(--on-dark);
}
.btn--ghost:hover {
  border-color: var(--on-dark-faint);
  background: var(--ink-850);
}
.btn--outline {
  border-color: var(--line-strong);
  background: var(--paper);
  color: var(--fg);
}
.btn--outline:hover {
  border-color: var(--fg);
}
.btn--dark {
  background: var(--ink-950);
  color: #fff;
}
.btn--dark:hover {
  background: var(--ink-800);
}
/* İkincil: zemine uyum sağlar (açıkta çerçeveli beyaz, koyuda koyu çerçeveli) */
.btn--secondary {
  border-color: var(--line-strong);
  background: var(--paper);
  color: var(--fg);
}
.btn--secondary:hover {
  border-color: var(--fg);
}
.on-dark .btn--secondary,
.panel-dark .btn--secondary {
  border-color: var(--ink-600);
  background: transparent;
  color: var(--on-dark);
}
.on-dark .btn--secondary:hover,
.panel-dark .btn--secondary:hover {
  border-color: var(--on-dark-faint);
  background: var(--ink-850);
}
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 479.98px) {
  .btn-group > .btn {
    flex: 1 1 100%;
  }
}
@media (min-width: 480px) {
  .btn-group > .btn:not(.btn--sm) {
    padding-inline: 24px;
  }
}
.btn--sm {
  min-height: 44px;
  padding: 0 16px;
  font-size: var(--fs-sm);
}
.btn--block {
  display: flex;
  width: 100%;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 500;
  color: var(--blue-text);
}
.link-arrow:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.on-dark .link-arrow,
.panel-dark .link-arrow {
  color: var(--blue-text-dark);
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg-2);
  white-space: nowrap;
}
.tag--blue {
  border-color: transparent;
  background: var(--blue-tint);
  color: var(--blue-text);
}
.on-dark .tag,
.panel-dark .tag {
  border-color: var(--ink-600);
  color: var(--on-dark-2);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}
/* Geliştirmede: renk bilgi taşır — yeşil yayında, kehribar geliştirmede */
.status--dev::before {
  background: #d9901a;
}

.meta-list {
  color: var(--muted);
}
/* Nokta ayraçlı listeler (.meta-list etiketleri; Labs tür · model satırları): ayraç her
   öğenin BAŞINDA, 20 px'lik kutuda ortalı. Liste 20 px sola taşar ve clip-path o şeridi
   keser: her satırın başındaki ayraç görünmez — satır sonunda "·" sarkmaz, satır "·" ile
   başlamaz. Öğeler satır içi ve bölünmez; text-wrap: balance satırları dengeler (son
   satıra tek etiket düşmez). Kaynaktaki öğe arası boşluklar font-size: 0 ile sıfırlanır;
   punto öğede (--nl-fs). */
:is(.meta-list, .ana-lab-tur, .mega-link-meta) {
  --nl-fs: var(--fs-xs);
  display: block;
  margin-inline-start: -20px;
  clip-path: inset(-6px -6px -6px 20px);
  font-size: 0;
  line-height: 0;
  text-wrap: balance;
}
:is(.meta-list, .ana-lab-tur, .mega-link-meta) > * {
  display: inline;
  font-size: var(--nl-fs);
  line-height: 1.6;
  white-space: nowrap;
}
:is(.meta-list, .ana-lab-tur, .mega-link-meta) > *::before {
  content: "·";
  display: inline-block;
  width: 20px;
  text-align: center;
  color: var(--line-strong);
}
:is(.on-dark, .panel-dark) .meta-list {
  color: var(--on-dark-muted);
}
:is(.on-dark, .panel-dark) :is(.meta-list, .ana-lab-tur, .mega-link-meta) > *::before {
  color: var(--ink-600);
}

/* 6. Header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: var(--admin-bar);
  z-index: 60;
  background: var(--ink-950);
  color: var(--on-dark);
}
/* 600px altında WP araç çubuğu sayfayla birlikte kayar; header en üste yapışır */
@media (max-width: 600px) {
  .site-header {
    top: 0;
  }
}
/* Kaydırma durumu: yalnızca kenar çizgisi + gölge (opacity); boyut değişmez */
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--ink-700);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
}
.site-header.is-scrolled::after,
.site-header.has-open::after {
  opacity: 1;
}
.site-header.has-open::after {
  box-shadow: none;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--header-h);
}

/* Logo: mc_gorsel_logo(true, 'brand') → a.custom-logo-link.brand > img.custom-logo */
.brand {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  margin-right: auto;
}
.brand .custom-logo {
  width: auto;
  height: 30px;
}
/* Görsel logo yoksa metin yedeği */
.brand--metin {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
.brand-ad {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
.brand-tag {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.primary-nav {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-phone {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--on-dark-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.header-phone:hover {
  color: #fff;
}
.header-phone .ikon {
  color: var(--blue);
}

.header-cta {
  display: none;
}

.menu-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-700);
  border-radius: var(--r-2);
  color: var(--on-dark);
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle-lines {
  position: relative;
  width: 18px;
  height: 12px;
}
.menu-toggle-lines::before,
.menu-toggle-lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}
.menu-toggle-lines::before {
  top: 2px;
}
.menu-toggle-lines::after {
  bottom: 2px;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-lines::before {
  transform: translateY(3.25px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-lines::after {
  transform: translateY(-3.25px) rotate(-45deg);
}

@media (min-width: 340px) {
  .header-cta--mobile {
    display: inline-flex;
  }
}

@media (min-width: 1100px) {
  .brand {
    margin-right: 0;
  }
  .brand .custom-logo {
    height: 36px;
  }
  .primary-nav {
    display: block;
    margin-left: var(--sp-4);
    margin-right: auto;
  }
  .header-phone,
  .header-cta {
    display: inline-flex;
  }
  .header-cta.header-cta--mobile,
  .menu-toggle {
    display: none;
  }
}
@media (min-width: 1280px) {
  .primary-nav {
    margin-left: var(--sp-5);
  }
}

/* Ana menü */
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--on-dark-2);
  white-space: nowrap;
  cursor: pointer;
}
@media (min-width: 1280px) {
  .nav-link {
    padding: 0 14px;
  }
}
.nav-link:hover,
.nav-item.is-open > .nav-link {
  color: #fff;
  background: var(--ink-800);
}
/* Etkin bölüm: beyaz metin + altında ince mavi çizgi */
.nav-link.is-active {
  color: #fff;
}
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}
.nav-item.has-mega > .nav-link.is-active::after {
  right: 30px;
}
.nav-link .chev {
  width: 12px;
  height: 12px;
  color: var(--on-dark-faint);
}
.nav-item.is-open > .nav-link .chev {
  transform: rotate(180deg);
  color: var(--on-dark);
}

/* 7. Mega menü -------------------------------------------------------------- */

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h) - var(--admin-bar));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  color: var(--fg);
  box-shadow: var(--sh-panel);
  /* Kapalı panel render dışı (display: none): içindeki lazy görseller (canlı örnek, Labs
     ikonları) menü hiç açılmadan indirilmez. Giriş @starting-style, çıkış display'in
     ayrık geçişiyle (allow-discrete) — yalnız opacity/transform canlanır. */
  display: none;
  opacity: 0;
  transform: translateY(-6px);
}
.nav-item.is-open > .mega {
  display: block;
  opacity: 1;
  transform: none;
}
/* main.js yüklenmediyse (html.nav-hazir yok) panel :hover / :focus-within ile açılır;
   başlık bağlantısı da kendi sayfasına gider. */
html:not(.nav-hazir) .nav-item:hover > .mega,
html:not(.nav-hazir) .nav-item:focus-within > .mega {
  display: block;
  opacity: 1;
  transform: none;
}
/* JS'siz yedekte bağlantının altı (y=58) ile panelin üstü (header alt kenarı) arasında
   boşluk var; reduced-motion'da kapanış gecikmesi olmadığından fare panele inerken
   :hover kaybolurdu. Hover sürerken o şeridi öğeye ait görünmez bir köprü kapatır
   (.mega overflow'lu olduğu için köprü panelin değil li'nin sözde öğesi; konumu header'a göre). */
html:not(.nav-hazir) .nav-item.has-mega:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc((var(--header-h) - 44px) / 2 + 1px);
}
html:not(.nav-hazir) .nav-item:hover > .nav-link .chev,
html:not(.nav-hazir) .nav-item:focus-within > .nav-link .chev {
  transform: rotate(180deg);
}

.mega-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-block: var(--sp-5);
}
.mega-groups {
  grid-column: 1 / span 8;
  display: grid;
  align-content: start;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-5);
}
.mega-groups:only-child {
  grid-column: 1 / -1;
}
.mega-heading {
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mega-link {
  display: block;
  padding: 10px 12px;
  margin-inline: -12px;
  border-radius: var(--r-2);
}
.mega-link:hover {
  background: var(--paper-2);
}
.mega-link-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
}
.mega-link-title .ikon-ok {
  width: 14px;
  height: 14px;
  color: var(--blue-text);
  opacity: 0;
  transform: translateX(-4px);
}
.mega-link:hover .mega-link-title .ikon-ok,
.mega-link:focus-visible .mega-link-title .ikon-ok {
  opacity: 1;
  transform: none;
}
.mega-link-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--muted);
}
/* Bulunulan sayfa */
.mega-link.is-current {
  background: var(--blue-tint);
}
.mega-link.is-current .mega-link-title {
  color: var(--blue-text);
}
.mega-link-here {
  margin-left: auto;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-text);
}

/* Canlı örnek kartı */
.mega-feature {
  grid-column: 9 / -1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--r-3);
  background: var(--paper-2);
}
.mega-feature:hover .mega-feature-title {
  color: var(--blue-text);
}
.mega-feature-img {
  display: block;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper);
}
.mega-feature-img img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: top center;
}
.mega-kicker {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.mega-feature-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 4px;
  text-wrap: balance;
}
.mega-feature-text {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
}
.mega-feature .link-arrow {
  min-height: 32px;
  font-size: var(--fs-sm);
  margin-top: auto;
}
/* Görsel yoksa metin kartı: üstte mavi çizgi */
.mega-feature--metin {
  border-top: 2px solid var(--blue);
}

.mega-foot {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.mega-foot-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--sp-4);
  min-height: 56px;
}
.mega-foot a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg);
}
.mega-foot a:hover {
  color: var(--blue-text);
}
.mega-foot .ikon {
  color: var(--blue-text);
}
.mega-foot-note {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.mega-foot .mega-foot-note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Labs paneli (mega--urunler) */
.mega-product {
  grid-column: 1 / span 5;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: var(--r-3);
  background: var(--ink-950);
  color: var(--on-dark);
}
.mega-product:hover {
  background: var(--ink-900);
}
.mega-product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.mega-product-top .status {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-xs);
  color: var(--on-dark);
}
.mega-product-name {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.mega-product-text {
  display: block;
  font-size: var(--fs-sm);
  color: var(--on-dark-2);
  max-width: 40ch;
}
.mega-product-note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--on-dark-muted);
}
.mega-product .link-arrow {
  margin-top: auto;
  min-height: 32px;
  font-size: var(--fs-sm);
  color: var(--blue-text-dark);
}
.mega-labs {
  grid-column: 7 / -1;
  display: flex;
  flex-direction: column;
}
/* Labs'in kısa tanımı kolonun dibinde: sağ kolon soldaki ürün kartıyla dikeyde dengelenir */
.mega-labs-tanim {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  max-width: 34rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.mega-labs > ul {
  margin-bottom: var(--sp-4);
}
.mega-labs:only-child {
  grid-column: 1 / -1;
}
.mega-labs .mega-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}
.mega-labs .status {
  padding-top: 2px;
  color: var(--fg-2);
  white-space: nowrap;
}
/* Proje türü · kullanım modeli (mc_labs_bilgisi) */
.mega-link-meta {
  --nl-fs: var(--fs-2xs);
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-2);
}

.mega-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 11, 17, 0.5);
  visibility: hidden;
  opacity: 0;
}
.mega-scrim.is-visible {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 1099.98px) {
  .mega,
  .mega-scrim {
    display: none;
  }
}

/* 8. Mobil menü ------------------------------------------------------------- */
/* Tam ekran panel: liste (.m-scroll) kendi içinde kayar, eylem alanı (.m-actions)
   panelin altına sabittir — akordeon açıkken de eylemler görünür. */

.mobile-panel {
  position: fixed;
  top: calc(var(--header-h) + var(--admin-bar));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--fg);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
}
.mobile-panel:focus {
  outline: none;
}
.mobile-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
}
/* Kaydırma kilidi yalnızca html'de: html'in overflow'u görüntü alanına aktarılır ve
   yapışkan header görüntü alanına yapışık kalır. body'ye de overflow:hidden verilirse
   body kendi kaydırma kabı olur, header ona yapışır ve kaydırılmış sayfada ekranın
   üstünde kalır (kapatma düğmesi görünmez). */
html.menu-open {
  overflow: hidden;
}
@media (min-width: 1100px) {
  .mobile-panel {
    display: none;
  }
}

.m-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.m-nav {
  padding-block: 8px 24px;
}
.m-item {
  border-bottom: 1px solid var(--line);
}
.m-link,
.m-acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-align: left;
  color: var(--fg);
}
.m-link[aria-current],
.m-acc.is-active {
  color: var(--blue-text);
}
.m-acc-icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.m-acc-icon::before,
.m-acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  background: var(--fg);
  border-radius: 2px;
}
.m-acc-icon::after {
  transform: rotate(90deg);
}
.m-acc[aria-expanded="true"] .m-acc-icon::after {
  transform: rotate(0deg);
}
.m-acc[aria-expanded="true"] {
  color: var(--blue-text);
}
/* Odak halkası düğmenin içinde: genel 3 px dış boşluk, açık akordeonda hemen alttaki grup
   başlığının üstüne biniyordu */
.m-acc:focus-visible {
  outline-offset: -2px;
}

.m-sub {
  padding-bottom: 20px;
}
.m-sub-group + .m-sub-group {
  margin-top: 16px;
}
.m-sub-heading {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 4px;
}
.m-sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--fg);
}
.m-sub a[aria-current] {
  color: var(--blue-text);
  font-weight: 600;
}
.m-sub-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
}
/* Labs akordeonu: ad + altında tür satırı, sağda durum */
.m-sub a.m-sub-proje {
  padding-block: 8px;
}
.m-sub-ad {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.m-sub-tur {
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}
.m-sub .m-sub-all {
  margin-top: 8px;
  color: var(--blue-text);
  justify-content: flex-start;
  gap: 8px;
}

.m-actions {
  flex: none;
  padding-block: 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 24px -16px rgba(8, 11, 17, 0.25);
}
.m-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.m-quick--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.m-quick a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--paper);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}
.m-quick a:hover {
  border-color: var(--fg);
}
.m-quick .ikon {
  color: var(--blue-text);
}
@media (max-width: 379.98px) {
  .m-quick a {
    flex-direction: column;
    gap: 4px;
    min-height: 56px;
    font-size: var(--fs-xs);
  }
}
.m-note {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
/* Kısa ekranlarda liste alanı daralmasın */
@media (max-height: 640px) {
  .m-note {
    display: none;
  }
}
/* Tablet (820–1099): liste alttaki eylem çubuğuyla aynı kapta, tam genişlikte; açık
   akordeonun grupları iki sütunda (Hizmetler 2 × 2, Labs: öne çıkan ürün | projeler) —
   sağda boş alan kalmaz. Eylemler tek satır: Teklif alın + hızlı kanallar yan yana. */
@media (min-width: 820px) {
  .m-sub:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 40px;
  }
  .m-sub-group + .m-sub-group {
    margin-top: 0;
  }
  .m-sub .m-sub-all {
    grid-column: 1 / -1;
  }
  .m-actions > .container {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    column-gap: 8px;
  }
  .m-actions .m-quick {
    margin-top: 0;
  }
  .m-actions .m-note {
    grid-column: 1 / -1;
  }
}
/* Yatay telefon / kısa ekran: eylem alanı tek satır ve ince; liste alanı büyür */
@media (max-height: 480px) {
  .m-actions {
    padding-block: 8px calc(8px + env(safe-area-inset-bottom));
  }
  .m-actions > .container {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    column-gap: 8px;
  }
  .m-actions .m-quick {
    margin-top: 0;
  }
  .m-actions .btn,
  .m-quick a {
    min-height: 44px;
  }
}

/* 9. Hero ------------------------------------------------------------------- */

.hero {
  padding-block: clamp(3rem, 1.4rem + 6.4vw, 7.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.hero-grid {
  display: grid;
  row-gap: 0;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.hero-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--blue);
  border-radius: 1px;
}
.hero-title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.038em;
  font-weight: 600;
  color: #fff;
}
.nowrap {
  white-space: nowrap;
}
.hero-main {
  margin-top: var(--sp-4);
}
.hero-lead {
  max-width: 34rem;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--sp-4);
}

.hero-quick {
  display: none;
}
.hero-quick-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  padding-bottom: 12px;
}
.hero-quick a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--ink-700);
}
.hero-quick a:hover .hero-quick-title {
  color: var(--blue-text-dark);
}
.hero-quick-title {
  font-weight: 600;
  color: var(--on-dark);
}
.hero-quick-desc {
  grid-column: 1;
  font-size: var(--fs-xs);
  color: var(--on-dark-muted);
}
.hero-quick .ikon {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--on-dark-faint);
}
.hero-quick a:hover .ikon {
  color: var(--blue-text-dark);
  transform: translateX(3px);
}

@media (max-width: 479.98px) {
  .hero-ctas .btn {
    flex: 1 1 100%;
  }
}
@media (min-width: 480px) {
  .hero-ctas .btn {
    padding-inline: 24px;
  }
}
@media (min-width: 820px) {
  .hero-quick {
    display: block;
    margin-top: var(--sp-6);
  }
  .hero-quick ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}
@media (min-width: 1100px) {
  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .hero-eyebrow {
    grid-column: 1 / -1;
  }
  .hero-title {
    grid-column: 1 / span 10;
  }
  .hero-main {
    grid-column: 1 / span 6;
    margin-top: var(--sp-5);
  }
  .hero-quick {
    grid-column: 8 / -1;
    align-self: start;
    margin-top: var(--sp-5);
  }
  .hero-quick ul {
    display: block;
  }
  .hero-quick li:last-child a {
    border-bottom: 1px solid var(--ink-700);
  }
}

/* 10. Referans vitrini (hero'dan açık zemine taşan) ------------------------- */

.work {
  position: relative;
  background: var(--paper-2);
  padding-bottom: var(--section-y);
}
.work::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--overlap);
  background: var(--ink-950);
}
.work > .container {
  position: relative;
}
.work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: var(--sp-3);
  border-top: 1px solid var(--ink-700);
  padding-top: var(--sp-2);
  color: var(--on-dark);
}
.work-head .idx {
  margin-bottom: 0;
  color: var(--on-dark-muted);
}
.work-head .idx-num {
  color: var(--blue-text-dark);
}
.work-head .idx-num::after {
  background: var(--ink-600);
}
.work-head .link-arrow {
  display: none;
  color: var(--blue-text-dark);
  font-size: var(--fs-sm);
}
.work-more {
  margin-top: var(--sp-5);
}
@media (min-width: 820px) {
  .work-head .link-arrow {
    display: inline-flex;
  }
  .work-more {
    display: none;
  }
}

.work-grid {
  display: grid;
  gap: var(--sp-6);
}
.work-col {
  display: grid;
  gap: var(--sp-6);
  align-content: start;
}

.work-link {
  display: block;
}
.frame {
  overflow: hidden;
  border-radius: var(--r-3);
  background: var(--paper);
  border: 1px solid rgba(8, 11, 17, 0.08);
  box-shadow: var(--sh-frame);
}
.frame-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.frame-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-1);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.frame-url .ikon {
  width: 10px;
  height: 10px;
}
.frame-media {
  overflow: hidden;
}
.frame-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
/* Görsel yoksa yer tutucu */
.frame-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.work-meta {
  display: grid;
  gap: 8px;
  padding-top: var(--sp-3);
}
.work-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.work-title {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.work-desc {
  max-width: 52ch;
  font-size: 1rem;
  color: var(--muted);
}
.work-visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--blue-text);
}
.work-link:hover .work-visit {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.work-link:hover .work-title {
  color: var(--blue-text);
}

/* Referans kartı boyutları (template-parts/kart-referans.php) */
.ref-card--normal .work-title {
  font-size: 1.3125rem;
}
.ref-card--normal .frame,
.ref-card--kucuk .frame {
  box-shadow: var(--sh-2);
}
.ref-card--kucuk .work-title {
  font-size: 1.125rem;
}
.ref-card--kucuk .work-desc {
  font-size: var(--fs-sm);
}

@media (min-width: 820px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .work-col {
    gap: var(--sp-8);
  }
  .work-col--offset {
    padding-top: var(--sp-10);
  }
}
@media (min-width: 1100px) {
  .work-grid {
    column-gap: var(--sp-7);
  }
}

/* 11. Bölüm başlığı kalıbı -------------------------------------------------- */

/* template-parts/bolum-basligi.php üretir:
   header.section-head > .section-head-main (idx + h2) + .section-head-side (lead + link) */
.section-head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.section-head .lead {
  max-width: 36rem;
}
.section-head-side .lead + .link-arrow {
  margin-top: var(--sp-2);
}
.section-head--sik {
  margin-bottom: var(--sp-5);
}
@media (min-width: 1100px) {
  .section-head--split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
  }
  .section-head--split > :first-child {
    grid-column: 1 / span 7;
  }
  .section-head--split > :last-child {
    grid-column: 9 / -1;
  }
}

/* 12. Hizmet dizini --------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--sp-6);
}
.split-head .h2 {
  margin-bottom: var(--sp-3);
}
.split-head .lead {
  max-width: 34rem;
}
.split-head .link-arrow {
  margin-top: var(--sp-3);
}
@media (min-width: 1100px) {
  .split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .split-head {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-5));
  }
  .split-body {
    grid-column: 7 / -1;
  }
}

.service-index {
  border-top: 1px solid var(--fg);
}
.service-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 20px;
  gap: 4px 12px;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.service-num {
  padding-top: 7px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.service-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.service-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.service-desc {
  display: block;
  max-width: 56ch;
  margin-top: 8px;
  font-size: 1rem;
  color: var(--muted);
}
.service-row .meta-list {
  margin-top: 12px;
}
.service-arrow {
  padding-top: 8px;
  color: var(--fg);
}
.service-arrow .ikon {
  width: 20px;
  height: 20px;
}
.service-row:hover .service-name {
  color: var(--blue-text);
}
.service-row:hover .service-arrow {
  color: var(--blue-text);
  transform: translateX(4px);
}
@media (min-width: 820px) {
  .service-row {
    grid-template-columns: 64px minmax(0, 1fr) 28px;
    gap: 4px 16px;
    padding-block: var(--sp-4);
  }
  .service-num {
    padding-top: 10px;
  }
  .service-arrow {
    padding-top: 10px;
  }
}

/* 13. Sektörel çözüm + Servisly -------------------------------------------- */

.duo {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 1100px) {
  .duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.panel {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) 20px;
  border-radius: var(--r-4);
}
@media (min-width: 480px) {
  .panel {
    padding: var(--sp-5) var(--sp-4);
  }
}
@media (min-width: 1100px) {
  .panel {
    padding: var(--sp-6) var(--sp-5);
  }
}
.panel-light {
  background: var(--paper);
  border: 1px solid var(--line);
}
.panel-dark {
  background: var(--ink-950);
  color: var(--on-dark);
}
.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-dark .panel-top {
  color: var(--on-dark-muted);
}
.panel-top .status {
  font-size: var(--fs-xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-dark);
}
.panel-title {
  font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.panel-text {
  margin-top: var(--sp-2);
  max-width: 46ch;
  color: var(--muted);
}
.panel-dark .panel-text {
  color: var(--on-dark-2);
}

.check-list {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.check-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}
.check-list .ikon {
  margin-top: 4px;
  color: var(--blue-text);
}
.check-list strong {
  font-weight: 600;
}
.check-list span {
  color: var(--muted);
}

.proof-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
}
.proof-line-label {
  width: 100%;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.proof-line a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.proof-line a:hover {
  color: var(--blue-text);
  text-decoration-color: currentColor;
}
.proof-line .ikon {
  width: 12px;
  height: 12px;
}

.panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: auto;
  padding-top: var(--sp-5);
}

.spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--sp-4);
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
}
.spec div {
  padding: 16px 12px 16px 0;
}
.spec div + div {
  padding-left: 16px;
  border-left: 1px solid var(--ink-700);
}
.spec dt {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.spec dd {
  margin-top: 4px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.35;
}
@media (max-width: 479.98px) {
  .spec {
    grid-template-columns: 1fr;
  }
  .spec div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--ink-700);
  }
}

.feature-cols {
  display: grid;
  gap: 0 var(--sp-4);
  margin-top: var(--sp-4);
}
.feature-cols li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px;
  font-size: var(--fs-sm);
  color: var(--on-dark-2);
}
.feature-cols li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 1px;
}
@media (min-width: 480px) {
  .feature-cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* 14. Yapay zekâ asistanı --------------------------------------------------- */

.ai {
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 1100px) {
  .ai {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
  }
  .ai-text {
    grid-column: 1 / span 5;
  }
  .ai-yan {
    grid-column: 7 / -1;
  }
}
.ai-text .h2 {
  margin-bottom: var(--sp-3);
}
.ai-points {
  border-top: 1px solid var(--line);
}
.ai-points div {
  display: grid;
  gap: 2px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}
.ai-points dt {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ai-points dd {
  font-size: 1rem;
}
@media (min-width: 480px) {
  .ai-points div {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
  }
}

.live {
  display: grid;
  gap: 16px;
  margin-top: var(--sp-5);
  padding: var(--sp-3);
  border-radius: var(--r-3);
  background: var(--paper-2);
}
.live .live-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.live .live-domain {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.live p {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.live-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}


/* 15. Süreç ----------------------------------------------------------------- */

.steps {
  display: grid;
  gap: var(--sp-4) var(--gap);
  counter-reset: step;
}
.step {
  padding-top: var(--sp-3);
  border-top: 2px solid var(--line-strong);
}
.step:first-child {
  border-top-color: var(--fg);
}
.step-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--blue-text);
  font-variant-numeric: tabular-nums;
}
.step-title {
  margin-top: var(--sp-3);
  font-size: var(--fs-h4);
  letter-spacing: -0.015em;
}
.step p {
  margin-top: 8px;
  font-size: 1rem;
  color: var(--muted);
  max-width: 40ch;
}
@media (min-width: 600px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 16. Çalışma ilkeleri ------------------------------------------------------ */

.principles {
  display: grid;
  gap: 0 var(--gap);
}
.principle {
  padding-block: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
}
.principle h3 {
  font-size: var(--fs-h4);
  letter-spacing: -0.015em;
}
.principle p {
  margin-top: 8px;
  font-size: 1rem;
  color: var(--muted);
}
@media (min-width: 600px) {
  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 17. Labs ------------------------------------------------------------------ */

.labs-list {
  display: grid;
  gap: 0 var(--gap);
}
.lab {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding-block: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--ink-700);
}
.lab-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
}
.lab-name {
  font-size: 1.625rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.lab p {
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
  max-width: 38ch;
}
.lab .meta-list {
  margin-top: auto;
  padding-top: 8px;
}
.lab-arrow {
  color: var(--on-dark-faint);
}
.lab:hover .lab-name {
  color: var(--blue-text-dark);
}
.lab:hover .lab-arrow {
  color: var(--blue-text-dark);
  transform: translate(2px, -2px);
}
.lab--featured {
  border-top-color: var(--blue);
}
@media (min-width: 600px) {
  .labs-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .labs-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 18. SSS ------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--fg);
}
.faq-item {
  border-bottom: 1px solid var(--line-strong);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 72px;
  padding-block: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
/* Soru metni: son iki kelime sunucuda bağlanır (mc_nw_son); kalan satırlar dengeli kırılır */
.faq-q {
  text-wrap: pretty;
}
.faq-item summary:hover {
  color: var(--blue-text);
}
.faq-icon {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  background: var(--fg);
  border-radius: 2px;
}
.faq-icon::after {
  transform: rotate(90deg);
}
.faq-item[open] .faq-icon::after {
  transform: rotate(0deg);
}
.faq-a {
  padding-bottom: var(--sp-3);
  max-width: 62ch;
  color: var(--fg-2);
}

/* 19. Kapanış CTA ----------------------------------------------------------- */

.cta {
  padding-block: var(--section-y);
}
.cta-grid {
  display: grid;
  gap: var(--sp-6);
}
.cta-title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.038em;
  color: #fff;
}
.cta-text {
  margin-top: var(--sp-3);
  max-width: 34rem;
}
.cta .hero-ctas,
.cta .btn-group {
  margin-top: var(--sp-5);
}
.channels {
  border-top: 1px solid var(--ink-700);
}
.channels a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--ink-700);
}
.channels-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.channels-value {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.channels .ikon {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--on-dark-faint);
}
.channels a:hover .channels-value {
  color: var(--blue-text-dark);
}
.channels a:hover .ikon {
  color: var(--blue-text-dark);
  transform: translate(2px, -2px);
}
.channels-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--on-dark-muted);
}
@media (min-width: 1100px) {
  .cta-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
  }
  .cta-main {
    grid-column: 1 / span 7;
  }
  .cta-side {
    grid-column: 9 / -1;
  }
}

/* 20. Footer ---------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--ink-700);
  padding-top: var(--sp-8);
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--gap);
}
.footer-brand {
  grid-column: 1 / -1;
}
.footer-home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-logo,
.footer-home .custom-logo {
  width: auto;
  height: 34px;
}
.footer-home.brand--metin {
  display: inline-flex;
}
.footer-tagline {
  margin-top: 16px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.footer-about {
  margin-top: 12px;
  max-width: 34ch;
  color: var(--on-dark-muted);
}
.social {
  display: flex;
  gap: 8px;
  margin-top: var(--sp-3);
}
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-700);
  border-radius: var(--r-2);
  color: var(--on-dark-2);
}
.social a:hover {
  border-color: var(--on-dark-faint);
  color: #fff;
}
.social svg {
  width: 18px;
  height: 18px;
}
.footer-col h2 {
  font-family: var(--font-text);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 8px;
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  overflow-wrap: anywhere;
  color: var(--on-dark-2);
  line-height: 1.35;
}
.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer-col .footer-note {
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--on-dark-muted);
  max-width: 28ch;
}
.footer-col .footer-mail {
  overflow-wrap: normal;
}
@media (max-width: 479.98px) {
  .footer-grid {
    column-gap: 16px;
  }
  /* İletişim kolonu 2 kolonlu ızgarada kalır; e-posta adresi bölünmeden sığsın diye küçülür */
  .footer-col .footer-mail {
    font-size: var(--fs-xs);
  }
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: var(--sp-7);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--ink-700);
  font-size: var(--fs-xs);
  color: var(--on-dark-faint);
}
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--on-dark-muted);
}
.footer-bottom a:hover {
  color: #fff;
}
@media (min-width: 820px) {
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / span 4;
  }
  .footer-col {
    grid-column: span 2;
  }
  .footer-col--wide {
    grid-column: span 2;
  }
}
/* 1100–1279: 2 kolonluk İletişim alanı e-posta adresine dar kalır (nowrap taşar);
   marka 3, İletişim 3 kolon alır (3 + 2 + 2 + 2 + 3 = 12). */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .footer-brand {
    grid-column: 1 / span 3;
  }
  .footer-col--iletisim {
    grid-column: span 3;
  }
}

/* 21. İç sayfa: başlık + breadcrumb ---------------------------------------- */

.page-hero {
  padding-block: var(--sp-4) clamp(3.5rem, 2rem + 5vw, 6.5rem);
}
/* Breadcrumb: mc_breadcrumb_yaz() → nav.breadcrumb > ol > li (a | span[aria-current]) */
.breadcrumb ol,
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.breadcrumb li,
.crumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.breadcrumb li + li::before,
.crumbs li + li::before {
  content: "/";
  margin-inline: 10px;
  color: var(--line-strong);
}
.breadcrumb a,
.crumbs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.breadcrumb a:hover,
.crumbs a:hover {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.breadcrumb [aria-current="page"],
.crumbs [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg);
}
.on-dark .breadcrumb ol,
.on-dark .crumbs ol {
  color: var(--on-dark-muted);
}
.on-dark .breadcrumb li + li::before,
.on-dark .crumbs li + li::before {
  color: var(--ink-600);
}
.on-dark .breadcrumb a:hover,
.on-dark .crumbs a:hover {
  color: #fff;
}
.on-dark .breadcrumb [aria-current="page"],
.on-dark .crumbs [aria-current="page"] {
  color: var(--on-dark);
}

/* Açık varyant (template-parts/sayfa-basligi.php, varyant => 'acik') */
.page-hero--acik {
  background: var(--paper-2);
  color: var(--fg);
  border-bottom: 1px solid var(--line);
}
.page-hero--acik .page-title {
  color: var(--fg);
}
.page-hero--acik .hero-eyebrow {
  color: var(--muted);
}
.page-hero--acik .facts,
.page-hero--acik .facts div {
  border-color: var(--line);
}
.page-hero--acik .facts dt {
  color: var(--muted);
}
.page-hero--acik .facts dd {
  color: var(--fg);
}
.page-hero .btn-group {
  margin-top: var(--sp-4);
}

.page-hero-grid {
  display: grid;
  gap: var(--sp-6);
  margin-top: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
}
.page-title {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #fff;
}
.page-hero .hero-eyebrow {
  margin-bottom: var(--sp-3);
}
.page-hero .lead {
  margin-top: var(--sp-3);
  max-width: 36rem;
}
.facts {
  border-top: 1px solid var(--ink-700);
}
.facts div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--ink-700);
}
.facts dt {
  font-size: var(--fs-xs);
  color: var(--on-dark-muted);
  padding-top: 2px;
}
.facts dd {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--on-dark);
}
@media (min-width: 1100px) {
  .page-hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
  }
  .page-hero-main {
    grid-column: 1 / span 7;
  }
  .facts {
    grid-column: 9 / -1;
  }
}

/* 22. Hizmet detayı: metin + yapışkan yan kolon ---------------------------- */

.detail {
  display: grid;
  gap: var(--sp-7);
  padding-block: var(--section-y);
}
.article > section + section {
  margin-top: var(--sp-9);
}
.article .h2 {
  margin-bottom: var(--sp-3);
}
.article .prose {
  max-width: 66ch;
  color: var(--fg-2);
}
.article .prose p:first-child {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg);
}

.scope {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--fg);
}
.scope li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 4px 12px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
}
.scope-num {
  padding-top: 3px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--blue-text);
  font-variant-numeric: tabular-nums;
}
.scope h3 {
  font-size: 1.1875rem;
  letter-spacing: -0.015em;
}
.scope p {
  grid-column: 2;
  font-size: 1rem;
  color: var(--muted);
}
@media (min-width: 820px) {
  .scope li {
    grid-template-columns: 56px minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: baseline;
  }
  .scope p {
    grid-column: 3;
  }
}

.compare {
  width: 100%;
  margin-top: var(--sp-4);
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.compare caption {
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--muted);
  caption-side: bottom;
  padding-top: 12px;
}
.compare th,
.compare td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare thead th {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--fg);
}
.compare tbody th {
  font-weight: 600;
  width: 34%;
}
.compare .is-us {
  color: var(--fg);
  font-weight: 500;
}
.compare .is-them {
  color: var(--muted);
}
.compare thead .is-us {
  color: var(--blue-text);
}

.vsteps {
  margin-top: var(--sp-4);
}
.vsteps li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: var(--sp-4);
}
.vsteps li::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: 4px;
  width: 1px;
  background: var(--line-strong);
}
.vsteps li:last-child {
  padding-bottom: 0;
}
.vsteps li:last-child::before {
  display: none;
}
.vsteps-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--blue-text);
  font-variant-numeric: tabular-nums;
  background: var(--paper);
}
.vsteps h3 {
  font-size: 1.1875rem;
  letter-spacing: -0.015em;
  padding-top: 7px;
}
.vsteps p {
  margin-top: 4px;
  font-size: 1rem;
  color: var(--muted);
  max-width: 58ch;
}

.callout {
  display: grid;
  gap: 12px;
  margin-top: var(--sp-9);
  padding: var(--sp-4);
  border-radius: var(--r-3);
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.callout-kicker {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.callout h2 {
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
}
.callout p {
  color: var(--muted);
  max-width: 58ch;
}

.aside {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}
.aside-card {
  padding: var(--sp-4);
  border-radius: var(--r-3);
  background: var(--ink-950);
  color: var(--on-dark);
}
.aside-card h2 {
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.aside-card p {
  margin-top: 12px;
  font-size: var(--fs-sm);
  color: var(--on-dark-2);
}
.aside-card .btn {
  margin-top: var(--sp-3);
}
.aside-links {
  display: grid;
  margin-top: 16px;
  border-top: 1px solid var(--ink-700);
}
.aside-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border-bottom: 1px solid var(--ink-700);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--on-dark-2);
  font-variant-numeric: tabular-nums;
}
.aside-links a:hover {
  color: #fff;
}
.aside-links .ikon {
  color: var(--blue-text-dark);
}
.aside-note {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--on-dark-muted);
}

.toc {
  display: none;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.toc-title {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.toc a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-left: 16px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.toc a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--line-strong);
}
.toc a:hover {
  color: var(--fg);
}
.toc a[aria-current="true"] {
  color: var(--fg);
  font-weight: 600;
}
.toc a[aria-current="true"]::before {
  background: var(--blue-text);
}

@media (min-width: 1100px) {
  .detail {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .article {
    grid-column: 1 / span 7;
  }
  .aside {
    grid-column: 9 / -1;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
  }
  .toc {
    display: block;
  }
}

/* İlgili referanslar (3'lü) */
.refs {
  display: grid;
  gap: var(--sp-6) var(--gap);
}
@media (min-width: 820px) {
  .refs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .refs .work-title {
    font-size: 1.25rem;
  }
}
.refs .frame {
  box-shadow: var(--sh-2);
}

/* Diğer hizmetler */
.others {
  display: grid;
  gap: 0 var(--gap);
  border-top: 1px solid var(--fg);
}
.other {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 6px 16px;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line-strong);
}
.other-name {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.other-desc {
  grid-column: 1;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.other .ikon {
  grid-column: 2;
  grid-row: 1;
  width: 20px;
  height: 20px;
  margin-top: 3px;
}
.other:hover .other-name {
  color: var(--blue-text);
}
.other:hover .ikon {
  color: var(--blue-text);
  transform: translateX(4px);
}
@media (min-width: 600px) {
  .others {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .others {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .other {
    padding-block: var(--sp-4);
    padding-right: var(--sp-2);
  }
}

/* 23. WordPress: editör içeriği, sayfalama, formlar ------------------------ */

/* Editör içeriği: the_content'i <div class="entry-content"> içine basın.
   Kolon sola hizalı, genişlik --prose (48rem ≈ 68ch gövde metni; ch değil rem, çünkü ch her
   öğenin kendi punto boyutuna göre çözülür ve başlık/alıntı/pre farklı kenarda biterdi);
   alignwide/alignfull taşar. */
.entry-content {
  color: var(--fg-2);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.entry-content > * {
  max-width: var(--prose);
}
.entry-content > * + * {
  margin-top: 1.25em;
}
.entry-content > p:first-child {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg);
}
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: var(--fg);
}
.entry-content h2 {
  margin-top: 2.2em;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.entry-content h3 {
  margin-top: 1.9em;
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  line-height: 1.25;
}
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: 1.6em;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.entry-content > :first-child {
  margin-top: 0;
}
.entry-content h2 + *,
.entry-content h3 + *,
.entry-content h4 + * {
  margin-top: 0.6em;
}
.entry-content a {
  color: var(--blue-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.entry-content a:hover {
  text-decoration-thickness: 2px;
}
.entry-content strong,
.entry-content b {
  font-weight: 600;
  color: var(--fg);
}
.entry-content ul,
.entry-content ol {
  padding-left: 1.4em;
}
.entry-content ul {
  list-style: disc;
}
.entry-content ol {
  list-style: decimal;
}
.entry-content li::marker {
  color: var(--blue-text);
}
.entry-content li + li,
.entry-content li > ul,
.entry-content li > ol {
  margin-top: 0.5em;
}
.entry-content blockquote {
  padding-left: 1.25em;
  border-left: 2px solid var(--blue);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.entry-content blockquote p + p {
  margin-top: 0.75em;
}
.entry-content blockquote cite {
  display: block;
  margin-top: 0.75em;
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--muted);
}
.entry-content figure,
.entry-content .wp-block-image {
  margin-block: 2em;
}
.entry-content img {
  border-radius: var(--r-2);
}
.entry-content figcaption,
.entry-content .wp-caption-text {
  margin-top: 10px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
}
/* Tablolar hiçbir kırılımda yana kaydırılmaz: sabit düzen + satır kırma; dar ekranda
   küçük punto, 5+ sütunlu tablo <480'de satır başına bir kart (bkz. main.js §10). */
.entry-content .wp-block-table {
  overflow-x: visible;
}
.entry-content table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.entry-content th,
.entry-content td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
.entry-content thead th {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--fg);
}
.entry-content hr,
.entry-content .wp-block-separator {
  height: 0;
  margin-block: 2.5em;
  margin-inline: 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.entry-content code,
.entry-content kbd {
  padding: 0.1em 0.35em;
  border-radius: var(--r-1);
  background: var(--paper-2);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.875em;
  color: var(--fg);
}
.entry-content pre {
  overflow-x: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 20px;
  border-radius: var(--r-3);
  background: var(--ink-950);
  color: var(--on-dark);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.entry-content pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}
@media (max-width: 819.98px) {
  .entry-content th,
  .entry-content td {
    padding: 10px 8px 10px 0;
    font-size: var(--fs-xs);
  }
  .entry-content pre {
    padding: 16px;
    font-size: var(--fs-xs);
  }
}
/* 5+ sütun telefona sığmaz: her satır bir blok, hücreler alt alta. main.js thead varsa
   hücrelere sütun adını (data-etiket) yazar ve thead'i görsel olarak gizler (.tablo-kart). */
@media (max-width: 479.98px) {
  .entry-content table:has(tr > :nth-child(5)),
  .entry-content table:has(tr > :nth-child(5)) :is(thead, tbody, tfoot, tr, th, td) {
    display: block;
  }
  .entry-content table:has(tr > :nth-child(5)) tr {
    padding-block: 10px;
    border-bottom: 1px solid var(--line);
  }
  .entry-content table:has(tr > :nth-child(5)) :is(th, td) {
    padding: 2px 0;
    border-bottom: 0;
  }
  .entry-content table:has(tr > :nth-child(5)) tbody tr > :first-child {
    font-weight: 600;
    color: var(--fg);
  }
  .entry-content table.tablo-kart thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .entry-content table.tablo-kart td[data-etiket]::before {
    content: attr(data-etiket) ": ";
    font-weight: 600;
    color: var(--muted);
  }
}
/* Hizalamalar */
.entry-content .alignleft,
.entry-content .alignright {
  max-width: 50%;
  margin-block: 0.4em 1em;
}
.entry-content .alignleft {
  float: left;
  margin-right: 1.5em;
}
.entry-content .alignright {
  float: right;
  margin-left: 1.5em;
}
.entry-content .aligncenter {
  display: block;
  margin-inline: auto;
  text-align: center;
}
.entry-content .aligncenter img {
  margin-inline: auto;
}
.entry-content > .alignwide,
.entry-content > .alignfull {
  max-width: none;
}
.entry-content > .alignfull {
  margin-inline: calc(50% - 50vw);
}
.entry-content > .alignfull img {
  width: 100%;
  border-radius: 0;
}
.entry-content::after {
  content: "";
  display: table;
  clear: both;
}
@media (max-width: 599.98px) {
  .entry-content .alignleft,
  .entry-content .alignright {
    float: none;
    max-width: 100%;
    margin-inline: 0;
  }
}
.on-dark .entry-content {
  color: var(--on-dark-2);
}
.on-dark .entry-content h2,
.on-dark .entry-content h3,
.on-dark .entry-content h4,
.on-dark .entry-content strong,
.on-dark .entry-content > p:first-child {
  color: var(--on-dark);
}
.on-dark .entry-content a {
  color: var(--blue-text-dark);
}

/* Sayfalama: the_posts_pagination() / paginate_links() → .nav-links > .page-numbers */
.pagination,
.navigation.pagination {
  margin-top: var(--sp-7);
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.page-numbers,
.post-page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
a.page-numbers:hover,
a.post-page-numbers:hover {
  border-color: var(--fg);
}
.page-numbers.current,
.post-page-numbers.current {
  border-color: var(--ink-950);
  background: var(--ink-950);
  color: #fff;
}
.page-numbers.dots {
  min-width: 0;
  padding: 0 4px;
  border-color: transparent;
}
.post-navigation .nav-links {
  display: grid;
  gap: 12px;
}
.post-navigation a {
  display: grid;
  gap: 4px;
  min-height: 44px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) {
  .post-navigation .nav-links {
    grid-template-columns: 1fr 1fr;
  }
  .post-navigation .nav-next {
    text-align: right;
  }
}

/* Form alanları */
.form-field {
  display: grid;
  gap: 8px;
}
.form-grid {
  display: grid;
  gap: var(--sp-3) var(--gap);
}
@media (min-width: 820px) {
  .form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .form-grid--2 > .form-field--tam {
    grid-column: 1 / -1;
  }
}
label,
.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg);
}
.form-req {
  color: var(--blue-text);
}
.form-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--paper);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;           /* 16px altı iOS'ta yakınlaştırma yapar */
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.55;
}
select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6272' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
input:hover,
textarea:hover,
select:hover {
  border-color: var(--fg-2);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--blue-btn);
}
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  font-size: var(--fs-sm);
}
.form-check input {
  margin-top: 2px;
  flex: none;
}
input[type="submit"],
button[type="submit"]:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-2);
  background: var(--blue-btn);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
input[type="submit"]:hover,
button[type="submit"]:not([class]):hover {
  background: var(--blue-text);
}
/* Hata / başarı durumları. :is(input, textarea, select) özgüllüğü alan türü kurallarına
   (ör. input[type="email"]) eşitler; sonra geldiği için kırmızı kenar görünür. */
:is(input, textarea, select)[aria-invalid="true"],
:is(input, textarea, select).is-invalid {
  border-color: #c42b1c;
}
:is(input, textarea, select)[aria-invalid="true"]:focus-visible,
:is(input, textarea, select).is-invalid:focus-visible {
  outline-color: #c42b1c;
}
.form-error {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #b3261e;
}
.form-notice {
  padding: 16px 20px;
  border-radius: var(--r-2);
  border-left: 3px solid;
  font-size: var(--fs-sm);
}
.form-notice--basari {
  border-color: var(--ok);
  background: #eaf6ef;
  color: #14532d;
}
.form-notice--hata {
  border-color: #c42b1c;
  background: #fdeeec;
  color: #7a1d14;
}
/* Honeypot alanı: ekranda yok (display:none kullanan botlar da doldurmasın diye konumla) */
.form-tuzak {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.on-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.on-dark textarea,
.on-dark select {
  border-color: var(--ink-600);
  background: var(--ink-900);
  color: var(--on-dark);
}
.on-dark label,
.on-dark .form-label {
  color: var(--on-dark);
}
.on-dark input::placeholder,
.on-dark textarea::placeholder {
  color: var(--on-dark-faint);
}

/* Genel sayfa gövdesi (page.php): başlığın altında okunaklı içerik kolonu */
.page-body {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--section-y);
}

/* 24. Reveal ve hareket (yalnızca hareket tercih edilmiyorsa) -------------- */
/* Gizleme yalnızca html.rv-hazir varken: bu sınıfı main.js, o an ekranda ya da
   ekranın üstünde kalan öğeleri görünür işaretleyip gözlemciyi kurduktan SONRA
   ekler. JS yüklenmez, hata verir ya da reduced-motion açıksa içerik hiç gizlenmez. */

@media (prefers-reduced-motion: no-preference) {
  html.rv-hazir .rv {
    transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  }
  html.rv-hazir .rv:not(.is-in) {
    opacity: 0;
    transform: translateY(18px);
  }
  html.rv-hazir .rv-d1 {
    transition-delay: 0.08s;
  }
  html.rv-hazir .rv-d2 {
    transition-delay: 0.16s;
  }
  html.rv-hazir .rv-d3 {
    transition-delay: 0.24s;
  }

  .site-header::after {
    transition: opacity var(--dur-2) ease;
  }
  .nav-link .chev,
  .menu-toggle-lines::before,
  .menu-toggle-lines::after,
  .m-acc-icon::after,
  .faq-icon::after {
    transition: transform var(--dur-2) var(--ease);
  }

  .mega {
    transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease), display var(--dur-2) allow-discrete;
  }
  @starting-style {
    .nav-item.is-open > .mega,
    html:not(.nav-hazir) .nav-item:hover > .mega,
    html:not(.nav-hazir) .nav-item:focus-within > .mega {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
  .mega-scrim {
    transition: opacity var(--dur-2) ease, visibility 0s linear var(--dur-2);
  }
  .mega-scrim.is-visible {
    transition: opacity var(--dur-2) ease, visibility 0s;
  }
  .mobile-panel {
    transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  }
  .mobile-panel.is-open {
    transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease), visibility 0s;
  }

  .btn .ikon,
  .link-arrow .ikon,
  .work-visit .ikon,
  .service-arrow,
  .hero-quick .ikon,
  .lab-arrow,
  .channels .ikon,
  .other .ikon,
  .mega-link-title .ikon-ok,
  .mega-foot .ikon {
    transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) ease;
  }
  .btn:hover .ikon-ok,
  .link-arrow:hover .ikon-ok,
  .mega-foot a:hover .ikon-ok,
  .mega-product:hover .ikon-ok {
    transform: translateX(3px);
  }
  .btn:hover .ikon-ok-dis,
  .link-arrow:hover .ikon-ok-dis,
  .mega-feature:hover .ikon-ok-dis,
  .work-link:hover .work-visit .ikon-ok-dis {
    transform: translate(2px, -2px);
  }

  .frame-media img {
    transition: transform 0.8s var(--ease);
  }
  .work-link:hover .frame-media img {
    transform: scale(1.02);
  }

  .faq-item[open] .faq-a {
    animation: faq-in var(--dur-2) var(--ease) both;
  }
  .m-sub:not([hidden]) {
    animation: faq-in var(--dur-2) var(--ease) both;
  }
}

@keyframes faq-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Hareket kapalıyken hover dönüşümleri de devre dışı */
@media (prefers-reduced-motion: reduce) {
  .service-row:hover .service-arrow,
  .hero-quick a:hover .ikon,
  .lab:hover .lab-arrow,
  .channels a:hover .ikon,
  .other:hover .ikon,
  .mega-link-title .ikon-ok {
    transform: none;
  }
}

/* 25. Zenginleştirme ------------------------------------------------------- */
/* Ortak "imza" katmanı. PHP: inc/bilesenler.php (mc_marka_sekli, mc_vurgula, mc_rv,
   mc_logo_seridi, mc_kayan_bant, mc_surec_listesi_yaz, mc_dev_iletisim, mc_labs_ikon,
   mc_telefon_cercevesi). Kullanım: inc/bilesenler.php docblockları.
   Hareket kuralları aynen: yalnızca transform + opacity, hepsi no-preference içinde,
   gizleme yalnızca html.rv-hazir altında. */

/* 25.1 Mavi bant yüzeyi (.on-blue) ------------------------------------------ */

.on-blue {
  background: var(--blue-band);
  color: var(--on-blue);
}
.on-blue .lead,
.on-blue .muted,
.on-blue .h-ton2,
.on-blue .channels-label,
.on-blue .channels-note,
.on-blue .meta-list {
  color: var(--on-blue-2);
}
.on-blue .idx,
.on-blue .idx-num,
.on-blue .kicker,
.on-blue .hero-eyebrow {
  color: var(--on-blue);
}
.on-blue .idx-num::after {
  background: var(--line-on-blue);
}
.on-blue .hero-eyebrow::before,
.on-blue .idx--yalin::before {
  background: var(--on-blue);
}
/* Mavi zeminde mavi odak halkası görünmez: beyaz */
.on-blue :focus-visible {
  outline-color: var(--on-blue);
}
/* Birincil: beyaz zemin, mavi metin (5.73:1); hover'da renk geçişi yok, yalnız zemin tonu */
.on-blue .btn--primary {
  background: var(--paper);
  color: var(--blue-text);
}
.on-blue .btn--primary:hover {
  background: var(--paper-2);
}
/* İkincil: şeffaf, beyaz çerçeve; hover'da koyu mavi katman (opacity) */
.on-blue .btn--secondary {
  position: relative;
  isolation: isolate;
  border: 1.5px solid var(--on-blue);
  background: transparent;
  color: var(--on-blue);
}
.on-blue .btn--secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--blue-band-2);
  opacity: 0;
}
.on-blue .btn--secondary:hover {
  border-color: var(--on-blue);
}
.on-blue .btn--secondary:hover::before {
  opacity: 1;
}
.on-blue .link-arrow {
  color: var(--on-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.on-blue .tag {
  border-color: var(--on-blue-2);
  color: var(--on-blue);
}
.on-blue .channels,
.on-blue .channels a {
  border-color: var(--line-on-blue);
}
.on-blue .channels .ikon,
.on-blue .channels a:hover .ikon {
  color: var(--on-blue);
}
.on-blue .channels a:hover .channels-value {
  color: var(--on-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
/* Mavi bant içindeki beyaz kartlar (canlı örnek, sohbet paneli, açık panel, çerçeve):
   açık yüzeyin kendi renklerine döner. Başka beyaz kart için .acik-ada verin. */
.on-blue :is(.acik-ada, .live, .panel-light, .frame) {
  color: var(--fg);
}
.on-blue :is(.acik-ada, .live, .panel-light) .lead {
  color: var(--fg-2);
}
.on-blue :is(.acik-ada, .live, .panel-light) .muted {
  color: var(--muted);
}
.on-blue :is(.acik-ada, .live, .panel-light) .btn--primary {
  background: var(--blue-btn);
  color: #fff;
}
.on-blue :is(.acik-ada, .live, .panel-light) .link-arrow {
  color: var(--blue-text);
}
.on-blue :is(.acik-ada, .live, .panel-light) .tag {
  border-color: var(--line-strong);
  color: var(--fg-2);
}
.on-blue :is(.acik-ada, .live, .panel-light) .tag--blue {
  border-color: transparent;
  color: var(--blue-text);
}
.on-blue :is(.acik-ada, .live, .panel-light) :focus-visible {
  outline-color: var(--blue);
}

/* Kapanış CTA: varsayılan mavi bant; footer hemen altta, aradaki çizgi yok */
.cta--mavi .cta-title {
  color: var(--on-blue);
}
.cta-ek {
  margin-bottom: var(--sp-4);
}
.site-footer--mavi-sonrasi {
  border-top: 0;
}

/* 25.2 Marka şekli (imza grafik) -------------------------------------------- */
/* Ebeveyn .sekilli: konum bağlamı + yatay/dikey kırpma; içerik şeklin önünde (z 1). */

.sekilli {
  position: relative;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
.sekilli > :not(.marka-sekli) {
  position: relative;
  z-index: 1;
}

.marka-sekli {
  /* Kabın (.container) sağ kenarının sayfa kenarına uzaklığı: geniş ekranda şekil içerikle hizalı kalır */
  --ms-kenar: max(0px, (100% - var(--container) - 2 * var(--gutter)) / 2);
  position: absolute;
  top: var(--ms-ust, 0px);
  right: var(--ms-sag, 0px);
  z-index: 0;
  width: var(--ms-gen, 280px);
  height: auto;
  aspect-ratio: 640 / 560;
  overflow: visible;
  pointer-events: none;
}
.marka-sekli--sol {
  right: auto;
  left: var(--ms-sag, 0px);
}
/* Dolgular logodaki M işaretini izler: sol kesit mavi tonlu (logonun mavi parçası), çapraz ve
   sağ kesit bir ton açık grafit (logonun gümüş parçaları). Gövde zeminden ayrışacak kadar görünür
   olmalı; yoksa geriye yalnız havada asılı mavi şerit kalır ve şekil okunmaz. */
.marka-sekli--koyu .ms-sol {
  fill: rgba(10, 126, 242, 0.16);
  stroke: rgba(10, 126, 242, 0.38);
}
.marka-sekli--koyu .ms-capraz,
.marka-sekli--koyu .ms-sag {
  fill: var(--ink-800);
  stroke: var(--ink-700);
}
.marka-sekli :is(.ms-sol, .ms-capraz, .ms-sag) {
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.marka-sekli--mavi .ms-sol {
  fill: rgba(255, 255, 255, 0.14);
  stroke: rgba(255, 255, 255, 0.28);
}
.marka-sekli--mavi .ms-capraz,
.marka-sekli--mavi .ms-sag {
  fill: var(--blue-band-2);
  stroke: rgba(255, 255, 255, 0.12);
}
.ms-serit {
  fill: var(--blue);
}
/* Mavi zeminde şerit yok: şekil metnin arkasına düştüğünde beyaz çizgi yazının üstünden geçiyordu.
   Şekil yalnız ton farkıyla okunur. */
.marka-sekli--mavi .ms-serit {
  display: none;
}

/* Varyantlar: yalnızca boyut ve konum. Çubuklar aşağı uzundur; ebeveyn alt kenarda keser. */
.marka-sekli--baslik,
.marka-sekli--hero,
.marka-sekli--404 {
  --ms-gen: 220px;
  --ms-ust: 12px;
  --ms-sag: -40px;
}
.marka-sekli--bant {
  --ms-gen: 200px;
  --ms-ust: calc(100% - var(--ms-gen) * 0.62);
  --ms-sag: -44px;
}
/* CTA: her genişlikte sağ alt köşede, bölümün ALT BOŞLUĞUNDA zeminden yükselir: kutu
   (viewBox'ın üst 400 birimi) alt boşluktan 16 px kısa, alt kenarı bölümün alt kenarında;
   çubuklar zeminde kesilir. Son metin satırı (not / butonlar) alt boşluğun üstünde biter,
   şekil hiçbir genişlikte metne ya da bağlantıya binmez. Sağ kenarı içerikle hizalı. */
.marka-sekli--cta {
  --ms-gen: calc((var(--section-y) - 16px) * 1.6);
  --ms-ust: calc(100% - var(--ms-gen) * 0.625);
  --ms-sag: calc(var(--ms-kenar) + var(--gutter));
  aspect-ratio: 640 / 400;
  overflow: hidden;
}
.marka-sekli--cta .ms-serit {
  stroke: var(--blue);
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.marka-sekli--panel {
  --ms-gen: 200px;
  --ms-ust: calc(100% - var(--ms-gen) * 0.6);
  --ms-sag: -48px;
}
/* KURAL: şekil hiçbir kırılımda metne, künyeye ya da ikona binmez (ölçüm: sekil.js,
   1920/1440/1100/820/390/360).
   <820: şekil kendi kutusunda kesilir; aşağı uzanan çubuklar telefonda metin sütununu
   boydan boya bölen bir şerit oluşturmaz.
   <1100, sayfa başlıkları (ortak başlık, hizmet, Servisly, ana sayfa, 404, Hakkımızda):
   "köşe işareti" — bölümün sağ üst köşesinde, kutusu yalnız üst eğik uçları gösterecek
   kadar kısa (viewBox'ın üst 400 birimi; SVG preserveAspectRatio "slice" ile genişliğe
   göre ölçeklenip alttan kesilir). Kutunun alt kenarı breadcrumb satırının (breadcrumb
   yoksa eyebrow satırının) hizasında biter; o satıra şekil genişliği kadar sağ boşluk
   verilir. H1 ve sonrası her zaman şeklin altında başlar. */
@media (max-width: 819.98px) {
  .marka-sekli {
    overflow: hidden;
  }
}
@media (max-width: 1099.98px) {
  :is(.page-hero, .ana-hero-ust, .hz-sekil-kap) {
    --ms-kose: 96px;
  }
  :is(.page-hero, .ana-hero-ust, .hz-sekil-kap) > .marka-sekli {
    --ms-gen: var(--ms-kose);
    --ms-ust: 8px;
    --ms-sag: 0px;
    aspect-ratio: 640 / 400;
    overflow: hidden;
  }
  /* Küçük ölçekte şerit (10 birim) 1.5 px'e iner: çizgiyle kalınlaştırılır, işaret okunur kalır */
  :is(.page-hero, .ana-hero-ust, .hz-sekil-kap) > .marka-sekli .ms-serit {
    stroke: var(--blue);
    stroke-width: 2px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .page-hero.sekilli > .container > .breadcrumb,
  .hz-baslik > .container > .breadcrumb,
  .kr-404-bas .hero-eyebrow,
  .ana-hero .hero-eyebrow {
    padding-right: calc(var(--ms-kose) - var(--gutter) + 12px);
  }
}
/* <480: işaret 72 px (kutu 45 px) ve bölümün üst kenarına dayalı: breadcrumb metninin
   üstünde biter, breadcrumb'a sağ boşluk gerekmez (uzun iz dar ekranda iki satıra bölünmez). */
@media (max-width: 479.98px) {
  :is(.page-hero, .ana-hero-ust, .hz-sekil-kap) {
    --ms-kose: 72px;
  }
  :is(.page-hero, .ana-hero-ust, .hz-sekil-kap) > .marka-sekli {
    --ms-ust: -4px;
  }
  .page-hero.sekilli > .container > .breadcrumb,
  .hz-baslik > .container > .breadcrumb {
    padding-right: 0;
  }
}
@media (min-width: 820px) and (max-width: 1099.98px) {
  :is(.page-hero, .ana-hero-ust, .hz-sekil-kap) {
    --ms-kose: 128px;
  }
}
/* 404'te breadcrumb yok: eyebrow satırı köşe işaretinin yanında, kutu bölümün üst kenarından başlar */
@media (max-width: 1099.98px) {
  .kr-404-bas {
    --ms-kose: 96px;
  }
  .kr-404-bas > .marka-sekli {
    --ms-ust: 0px;
  }
}
/* Başlığın alt bandı (logo şeridi / kayan bant) opak: şeklin aşağı uzanan çubukları bandın
   üst çizgisinde biter, logoların arkasından geçmez. */
.page-hero.sekilli > .page-hero-alt {
  position: relative;
  z-index: 1;
  background: var(--ink-950);
}
/* ≥1100: sağ kolondaki künye (olgular; ikon/görsel + olgular; dev iletişim listesi; 404)
   şeklin ÖNÜNDE, opak koyu panelde durur: şeklin kenarları, mavi şerit ve ızgara dokusu
   künye metinlerinin içinden geçmez; şekil panelin üstünde ve yanında arkadan yükselir.
   Panel kolonun dışına taşar (negatif yan boşluk): metin kolonu daralmaz. Telefon
   yelpazesi ve geniş ekran görüntüsü panele alınmaz (opak görseller zaten şeklin önünde). */
@media (min-width: 1100px) {
  .page-hero.sekilli .page-hero-grid > .facts,
  .page-hero.sekilli .page-hero-side,
  .hz-baslik .facts,
  .sekilli .us-kunye,
  .rl-urun.sekilli .rl-urun-kunye {
    position: relative;
    z-index: 1;
    margin-inline: -24px;
    padding: 4px 24px;
    border: 1px solid var(--ink-700);
    border-radius: var(--r-3);
    background: var(--ink-950);
  }
  .page-hero.sekilli .page-hero-side {
    padding-block: 24px 4px;
  }
  .page-hero.sekilli:is(.page-hero--g-telefonlar, .page-hero--g-img-genis) .page-hero-side {
    margin-inline: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .sekilli .us-kunye {
    padding-block: var(--sp-3) 4px;
    border-top: 2px solid var(--blue);
  }
  .page-hero.sekilli .page-hero-side > .facts,
  .sekilli .us-kunye-liste {
    border-top: 0;
  }
  :is(.page-hero.sekilli, .hz-baslik) .facts div:last-child,
  .sekilli .us-kunye-liste div:last-child,
  .rl-urun.sekilli .rl-urun-kunye div:last-child {
    border-bottom: 0;
  }
}
@media (min-width: 820px) {
  .marka-sekli--baslik,
  .marka-sekli--hero,
  .marka-sekli--404 {
    --ms-gen: 340px;
    --ms-ust: 24px;
    --ms-sag: -48px;
  }
  .marka-sekli--bant {
    --ms-gen: 340px;
    --ms-sag: -56px;
  }
}
@media (min-width: 1100px) {
  .marka-sekli--baslik {
    --ms-gen: clamp(380px, 36vw, 560px);
    --ms-ust: 40px;
    --ms-sag: calc(var(--ms-kenar) - 24px);
  }
  .marka-sekli--hero {
    --ms-gen: 720px;
    --ms-ust: 56px;
    --ms-sag: calc(var(--ms-kenar) - 80px);
  }
  .marka-sekli--404 {
    --ms-gen: clamp(400px, 34vw, 520px);
    --ms-ust: 32px;
    --ms-sag: calc(var(--ms-kenar) + 16px);
  }
  .marka-sekli--bant {
    --ms-gen: clamp(400px, 34vw, 520px);
    --ms-ust: calc(100% - var(--ms-gen) * 0.66);
    --ms-sag: calc(var(--ms-kenar) - 72px);
  }
  .marka-sekli--panel {
    --ms-gen: 280px;
  }
}


/* 25.3 Koyu zemin dokusu (.doku-izgara) ------------------------------------- */
/* 96 px hücreli, ink-950 üzerinde ink-850 çizgili statik ızgara; yalnızca sağ %55
   (metin alanı temiz kalır), <820'de yok. Gradient/noise yok. */

.doku-izgara {
  position: relative;
}
@media (min-width: 820px) {
  .doku-izgara::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 45%;
    right: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M.5 0v96M0 .5h96' fill='none' stroke='%23121722'/%3E%3C/svg%3E");
    background-size: 96px 96px;
  }
}

/* 25.4 Başlık vurgu çubuğu (.vurgu — mc_vurgula) ---------------------------- */

.vurgu {
  position: relative;
  white-space: nowrap;
  isolation: isolate;
}
.vurgu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04em;
  z-index: -1;
  height: 0.14em;
  background: var(--blue-btn);
  transform-origin: 0 50%;
}
.on-dark .vurgu::after,
.panel-dark .vurgu::after {
  background: var(--blue);
}
.on-blue .vurgu::after {
  background: var(--on-blue);
}

/* 25.5 Kademeli reveal (mc_rv → rv rv-s1…s8) ve görsel yerleşme ------------- */
/* --rv-gecikme miras kalır: iç görsellerin ölçek geçişi de aynı gecikmeyle başlar. */

@media (prefers-reduced-motion: no-preference) {
  html.rv-hazir .rv-s1 { --rv-gecikme: 0ms; }
  html.rv-hazir .rv-s2 { --rv-gecikme: 70ms; }
  html.rv-hazir .rv-s3 { --rv-gecikme: 140ms; }
  html.rv-hazir .rv-s4 { --rv-gecikme: 210ms; }
  html.rv-hazir .rv-s5 { --rv-gecikme: 280ms; }
  html.rv-hazir .rv-s6 { --rv-gecikme: 350ms; }
  html.rv-hazir .rv-s7 { --rv-gecikme: 420ms; }
  html.rv-hazir .rv-s8 { --rv-gecikme: 490ms; }
  html.rv-hazir :is(.rv-s1, .rv-s2, .rv-s3, .rv-s4, .rv-s5, .rv-s6, .rv-s7, .rv-s8).rv {
    transition-delay: var(--rv-gecikme, 0ms);
  }
}
/* Mobilde tek kolonda satırlar zaten sırayla ekrana girer: gecikme yarıya iner */
@media (prefers-reduced-motion: no-preference) and (max-width: 819.98px) {
  html.rv-hazir .rv-s2 { --rv-gecikme: 35ms; }
  html.rv-hazir .rv-s3 { --rv-gecikme: 70ms; }
  html.rv-hazir .rv-s4 { --rv-gecikme: 105ms; }
  html.rv-hazir .rv-s5 { --rv-gecikme: 140ms; }
  html.rv-hazir .rv-s6 { --rv-gecikme: 175ms; }
  html.rv-hazir .rv-s7 { --rv-gecikme: 210ms; }
  html.rv-hazir .rv-s8 { --rv-gecikme: 245ms; }
}

/* Görsel yerleşme: .rv-gorsel (ekrana girince 1.06 → 1) ve .gorsel-yerles (ilk ekran,
   yalnız ölçek — opacity YOK, LCP gecikmez). Medya kapları overflow: hidden. */
.telefon-ekran,
.hz-gorsel-cerceve,
.gorsel-kap {
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  html.rv-hazir .rv-gorsel :is(.frame-media, .telefon-ekran, .hz-gorsel-cerceve, .gorsel-kap) img {
    transition: transform 1s var(--ease) var(--rv-gecikme, 0ms);
  }
  html.rv-hazir .rv-gorsel:not(.is-in) :is(.frame-media, .telefon-ekran, .hz-gorsel-cerceve, .gorsel-kap) img {
    transform: scale(1.06);
  }
  .gorsel-yerles :is(.frame-media, .telefon-ekran, .hz-gorsel-cerceve, .gorsel-kap) img,
  img.gorsel-yerles {
    animation: mc-yerles 900ms var(--ease) both;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 819.98px) {
  html.rv-hazir .rv-gorsel:not(.is-in) :is(.frame-media, .telefon-ekran, .hz-gorsel-cerceve, .gorsel-kap) img {
    transform: scale(1.03);
  }
}
@keyframes mc-yerles {
  from {
    transform: scale(1.04);
  }
  to {
    transform: none;
  }
}

/* 25.6 Hover dili: .kaldir / .kaldir-golge / .satir-hover / .cizgi-link ---- */
/* Kart yükselir (doğrudan çocukları translateY — .rv'nin transform/gecikmesiyle
   çakışmasın diye kartın kendisi değil), gölge katmanı opacity ile belirir (box-shadow
   animasyonu yok), çerçeve içi görsel 1.04 yakınlaşır. Hover'a bağlı bilgi saklanmaz. */

.kaldir-golge {
  position: relative;
}
.kaldir-golge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-3);
  box-shadow: var(--sh-kaldir);
  opacity: 0;
  pointer-events: none;
}

.satir-hover {
  position: relative;
  isolation: isolate;
}
.satir-hover::before {
  content: "";
  position: absolute;
  inset: 1px -12px;
  z-index: -1;
  border-radius: var(--r-2);
  background: var(--paper-2);
  opacity: 0;
  pointer-events: none;
}
.on-paper-2 .satir-hover::before {
  background: var(--paper);
}
.on-dark .satir-hover::before,
.panel-dark .satir-hover::before {
  background: var(--ink-900);
}

/* Alt çizgi: dokunmatikte hep görünür; fareyle gezilen cihazda hover'da soldan çizilir */
.cizgi-link:not(:has(.cizgi-link-metin)) > span:first-child,
.cizgi-link .cizgi-link-metin {
  position: relative;
}
.cizgi-link:not(:has(.cizgi-link-metin)) > span:first-child::after,
.cizgi-link .cizgi-link-metin::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: max(1px, 0.04em);
  background: currentColor;
  transform-origin: 0 50%;
}

@media (hover: hover) and (pointer: fine) {
  .kaldir:hover .kaldir-golge::after,
  .kaldir:focus-within .kaldir-golge::after,
  .kaldir.kaldir-golge:hover::after {
    opacity: 1;
  }
  .satir-hover:hover::before {
    opacity: 1;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kaldir > * {
    transition: transform var(--dur-2) var(--ease);
  }
  .kaldir:hover > *,
  .kaldir:focus-within > * {
    transform: translateY(-4px);
  }
  .kaldir-golge::after {
    transition: opacity var(--dur-2) ease;
  }
  .kaldir :is(.frame-media, .gorsel-kap) img {
    transition: transform 0.6s var(--ease);
  }
  .kaldir:hover :is(.frame-media, .gorsel-kap) img {
    transform: scale(1.04);
  }
  /* Hover yakınlaşması reveal gecikmesini beklemesin */
  html.rv-hazir .kaldir:hover :is(.frame-media, .gorsel-kap) img {
    transition-delay: 0ms;
  }
  .kaldir .ref-card-telefon {
    transition: transform 0.4s var(--ease);
  }
  .kaldir:hover .ref-card-telefon {
    transform: translateY(-6px);
  }

  .satir-hover::before {
    transition: opacity var(--dur-2) ease;
  }
  .satir-hover .satir-kay,
  .satir-hover .ikon-ok {
    transition: transform var(--dur-2) var(--ease);
  }
  .satir-hover:hover .satir-kay,
  .satir-hover:hover .ikon-ok {
    transform: translateX(4px);
  }

  .cizgi-link:not(:has(.cizgi-link-metin)) > span:first-child::after,
  .cizgi-link .cizgi-link-metin::after {
    transform: scaleX(0);
    transition: transform 0.3s var(--ease);
  }
  .cizgi-link:is(:hover, :focus-visible):not(:has(.cizgi-link-metin)) > span:first-child::after,
  .cizgi-link:is(:hover, :focus-visible) .cizgi-link-metin::after {
    transform: scaleX(1);
  }

  :is(.kaldir, .satir-hover):hover .ikon-baslik > .ikon {
    transform: translateY(-2px);
  }
  .ikon-baslik > .ikon {
    transition: transform var(--dur-2) var(--ease);
  }
}

/* 25.7 İnce çizgi ikon başlığı (.ikon-baslik) -------------------------------- */
/* Kutusuz; ikon başlığın solunda (liste satırı 22 px) ya da üstünde (.ikon-baslik--ust, 28 px).
   Flex kapta metni <span> ile sarın (mc_nw notu). Aynı sayfada en fazla 2 listede. */

.ikon-baslik {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}
.ikon-baslik > .ikon {
  position: relative;
  top: 0.18em;
  color: var(--blue-text);
}
.on-dark .ikon-baslik > .ikon,
.panel-dark .ikon-baslik > .ikon {
  color: var(--blue);
}
.ikon-baslik--ust {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.ikon-baslik--ust > .ikon {
  top: 0;
}

/* Onay işaretli liste: <ul class="liste-onay"> ya da kabına .liste-onay (ilk ul) */
ul.liste-onay,
.liste-onay > ul:first-of-type {
  padding-left: 0;
  list-style: none;
}
ul.liste-onay > li,
.liste-onay > ul:first-of-type > li {
  position: relative;
  padding-left: 28px;
}
ul.liste-onay > li::before,
.liste-onay > ul:first-of-type > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 16px;
  height: 16px;
  background: var(--blue-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.on-dark ul.liste-onay > li::before,
.on-dark .liste-onay > ul:first-of-type > li::before {
  background: var(--blue);
}

/* 25.8 Dev tipografi (.dev-kontur, .dev-iletisim) --------------------------- */

/* Kontur (outline) yazı: değişken fontun glifleri üst üste binen konturlardan oluşur;
   düz text-stroke her konturu çizer ve harfin içinde kesişim çizgileri/üçgen artıklar
   kalır. Bunun yerine önce kontur, sonra zemin renginde dolgu boyanır (paint-order):
   dolgu iç çizgileri örter, yalnız dış hat görünür. Kontur yarısı dolgunun altında
   kaldığı için kalınlık iki katı verilir. Dolgu rengi bulunduğu yüzeyin zemini
   (--kontur-zemin; yüzey sınıfları aşağıda). */
.on-paper,
.panel-light {
  --kontur-zemin: var(--paper);
}
.on-paper-2,
.page-hero--acik {
  --kontur-zemin: var(--paper-2);
}
.on-dark,
.panel-dark {
  --kontur-zemin: var(--ink-950);
}
.on-blue {
  --kontur-zemin: var(--blue-band);
}
.dev-kontur,
.kb-kontur,
.surec--kontur .step-num {
  -webkit-text-fill-color: var(--kontur-zemin, var(--paper));
  -webkit-text-stroke: var(--kontur-kalinlik, 3px) currentColor;
  paint-order: stroke fill;
}
.dev-kontur {
  --kontur-kalinlik: max(3px, 0.016em);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.04em;
}
/* 404: kabın genişliğine göre (container query; kap yoksa görüntü alanı) — "404" ≈ 1.8em */
.dev-kontur--404 {
  display: block;
  font-size: min(20rem, 100cqi / 1.9);
}

/* İletişim: punto kabın (ul) genişliğinden hesaplanır — info@mastercode.com.tr ≈ 11.19em,
   telefon ≈ 6.9em; hiçbir kırılımda taşmaz. */
.dev-iletisim {
  container-type: inline-size;
  border-top: 1px solid var(--line);
}
.on-dark .dev-iletisim {
  border-top-color: var(--ink-700);
}
.dev-iletisim a {
  display: grid;
  gap: 4px;
  min-height: 44px;
  padding-block: 16px 18px;
  border-bottom: 1px solid var(--line);
  color: inherit;
}
.on-dark .dev-iletisim a {
  border-bottom-color: var(--ink-700);
}
.dev-iletisim-etiket {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.on-dark .dev-iletisim-etiket {
  color: var(--on-dark-faint);
}
.dev-iletisim-deger {
  justify-self: start;
  font-family: var(--font-display);
  font-size: min(4.25rem, 100cqi / 11.6);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.dev-iletisim-telefon .dev-iletisim-deger {
  font-size: min(4.25rem, 100cqi / 7.6);
  font-variant-numeric: tabular-nums;
}
.dev-iletisim-whatsapp .dev-iletisim-deger {
  font-size: min(4.25rem, 100cqi / 8.4);
}
.dev-iletisim a:hover .dev-iletisim-deger {
  color: var(--blue-text);
}
.on-dark .dev-iletisim a:hover .dev-iletisim-deger {
  color: var(--blue-text-dark);
}

/* 25.9 Logo şeridi (mc_logo_seridi) ----------------------------------------- */
/* Beyaz tek renk logolar: yalnızca koyu zeminde. <820: 2×2 (3 logo: tek satır üçlü),
   ≥820 tek satır. Her düzende logolar EŞİT yükseklikte (optik boy tutarlı): <480 22 px
   (üçlü 16 px), 480–819 24 px (üçlü 20 px), ≥820 26 px, ≥1100 30 px. Yükseklikler en
   geniş logonun (oran ≈6.2) kolona sığacağı değerlerdir; sığmazsa oran korunarak küçülür. */

.logo-seridi {
  --logo-y: 22px;
  display: grid;
  gap: 8px;
}
.logo-seridi--3li {
  --logo-y: 16px;
}
.logo-seridi-etiket {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.logo-seridi-liste {
  max-width: 48rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
  align-items: center;
}
.logo-seridi--3li .logo-seridi-liste {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 10px;
}
.logo-seridi-liste li {
  min-width: 0;
}
.logo-seridi-liste a {
  display: flex;
  align-items: center;
  min-height: 44px;
  opacity: 0.66;
}
.logo-seridi-liste a:hover,
.logo-seridi-liste a:focus-visible {
  opacity: 1;
}
.logo-seridi-liste img {
  width: auto;
  height: var(--logo-y);
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.logo-seridi--bant {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-3);
  background: var(--ink-950);
}
@media (min-width: 480px) {
  .logo-seridi {
    --logo-y: 24px;
  }
  .logo-seridi--3li {
    --logo-y: 20px;
  }
  .logo-seridi--3li .logo-seridi-liste {
    gap: 4px 16px;
  }
}
@media (min-width: 820px) {
  .logo-seridi,
  .logo-seridi--3li {
    --logo-y: 26px;
  }
  .logo-seridi-liste,
  .logo-seridi--3li .logo-seridi-liste {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 24px;
  }
  .logo-seridi-liste li {
    flex: 0 1 auto;
  }
  .logo-seridi--2li .logo-seridi-liste {
    justify-content: flex-start;
    gap: 48px;
  }
}
@media (min-width: 1100px) {
  .logo-seridi,
  .logo-seridi--3li {
    --logo-y: 30px;
  }
  .logo-seridi--satir {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-5);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .logo-seridi-liste a {
    transition: opacity var(--dur-1) ease;
  }
}

/* 25.10 Kayan yazı bandı (mc_kayan_bant) ------------------------------------ */

/* Bant görünür olduğu sürece kendiliğinden ve sürekli akar (müşteri kararı: kaydırmaya
   bağlı akış yerine). Fareyle üstüne gelince durur; ekran dışındayken main.js .is-durdu
   verir (pil/işlemci). Dekoratiftir (aria-hidden, içerik sayfada zaten var).
   reduced-motion'da hiç hareket yoktur. */
.kayan-bant {
  overflow: hidden;
  overflow: clip;
  padding-block: var(--sp-5);
  border-block: 1px solid var(--line);
  color: var(--fg);
}
.kayan-bant--koyu {
  border-color: var(--ink-700);
  color: var(--on-dark);
}
.kayan-bant-iz {
  display: flex;
  width: max-content;
}
.kb-set {
  display: flex;
  flex: none;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1rem + 6vw, 6.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.kayan-bant--koyu .kb-kontur {
  color: var(--on-dark-2);
}
/* Ayraç: logo karesi (nokta değil) */
.kb-ayrac {
  flex: none;
  width: 0.28em;
  height: 0.28em;
  margin-inline: 0.5em;
  border-radius: 0.03em;
  background: var(--blue);
}
/* İz iki özdeş setten oluşur; -%50 kayınca ikinci set birincinin yerine oturur ve döngü
   dikişsiz sürer. Süre telefonda kısa (punto küçük, set kısa): iki genişlikte de sakin,
   okunabilir bir hız (telefonda ~70, masaüstünde ~105 px/sn). */
.kayan-bant-iz {
  --kb-sure: 46s;
}
@media (min-width: 820px) {
  .kayan-bant-iz {
    --kb-sure: 80s;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .kayan-bant-iz {
    animation: mc-kay var(--kb-sure) linear infinite;
  }
  .kayan-bant.is-durdu .kayan-bant-iz {
    animation-play-state: paused;
  }
}
/* Fareyle üstüne gelince durma yalnız gerçek hover yeteneğinde: dokunmatikte bir dokunuş
   yapışkan :hover bırakır ve bant durmuş kalırdı. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .kayan-bant:hover .kayan-bant-iz {
    animation-play-state: paused;
  }
}
@keyframes mc-kay {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* 25.11 Telefon çerçevesi + referans kartında mobil eş ---------------------- */

.telefon {
  display: block;
  padding: 4px;
  border-radius: 18px;
  background: var(--ink-950);
  box-shadow: var(--sh-frame);
}
.telefon-ekran {
  display: block;
  border-radius: 14px;
  background: var(--paper-2);
}
.telefon-ekran img {
  width: 100%;
  height: auto;
  aspect-ratio: 546 / 1182;
  object-fit: cover;
  object-position: top center;
}
.ref-card-gorsel {
  position: relative;
}
.ref-card-telefon {
  display: none;
}
@media (min-width: 820px) {
  .ref-card--mobilli .ref-card-gorsel {
    margin-right: 16px;
  }
  .ref-card-telefon {
    display: block;
    position: absolute;
    right: -16px;
    bottom: -16px;
    z-index: 1;
    width: 22%;
  }
  .ref-card--mobilli .work-meta {
    padding-top: calc(var(--sp-3) + 8px);
  }
}

/* Labs uygulama ikonları (mc_labs_ikon) */
.labs-ikon {
  flex: none;
  border-radius: 22%;
}

/* 25.12 İç sayfa başlığı: marka şekli + görsel yuvası + alt bant ------------ */

.page-hero-side {
  display: contents;
}
.page-hero-gorsel {
  container-type: inline-size;
}
/* Küçük görseller (uygulama ikonu, çizgi ikon) mobilde metnin üstünde, küçük */
.page-hero--g-ikon .page-hero-gorsel,
.page-hero--g-img:not(.page-hero--g-img-genis) .page-hero-gorsel {
  order: -1;
  margin-bottom: calc(var(--sp-6) * -0.5);
}
.page-hero--g-img:not(.page-hero--g-img-genis) .page-hero-gorsel img {
  border-radius: 22%;
}
@media (max-width: 819.98px) {
  .page-hero--g-img:not(.page-hero--g-img-genis) .page-hero-gorsel img {
    width: 80px;
    height: auto;
  }
}
@media (min-width: 820px) and (max-width: 1099.98px) {
  .page-hero--g-img:not(.page-hero--g-img-genis) .page-hero-gorsel img {
    width: 104px;
    height: auto;
  }
}
.page-hero--g-img-genis .page-hero-gorsel img {
  width: 100%;
  height: auto;
}
.page-hero-ikon {
  width: 72px;
  height: 72px;
  color: var(--blue);
  stroke-width: 1.1;
}
/* Telefon yelpazesi: yalnızca ≥820 (telefonda görseller indirilmez) */
.page-hero--g-telefonlar .page-hero-gorsel,
.page-hero--g-masaustu .page-hero-gorsel {
  display: none;
}
.page-hero-gorsel--telefonlar .telefon {
  flex: none;
  width: 30%;
  max-width: 180px;
}
.page-hero-gorsel--telefonlar .telefon--on {
  position: relative;
  z-index: 1;
  width: 38%;
  max-width: 220px;
}
.page-hero-gorsel--telefonlar .telefon--arka {
  transform: translateY(28px);
}
.page-hero-gorsel--telefonlar .telefon--arka:first-child {
  margin-right: -7%;
}
.page-hero-gorsel--telefonlar .telefon--on + .telefon--arka {
  margin-left: -7%;
}
@media (min-width: 820px) {
  .page-hero--g-telefonlar .page-hero-gorsel,
  .page-hero--g-masaustu .page-hero-gorsel {
    display: flex;
  }
  .page-hero-gorsel--telefonlar {
    justify-content: center;
    align-items: flex-start;
    padding-bottom: 28px;
  }
  .page-hero-gorsel--img,
  .page-hero-gorsel--ikon {
    justify-content: flex-start;
  }
  .page-hero-ikon {
    width: 120px;
    height: 120px;
  }
}
@media (min-width: 1100px) {
  .page-hero--gorselli .page-hero-grid {
    align-items: center;
  }
  .page-hero--gorselli .page-hero-main {
    grid-column: 1 / span 7;
  }
  .page-hero--gorselli .page-hero-side {
    grid-column: 8 / -1;
    display: grid;
    gap: var(--sp-5);
    align-content: end;
  }
  .page-hero--gorselli .page-hero-side .facts {
    grid-column: auto;
  }
  .page-hero-gorsel {
    order: 0;
    margin-bottom: 0;
  }
  .page-hero--g-ikon .page-hero-gorsel,
  .page-hero--g-img:not(.page-hero--g-img-genis) .page-hero-gorsel {
    margin-bottom: 0;
  }
  .page-hero--g-ikon .page-hero-gorsel,
  .page-hero--g-img:not(.page-hero--g-img-genis) .page-hero-gorsel {
    display: flex;
    justify-content: flex-end;
    padding-right: var(--sp-5);
  }
  .page-hero-ikon {
    width: 160px;
    height: 160px;
  }
}

/* Alt bant: kayan bant ya da logo şeridi başlığın alt kenarında */
.page-hero--alt-bant {
  padding-bottom: 0;
}
.page-hero-alt {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}
.page-hero-alt--kayan .kayan-bant {
  border-bottom: 0;
}
.page-hero-alt--logolar .logo-seridi {
  padding-block: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--ink-700);
}
@media (min-width: 820px) {
  .page-hero-alt--mobil {
    display: none;
  }
}
@media (max-width: 819.98px) {
  .page-hero-alt--masaustu {
    display: none;
  }
}

/* 25.13 Süreç: dolan çizgi, kare düğümler, dev kontur numaralar -------------- */
/* mc_surec_listesi_yaz(): <820 dikey (çizgi solda), ≥820 yatay 4 kolon (çizgi üstte). */

.surec {
  position: relative;
}
.surec--dolum .steps {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5) var(--gap);
}
.surec--dolum .step {
  position: relative;
  padding-top: 0;
  padding-left: 36px;
  border-top: 0;
}
/* Düğüm: logo karesi */
.surec--dolum .step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: var(--blue-btn);
}
.steps-hat {
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 4px;
  width: 2px;
  view-timeline-name: --surec-hat;
}
.steps-hat::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.5px;
  width: 1px;
  background: var(--line-strong);
}
.steps-hat-dolgu {
  position: absolute;
  inset: 0;
  background: var(--blue-btn);
  transform-origin: 50% 0;
}
/* Dikey düzende hat son adımın düğümünde biter (son adımın metni altında devam etmez):
   son adım çapa, hattın alt kenarı onun düğüm merkezine bağlanır (CSS anchor). Desteklemeyen
   tarayıcıda hat listenin sonuna kadar iner. */
@supports (anchor-name: --a) and (anchor-scope: --a) {
  .surec--dolum {
    anchor-scope: --surec-son;
  }
  .surec--dolum .step:last-child {
    anchor-name: --surec-son;
  }
  .steps-hat {
    bottom: calc(anchor(--surec-son top) - 11px);
  }
}
.surec--koyu .step::before,
.surec--koyu .steps-hat-dolgu {
  background: var(--blue);
}
.surec--koyu .steps-hat::before {
  background: var(--ink-600);
}
.surec--koyu .step p {
  color: var(--on-dark-muted);
}
.surec--kontur .step-num {
  font-size: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--blue-text);
}
.surec--koyu.surec--kontur .step-num {
  color: var(--blue);
}
.surec--dolum .step-title {
  margin-top: var(--sp-2);
}
@media (min-width: 820px) {
  .surec--dolum .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .surec--dolum .step {
    padding-top: 36px;
    padding-left: 0;
  }
  .surec--dolum .step::before {
    top: 0;
  }
  .steps-hat {
    top: 4px;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 2px;
  }
  .steps-hat::before {
    top: 0.5px;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
  }
  .steps-hat-dolgu {
    transform-origin: 0 50%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Kap .rv yalnızca tetik: kendisi solmaz/kaymaz */
  html.rv-hazir .surec.rv:not(.is-in) {
    opacity: 1;
    transform: none;
  }
  /* Yedek (animation-timeline yok): kap ekrana girince çizgi 1.2 s'de dolar */
  .surec--dolum .steps-hat-dolgu {
    transition: transform 1.2s var(--ease) 0.1s;
  }
  html.rv-hazir .surec.rv:not(.is-in) .steps-hat-dolgu {
    transform: scaleY(0);
  }
  /* Düğümler adım sırasıyla (adımın --rv-gecikme'si + 200 ms) */
  .surec--dolum .step::before {
    transition: transform 0.5s var(--ease) calc(var(--rv-gecikme, 0ms) + 200ms);
  }
  html.rv-hazir .surec--dolum .step.rv:not(.is-in)::before {
    transform: scale(0);
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 820px) {
  html.rv-hazir .surec.rv:not(.is-in) .steps-hat-dolgu {
    transform: scaleX(0);
  }
}
/* Destekleyen tarayıcıda çizgi doğrudan kaydırmaya bağlı dolar (JS yok) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .surec--dolum .steps-hat-dolgu {
      transition: none;
      animation: mc-dolum-y linear both;
      animation-timeline: --surec-hat;
      animation-range: entry 30% cover 55%;
    }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 820px) {
    .surec--dolum .steps-hat-dolgu {
      animation-name: mc-dolum-x;
    }
  }
}
@keyframes mc-dolum-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes mc-dolum-y {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* 25.14 Mega menü ve mobil menü zenginleştirmesi ---------------------------- */

.mega-link-ikon {
  color: var(--blue-text);
}
.mega-link--ikonlu .mega-link-desc {
  padding-left: 28px;
}
.mega-link.satir-hover:hover {
  background: transparent;
}
.mega-link.satir-hover::before {
  inset: 0;
}
.mega-link.is-current.satir-hover::before {
  background: var(--blue-tint);
  opacity: 1;
}
.mega-labs .mega-link {
  grid-template-columns: 32px minmax(0, 1fr) auto;
}
.mega-labs-ikon {
  width: 32px;
  height: 32px;
}
.mega-product-kimlik {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mega-feature-img img {
  transform-origin: 50% 0;
}

.m-sub a.m-sub-ikonlu {
  justify-content: flex-start;
}
.m-sub-ikon {
  color: var(--blue-text);
}
.m-sub a.m-sub-urun {
  justify-content: flex-start;
}
.m-sub-urun .m-sub-ad {
  flex: 1 1 auto;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mega-feature-img img {
    transition: transform 0.6s var(--ease);
  }
  .mega-feature:hover .mega-feature-img img {
    transform: scale(1.04);
  }
}
/* Panel açılışında içerik sütunları 40 ms arayla (yalnız masaüstü, hareket açıkken) */
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .nav-item.is-open > .mega :is(.mega-group, .mega-feature, .mega-product, .mega-labs),
  html:not(.nav-hazir) .nav-item:hover > .mega :is(.mega-group, .mega-feature, .mega-product, .mega-labs),
  html:not(.nav-hazir) .nav-item:focus-within > .mega :is(.mega-group, .mega-feature, .mega-product, .mega-labs) {
    animation: mc-mega-in 320ms var(--ease) both;
  }
  .mega .mega-group:nth-child(2),
  .mega .mega-labs {
    animation-delay: 40ms;
  }
  .mega .mega-group:nth-child(3) {
    animation-delay: 80ms;
  }
  .mega .mega-group:nth-child(4) {
    animation-delay: 120ms;
  }
  .mega .mega-feature {
    animation-delay: 160ms;
  }
}
@keyframes mc-mega-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 25.15 İlk ekran ve ekrana giriş animasyonları ------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .on-blue .btn--secondary::before {
    transition: opacity var(--dur-2) ease;
  }
  /* Marka şekli — ilk ekran: CSS animasyonu (JS'siz de biter, son durum görünür) */
  .marka-sekli--ilk .ms-p {
    animation: mc-sekil-gir 700ms var(--ease) both;
  }
  .marka-sekli--ilk .ms-p2 {
    animation-delay: 90ms;
  }
  .marka-sekli--ilk .ms-p3 {
    animation-delay: 180ms;
  }
  /* Marka şekli — ekrana girince (reveal): svg'nin kendisi solmaz, parçaları kademeli gelir */
  html.rv-hazir .marka-sekli--rv:not(.is-in) {
    opacity: 1;
    transform: none;
  }
  html.rv-hazir .marka-sekli--rv .ms-p {
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  }
  html.rv-hazir .marka-sekli--rv .ms-p2 {
    transition-delay: 90ms;
  }
  html.rv-hazir .marka-sekli--rv .ms-p3 {
    transition-delay: 180ms;
  }
  html.rv-hazir .marka-sekli--rv:not(.is-in) .ms-p {
    opacity: 0;
    transform: translateY(32px);
  }
  /* Paralaks: main.js bölüm 8, --py (px) yazar; yalnız ≥1100 + ince işaretçi */
  .marka-sekli[data-paralaks] {
    transform: translate3d(0, calc(var(--py, 0) * 1px), 0);
  }

  /* Vurgu çubuğu: ilk ekranda CSS animasyonu; bölüm başlığında ekrana girince */
  .page-title .vurgu::after,
  .hero-title .vurgu::after,
  .vurgu--ilk::after {
    animation: mc-cizgi 650ms var(--ease) 350ms both;
  }
  .rv .vurgu::after {
    transition: transform 700ms var(--ease) calc(var(--rv-gecikme, 0ms) + 250ms);
  }
  html.rv-hazir .rv:not(.is-in) .vurgu::after {
    transform: scaleX(0);
  }
}
@keyframes mc-sekil-gir {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mc-cizgi {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Yazdırma: gizli ne varsa görünür */
@media print {
  .site-header,
  .mega-scrim,
  .mobile-panel,
  .skip-link {
    display: none;
  }
  /* Gizleme kuralıyla aynı özgüllük (0,3,1), sonra geldiği için kazanır;
     beforeprint tetiklenmeyen PDF üretiminde de içerik görünür. */
  .rv,
  html.rv-hazir .rv:not(.is-in) {
    opacity: 1;
    transform: none;
  }
  /* Zenginleştirme: gizli parça, sıfır ölçekli çizgi/düğüm, yakınlaştırılmış görsel kalmasın */
  html.rv-hazir .marka-sekli--rv:not(.is-in) .ms-p,
  html.rv-hazir .rv:not(.is-in) .vurgu::after,
  html.rv-hazir .surec.rv:not(.is-in) .steps-hat-dolgu,
  html.rv-hazir .surec--dolum .step.rv:not(.is-in)::before,
  html.rv-hazir .rv-gorsel:not(.is-in) :is(.frame-media, .telefon-ekran, .hz-gorsel-cerceve, .gorsel-kap) img {
    opacity: 1;
    transform: none;
  }
  .kayan-bant-iz {
    animation: none;
  }
  .marka-sekli,
  .doku-izgara::before {
    display: none;
  }
}

/* ==========================================================================
   26. Sayfa: Ana sayfa
   ========================================================================== */

/* ==========================================================================
   Ana sayfa (front-page.php + template-parts/ana-sayfa-*.php)
   Yalnızca ana sayfaya özgü eklemeler; tüm seçiciler .ana-… önekli kapsamda.
   Ortak bileşenler (hero, work, frame, service-index, panel, ai, steps, labs, faq)
   main.css'tedir ve burada yeniden tanımlanmaz.
   ========================================================================== */

/* 1. Hero ------------------------------------------------------------------- */

/* 768 altında H1 bir kademe büyür: dar ekranda 6 satırlık lead paragrafı H1'den
   geniş alan kaplayıp LCP öğesi olmasın. 480–767: üç satır
   ("İşinize göre yazılan / e-ticaret siteleri / ve yazılımlar."). */
@media (max-width: 767.98px) {
  .ana-hero .hero-title {
    font-size: clamp(2.875rem, 1.6rem + 5.4vw, 3.5rem);
  }
}
/* 480 altında üç satır ancak lead'den küçük bir puntoyla sığar (LCP lead'e geçer).
   Bunun yerine dört dengeli satır: "İşinize göre / yazılan e-ticaret / siteleri ve /
   yazılımlar." Punto içerik genişliğine bağlı: en uzun satır ("yazılan e-ticaret",
   ≈7.13em) her genişlikte sığar, "İşinize göre yazılan" (≈8.41em) sığmaz; böylece
   tek kelimelik ara satır oluşmaz. Dengeleme (balance) bu durumda "yazılan"ı yalnız
   bıraktığı için satır kırma olağan akışa döner.
   Telefonda ilk ekranda gerçek iş görünsün diye (logo şeridi, butonların altında)
   dikey ritim bir kademe sıkışır: üst boşluk, eyebrow → H1, H1 → lead, lead → butonlar.
   Hedef: 360×800 ve 390×844'te ikinci logo satırı ~760 px'in üstünde biter. */
@media (max-width: 479.98px) {
  .ana-hero-ust {
    padding-top: var(--sp-4);
  }
  .ana-hero .hero-eyebrow {
    margin-bottom: var(--sp-2);
  }
  .ana-hero .hero-title {
    font-size: clamp(2.375rem, calc((100vw - var(--gutter) * 2) / 7.35), 3.5rem);
    text-wrap: wrap;
  }
  /* Lead iki kademe (18 → 16px) küçülür: 17px'te 360'ta lead'in LCP alanı H1'i
     geçiyordu (48.5k > H1). Ölçülen (LCP alanı, H1 / lead): 360 → 41.5–44.6k / 37.9k,
     375 → 45.6k / 39.7k, 390 → 49.5k / 42.0k; 360/375/390/412/430'da LCP = H1.
     (.vurgu'nun isolation'ı H1'in alanını değiştirmiyor; ölçüldü.) */
  .ana-hero .hero-lead {
    margin-top: 20px;
    font-size: 1rem;
  }
  .ana-hero .hero-ctas {
    margin-top: 20px;
  }
}

.ana-hero .hero-lead {
  margin-top: var(--sp-4);
}

/* Üst boşluk .ana-hero-ust'e taşınır: marka şeklinin konumu bölümün üst kenarına
   göre verilir ve şekil bu kabın alt kenarında kesilir (niyet bandının üstünden
   geçmez). Izgara dokusu (.doku-izgara::before, z 0) içeriğin altında kalsın diye
   iki kap da z 1'dedir. */
.ana-hero {
  padding-block: 0;
}
.ana-hero-ust {
  z-index: 1;
  padding-block: clamp(3rem, 1.4rem + 6.4vw, 7.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.ana-hero > .container {
  position: relative;
  z-index: 1;
}

/* Logo şeridi (<1100): butonların altında, güven satırından önce dört müşteri logosu */
.ana-hero-logolar {
  margin-top: var(--sp-4);
}
@media (max-width: 479.98px) {
  .ana-hero-logolar {
    margin-top: 20px;
  }
}

.ana-guven {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gap);
  max-width: 34rem;
  margin-top: var(--sp-4);
}
.ana-guven div {
  padding-top: 12px;
  border-top: 1px solid var(--ink-700);
}
.ana-guven dt {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.ana-guven dd {
  margin-top: 4px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--on-dark-2);
}

/* 1a. Telefon çerçevesi (hero sahnesi) -----------------------------------------
   İnce koyu bezel, yuvarlak köşe, çok hafif gölge. Glow, gradient, tilt yok.
   Köşe yarıçapı --tel-r; ekranın yarıçapı bezel kadar küçüktür (eş merkezli). */
.ana-telefon {
  --tel-r: 30px;
  --tel-bezel: 5px;
  display: block;
  padding: var(--tel-bezel);
  border: 1px solid var(--ink-600);
  border-radius: var(--tel-r);
  background: var(--ink-850);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 32px 64px -32px rgba(0, 0, 0, 0.7);
}
.ana-telefon-ekran {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--tel-r) - var(--tel-bezel) - 1px);
  background: var(--paper-2);
}
.ana-telefon-ekran img {
  display: block;
  width: 100%;
  height: auto;
}

/* 1b. Telefon sahnesi (yalnızca ≥1100) ---------------------------------------
   <1100'de gizli; <picture> o genişlikte 1×1 data URI seçtiği için görseller de
   indirilmez. Üç telefon 20 kolonluk tek satırlı ızgarada üst üste biner: önde ve
   en büyük Water Point (kolon 6–15), arkada solda Aquapoint (1–8) ve sağda Çılgın
   Teknoloji (13–20), dikeyde farklı kaydırılmış. Altta müşteri logoları, telefonların
   konumuna hizalı. Arkada marka şekli (varyant hero, ortak katman). */
.ana-sahne {
  display: none;
}
@media (min-width: 1100px) {
  /* Dikey boşluk ekran yüksekliğine bağlı: 1440×900, 1920×905 ve 1280×800'de
     hero + yönlendirme bandı ilk ekrana sığar. */
  .ana-hero {
    padding-block: 0;
  }
  .ana-hero-ust {
    padding-block: clamp(2rem, 7.5vh - 1.25rem, 4rem) clamp(2rem, 6vh - 0.5rem, 3.5rem);
  }
  .ana-hero--sahne .ana-hero-logolar {
    display: none;
  }
  .ana-hero-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
  }
  .ana-hero-metin {
    grid-column: 1 / span 10;
  }
  .ana-hero--sahne .ana-hero-metin {
    grid-column: 1 / span 7;
  }
  .ana-hero--sahne .hero-title {
    font-size: clamp(3.25rem, 1.2rem + 3.6vw, 4.5rem);
  }

  /* Sahnenin yüksekliği genişliğiyle orantılı (~1.05×); alçak ekranlarda (800,
     768) genişlik ekran yüksekliğine göre sınırlanır ki sahne metin kolonundan
     uzun olup bandı ilk ekranın dışına itmesin. ≥ ~880px yükseklikte etkisiz. */
  .ana-sahne {
    position: relative;
    display: block;
    grid-column: 8 / -1;
    justify-self: end;
    width: 100%;
    max-width: max(22rem, calc((100vh - 340px) * 0.95));
    margin: 0;
  }
  .ana-sahne-liste {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    align-items: start;
  }
  .ana-sahne-oge {
    position: relative;
    grid-row: 1;
  }
  .ana-sahne-oge--sol {
    grid-column: 1 / span 8;
    margin-top: 4.5rem;
  }
  .ana-sahne-oge--on {
    z-index: 2;
    grid-column: 6 / span 10;
    margin-top: 1.5rem;
  }
  .ana-sahne-oge--sag {
    grid-column: 13 / span 8;
  }
  .ana-sahne-oge--sol .ana-telefon,
  .ana-sahne-oge--sag .ana-telefon {
    --tel-r: 26px;
    --tel-bezel: 4px;
  }
  /* Arkadakiler bir ton geride: ekran koyu zeminle hafifçe karışır (derinlik, efekt değil) */
  .ana-sahne-oge--sol .ana-telefon-ekran img,
  .ana-sahne-oge--sag .ana-telefon-ekran img {
    opacity: 0.82;
  }
  .ana-sahne-oge--on .ana-telefon {
    --tel-r: 34px;
    --tel-bezel: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 40px 80px -36px rgba(0, 0, 0, 0.8);
  }
  .ana-sahne-link {
    display: block;
    border-radius: 30px;
  }
  /* Telefonların altında müşteri logoları (eski alan adı satırının yerine): telefon
     sahnesiyle aynı 20 kolonluk ızgarada, her logo kendi telefonunun GÖRÜNEN kısmının
     hizasında (arkadaki telefonların dış kenarı, öndekinin ortası). */
  .ana-sahne-logolar {
    --logo-y: 22px;
    margin-top: 6px;
  }
  .ana-sahne-logolar .logo-seridi-liste {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    max-width: none;
    gap: 0;
  }
  /* Logolar bağlantısız (telefon bağlantısının tekrarı değil): yalnız görsel. Bir
     telefonun üzerine gelindiğinde onun logosu tam opaklığa çıkar. */
  .ana-sahne-logolar li {
    display: flex;
    align-items: center;
    min-height: 40px;
    grid-row: 1;
  }
  .ana-sahne-logolar img {
    opacity: 0.66;
  }
  .ana-sahne:has(.ana-sahne-oge--sol .ana-sahne-link:is(:hover, :focus-visible)) .ana-sahne-logolar li:nth-child(1) img,
  .ana-sahne:has(.ana-sahne-oge--on .ana-sahne-link:is(:hover, :focus-visible)) .ana-sahne-logolar li:nth-child(2) img,
  .ana-sahne:has(.ana-sahne-oge--sag .ana-sahne-link:is(:hover, :focus-visible)) .ana-sahne-logolar li:nth-child(3) img {
    opacity: 1;
  }
  .ana-sahne-logolar li:nth-child(1) {
    grid-column: 1 / span 6;
    justify-self: start;
  }
  .ana-sahne-logolar li:nth-child(2) {
    grid-column: 6 / span 10;
    justify-self: center;
  }
  .ana-sahne-logolar li:nth-child(3) {
    grid-column: 15 / span 6;
    justify-self: end;
  }
}

/* 1b''. Telefon sahnesi 820–1099 -------------------------------------------------
   Tablette de ilk ekranda gerçek iş: H1 tam genişlikte; altında solda lead, butonlar ve
   güven satırı, sağda iki telefon (Water Point önde, Aquapoint arkada solda). Üçüncü
   telefon ve telefon altı logolar bu genişlikte gizli (görseller indirilmez — <picture>);
   metnin altındaki dört logoluk satır da gizli (lazy, indirilmez): gerçek iş telefonlarda.
   .ana-hero-metin display: contents — öğeleri doğrudan iki kolonlu ızgaraya yerleşir;
   sahne 3.–5. satırları kaplar, fazla yükseklik son (esnek) satıra gider. */
@media (min-width: 820px) and (max-width: 1099.98px) {
  .ana-hero--sahne .ana-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 28vw, 300px);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: var(--gap);
  }
  .ana-hero--sahne .ana-hero-metin {
    display: contents;
  }
  .ana-hero--sahne :is(.hero-eyebrow, .hero-title) {
    grid-column: 1 / -1;
  }
  .ana-hero--sahne :is(.hero-lead, .hero-ctas, .ana-guven) {
    grid-column: 1;
  }
  .ana-hero--sahne .ana-hero-logolar,
  .ana-hero--sahne .ana-sahne-oge--sag,
  .ana-hero--sahne .ana-sahne-logolar {
    display: none;
  }
  .ana-hero--sahne .ana-sahne {
    position: relative;
    display: block;
    grid-column: 2;
    grid-row: 3 / span 3;
    align-self: start;
    margin: var(--sp-4) 0 0;
  }
  .ana-sahne-liste {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    align-items: start;
  }
  .ana-sahne-oge {
    position: relative;
    grid-row: 1;
  }
  .ana-sahne-oge--sol {
    grid-column: 1 / span 12;
    margin-top: 3rem;
  }
  .ana-sahne-oge--on {
    z-index: 2;
    grid-column: 7 / span 14;
  }
  .ana-sahne-oge--sol .ana-telefon {
    --tel-r: 24px;
    --tel-bezel: 4px;
  }
  .ana-sahne-oge--sol .ana-telefon-ekran img {
    opacity: 0.82;
  }
}

/* 1b'. Marka şekli ≥1100 ---------------------------------------------------------
   Telefon sahnesi şekli kendi alanında tamamen örter; bu yüzden şekil sahneye göre
   konumlanır: sol kesit (mavi şeritle birlikte) metin kolonuyla sahne arasındaki
   boşlukta, sahnenin 8 px solunda durur; sağ kesit ve çaprazın ucu sahnenin sağından
   ve altından çıkar (geniş ekranda M telefonları iki yandan çerçeveler). Genişlik,
   sol kesit (150/640) boşluğa sığacak ve sağ kesit sahnenin sağ kenarına ulaşacak
   biçimde hesaplanır. Şerit H1'in ilk satırının altından başlar (metnin arkasına
   girmez). Hesap sahnenin genişlik formülünü (1b) ve metnin 34rem sınırını kullanır;
   % değerleri şeklin kabına (.ana-hero-ust, tam genişlik) göredir.
   Ölçüt (1280×800/900, 1366×768, 1440×900, 1600, 1920): mavi şeridin tamamı ve sol
   kesit telefonlarla kesişmeden görünür; sağ kesit sahnenin sağında/altında çıkar.
   1100–1279: metinle sahne arasında boşluk yok (≈30 px); şekil yalnız telefonların
   arkasında kopuk parçalar halinde görünürdü — gizli, ilk ekranın görseli telefonlar. */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .ana-hero--sahne .marka-sekli--hero {
    display: none;
  }
}
@media (min-width: 1280px) {
  .ana-hero--sahne .marka-sekli--hero {
    --ana-icerik: calc(100% - 2 * var(--ms-kenar) - 2 * var(--gutter));
    --ana-sahne-gen: min(calc(5 * (var(--ana-icerik) - 11 * var(--gap)) / 12 + 4 * var(--gap)), max(22rem, (100vh - 340px) * 0.95));
    --ana-bosluk: calc(var(--ana-icerik) - var(--ana-sahne-gen) - 34rem);
    --ms-gen: min((var(--ana-bosluk) - 16px) * 4.2667, max(720px, (var(--ana-sahne-gen) - 16px) * 1.8824));
    --ms-sag: calc(var(--ms-kenar) + var(--gutter) + var(--ana-sahne-gen) + 8px - var(--ms-gen) * 0.765625);
    /* top'ta % yüksekliğe göre çözülür: genişliğe bağlı --ms-gen burada kullanılamaz.
       Şerit üst ucu = boşluk + 102 px + 40/640 × genişlik (≈ boşluk + 145…157 px):
       H1'in ilk satırının (≈ boşluk + 126 px) altında. */
    --ms-ust: calc(clamp(2rem, 7.5vh - 1.25rem, 4rem) + 102px);
  }
}

/* 1c. "Ne arıyorsunuz?" --------------------------------------------------------
   hero: ≥1100 koyu zeminde tam genişlik yönlendirme bandı (solda etiket, sağda
   eşit kolonlar, hairline ayraçlar). akis: <1100 vitrinden sonra açık zeminde
   tam genişlik satırlar (öksüz öğe yok). Her genişlikte yalnızca biri görünür. */
.ana-niyet--hero {
  display: none;
}
.ana-niyet-etiket {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ana-niyet-cumle {
  font-weight: 600;
  line-height: 1.35;
}
.ana-niyet-hedef {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.ana-niyet-hedef .ikon {
  flex: none;
}

.ana-niyet-blok {
  background: var(--paper-2);
  padding-bottom: var(--section-y);
}
.ana-niyet--akis .ana-niyet-etiket {
  padding-bottom: 12px;
  color: var(--muted);
}
.ana-niyet--akis .ana-niyet-liste {
  border-top: 1px solid var(--line-strong);
}
.ana-niyet--akis .ana-niyet-link {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 64px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line-strong);
}
.ana-niyet--akis .ana-niyet-cumle {
  color: var(--fg);
}
.ana-niyet--akis .ana-niyet-hedef {
  color: var(--blue-text);
}
.ana-niyet--akis .ana-niyet-link:hover .ana-niyet-cumle {
  color: var(--blue-text);
}
/* 600–1099: tek satırlık dizin — solda ziyaretçinin cümlesi, sağda hedef */
@media (min-width: 600px) {
  .ana-niyet--akis .ana-niyet-link {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--gap);
    align-items: center;
  }
}
@media (min-width: 1100px) {
  .ana-niyet-blok {
    display: none;
  }
  .ana-niyet--hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    border-top: 1px solid var(--ink-700);
  }
  .ana-niyet--hero .ana-niyet-etiket {
    grid-column: 1 / span 2;
    padding-top: 22px;
    color: var(--on-dark-faint);
  }
  .ana-niyet--hero .ana-niyet-liste {
    display: grid;
    grid-column: 3 / -1;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  /* Öğe: üstte cümle + ok (sağ üst), altta hedef hizmet (tek satır, alta hizalı).
     .ana-niyet-hedef display: contents — metni ve oku ayrı ızgara hücrelerine yerleşir. */
  .ana-niyet--hero .ana-niyet-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    gap: 12px;
    height: 100%;
    min-height: 104px;
    padding: 20px 20px 22px;
    border-left: 1px solid var(--ink-700);
  }
  .ana-niyet--hero .ana-niyet-cumle {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-sm);
    color: var(--on-dark);
  }
  .ana-niyet--hero .ana-niyet-hedef {
    display: contents;
    font-size: var(--fs-xs);
    color: var(--blue-text-dark);
  }
  .ana-niyet--hero .ana-niyet-hedef > span {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
  }
  .ana-niyet--hero .ana-niyet-hedef .ikon {
    grid-column: 2;
    grid-row: 1;
    margin-top: 2px;
  }
  .ana-niyet--hero .ana-niyet-link:hover {
    background: var(--ink-900);
  }
  .ana-niyet--hero .ana-niyet-link:hover .ana-niyet-cumle {
    color: var(--blue-text-dark);
  }
}

/* 1100–1279: beş kolona yer açmak için etiket bandın üstüne çıkar; öğeler tam
   genişlikte (ilk öğenin sol ayracı kalkar, metin kenarı kap kenarına hizalanır). */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .ana-niyet--hero .ana-niyet-etiket {
    grid-column: 1 / -1;
    padding-top: 20px;
  }
  .ana-niyet--hero .ana-niyet-liste {
    grid-column: 1 / -1;
  }
  .ana-niyet--hero li:first-child .ana-niyet-link {
    padding-left: 0;
    border-left: 0;
  }
}

/* Alçak masaüstü ekranları (1280×800, 1366×768): hero ve bant ilk ekrana sığsın
   diye başlık bir kademe küçülür, dikey aralıklar sıkışır. */
@media (min-width: 1100px) and (max-height: 860px) {
  .ana-hero--sahne .hero-title {
    font-size: clamp(3.125rem, 1.2rem + 3vw, 3.75rem);
  }
  .ana-hero .hero-eyebrow {
    margin-bottom: var(--sp-2);
  }
  .ana-hero .hero-lead,
  .ana-hero .hero-ctas,
  .ana-hero .ana-guven {
    margin-top: var(--sp-3);
  }
  .ana-sahne-logolar {
    margin-top: 0;
  }
  .ana-sahne-oge--sol {
    margin-top: 3.5rem;
  }
  .ana-sahne-oge--on {
    margin-top: 1rem;
  }
  .ana-niyet--hero .ana-niyet-link {
    min-height: 92px;
    padding-block: 16px 18px;
  }
  .ana-niyet--hero .ana-niyet-etiket {
    padding-top: 18px;
  }
}
/* 1366×768 ve 1180×800 gibi daha alçak ekranlarda bandın alt çizgisi de ilk
   ekranda kalsın: bant hero'ya yaklaşır, öğe içi aralıklar bir kademe daha sıkışır. */
@media (min-width: 1100px) and (max-height: 800px) {
  .ana-hero-ust {
    padding-bottom: var(--sp-3);
  }
  .ana-niyet--hero .ana-niyet-link {
    gap: 8px;
    min-height: 80px;
    padding-block: 14px 16px;
  }
  .ana-niyet--hero .ana-niyet-etiket {
    padding-top: 16px;
  }
}

/* 2. Vitrin ------------------------------------------------------------------
   Tek DOM iki düzen (bkz. template-parts/ana-sayfa-vitrin.php).
   Başlık numarasız düz H2 (bölüm numarası kalıbı kullanılmaz); rengi zeminden gelir.
   ≥1100: iki kolon, çift sıradakiler transform ile aşağı kaydırılır (satır ızgarası
   korunur; kaydırma payı liste altında boşlukla karşılanır). */
.ana-vitrin .work-rozet {
  justify-self: start;
}
.ana-vitrin-baslik {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: inherit;
}
@media (min-width: 1100px) {
  .ana-vitrin-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8) var(--sp-7);
    align-items: start;
    padding-bottom: var(--sp-10);
  }
  .ana-vitrin-oge:nth-child(even) {
    transform: translateY(var(--sp-10));
  }
}

/* <1100: tek ton açık zeminde telefon ızgarası. Koyu→açık geçiş (work::before)
   kaldırılır; kartları ortadan bölmez. YANA KAYDIRMA YOK (müşteri kuralı): <820 2×2
   ızgara, 820–1099 tek satırda 3–4 telefon. Tek sayıda kayıtta son telefon ortalanır;
   mobil görseli olmayan (tarayıcı çerçeveli) referans tam satır alır. */
@media (max-width: 1099.98px) {
  .ana-vitrin {
    padding-block: var(--sp-7) var(--sp-5);
  }
  .ana-vitrin::before {
    content: none;
  }
  .ana-vitrin .work-head {
    align-items: flex-end;
    padding: 0;
    border-top: 0;
    color: var(--fg);
  }
  .ana-vitrin .work-head .link-arrow {
    color: var(--blue-text);
    font-size: var(--fs-body);
  }

  .ana-vitrin-serit {
    margin-top: var(--sp-4);
  }
  .ana-vitrin-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: var(--sp-4) 16px;
    padding: 0;
  }
  /* Kart künyesi her kartta aynı satırlarda (subgrid): görsel · ad · etiket · açıklama ·
     alan adı · rozet. Aynı sıradaki kartlarda ad, etiket ve açıklama aynı hizadan başlar;
     açıklama kesilmez (tam cümle), en uzun açıklama satırın yüksekliğini belirler. */
  .ana-vitrin-oge {
    position: relative;
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
    min-width: 0;
  }
  .ana-vitrin-oge:not(.ana-vitrin-oge--masaustu):last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 8px);
  }
  .ana-vitrin-link {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
    width: 100%;
    min-width: 0;
  }
  .ana-vitrin-oge--masaustu {
    grid-column: 1 / -1;
  }

  /* Telefon görünümü (mobil görseli olan referans) */
  .ana-vitrin-oge:not(.ana-vitrin-oge--masaustu) .ana-cihaz {
    padding: 5px;
    border: 0;
    border-radius: 26px;
    background: var(--ink-950);
    box-shadow: var(--sh-2);
  }
  .ana-vitrin-oge:not(.ana-vitrin-oge--masaustu) .frame-bar {
    display: none;
  }
  .ana-vitrin-oge:not(.ana-vitrin-oge--masaustu) .frame-media {
    border-radius: 21px;
    background: var(--paper-2);
  }
  .ana-vitrin-oge:not(.ana-vitrin-oge--masaustu) .frame-media img {
    height: auto;
    aspect-ratio: 546 / 1182;
  }

  .ana-vitrin-gorsel {
    grid-row: 1;
  }
  .ana-vitrin .work-meta {
    display: grid;
    grid-row: 2 / span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    justify-items: start;
    min-width: 0;
    padding-top: 16px;
  }
  .ana-vitrin .work-title-row {
    display: contents;
  }
  .ana-vitrin .work-title {
    grid-row: 1;
    font-size: 1.125rem;
  }
  .ana-vitrin .work-title-row .tag {
    grid-row: 2;
    margin-top: 6px;
    white-space: normal;
  }
  .ana-vitrin .work-desc {
    grid-row: 3;
    margin-top: 8px;
    font-size: var(--fs-sm);
    line-height: 1.45;
  }
  .ana-vitrin .work-visit {
    grid-row: 4;
    align-self: end;
    max-width: 100%;
    margin-top: 8px;
    font-size: var(--fs-xs);
    overflow-wrap: anywhere;
  }
  .ana-vitrin .work-rozet {
    grid-row: 5;
    margin-top: 8px;
    white-space: normal;
  }
  .ana-vitrin .work-more {
    margin-top: var(--sp-2);
  }
}
/* 820–1099: telefonlar tek satırda (3–4 öğe; en fazla 232 px, ortalı). */
@media (min-width: 820px) and (max-width: 1099.98px) {
  .ana-vitrin-liste {
    grid-template-columns: repeat(4, minmax(0, 232px));
    justify-content: center;
    gap: var(--sp-4) 24px;
  }
  .ana-vitrin-liste:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 232px));
  }
  .ana-vitrin-liste:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 232px));
  }
  .ana-vitrin-oge:not(.ana-vitrin-oge--masaustu):last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
  }
  .ana-vitrin .work-visit {
    font-size: var(--fs-sm);
  }
}
/* Zenginleştirme: görsel kutusu (.kaldir-golge) + ≥1100 köşede mobil eş.
   <1100 kart zaten telefon görünümündedir: eş gizli (lazy, indirilmez); gölge
   katmanı telefon kenarının yarıçapını alır. */
@media (max-width: 1099.98px) {
  .ana-vitrin-link--es .ana-vitrin-telefon {
    display: none;
  }
  .ana-vitrin-oge:not(.ana-vitrin-oge--masaustu) .ana-vitrin-gorsel::after {
    border-radius: 26px;
  }
}
@media (min-width: 1100px) {
  .ana-vitrin-link--es .ana-vitrin-gorsel {
    margin-right: 16px;
  }
  .ana-vitrin-link--es .work-meta {
    padding-top: calc(var(--sp-3) + 8px);
  }
}

/* "Tüm referanslar" 600'den itibaren başlık satırında; altında yalnızca dar ekranda */
@media (min-width: 600px) and (max-width: 1099.98px) {
  .ana-vitrin .work-head .link-arrow {
    display: inline-flex;
  }
  .ana-vitrin .work-more {
    display: none;
  }
}

/* 3. Hizmet dizini: kayan bant açılışı, ikonlu başlıklar, canlı örnek satırı ---- */

/* Bölüm kayan bantla açılır: bandın üstünde boşluk yok (zemin değişimi — panel →
   beyaz — sınırı zaten çizer, üst çizgi kalkar); bant ile dizin arasında bölüm boşluğu. */
.ana-hizmetler {
  padding-top: 0;
}
.ana-kayan-bant {
  margin-bottom: var(--section-y);
  border-top: 0;
}
/* Hover'da ok .satir-hover ile kayar (.ikon-ok); ortak .service-arrow kayması
   burada ikinci kez uygulanmasın. */
.ana-hizmetler .service-row:hover .service-arrow {
  transform: none;
}
/* İkon başlığın ilk satırına hizalı; çok satırlı adda ikon üstte kalır */
.ana-hizmetler .service-name.ikon-baslik > .ikon {
  flex: none;
}

.ana-hizmet-canli {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--fg-2);
}
.ana-hizmet-canli::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}
.ana-hizmet-canli + .meta-list {
  margin-top: 8px;
}

/* .meta-list <li> yerine <span> taşıdığında (bağlantı içinde liste yok) ayraç ortak
   nokta ayraçlı liste kuralından gelir (main.css 5). */

/* 4. Sektör kartı: "Sektörde yayında" mini ekran görüntüleri ---------------- */

.ana-yayinda {
  margin-top: var(--sp-4);
}
.ana-yayinda-baslik {
  margin-bottom: 12px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ana-yayinda-liste {
  border-top: 1px solid var(--line);
}
.ana-yayinda-liste a {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}
.ana-yayinda-gorsel {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--paper-2);
  aspect-ratio: 16 / 10;
}
.ana-yayinda-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.ana-yayinda-ad {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}
.ana-yayinda-host {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.ana-yayinda-liste .ikon {
  color: var(--muted);
}
.ana-yayinda-liste a:hover .ana-yayinda-ad,
.ana-yayinda-liste a:hover .ikon {
  color: var(--blue-text);
}

/* ≥480: kayıt sayısı kadar eşit kolon (tek satır; hiçbir kırılımda öksüz kalmaz) */
@media (min-width: 480px) {
  .ana-yayinda-liste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--sp-2);
    padding-top: var(--sp-2);
  }
  .ana-yayinda-liste a {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 10px 8px;
    padding-block: 0;
    border-bottom: 0;
  }
  .ana-yayinda-gorsel {
    grid-column: 1 / -1;
  }
  .ana-yayinda-liste .ikon {
    align-self: start;
    margin-top: 3px;
  }
}

/* Servisly kartı: gerçek uygulama ikonu + ad */
.ana-urun-kimlik {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ana-urun-kimlik .labs-ikon {
  width: 48px;
  height: 48px;
}
@media (min-width: 480px) {
  .ana-urun-kimlik .labs-ikon {
    width: 56px;
    height: 56px;
  }
}

/* Servisly kartı: ≥1100'de iki kart yan yana ve eşit boydadır. Özellikler tek
   kolon, çizgili liste olur (soldaki kartın madde listesiyle aynı ritim; üst çizgi
   künyenin alt çizgisidir); böylece
   kart, özellik listesiyle butonlar arasında boş koyu alan bırakmadan dolar. */
@media (min-width: 1100px) {
  .ana-duo .ana-ozellikler {
    grid-template-columns: minmax(0, 1fr);
  }
  .ana-duo .ana-ozellikler li {
    border-bottom: 1px solid var(--ink-700);
  }
}

/* 5. Yapay zekâ — mavi bant (.on-blue) ---------------------------------------
   Bant ortak katmandan gelir (beyaz metin, --on-blue-2 lead, beyaz butonlar, beyaz
   odak halkası). Burada: künye çizgileri ve etiketleri banda uyar; "Canlı örnek"
   kutusu bandın koyu tonunda (--blue-band-2) bir yüzeydir — içindeki birincil buton
   beyaz zemin + --blue-text (5.73:1). Kurgusal sohbet önizlemesi yok (sahte arayüz yasağı). */
.ana-ai .ai-points {
  border-top-color: var(--line-on-blue);
}
.ana-ai .ai-points div {
  border-bottom-color: var(--line-on-blue);
}
.ana-ai .ai-points dt {
  color: var(--on-blue-2);
}
.ana-ai .ai-points dd {
  color: var(--on-blue);
}
.ana-ai-canli {
  display: grid;
  gap: 16px;
  margin-top: var(--sp-5);
  padding: var(--sp-3);
  border-radius: var(--r-3);
  background: var(--blue-band-3);
}
.ana-ai-canli-etiket {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-blue-2);
}
.ana-ai-canli-alan {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--on-blue);
}
.ana-ai-canli-metin {
  font-size: var(--fs-sm);
  color: var(--on-blue-2);
}
.ana-ai-eylem {
  margin-top: var(--sp-5);
}
/* Marka şekli sağ altta: telefonda/tablette canlı örnek kutusunun ALTINDA kalan
   boşlukta (bölümün alt boşluğu şekle yer açar). */
@media (max-width: 1099.98px) {
  .ana-ai {
    padding-bottom: calc(var(--section-y) + 96px);
  }
  .ana-ai .marka-sekli--bant {
    --ms-gen: 168px;
    --ms-ust: calc(100% - 132px);
  }
}
@media (min-width: 820px) and (max-width: 1099.98px) {
  .ana-ai .marka-sekli--bant {
    --ms-gen: 220px;
    --ms-ust: calc(100% - 156px);
  }
}
/* ≥1100: şekil sağ kolonun (künye + canlı örnek) altındaki boşlukta kalır */
@media (min-width: 1100px) {
  .ana-ai .marka-sekli--bant {
    --ms-ust: calc(100% - 200px);
  }
}

/* 6. Nasıl çalışıyoruz: süreç + ilkeler tek bölümde ------------------------- */

.ana-ilkeler {
  display: grid;
  gap: var(--sp-4) var(--gap);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-strong);
}
.ana-ilkeler-bas .h3 {
  margin-bottom: 12px;
}
.ana-ilkeler-bas p {
  max-width: 36ch;
  color: var(--muted);
}
.ana-ilkeler-bas .link-arrow {
  margin-top: 8px;
}
.ana-nasil .principle {
  border-top-color: var(--line-strong);
}
.ana-nasil .principle p {
  margin-top: 8px;
  font-size: 1rem;
  color: var(--muted);
}
/* İlkeler yan yana, adımların 3. ve 4. kolonuyla aynı hizada */
@media (min-width: 1100px) {
  .ana-ilkeler {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .ana-ilkeler-bas {
    grid-column: 1 / span 5;
  }
  .ana-ilkeler-liste {
    grid-column: 7 / -1;
  }
}

/* 7. Labs: başlık altında görsel kompozisyonu, tür · kullanım modeli satırı;
   kayıt sayısına göre kolon (öksüz satır yok) */

/* Başlık: solda metin (idx, başlık, lead, bağlantı); sağda kompozisyon — KingOfMath
   ekranı tarayıcı çerçevesinde, KingOfMath'in kendi ikonu çerçevenin sağ alt köşesine
   biner, altında görünür altyazı (ürün adı · tür). Başka ürünün ikonu bindirilmez.
   Kompozisyon yalnız ≥820 (<820 gizli; KingOfMath ekranı <picture> ile, ikon lazy +
   display:none ile indirilmez). 820–1099 metnin altında, ≥1100 sağda dikey ortalı. */
.ana-labs-bas .lead {
  margin-top: var(--sp-3);
}
.ana-labs-bas .link-arrow {
  margin-top: var(--sp-3);
}
.ana-labs-sahne {
  display: none;
}
@media (min-width: 820px) {
  .ana-labs-sahne {
    position: relative;
    display: block;
    width: min(100%, 520px);
    margin: 0;
    padding: 0 40px 0 0;
  }
  .ana-labs-cerceve {
    border-color: var(--ink-700);
  }
  /* KingOfMath'in kendi ikonu (88 px, doğal boyut), çerçevenin sağ alt köşesine biner */
  .ana-labs-ikon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 88px;
    height: 88px;
    box-shadow: 0 0 0 6px var(--ink-950), var(--sh-frame);
  }
  /* Görünür altyazı: kompozisyonun hangi ürün olduğunu adlandırır */
  .ana-labs-sahne-alt {
    min-height: 40px;
    padding: 14px 104px 0 0;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--on-dark-2);
  }
}
/* 820–1099: kompozisyon metnin altında, kolonun tam genişliğinde (sola yaslı yarım
   genişlikte kalıp sağda boşluk bırakmasın) */
@media (min-width: 820px) and (max-width: 1099.98px) {
  .ana-labs-sahne {
    width: 100%;
  }
}
@media (min-width: 1100px) {
  .ana-labs-bas.section-head--split {
    align-items: center;
  }
  .ana-labs-bas.section-head--split > .section-head-main {
    grid-column: 1 / span 6;
  }
  .ana-labs-bas.section-head--split > .ana-labs-sahne {
    grid-column: 8 / -1;
    justify-self: end;
  }
}
/* Marka şekli sağ altta: Labs listesinin altındaki boşlukta zeminden yükselir; kap
   kenarıyla hizalı. Yalnız ≥1100: daha dar ekranda SSS kısa kalır ve şekil kapanış
   CTA'sının şekliyle aynı görüş alanına girer (aynı ekranda iki şekil olmasın). */
.ana-labs .marka-sekli--panel {
  display: none;
}
@media (min-width: 1100px) {
  .ana-labs .marka-sekli--panel {
    display: block;
    --ms-gen: 240px;
    --ms-ust: calc(100% - 150px);
    --ms-sag: var(--ms-kenar);
  }
}

.ana-lab-tur {
  font-weight: 500;
  color: var(--on-dark-2);
}
/* Kart anatomisi her kartta aynı satırlarda (subgrid): üst satır · ad · tür/model ·
   açıklama · etiketler. Tür satırı boş da olsa yer tutar; açıklamalar ve etiketler
   yan yana kartlarda aynı hizadan başlar. */
.ana-labs-liste > li {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.ana-labs-liste .lab {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  row-gap: 10px;
  align-content: start;
}
.ana-labs-liste .lab-top {
  grid-row: 1;
}
.ana-labs-liste .lab-name {
  grid-row: 2;
}
.ana-labs-liste .ana-lab-tur {
  grid-row: 3;
  min-height: calc(var(--nl-fs) * 1.6);
}
.ana-labs-liste .lab p {
  grid-row: 4;
}
.ana-labs-liste .lab .meta-list {
  grid-row: 5;
  align-self: end;
  margin-top: 0;
}

@media (min-width: 600px) {
  .ana-labs-liste--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ana-labs-liste--1 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1100px) {
  .ana-labs-liste--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 8. Blog: sade liste ------------------------------------------------------- */

.ana-blog-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: var(--sp-3);
}
.ana-blog-liste {
  border-top: 1px solid var(--fg);
}
.ana-blog-satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 4px 16px;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.ana-blog-tarih {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ana-blog-ad {
  grid-column: 1;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.ana-blog-ok {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--fg);
}
.ana-blog-satir:hover .ana-blog-ad,
.ana-blog-satir:hover .ana-blog-ok {
  color: var(--blue-text);
}
@media (min-width: 820px) {
  .ana-blog-satir {
    grid-template-columns: 200px minmax(0, 1fr) 24px;
    align-items: baseline;
  }
  .ana-blog-tarih {
    grid-column: 1;
    grid-row: 1;
  }
  .ana-blog-ad {
    grid-column: 2;
    grid-row: 1;
  }
  .ana-blog-ok {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }
}

/* 9. Hareket (yalnızca hareket tercih edilmiyorsa; transform/opacity) ------- */

@media (prefers-reduced-motion: no-preference) {
  .ana-telefon,
  .ana-niyet-hedef .ikon,
  .ana-yayinda-liste .ikon,
  .ana-blog-ok {
    transition: transform var(--dur-2) var(--ease);
  }
  .ana-sahne-logolar img {
    transition: opacity var(--dur-2) var(--ease);
  }
  .ana-yayinda-liste a:hover .ikon {
    transform: translate(2px, -2px);
  }
  .ana-sahne-link:hover .ana-telefon {
    transform: translateY(-4px);
  }
  .ana-niyet-link:hover .ana-niyet-hedef .ikon {
    transform: translateX(3px);
  }
  .ana-labs .lab:hover .lab-arrow,
  .ana-blog-satir:hover .ana-blog-ok {
    transform: translateX(3px);
  }
}

/* Servisly kartı: sektör satırı (5 sektör sayfasına bağlantı) — etiket + "A · B · C"
   dökümü; satır sarmalanır, her bağlantı 44 px dokunma hedefi. */
.ana-servisly-sektorler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  margin-top: var(--sp-3);
}
.ana-servisly-sektor-etiket {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
/* <480: 6 kolonluk ızgara — üstte üç ad, beş sektörde altta iki ad (her biri yarım satırın
   ortasında): iki satır da dengeli, tek kalan ad yok, ayraç yok.
   ≥480: tek satır döküm, ayraç adın SONUNDA (kırılırsa satır sonunda kalır). */
.ana-sektor-dokum {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
}
.ana-sektor-dokum li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: span 2;
}
.ana-sektor-dokum > li:nth-child(3n + 1):nth-last-child(2),
.ana-sektor-dokum > li:nth-child(3n + 2):last-child {
  grid-column: span 3;
}
.ana-sektor-dokum > li:nth-child(3n + 1):last-child {
  grid-column: 1 / -1;
}
@media (min-width: 480px) {
  .ana-sektor-dokum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0;
    width: auto;
  }
  .ana-sektor-dokum li {
    justify-content: flex-start;
  }
  .ana-sektor-dokum li:not(:last-child)::after {
    content: "·";
    padding-inline: 3px;
    color: var(--on-dark-faint);
  }
}
.ana-sektor-dokum a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 3px; /* en kısa ad ("Klima") de 44 px genişliğe ulaşır */
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--ink-600);
  text-underline-offset: 4px;
}
.ana-sektor-dokum a:hover {
  color: #fff;
  text-decoration-color: var(--blue);
}

/* ==========================================================================
   27. Sayfa: Hizmetler ve hizmet detayları
   ========================================================================== */

/* ==========================================================================
   Hizmetler sayfa grubu: /hizmetler/ (page-hizmetler.php) ve hizmet detayları
   (page-hizmet-detay.php). Yalnızca .hz- önekli sınıflar; ortak bileşenler main.css'te.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hizmet detayı: sayfa başlığı (marka şekli + doku kendi kırpma kutusunda)
   -------------------------------------------------------------------------- */

/* Altındaki görsel bandının koyu bindirme payı: başlığın şekil kutusu da bu kadar
   aşağı uzar; şeklin çubukları koyu zeminin bittiği yerde biter, başlık sınırında kesilmez. */
.hz-baslik--bant-ref,
.hz-gorsel {
  --hz-bindirme: clamp(96px, 30px + 16vw, 300px);
}
.hz-baslik--bant-panel,
.hz-gorsel--panel {
  --hz-bindirme: clamp(72px, 20px + 10vw, 180px);
}

/* Başlık (z 1) bandın koyu ::before katmanının üstünde, bandın içeriği (z 2) başlığın üstünde */
.hz-baslik--detay {
  position: relative;
  z-index: 1;
}
.hz-baslik--detay > .container {
  position: relative;
  z-index: 1;
}
.hz-sekil-kap {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  height: calc(100% + var(--hz-bindirme, 0px));
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}
/* İkonlu başlıkta da olgular diğer hizmet sayfalarıyla aynı kolonda (9–12) */
@media (min-width: 1100px) {
  .hz-baslik--detay.page-hero--gorselli .page-hero-side {
    grid-column: 9 / -1;
    gap: var(--sp-4);
  }
  .hz-baslik--detay .page-hero-gorsel--ikon {
    padding-right: var(--sp-3);
  }
}
/* Olgu listesi (≥1100) şeklin önünde, ortak künye panelinde (25.2). */

.hz-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-3);
}
.hz-cipler .tag {
  min-height: 28px;
  padding-inline: 12px;
  font-size: var(--fs-xs);
}

/* Altında görsel bandı varsa koyu zemin banda kesintisiz akar */
.hz-baslik--bantli {
  padding-bottom: var(--sp-5);
}
@media (min-width: 1100px) {
  .hz-baslik--bantli {
    padding-bottom: var(--sp-7);
  }
}

/* --------------------------------------------------------------------------
   2. Başlıktan açık zemine taşan bant: gerçek referans görseli ya da kapsam paneli
   -------------------------------------------------------------------------- */

.hz-gorsel {
  position: relative;
  background: var(--paper);
}
.hz-gorsel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--hz-bindirme);
  background: var(--ink-950);
}
.hz-gorsel > .container {
  position: relative;
  z-index: 2;
}

.hz-gorsel-izgara {
  display: grid;
  gap: var(--sp-4);
}
.hz-gorsel-sahne {
  position: relative;
}
.hz-gorsel-cerceve {
  display: block;
  border-radius: var(--r-3);
}
/* Aynı sitenin gerçek mobil ekranı: yalnız ≥820 (telefonda <picture> boş kaynak, indirilmez) */
.hz-gorsel-telefon {
  display: none;
}
.hz-gorsel-kunye {
  display: grid;
  gap: 10px;
  align-content: end;
  justify-items: start;
}
.hz-gorsel-kunye .kicker {
  margin-bottom: 2px;
}
.hz-gorsel-ad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.hz-gorsel-metin {
  max-width: 40ch;
  font-size: 1rem;
  color: var(--muted);
}
@media (min-width: 820px) {
  .hz-gorsel-sahne {
    margin-right: 20px;
  }
  .hz-gorsel-telefon {
    display: block;
    position: absolute;
    right: -20px;
    bottom: -28px;
    z-index: 1;
    width: 19%;
    max-width: 168px;
  }
  .hz-gorsel-izgara {
    row-gap: var(--sp-5);
  }
}
@media (min-width: 1100px) {
  .hz-gorsel-izgara {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
  }
  .hz-gorsel-sahne {
    grid-column: 1 / span 8;
  }
  .hz-gorsel-kunye {
    grid-column: 9 / -1;
    padding-bottom: var(--sp-2);
  }
}

/* Kapsam paneli (gerçek görseli olmayan hizmetler): ikonlu tipografi, sahte ekran yok */
.hz-kapsam {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-4) 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  background: var(--paper);
  box-shadow: var(--sh-frame);
}
.hz-kapsam .kicker {
  margin-bottom: var(--sp-2);
}
.hz-kapsam-liste {
  display: grid;
  gap: 0 var(--gap);
  border-top: 1px solid var(--fg);
}
.hz-kapsam-liste li {
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
.hz-kapsam-no {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--blue-text);
  font-variant-numeric: tabular-nums;
}
.hz-kapsam-ad {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.hz-kapsam-ad.ikon-baslik {
  gap: 14px;
}
.hz-kapsam-ad > .ikon {
  flex: none;
  top: 0.12em;
}
.hz-kapsam-surec {
  border-top: 1px solid var(--line-strong);
}
.hz-kapsam-surec li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-2);
}
.hz-kapsam-not {
  margin-top: var(--sp-2);
  max-width: 44ch;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Kanıt kartı: kendi ürünümüz Servisly (yalnızca özel yazılım; gerçek ikon + satış sayfası) */
.hz-kanit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--r-3);
  background: var(--paper-2);
}
.hz-kanit .kicker {
  margin-bottom: 4px;
}
.hz-kanit-gorsel {
  width: 48px;
  height: 48px;
}
/* <600: kart kısa kalır (ikon + ad + bağlantı); açıklama ürün sayfasında. Panel ilk
   paragrafı aşağı itmez, dar metin kolonunda altı satıra sarılan açıklama olmaz. */
@media (max-width: 599.98px) {
  .hz-kanit-aciklama {
    display: none;
  }
}
@media (min-width: 600px) {
  .hz-kanit {
    align-items: start;
  }
}
.hz-kanit-ad {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.hz-kanit-metin > p:not(.kicker, .hz-kanit-ad) {
  margin-top: 6px;
  max-width: 52ch;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.hz-kanit .link-arrow {
  margin-top: 4px;
}
@media (min-width: 480px) {
  .hz-kapsam {
    padding: var(--sp-5) var(--sp-4);
  }
  .hz-kanit {
    gap: 20px;
    padding: var(--sp-3);
  }
  .hz-kanit-gorsel {
    width: 56px;
    height: 56px;
  }
}
/* Dar ekranda süreç özeti gizlenir: aynı dört adım birkaç ekran aşağıda ayrıntısıyla var.
   Yalnızca not + "Adımların ayrıntısı" bağlantısı kalır; panel ilk paragrafı aşağı itmez. */
@media (max-width: 1099.98px) {
  .hz-kapsam {
    gap: var(--sp-4);
  }
  .hz-kapsam-surec-baslik,
  .hz-kapsam-surec {
    display: none;
  }
  .hz-kapsam-not {
    margin-top: 0;
  }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
  .hz-kapsam-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .hz-kapsam {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    padding: var(--sp-6) var(--sp-5);
  }
  .hz-kapsam-ana {
    grid-column: 1 / span 7;
  }
  .hz-kapsam-yan {
    grid-column: 9 / -1;
    grid-row: 1 / span 2;
  }
  /* Kanıt kartı listenin altında: iki kolonun yüksekliği dengelenir */
  .hz-kanit {
    grid-column: 1 / span 7;
    grid-row: 2;
    align-self: end;
  }
  /* Tek kolon, büyük punto: liste sağdaki süreç özetiyle aynı yüksekliği doldurur */
  .hz-kapsam-liste li {
    padding-block: 20px;
  }
  .hz-kapsam-ad {
    font-size: clamp(1.5rem, 0.9rem + 0.9vw, 1.875rem);
  }
  .hz-kapsam-ad > .ikon {
    width: 26px;
    height: 26px;
  }
}

/* --------------------------------------------------------------------------
   3. Gövde: içerik + yan kolon
   -------------------------------------------------------------------------- */

.hz-detay {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
}
.hz-callout {
  margin-top: var(--sp-7);
}
.hz-callout .link-arrow {
  justify-self: start;
}

.hz-aside {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}
.hz-yapiskan {
  display: grid;
  gap: var(--sp-3);
}
/* Tablet ve mobilde teklif kartı içerik kolonuyla aynı ölçüde kalır */
.hz-aside .aside-card {
  max-width: var(--prose);
}
/* Telefon ve WhatsApp yan yana: kart kısa kalır, yapışkan blok makaleden belirgin kısa olur.
   1100–1239'da yan kolon ikisine yetmeyecek kadar dar: orada alt alta kalır. */
@media (min-width: 480px) and (max-width: 1099.98px), (min-width: 1240px) {
  .hz-teklif-kanallar {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .hz-teklif-kanallar a:first-child {
    padding-right: var(--sp-3);
  }
  .hz-teklif-kanallar a + a {
    padding-left: var(--sp-3);
    border-left: 1px solid var(--ink-700);
  }
}

@media (min-width: 1100px) {
  /* Yan kolon makale boyunca uzar; yapışkan blok bu yükseklik içinde kayar */
  .hz-aside {
    grid-column: 9 / -1;
    align-self: stretch;
  }
}
/* Yan kolonda telefonla aynı satıra sığsın: "WhatsApp’tan yazın" → "WhatsApp" */
@media (min-width: 1240px) {
  .hz-teklif-kanallar .hz-teklif-ek {
    display: none;
  }
}
/* Yapışkanlık yalnızca kart + içindekiler ekrana sığıyorsa (kısa ekranda alt kısmı kesilmesin) */
@media (min-width: 1100px) and (min-height: 760px) {
  .hz-yapiskan {
    position: sticky;
    top: calc(var(--header-h) + var(--admin-bar) + var(--sp-4));
  }
}

/* --------------------------------------------------------------------------
   4. E-ticaret: "WooCommerce mı, kiralık paket mi?" tablosu (içerik içinde)
   -------------------------------------------------------------------------- */

.entry-content .hz-karsilastirma {
  margin-top: var(--sp-5);
}
.entry-content .hz-karsilastirma-baslik {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.entry-content .hz-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.entry-content .hz-tablo th,
.entry-content .hz-tablo td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.entry-content .hz-tablo thead th {
  padding-block: 10px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--fg);
}
.entry-content .hz-tablo thead th:first-child,
.entry-content .hz-tablo tbody th {
  padding-left: 0;
}
.entry-content .hz-tablo tbody th {
  width: 32%;
  font-weight: 600;
  color: var(--fg);
}
.entry-content .hz-tablo .hz-tablo-biz {
  background: var(--blue-tint);
  color: var(--fg);
  font-weight: 500;
}
.entry-content .hz-tablo thead .hz-tablo-biz {
  color: var(--blue-text);
}
.entry-content .hz-tablo .hz-tablo-onlar {
  color: var(--muted);
}
.entry-content .hz-karsilastirma-not {
  margin-top: 12px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
}

/* Dar ekranda her satır bir anahtar/değer bloğu: tablo sıkışmaz */
@media (max-width: 599.98px) {
  .entry-content .hz-tablo,
  .entry-content .hz-tablo tbody,
  .entry-content .hz-tablo tr,
  .entry-content .hz-tablo th,
  .entry-content .hz-tablo td {
    display: block;
    width: auto;
  }
  .entry-content .hz-tablo thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .entry-content .hz-tablo tbody {
    border-top: 1px solid var(--fg);
  }
  .entry-content .hz-tablo tr {
    padding-block: 14px;
    border-bottom: 1px solid var(--line);
  }
  .entry-content .hz-tablo tbody th {
    width: auto;
    padding: 0 0 8px;
    border: 0;
  }
  .entry-content .hz-tablo td {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 12px;
    padding: 8px 12px;
    border: 0;
  }
  .entry-content .hz-tablo td + td {
    margin-top: 4px;
  }
  .entry-content .hz-tablo td::before {
    content: attr(data-baslik);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.9;
    color: var(--muted);
  }
  .entry-content .hz-tablo .hz-tablo-biz {
    border-radius: var(--r-2);
  }
  .entry-content .hz-tablo .hz-tablo-biz::before {
    color: var(--blue-text);
  }
}

/* --------------------------------------------------------------------------
   5. Alt bölümler: ilgili referanslar, diğer hizmetler
   -------------------------------------------------------------------------- */

.hz-refler {
  display: grid;
  gap: var(--sp-6) var(--gap);
}
@media (min-width: 820px) {
  .hz-refler--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hz-refler--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hz-refler--1 > * {
    max-width: 52rem;
  }
}

/* Diğer hizmetler: dört hizmet ızgarada (1 → 600'de 2 → 1100'de 4 kolon; öksüz yok),
   sektörel çözüm ayrı, açık zeminli çerçeveli şeritte (bilinçli vurgu, tek başına kalan
   satır değil; hemen altındaki mavi kapanış bandıyla koyu yüzey yığılmaz). */
.hz-diger-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px var(--sp-4);
  margin-bottom: var(--sp-4);
}
/* Öğe hücrenin tamamını kaplar: açıklaması iki satıra kayan kartla alt çizgiler aynı hizada */
.hz-others > li {
  display: grid;
}
.hz-others .other {
  align-content: start;
}
.hz-others .other-name > .ikon {
  flex: none;
}
.hz-others .other-desc {
  padding-left: calc(22px + 0.6em);
}
/* Satır zemini (satir-hover) hücrede kalsın: kolonlar arası boşluğa taşmaz */
.hz-others .other.satir-hover::before {
  inset: 1px -8px;
}

.hz-diger-sektor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 22px;
  gap: 16px;
  align-items: center;
  margin-top: var(--sp-5);
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--blue-text);
  border-radius: var(--r-3);
  background: var(--paper);
  color: var(--fg);
}
.hz-diger-sektor.satir-hover::before {
  inset: 0;
  border-radius: 0 var(--r-3) var(--r-3) 0;
  background: var(--blue-tint);
}
.hz-diger-sektor-ikon {
  color: var(--blue-text);
}
.hz-diger-sektor-metin {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.hz-diger-sektor-kicker {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.hz-diger-sektor-ad {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.hz-diger-sektor-desc {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.hz-diger-sektor > .ikon-ok {
  color: var(--fg);
}
@media (min-width: 820px) {
  .hz-diger-sektor {
    gap: 24px;
    padding: var(--sp-3) var(--sp-4);
  }
  .hz-diger-sektor-metin {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--sp-3);
  }
  .hz-diger-sektor-kicker {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   6. /hizmetler/: gruplu dizin + sektörel çözüm
   -------------------------------------------------------------------------- */

.hz-giris {
  margin-bottom: var(--sp-7);
}
.hz-grup {
  display: grid;
  gap: var(--sp-3);
}
.hz-grup + .hz-grup {
  margin-top: var(--sp-8);
}
.hz-grup-aciklama {
  margin-top: 8px;
  max-width: 34ch;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.hz-kalem .service-name {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
}
.hz-kalem .service-name > .ikon {
  flex: none;
}
.hz-kalem-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
}
.hz-kalem-alt .meta-list {
  margin-top: 0;
}
/* Ok tek katmanda kayar (satir-hover'ın ikon-ok kaydırması); kabın ek kaydırması kapalı */
.hz-dizin .service-row.satir-hover:hover .service-arrow {
  transform: none;
}

.hz-sektor .kicker {
  margin-bottom: var(--sp-2);
}
.hz-sektor-etiketler {
  margin-top: var(--sp-3);
}
.hz-sektor-eylem {
  margin-top: var(--sp-4);
}
.hz-sektor-gorsel {
  display: block;
  margin-top: var(--sp-5);
}
.hz-sektor-sahne {
  display: block;
  border-radius: var(--r-3);
}
.hz-sektor-gorsel .frame {
  border-color: var(--ink-700);
}

@media (min-width: 820px) {
  .hz-sektor--gorselli {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sp-5);
    align-items: center;
  }
  .hz-sektor-gorsel {
    margin-top: 0;
  }
  .hz-sektor-gorsel--mobilli .hz-sektor-sahne {
    margin-right: 16px;
  }
  .hz-sektor-sahne .ref-card-telefon {
    width: 24%;
  }
}

/* Grup görseli: grup başlığının altında gerçek mobil ekranlar (web, yapay zekâ) ya da
   Servisly'nin gerçek uygulama ikonu (yazılım). Görsel solda, künye sağda; ≥1100'de iki
   telefonlu grupta künye telefonların altına iner (sol kolon dar). Telefonlar 280 px eşten,
   lazy; ikinci telefon bir adım aşağıda durur (statik, hareket yok). */
.hz-grup-gorsel {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: var(--sp-3);
}
.hz-grup-gorsel-sahne {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 8px;
}
.hz-grup-telefon {
  width: 76px;
  padding: 3px;
  border-radius: 14px;
}
.hz-grup-telefon .telefon-ekran {
  border-radius: 11px;
}
.hz-grup-gorsel--cift .hz-grup-telefon + .hz-grup-telefon {
  margin-top: 20px;
}
.hz-grup-ikon {
  width: 64px;
  height: 64px;
}
.hz-grup-gorsel-yazi {
  display: grid;
  gap: 4px;
  justify-items: start;
  min-width: 0;
  padding-bottom: 4px;
}
.hz-grup-gorsel-ad {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.hz-grup-gorsel-aciklama {
  max-width: 30ch;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.hz-grup-gorsel--ikon {
  align-items: center;
}
.hz-grup-gorsel--ikon .hz-grup-gorsel-yazi {
  padding-bottom: 0;
}
@media (min-width: 820px) {
  .hz-grup-telefon {
    width: 96px;
  }
  .hz-grup-ikon {
    width: 80px;
    height: 80px;
  }
}
@media (min-width: 1100px) {
  .hz-grup-gorsel {
    gap: 20px;
    margin-top: var(--sp-5);
  }
  .hz-grup-gorsel-sahne {
    gap: 12px;
  }
  .hz-grup-telefon {
    width: 112px;
    padding: 4px;
    border-radius: 18px;
  }
  .hz-grup-telefon .telefon-ekran {
    border-radius: 14px;
  }
  .hz-grup-gorsel--cift {
    flex-direction: column;
    align-items: flex-start;
  }
  .hz-grup-gorsel--cift .hz-grup-telefon + .hz-grup-telefon {
    margin-top: 32px;
  }
  .hz-grup-ikon {
    width: 96px;
    height: 96px;
  }
}

@media (min-width: 1100px) {
  .hz-grup {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .hz-grup-bas {
    grid-column: 1 / span 4;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--fg);
  }
  .hz-grup-liste,
  .hz-grup .hz-sektor {
    grid-column: 5 / -1;
  }
  .hz-grup + .hz-grup {
    margin-top: var(--sp-9);
  }
}

/* Etiket satırları: ortak nokta ayraçlı liste kuralı (main.css 5) — ayrı kare ayraç yok. */

/* Çalışma ilkeleri: koyu zemin (açık süreç ve SSS arasında ritim), büyük display başlık
   (sayfanın ikinci vurgu çubuğu), çizgi ikon başlığın üstünde. */
.hz-ilkeler .principle {
  padding-top: var(--sp-4);
  border-top-color: var(--ink-700);
}
.hz-ilkeler .principle p {
  color: var(--on-dark-muted);
}
.hz-ilkeler .split-head .h2 {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* /hizmetler/ başlığı: kayan bant düz koyu zeminde; marka şeklinin çubukları bandın
   arkasında kalır (kontur harfler çubukların üstünde yamalı görünmez). */
.hz-baslik .page-hero-alt--kayan {
  background: var(--ink-950);
}

/* Olgu listesi masaüstünde başlığın sağ kolonu. Telefonda içeriği aşağı itmesin diye gizli
   (hizmet detayında tablette de). /hizmetler/ 820–1099: lead'in altında iki sütunlu künye —
   tablette ilk ekranda da hizmet alanlarının özeti görünür (2 × 2, öksüz satır yok). */
@media (max-width: 819.98px) {
  .hz-baslik .facts {
    display: none;
  }
}
@media (min-width: 820px) and (max-width: 1099.98px) {
  .hz-baslik--detay .facts {
    display: none;
  }
  .hz-baslik:not(.hz-baslik--detay) .facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    border-top: 0;
  }
  .hz-baslik:not(.hz-baslik--detay) .facts div {
    border-top: 1px solid var(--ink-700);
    border-bottom: 0;
  }
}

/* Bölüm çapaları (#surec, "Bu sayfada" hedefleri): bölümün üst boşluğu yutulur,
   etiket yapışkan header'ın hemen altında (sp-5 boşlukla) görünür */
section.hz-surec,
section#hz-referanslar,
section#hz-sss {
  scroll-margin-top: calc(var(--header-h) + var(--admin-bar) + var(--sp-5) - var(--section-y));
}

/* ==========================================================================
   28. Sayfa: Kurumsal: iletişim, hakkımızda, blog, 404
   ========================================================================== */

/* ==========================================================================
   Kurumsal sayfa grubu: iletişim, hakkımızda, blog (liste / tekil / arşiv), 404.
   Yalnızca .kr-… önekli sınıflar; ortak token ve bileşenler main.css'ten gelir.
   Hareket: yalnızca transform (hover okları), reduced-motion'da kapalı.
   Zenginleştirme (2026-09): ortak bileşenler main.css §25'ten (marka şekli, vurgu, dev
   tipografi, süreç, logo şeridi, .satir-hover / .kaldir); burada yalnızca konum ve düzen.
   ========================================================================== */

/* 1. İletişim ------------------------------------------------------------- */

.kr-iletisim-grid {
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 1100px) {
  .kr-iletisim-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .kr-form-kolon {
    grid-column: 1 / span 7;
  }
  .kr-kanallar {
    grid-column: 8 / -1;
    position: sticky;
    top: calc(var(--header-h) + var(--admin-bar) + var(--sp-4));
  }
}
/* Geniş ekranda kart 4 kolona iner, form ile arasında bir kolon boşluk kalır */
@media (min-width: 1280px) {
  .kr-kanallar {
    grid-column: 9 / -1;
  }
}

/* Durum mesajı (?mc_form=…): çapa hedefi, role=status|alert */
.kr-durum {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: var(--sp-5);
  line-height: 1.5;
}
.kr-durum-ikon {
  margin-top: 1px;
}
.kr-durum strong {
  font-weight: 600;
}
.kr-durum:focus {
  outline: none;
}
.kr-durum:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.kr-form-bas {
  margin-bottom: var(--sp-4);
}
.kr-form-bas .h3 {
  margin-bottom: 10px;
}
.kr-form-bas p {
  max-width: 38rem;
}
.kr-form-zorunlu {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
}
.kr-istege-bagli {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--muted);
}
.kr-form-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.kr-form-not {
  flex: 1 1 18rem;
  max-width: 30rem;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
}
/* KVKK Aydınlatma Metni bağlantısı: gri notun içinde bağlantı olduğu belli olsun */
.kr-form-not a {
  color: var(--blue-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.kr-form-not a:hover {
  text-decoration-thickness: 2px;
}
@media (max-width: 479.98px) {
  .kr-form-alt .btn {
    flex: 1 1 100%;
  }
}

/* Doğrudan kanallar kartı (panel panel-dark) */
.kr-kanallar-baslik {
  margin-top: 12px;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--on-dark);
}
.kr-kanal-liste {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--ink-700);
}
.kr-kanal-liste a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding-block: 14px;
  border-bottom: 1px solid var(--ink-700);
  color: var(--on-dark);
}
.kr-kanal-ikon {
  box-sizing: content-box;
  padding: 9px;
  border: 1px solid var(--ink-600);
  border-radius: 50%;
  color: var(--blue-text-dark);
}
.kr-kanal-metin {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.kr-kanal-etiket {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
/* Değer asla kırpılmaz: e-posta "@" sonrasından kırılabilir (<wbr>, mc_kr_kirilabilir);
   o da yetmezse overflow-wrap son çare olarak kelime içinden kırar. */
.kr-kanal-deger {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.kr-kanal-ok {
  color: var(--on-dark-faint);
}
.kr-kanal-liste a:hover .kr-kanal-deger {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.kr-kanal-liste a:hover .kr-kanal-ok {
  color: var(--blue-text-dark);
}
.kr-kanal-olgular {
  margin-top: var(--sp-3);
}
.kr-kanal-olgular div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--ink-700);
}
.kr-kanal-olgular dt {
  font-size: var(--fs-xs);
  color: var(--on-dark-muted);
}
.kr-kanal-olgular dd {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--on-dark);
}
.kr-kanal-not {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--on-dark-2);
}

/* Tablet: kart tam genişlikte, iç düzen iki kolon — solda etiket, başlık ve not; sağda kanal
   satır(lar)ı ve dönüş süresi. Kart başlıktaki dev e-posta / telefonu tekrarlamaz (yalnız
   WhatsApp; tanımlı değilse tüm kanallar — liste uzarsa sağ kolon aşağı uzar, sol üstte kalır). */
@media (min-width: 820px) and (max-width: 1099.98px) {
  .kr-kanallar {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      "kicker liste"
      "baslik liste"
      "not olgu";
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .kr-kanallar > .kicker {
    grid-area: kicker;
  }
  .kr-kanallar > .kr-kanallar-baslik {
    grid-area: baslik;
  }
  .kr-kanallar > .kr-kanal-liste {
    grid-area: liste;
    margin-top: 0;
  }
  .kr-kanallar > .kr-kanal-olgular {
    grid-area: olgu;
  }
  .kr-kanallar > .kr-kanal-not {
    grid-area: not;
  }
}

/* 2. Hakkımızda ----------------------------------------------------------- */

/* Büyük giriş metni (editörün lead'i tekrarlamayan ilk paragrafı). CLS: font yedeği
   ("Schibsted Yedek", bölüm 1) artık --font-display yığınında, tüm başlıklarda geçerli. */
.kr-hk-giris .idx {
  margin-bottom: var(--sp-4);
}
.kr-hk-giris-metin > p:first-child {
  max-width: 62rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.375rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.025em;
  color: var(--fg);
}

/* Editoryal satırlar: sol başlık / sağ metin */
.kr-hk-satirlar {
  margin-top: clamp(3.5rem, 2rem + 5vw, 6rem);
  border-top: 1px solid var(--fg);
}
.kr-hk-giris + .kr-hk-satirlar {
  margin-top: clamp(3.5rem, 2rem + 5vw, 6rem);
}
.kr-hk-satirlar:first-child {
  margin-top: 0;
}
.kr-hk-satir {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.kr-hk-satir:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.kr-hk-satir-baslik {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.kr-hk-satir-govde .entry-content > p:first-child {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--fg-2);
}
@media (min-width: 820px) {
  .kr-hk-satir {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--gap);
    align-items: start;
  }
}
@media (min-width: 1100px) {
  .kr-hk-satir {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-block: var(--sp-6) var(--sp-7);
  }
  .kr-hk-satir-baslik {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--header-h) + var(--admin-bar) + var(--sp-4));
  }
  .kr-hk-satir-govde {
    grid-column: 6 / -1;
  }
}

/* Çalışma ilkeleri (ilgili satırın içinde) */
.kr-ilkeler {
  display: grid;
  gap: 0 var(--gap);
  margin-top: var(--sp-5);
}
.kr-hk-satir-govde > .kr-ilkeler:first-child {
  margin-top: 0;
}
.kr-ilke {
  padding-block: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line-strong);
}
.kr-ilke-ad {
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.kr-ilke p {
  margin-top: 8px;
  font-size: 1rem;
  color: var(--muted);
}
/* İki kolon: satır tek kolonken (600–819) ve metin kolonu yeterince genişken (≥1100).
   820–1099 arasında metin kolonu dar (≈480px); ilkeler alt alta daha okunaklı. */
@media (min-width: 600px) and (max-width: 819.98px), (min-width: 1100px) {
  .kr-ilkeler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Tek sayıda ilke: son satırda öksüz kalmasın diye alt alta */
  .kr-ilkeler--tek {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mastercode Labs bağlantısı: proje indeksi */
.kr-labs-liste {
  border-top: 1px solid var(--fg);
}
.kr-labs-satir {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 6px 16px;
  min-height: 44px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line-strong);
}
/* Gerçek uygulama ikonu (Servisly, KingOfMath); ikonu olmayan projede tipografik monogram
   (ince çerçeveli kare + adın baş harfi — logo taklidi değil, sütun ritmi korunur) */
.kr-labs-ikon {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  width: 32px;
  height: 32px;
}
.kr-labs-ikon .labs-ikon {
  width: 32px;
  height: 32px;
}
.kr-labs-monogram {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 22%;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fg-2);
}
.kr-labs-ad {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.kr-labs-durum {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  color: var(--fg-2);
}
.kr-labs-kisa {
  grid-column: 2 / -1;
  grid-row: 2;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.kr-labs-ok {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  color: var(--muted);
}
.kr-labs-satir:hover .kr-labs-ad,
.kr-labs-satir:hover .kr-labs-ok {
  color: var(--blue-text);
}
@media (min-width: 820px) {
  /* Ad + kısa açıklama solda alt alta; durum ve ok sağda satırın ortasında */
  .kr-labs-satir {
    grid-template-columns: 32px minmax(0, 1fr) 7.5rem 20px;
    column-gap: 20px;
    row-gap: 6px;
    padding-block: 24px;
  }
  .kr-labs-kisa {
    grid-column: 2;
  }
  .kr-labs-durum {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: start;
  }
  .kr-labs-ok {
    grid-column: 4;
    grid-row: 1 / span 2;
  }
}

/* 3. Blog listesi ---------------------------------------------------------- */

.kr-yazi-liste {
  border-top: 1px solid var(--fg);
}
.kr-yazi {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px 16px;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-strong);
}
.kr-yazi-meta {
  grid-column: 1;
  grid-row: 1;
  align-items: center;
}
.kr-yazi-kat {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -10px;
  color: var(--blue-text);
  font-weight: 500;
}
.kr-yazi-kat:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.kr-yazi-ok {
  grid-column: 2;
  grid-row: 1;
  color: var(--muted);
}
.kr-yazi-ana {
  grid-column: 1 / -1;
}
.kr-yazi-baslik {
  max-width: 44rem;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.022em;
}
.kr-yazi--vurgu .kr-yazi-baslik {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
/* Satırın tamamı tıklanır: bağlantının görünmez alanı satırı kaplar */
.kr-yazi-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.kr-yazi-ozet {
  max-width: 42rem;
  margin-top: 12px;
  color: var(--muted);
}
.kr-yazi--vurgu .kr-yazi-ozet {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
}
.kr-yazi:hover .kr-yazi-link,
.kr-yazi:hover .kr-yazi-ok {
  color: var(--blue-text);
}
@media (min-width: 820px) {
  .kr-yazi {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr) 20px;
    align-items: start;
    column-gap: var(--gap);
    padding-block: var(--sp-5);
  }
  /* Ortak .meta-list satır içi akışını (nokta ayraçlı) bu genişlikte dikey listeye çevirir:
     tarih, kategori ve okuma süresi alt alta; ayraç yok. */
  .kr-yazi-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-inline-start: 0;
    padding-top: 6px;
    clip-path: none;
    font-size: var(--nl-fs);
    line-height: 1.6;
  }
  .kr-yazi-meta > * {
    display: block;
  }
  .kr-yazi-meta > *::before {
    content: none;
  }
  .kr-yazi-kat {
    margin-block: -10px;
  }
  .kr-yazi-ana {
    grid-column: 2;
    grid-row: 1;
  }
  .kr-yazi-ok {
    grid-column: 3;
    margin-top: 8px;
  }
}
@media (min-width: 1100px) {
  .kr-yazi {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .kr-yazi-meta {
    grid-column: 1 / span 3;
  }
  .kr-yazi-ana {
    grid-column: 4 / span 8;
  }
  .kr-yazi-ok {
    grid-column: 12;
    justify-self: end;
  }
}

/* Boş durum */
.kr-bos {
  max-width: 48rem;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  background: var(--paper-2);
}
.kr-bos .h3 {
  margin-bottom: 10px;
}
.kr-bos .btn-group {
  margin-top: var(--sp-4);
}
@media (min-width: 820px) {
  .kr-bos {
    padding: var(--sp-6) var(--sp-5);
  }
}

/* 4. Tekil yazı ------------------------------------------------------------ */

.kr-makale-gorsel {
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.kr-makale-gorsel img {
  width: 100%;
  height: auto;
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
}
.kr-makale-gorsel figcaption {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.kr-makale-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
}
/* Uzun kod satırı (pre) kolonu genişletmesin: pre kendi içinde kayar */
.kr-makale-govde {
  min-width: 0;
}
.kr-makale-yan {
  display: none;
}
@media (min-width: 1100px) {
  .kr-makale-grid--toc {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .kr-makale-grid--toc .kr-makale-govde {
    grid-column: 1 / span 8;
  }
  .kr-makale-yan {
    grid-column: 10 / -1;
    position: sticky;
    top: calc(var(--header-h) + var(--admin-bar) + var(--sp-4));
    display: grid;
    gap: 12px;
    justify-items: start;
  }
  .kr-makale-yan .toc {
    width: 100%;
  }
}
.kr-makale-etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: var(--prose);
  margin-top: var(--sp-5);
}
.kr-makale-etiketler .tag {
  min-height: 44px;
  padding-inline: 16px;
  font-size: var(--fs-xs);
}
.kr-makale-etiketler .tag:hover {
  border-color: var(--fg);
}

/* Yazı sonu teklif kartı */
.kr-teklif {
  max-width: var(--prose);
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.kr-teklif-baslik {
  margin-top: 12px;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
}
.kr-teklif .btn-group {
  margin-top: var(--sp-4);
}

/* Önceki / sonraki yazı */
.kr-yazi-gezinme {
  display: grid;
  gap: 0 var(--gap);
  max-width: var(--prose);
  margin-top: var(--sp-6);
}
.kr-gezinme {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 44px;
  padding-block: var(--sp-3);
  border-top: 1px solid var(--fg);
}
.kr-gezinme-etiket {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.kr-gezinme--onceki .kr-gezinme-ok {
  transform: rotate(180deg);
}
.kr-gezinme-baslik {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.kr-gezinme:hover .kr-gezinme-baslik {
  color: var(--blue-text);
}
@media (min-width: 600px) {
  .kr-yazi-gezinme {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kr-gezinme--sonraki {
    grid-column: 2;
    justify-items: end;
    text-align: right;
  }
}

/* İlgili yazılar */
.kr-ilgili-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: var(--sp-5);
}
.kr-kartlar {
  display: grid;
  gap: var(--gap);
}
.kr-kartlar > li {
  display: flex;
}
.kr-kartlar--1 {
  max-width: 36rem;
}
@media (min-width: 820px) {
  .kr-kartlar--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kr-kartlar--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.kr-kart {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--paper);
}
.kr-kart-baslik {
  font-size: 1.3125rem;
  line-height: 1.25;
  letter-spacing: -0.018em;
}
.kr-kart-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.kr-kart-ozet {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.kr-kart-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.kr-kart:hover {
  border-color: var(--line-strong);
}
.kr-kart:hover .kr-kart-link,
.kr-kart:hover .kr-kart-ok {
  color: var(--blue-text);
}

/* 5. 404 ------------------------------------------------------------------- */

.kr-404-bas .facts dd {
  overflow-wrap: anywhere;
}
.kr-404-baslik {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.kr-404-liste {
  display: grid;
  gap: 0 var(--gap);
  border-top: 1px solid var(--fg);
}
.kr-404-link {
  display: grid;
  align-content: start;
  gap: 8px;
  height: 100%;
  min-height: 44px;
  padding-block: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-strong);
}
.kr-404-ad {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.kr-404-ad-metin {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.kr-404-ok {
  color: var(--muted);
}
.kr-404-metin {
  max-width: 34ch;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.kr-404-link:hover .kr-404-ad,
.kr-404-link:hover .kr-404-ok {
  color: var(--blue-text);
}
@media (min-width: 600px) {
  .kr-404-liste--2,
  .kr-404-liste--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 820px) {
  .kr-404-liste--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .kr-404-liste--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .kr-404-link {
    padding-right: var(--sp-2);
  }
}

/* 6. Hareket: yalnızca transform, yalnızca hareket tercih edilmiyorsa ------ */

@media (prefers-reduced-motion: no-preference) {
  .kr-kanal-ok,
  .kr-kart-ok,
  .kr-404-ok,
  .kr-gezinme-ok {
    transition: transform var(--dur-2) var(--ease);
  }
  .kr-kanal-liste a:hover .kr-kanal-ok {
    transform: translate(2px, -2px);
  }
  .kr-kart:hover .kr-kart-ok,
  .kr-404-link:hover .kr-404-ok,
  .kr-gezinme--sonraki:hover .kr-gezinme-ok {
    transform: translateX(4px);
  }
  .kr-gezinme--onceki:hover .kr-gezinme-ok {
    transform: rotate(180deg) translateX(4px);
  }
}

/* Uzun yazı başlıkları: sayfa başlığı ölçüsü makalede bir kademe küçük */
.kr-makale-bas .page-title {
  font-size: clamp(2rem, 1.35rem + 2.3vw, 3.375rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

/* Makale breadcrumb'ı: uzun yazı başlığı ayırıcının yanında tek satırda kısalır
   (iki satıra kırılınca "/" ayırıcısı bloğun ortasında kalıyordu) */
.kr-makale-bas .breadcrumb li:last-child {
  flex: 1 1 0;
  min-width: 6rem;
}
.kr-makale-bas .breadcrumb [aria-current="page"] {
  display: block;
  overflow: hidden;
  min-width: 0;
  line-height: 44px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 7. Zenginleştirme ------------------------------------------------------- */

/* 7.1 İletişim başlığı: sağ kolonda dev e-posta / telefon (mc_dev_iletisim; punto kabın
   genişliğinden, container query). Telefonda H1 + lead'in altında aynı liste. */
.kr-iletisim-bas .page-hero-gorsel--html {
  min-width: 0;
}
/* ≥1100: şekil yukarı alınır — mavi şerit e-posta satırının üst çizgisine binmesin */
@media (min-width: 1100px) {
  .kr-iletisim-bas .marka-sekli--baslik {
    --ms-ust: -20px;
  }
}
@media (max-width: 1099.98px) {
  .kr-iletisim-bas .dev-iletisim {
    max-width: 36rem;
  }
}

/* 7.2 Hakkımızda başlığı: ortak sayfa başlığı kalıbı (künye + butonlar + logo şeridi; şekil
   künye panelinin arkasında, <1100'de köşe işareti — 25.2 / 31). Ek kural gerekmez. */

/* Stüdyo beyanındaki tek vurgu: gövde ölçüsünde ince mavi alt çizgi bağlantı gibi okunuyordu
   (.entry-content a da mavi alt çizgili). Burada çizgi değil, harflerin alt üçte birinin arkasında
   açık mavi işaretleyici bant: düz renk, metin rengi değişmez (kontrast metin/zemin aynı kalır).
   Çizim animasyonu ortak katmandan (scaleX, ekrana girince). */
.kr-hk-giris-metin .vurgu::after {
  bottom: 0.04em;
  height: 0.36em;
  background: var(--blue-tint);
  background: color-mix(in srgb, var(--blue) 28%, transparent);
}

/* 7.3 Hakkımızda: teknoloji etiketleri, ikonlu ilkeler */
.kr-hk-teknoloji {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-4);
}
.kr-hk-teknoloji-kir {
  display: none;
}
/* 6 etiket (WordPress … C# / .NET) tek satırda ≈ 584 px. Metin kolonu ~600 px'ten dar olduğunda
   (<640, 820–999 ve 1100–1139; ölçüm: 10 px adımla, birkaç px yazı tipi payıyla) liste 3 + 3
   bölünür: son satırda tek etiket kalmaz. Etiket listesi değişirse yeniden ölçülmeli. */
@media (max-width: 639.98px), (min-width: 820px) and (max-width: 999.98px), (min-width: 1100px) and (max-width: 1139.98px) {
  .kr-hk-teknoloji-kir {
    display: block;
    flex-basis: 100%;
    height: 0;
  }
}
/* İç pay 320 px'te 8 px'e iner: ilk üç etiket (≈ 299 px) 280 px'lik kolona tek satırda sığar */
.kr-hk-teknoloji .tag {
  min-height: 36px;
  padding-inline: clamp(8px, 2.5vw, 12px);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg);
}
.kr-ilke .ikon-baslik--ust {
  gap: 14px;
}
.kr-ilke .ikon-baslik--ust > .ikon {
  stroke-width: 1.5;
}

/* 7.4 Blog boş durumu: solda mesaj, sağda "Bu arada" bağlantı satırları */
.kr-bos--yonlu {
  display: grid;
  gap: var(--sp-5) var(--gap);
  max-width: none;
}
.kr-bos-ana .muted {
  max-width: 30rem;
}
@media (max-width: 819.98px) {
  .kr-bos--yonlu {
    padding-inline: var(--sp-3);
  }
}
.kr-bos-yan .kicker {
  margin-bottom: var(--sp-2);
}
.kr-yon-liste {
  border-top: 1px solid var(--line-strong);
}
.kr-yon {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line-strong);
}
/* Panel (paper-2) içinde satır hover zemini beyaz */
.kr-bos .satir-hover::before {
  background: var(--paper);
}
.kr-yon-ikon {
  color: var(--blue-text);
}
.kr-yon-metin {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.kr-yon-ad {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
}
.kr-yon-aciklama {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.kr-yon-ok {
  color: var(--muted);
}
.kr-yon:hover .kr-yon-ad,
.kr-yon:hover .kr-yon-ok {
  color: var(--blue-text);
}
@media (min-width: 820px) {
  .kr-bos--yonlu {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
}
@media (min-width: 1100px) {
  .kr-bos--yonlu {
    padding: var(--sp-7) var(--sp-6);
  }
  .kr-bos-ana .h3 {
    font-size: clamp(1.75rem, 1rem + 1.2vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -0.028em;
  }
}

/* Yazı listesi satırı (.satir-hover): başlık kaydırılmaz (.satir-kay yok) — transform, satırı
   kaplayan .kr-yazi-link::after alanını bağlantının kendisine daraltırdı; yalnızca ok kayar. */

/* 7.5 404: dev kontur "404" marka şeklinin önünde. <1100'de rakam ve olgular yan yana/üst üste
   kompakt bir blokta: başlık kısa kalır, sayfanın asıl işi olan "Sık ziyaret edilen sayfalar"
   ilk ekrana yaklaşır (rakam dekoratif, aria-hidden; aynı bilgi eyebrow ve olguda metin).
   .page-hero-side <1100'de display: contents — rakam yuvası ve olgular doğrudan ızgara öğesi.
   Rakam yuvası container-type: inline-size taşıdığı için kolon genişliği fr ile verilir
   (auto kolon sıfıra çökerdi); punto yuvanın genişliğinden (100cqi / 1.9 ≈ "404"). */
.kr-404-bas .dev-kontur--404 {
  color: var(--on-dark);
}
@media (max-width: 1099.98px) {
  .kr-404-bas .page-hero-main {
    grid-column: 1 / -1;
  }
  /* Dar kolonda olgu etiketi değerin üstünde (yan yana iki dar sütun yerine) */
  .kr-404-bas .facts div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding-block: 10px;
  }
  .kr-404-bas .facts dt {
    padding-top: 0;
  }
}
/* <820: H1 + lead + buton tam genişlikte; altında solda "404", sağda olgular */
@media (max-width: 819.98px) {
  .kr-404-bas .page-hero-grid {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    column-gap: 20px;
    row-gap: var(--sp-5);
    align-items: center;
  }
  .kr-404-bas .dev-kontur--404 {
    font-size: min(8rem, 100cqi / 1.9);
  }
}
/* 820–1099: solda H1 + lead + buton, sağda "404" ve altında olgular (başlık ≤ ~560 px) */
@media (min-width: 820px) and (max-width: 1099.98px) {
  .kr-404-bas .page-hero-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--gap);
    row-gap: var(--sp-3);
  }
  .kr-404-bas .page-hero-main {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .kr-404-bas .page-hero-gorsel--html {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .kr-404-bas .facts {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  .kr-404-bas .dev-kontur--404 {
    font-size: min(10rem, 100cqi / 1.9);
  }
}
@media (min-width: 1100px) {
  .kr-404-bas .page-hero-gorsel--html {
    display: flex;
    justify-content: flex-end;
  }
  /* Şekil yukarı alınır: mavi şerit "404"ün üst kenarına değmesin */
  .kr-404-bas .marka-sekli--404 {
    --ms-ust: -24px;
  }
}
.kr-404-ad > .ikon {
  stroke-width: 1.5;
}

/* ==========================================================================
   29. Sayfa: Referanslar ve Labs
   ========================================================================== */

/* ==========================================================================
   Referanslar (/referanslarimiz/) + Mastercode Labs (/labs/, /labs/{proje}/)
   Yalnızca .rl-… önekli sınıflar; ortak bileşenler main.css'ten gelir.
   ========================================================================== */

/* Ortak: boş durum ------------------------------------------------------- */

.rl-bos {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding-block: var(--sp-6);
}
.rl-bos .muted {
  max-width: 40rem;
}

/* 1. Referanslar arşivi ---------------------------------------------------- */

/* Başlık alt boşluğu kısalır: vitrin koyu bandın üstüne taşar. Logo şeridi varsa
   (alt bant) başlık şeritte biter; şeridin alt boşluğu kartlara nefes payı bırakır. */
.rl-ref-baslik.page-hero:not(.page-hero--alt-bant) {
  padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
/* Şerit kendi zemininde: marka şeklinin çubukları ve ızgara dokusu şeridin üst çizgisinde
   biter (şekil çizginin üstünde durur, logolar şeklin önünden geçmez). */
.rl-ref-baslik .page-hero-alt {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  background: var(--ink-950);
}
.rl-ref-baslik .page-hero-alt--logolar .logo-seridi {
  padding-bottom: clamp(2rem, 1rem + 3vw, 3rem);
}

.rl-ref-vitrin {
  position: relative;
  background: var(--paper-2);
  padding-bottom: var(--section-y);
}
.rl-ref-vitrin::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--overlap);
  background: var(--ink-950);
}
.rl-ref-vitrin--bos::before {
  display: none;
}
.rl-ref-vitrin--bos {
  padding-top: var(--section-y);
}
.rl-ref-vitrin > .container {
  position: relative;
}

.rl-ref-izgara {
  display: grid;
  gap: var(--sp-7) var(--gap);
}
.rl-ref-kart .work-title {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}
.rl-ref-kart .work-desc {
  max-width: 46ch;
}

/* Tablet: 2 eşit kolon; tek kalan son kart tam satır, görsel + metin yan yana */
@media (min-width: 820px) {
  .rl-ref-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--sp-8);
  }
  .rl-ref-kart--tam {
    grid-column: 1 / -1;
  }
  .rl-ref-kart--tam .work-link {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--gap);
    align-items: center;
  }
  .rl-ref-kart--tam .work-meta {
    padding-top: 0;
    gap: 12px;
  }
  .rl-ref-izgara--tek .rl-ref-kart {
    grid-column: 1 / -1;
  }
}

/* Masaüstü: 12 kolon, satırlar 7/5 ve 5/7 dönüşümlü. Dar kart satırın altına
   hizalanır: üst kenarlar basamaklanır, alt satırdaki alan adları aynı çizgide biter. */
@media (min-width: 1100px) {
  .rl-ref-izgara {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: var(--sp-9);
  }
  .rl-ref-kart--genis {
    grid-column: span 7;
  }
  .rl-ref-kart--dar {
    grid-column: span 5;
    align-self: end;
  }
  .rl-ref-kart--tam {
    grid-column: 1 / -1;
  }
  .rl-ref-kart--tam .work-link {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .rl-ref-kart--tam .ref-card-gorsel {
    grid-column: 1 / span 7;
  }
  .rl-ref-kart--tam .work-meta {
    grid-column: 9 / -1;
  }
  .rl-ref-izgara--tek .rl-ref-kart {
    grid-column: 2 / span 10;
  }
}

/* Hover dili kart-referans kökündeki .kaldir'den gelir (main.css 25.6). İlk kartın
   ilk ekran yerleşmesi (.gorsel-yerles) bittikten sonra hover yakınlaşması çalışsın:
   animasyon son karede transform'u tutmaz (yalnız başlangıç karesi geriye dolar). */
@media (prefers-reduced-motion: no-preference) {
  .rl-ref-kart.gorsel-yerles :is(.frame-media, .telefon-ekran) img {
    animation-fill-mode: backwards;
  }
}

/* 2. Labs arşivi: satıştaki ürün vitrini ----------------------------------- */

.rl-urun {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-5) 20px;
  border-radius: var(--r-4);
}
/* Marka şekli yalnız ≥1100: daha dar ekranda panel başlığın şekliyle aynı görüş alanına
   girer ve tek kolonda künyenin üstüne binerdi. */
.rl-urun-sekil {
  display: none;
}
@media (min-width: 480px) {
  .rl-urun {
    padding: var(--sp-6) var(--sp-4);
  }
}
@media (min-width: 820px) {
  .rl-urun {
    padding: var(--sp-7) var(--sp-6);
  }
}
@media (min-width: 1100px) {
  .rl-urun {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
    padding: var(--sp-8) var(--sp-7);
  }
  .rl-urun-ana {
    grid-column: 1 / span 6;
  }
  /* Künye üst satırın hizasında başlar, opak panelde (25.2); sağ alt köşeden yükselen
     marka şekli panelin arkasında ve altında kalır, künye metnine binmez. */
  .rl-urun-kunye {
    grid-column: 8 / -1;
  }
  .rl-urun-sekil {
    display: block;
    --ms-gen: 340px;
    --ms-ust: calc(100% - 210px);
    --ms-sag: -36px;
  }
}

.rl-urun-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.rl-urun-ust .status {
  color: var(--on-dark);
}
.rl-urun-ust-etiket {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.rl-urun-ad {
  margin-top: var(--sp-4);
  font-size: clamp(3rem, 1.6rem + 6vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #fff;
}
.rl-urun-metin {
  margin-top: var(--sp-3);
  max-width: 32rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--on-dark-2);
}
.rl-urun-etiketler {
  margin-top: var(--sp-2);
}
.rl-urun .rl-urun-butonlar {
  margin-top: var(--sp-5);
}

.rl-urun-kunye {
  border-top: 1px solid var(--ink-600);
}
.rl-urun-kunye div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid var(--ink-700);
}
.rl-urun-kunye dt {
  padding-top: 2px;
  font-size: var(--fs-xs);
  color: var(--on-dark-muted);
}
.rl-urun-kunye dd {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--on-dark);
}

/* 3. Labs proje listesi (arşiv + proje sayfası "Diğer projeler") ---------- */

.rl-labs-projeler-grid {
  display: grid;
  gap: var(--sp-5);
}
.rl-labs-projeler-not {
  margin-top: var(--sp-2);
  max-width: 34rem;
  color: var(--muted);
}
.rl-labs-projeler-bas .link-arrow {
  margin-top: var(--sp-1);
}
@media (min-width: 1100px) {
  .rl-labs-projeler-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .rl-labs-projeler-bas {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--header-h) + var(--admin-bar) + var(--sp-4));
  }
  .rl-lab-liste {
    grid-column: 5 / -1;
  }
}

.rl-lab-liste {
  border-top: 1px solid var(--fg);
}
.rl-lab-satir {
  border-bottom: 1px solid var(--line-strong);
}
.rl-lab-satir-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "ad ok"
    "ozet ozet"
    "bilgi bilgi";
  gap: 10px 16px;
  padding-block: var(--sp-3) var(--sp-4);
}
.rl-lab-satir-ad {
  grid-area: ad;
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
/* İkon: gerçek uygulama ikonu (Servisly, KingOfMath, Zenox) ya da projenin çizgi ikonu
   (uydurma logo yok, boş yuva yok); her satırda bir işaret,
   adlar aynı hizada başlar. */
.rl-lab-satir-ad--ikonlu {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rl-lab-ikon-yuva {
  flex: none;
  width: 32px;
  height: 32px;
}
.rl-lab-ikon-yuva .labs-ikon {
  display: block;
  width: 32px;
  height: 32px;
}
.rl-lab-ikon-yuva .rl-lab-cizgi-ikon {
  display: block;
  margin: 3px;
  color: var(--blue-text);
}
.rl-lab-satir-ozet {
  grid-area: ozet;
  max-width: 40rem;
  font-size: 1rem;
  color: var(--fg-2);
}
/* Bilgi bloğu her projede aynı anatomi: durum / tür · model / etiketler alt alta; tür satırı
   boş olsa da bir satır yer tutar. */
.rl-lab-satir-bilgi {
  grid-area: bilgi;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 8px;
  padding-top: 4px;
}
.rl-lab-satir-bilgi .rl-lab-satir-tur {
  min-height: 1lh;
}
.rl-lab-satir-bilgi .status {
  color: var(--fg);
}
.rl-lab-satir-tur {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--fg-2);
}
.rl-lab-satir-ok {
  grid-area: ok;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -6px;
  color: var(--muted);
}
.rl-lab-satir-link:hover .rl-lab-satir-ad {
  color: var(--blue-text);
}
.rl-lab-satir-link:hover .rl-lab-satir-ok {
  color: var(--blue-text);
}
/* Telefonda özet ve bilgi satırın tam genişliğinde (ikon yalnız adın solunda; girinti yok) */

.rl-lab-satir-gorsel {
  grid-area: gorsel;
  display: block;
  overflow: hidden;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--paper);
}
.rl-lab-satir-gorsel img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
.rl-lab-satir--gorselli .rl-lab-satir-link {
  grid-template-areas:
    "gorsel gorsel"
    "ad ok"
    "ozet ozet"
    "bilgi bilgi";
}

/* Vitrin satırı: gerçek ekran görüntüsü satırın üstünde, geniş */
.rl-lab-satir-cihaz {
  grid-area: cihaz;
  margin-bottom: var(--sp-2);
}
.rl-lab-satir--vitrin .rl-lab-satir-link {
  grid-template-areas:
    "cihaz cihaz"
    "ad ok"
    "ozet ozet"
    "bilgi bilgi";
  padding-top: var(--sp-5);
}

@media (min-width: 820px) {
  .rl-lab-satir-link {
    grid-template-columns: minmax(0, 3.6fr) minmax(0, 4.6fr) minmax(0, 2.6fr) 44px;
    grid-template-areas: "ad ozet bilgi ok";
    gap: 12px var(--gap);
    align-items: start;
    padding-block: var(--sp-4);
  }
  .rl-lab-satir-ozet {
    padding-top: 4px;
  }
  .rl-lab-satir-bilgi {
    padding-top: 6px;
  }
  .rl-lab-satir-ok {
    margin-top: 0;
  }
  .rl-lab-satir--gorselli .rl-lab-satir-link {
    grid-template-columns: 136px minmax(0, 3fr) minmax(0, 4.4fr) minmax(0, 2.6fr) 44px;
    grid-template-areas: "gorsel ad ozet bilgi ok";
  }
  .rl-lab-satir--vitrin .rl-lab-satir-link {
    grid-template-areas:
      "cihaz cihaz cihaz cihaz"
      "ad ozet bilgi ok";
    padding-top: var(--sp-6);
  }
  .rl-lab-satir-cihaz {
    margin-bottom: var(--sp-3);
  }
}
/* 1100–1279: liste 8/12 kolona iner; dört sütunda ikonlu ad (KingOfMath) özete dayanırdı.
   Bilgi özetin altına geçer, ad sütunu genişler. */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .rl-lab-satir-link {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 44px;
    grid-template-areas:
      "ad ozet ok"
      "ad bilgi ok";
  }
  .rl-lab-satir--gorselli .rl-lab-satir-link {
    grid-template-columns: 136px minmax(0, 4fr) minmax(0, 5fr) 44px;
    grid-template-areas:
      "gorsel ad ozet ok"
      "gorsel ad bilgi ok";
  }
  .rl-lab-satir--vitrin .rl-lab-satir-link {
    grid-template-areas:
      "cihaz cihaz cihaz"
      "ad ozet ok"
      "ad bilgi ok";
  }
  .rl-lab-satir-bilgi {
    padding-top: 0;
  }
}

/* Hover: düz satırlar .satir-hover/.satir-kay (main.css 25.6) — zemin katmanı, ad ve ok
   kayar. Vitrin satırı .kaldir (satır −4 px, çerçeveye gölge, görsel 1.04); oku burada kayar. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .rl-lab-satir--vitrin .rl-lab-satir-ok .ikon {
    transition: transform var(--dur-2) var(--ease);
  }
  .rl-lab-satir--vitrin .rl-lab-satir-link:hover .rl-lab-satir-ok .ikon {
    transform: translateX(4px);
  }
}

/* 4. Labs arşivi: hizmetlerle bağ ----------------------------------------- */

.rl-bag-grid {
  display: grid;
  gap: var(--sp-5);
}
.rl-bag-bas .kicker {
  margin-bottom: var(--sp-2);
}
.rl-bag-metin {
  max-width: 40rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
}
.rl-bag-liste {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--fg);
}
.rl-bag-liste li {
  border-bottom: 1px solid var(--line-strong);
}
.rl-bag-liste a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 4px 16px;
  min-height: 72px;
  padding-block: 20px;
}
.rl-bag-ad {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.rl-bag-kisa {
  grid-column: 1;
  padding-left: calc(22px + 0.6 * 1.25rem); /* ikon + ikon-baslik aralığı: ad metniyle aynı çizgi */
  font-size: var(--fs-sm);
  color: var(--muted);
}
.rl-bag-ok {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: center;
  display: grid;
  color: var(--muted);
}
.rl-bag-liste a:hover .rl-bag-ad,
.rl-bag-liste a:hover .rl-bag-ok {
  color: var(--blue-text);
}
@media (min-width: 1100px) {
  .rl-bag-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .rl-bag-bas {
    grid-column: 1 / span 5;
  }
  .rl-bag-govde {
    grid-column: 7 / -1;
  }
}
/* 1100–1279: başlığın bölünmez ikinci cümlesi ("Sizin projenizde de.") 5 kolona sığmaz;
   başlık boş 6. kolonu da kullanır. */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .rl-bag-bas {
    grid-column: 1 / span 6;
  }
}

/* 5. Proje sayfası --------------------------------------------------------- */

/* Eyebrow'da gerçek uygulama ikonu (KingOfMath): mavi kare yerine ikon */
.rl-proje-eyebrow--ikonlu::before {
  display: none;
}
.rl-proje-eyebrow-ikon {
  width: 32px;
  height: 32px;
}
/* Görseli olmayan projede çizgi ikon: ≥1100 sağ kolonda olguların üstünde,
   marka şeklinin ön yüzünde; daha dar ekranda metnin üstünde küçük (main.css 25.12) */
@media (min-width: 1100px) {
  .rl-proje-baslik.page-hero--g-ikon .page-hero-gorsel {
    padding-right: clamp(2rem, 6vw, 6rem);
  }
  /* Künye uzun (KingOfMath: 5 satır) ve yukarıdan başlar: mavi şerit künyenin üst çizgisine
     değmesin diye şekil biraz yukarıda */
  .rl-proje-baslik .marka-sekli--baslik {
    --ms-ust: 12px;
  }
}

/* "Neler sunuyor?" — ikonlu liste (Zenox): kutusuz çizgi ikon + metin */
.entry-content ul.rl-ozellikler--ikonlu {
  display: grid;
  gap: 14px;
  padding-left: 0;
  list-style: none;
}
.entry-content ul.rl-ozellikler--ikonlu > li {
  margin-top: 0;
}
.rl-ozellikler--ikonlu .ikon-baslik > .ikon {
  top: 0.22em;
}
.entry-content ul.liste-onay.rl-ozellikler > li + li {
  margin-top: 0.65em;
}

.rl-proje-olgular dd .status {
  color: var(--on-dark);
}
.rl-etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rl-canli-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-block: -12px;
  color: var(--blue-text-dark);
}
.rl-canli-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rl-yan-kart {
  padding: var(--sp-4);
  border-radius: var(--r-3);
  background: var(--paper-2);
}
.rl-yan-kart .kicker {
  margin-bottom: 10px;
}
.rl-yan-baslik {
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.rl-yan-baslik.ikon-baslik--ust {
  gap: 12px;
}
.rl-yan-metin {
  margin-top: 12px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.rl-yan-kart .link-arrow {
  margin-top: 8px;
}

.rl-geri-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  justify-self: start;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
}
.rl-geri-ikon {
  transform: rotate(180deg);
}
.rl-geri-link:hover {
  color: var(--fg);
}

/* Tablet: yan kolon içeriğin altına iner; kart tam satıra yayılmasın */
@media (max-width: 1099px) {
  .rl-proje-yan > .rl-yan-kart {
    max-width: 36rem;
  }
}

/* Gerçek ekran görüntüsü olan projede başlığın alt boşluğu kısalır: görsel koyu bandın üstüne taşar */
.rl-proje-baslik--gorselli.page-hero {
  padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.rl-proje-gorsel {
  position: relative;
}
.rl-proje-gorsel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--overlap) * 0.8);
  background: var(--ink-950);
}
.rl-proje-gorsel > .container {
  position: relative;
}

/* 6. Proje ekran görüntüsü: tarayıcı çerçevesi + telefon (mc_rl_proje_gorseli) ---- */

.rl-cihaz {
  position: relative;
}
.rl-cihaz .frame-url {
  font-weight: 500;
  color: var(--fg-2);
}
/* Telefon görünümü (ortak .telefon çerçevesi) yalnızca ≥820; telefonda <picture> boş
   kaynak alır, görsel hiç indirilmez. Dar ekranda masaüstü görüntüsü tek başına. */
.rl-cihaz-telefon {
  display: none;
}
.rl-cihaz-telefon picture {
  display: block;
}
@media (min-width: 820px) {
  .rl-cihaz--telefonlu {
    padding-right: 11%;
    padding-bottom: 5%;
  }
  .rl-cihaz-telefon {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 21%;
    padding: 5px;
    border-radius: clamp(16px, 1.6vw, 26px);
  }
  .rl-cihaz-telefon .telefon-ekran {
    border-radius: clamp(12px, 1.2vw, 21px);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kaldir .rl-cihaz-telefon {
    transition: transform 0.4s var(--ease);
  }
  .kaldir:hover .rl-cihaz-telefon {
    transform: translateY(-6px);
  }
}

/* 7. Labs başlığı: üç gerçek uygulama ikonu tek sırada ------------------------- */
/* Servisly (satışta) büyük, KingOfMath ve Zenox (geliştirmede) eşit ve küçük; ortak
   tabanda, altlarında ad etiketi. Telefonda/tablette metnin üstünde; ≥1100 sağ kolonda
   künye panelinin içinde, olguların üstünde (şeklin önünde, opak zeminde). */

.rl-labs-ikonlar {
  display: inline-flex;
  align-items: flex-end;
  gap: 16px;
}
.rl-labs-ikon-oge {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.rl-labs-ikon-ana,
.rl-labs-ikon-ikinci {
  display: block;
  border-radius: 22%;
}
.rl-labs-ikon-ana {
  width: 64px;
  height: 64px;
}
.rl-labs-ikon-ikinci {
  width: 44px;
  height: 44px;
}
.rl-labs-ikon-ad {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--on-dark-muted);
}
@media (max-width: 1099.98px) {
  .rl-labs-baslik .page-hero-gorsel {
    order: -1;
    margin-bottom: calc(var(--sp-6) * -0.5);
  }
}
@media (min-width: 820px) {
  .rl-labs-ikonlar {
    gap: 24px;
  }
  .rl-labs-ikon-ana {
    width: 80px;
    height: 80px;
  }
  .rl-labs-ikon-ikinci {
    width: 56px;
    height: 56px;
  }
}
@media (min-width: 1100px) {
  .rl-labs-baslik .page-hero-gorsel {
    display: flex;
    justify-content: flex-start;
  }
  .rl-labs-ikonlar {
    gap: 32px;
  }
  .rl-labs-ikon-ana {
    width: 96px;
    height: 96px;
  }
  .rl-labs-ikon-ikinci {
    width: 64px;
    height: 64px;
  }
}

/* Kısa breadcrumb bağlantısı ("Labs") da ≥ 44 px dokunma hedefi: görünür aralık değişmeden */
.rl-proje-baslik .breadcrumb a {
  padding-inline: 8px;
  margin-inline: -8px;
}

/* 8. Vurgu çubuğu ile inen harfler (ş, y) ---------------------------------- */
/* Ortak çubuk (main.css 25.4) inen harf bölgesinden geçer. Bu sayfa grubundaki vurgularda
   harfin çevresinde zemin renginde ince, bulanıksız bir boşluk (knockout) açılır: çubuk
   harfe değmeden kesilir. Bulanıklık yok — ışıma/glow değil; çubuk dışında görünmez.
   "Sizin" (Labs bağ başlığı) inen harfsiz seçildi, proje H1'leri vurgusuz. */
.rl-ref-baslik .vurgu,
.rl-ozellik-baslik .vurgu {
  --vurgu-zemin: var(--ink-950);
  text-shadow:
    0.05em 0 var(--vurgu-zemin),
    -0.05em 0 var(--vurgu-zemin),
    0.035em 0.035em var(--vurgu-zemin),
    -0.035em 0.035em var(--vurgu-zemin),
    0 0.05em var(--vurgu-zemin);
}
.rl-ozellik-baslik .vurgu {
  --vurgu-zemin: var(--paper);
}

/* Proje başlığında gerçek uygulama ikonu (ör. Zenox): sağ kolonda büyük, kendi köşeleriyle;
   yalnızca gölge — parıltı/glow eklenmez (ikonun kendi tasarımı neyse o). */
.rl-proje-baslik .page-hero-ikon--uygulama {
  display: block;
  width: clamp(112px, 12vw, 176px);
  height: auto;
  border-radius: 22%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   30. Sayfa: Servisly, Servisly sektörleri ve su arıtma
   ========================================================================== */

/* ==========================================================================
   Ürün + sektör sayfaları: page-servisly.php, page-servisly-sektor.php (/servisly/{sektör}/),
   page-su-aritma.php; ayrıca menüdeki Servisly sektör bağlantıları (.mega-sektor-*, .m-sub-sektorler)
   (template-parts/urun-sektor-*.php). Tüm seçiciler .us- önekli.
   Token ve ortak bileşenler main.css'ten gelir (25. Zenginleştirme dahil);
   burada yeniden tanımlanmaz, yalnızca konum/ölçü ince ayarı yapılır.
   ========================================================================== */

/* Ortak: küçük sıra numarası (özellik ve ihtiyaç ızgaraları) ---------------
   Hücrenin sağ üst köşesinde soluk etiket; başlığın solunda çizgi ikon var. */

.us-no {
  position: absolute;
  top: calc(var(--sp-3) + 3px);
  right: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 1. Servisly: ürün başlığı (uygulama ikonu + künye, marka şekli önünde) --- */

.us-urun-hero-grid {
  display: grid;
  gap: var(--sp-7);
  margin-top: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
}
/* Uygulama ikonu: <1100 metnin üstünde küçük; ≥1100 sağ kolonda künyenin üstünde */
.us-urun-ikon {
  margin-bottom: calc(var(--sp-7) * -0.5);
}
.us-urun-ikon img {
  display: block;
  width: 80px;
  height: auto;
  border-radius: 22%;
  box-shadow: 0 0 0 1px var(--ink-700), var(--sh-frame);
}
.us-urun-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: var(--sp-3);
}
.us-urun-ust .hero-eyebrow {
  margin-bottom: 0;
}
.us-rozet {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 12px;
  border: 1px solid var(--ink-600);
  border-radius: var(--r-pill);
  background: var(--ink-950);
}
.us-rozet .status {
  color: var(--on-dark);
}
.us-urun-hero .lead {
  margin-top: var(--sp-3);
  max-width: 36rem;
}

.us-kunye {
  padding-top: var(--sp-3);
  border-top: 2px solid var(--blue);
}
.us-kunye-ad {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 2rem + 4.4vw, 5.75rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: #fff;
}
.us-kunye-tanim {
  margin-top: var(--sp-2);
  max-width: 26rem;
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
}
.us-kunye-liste {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--ink-700);
}
.us-kunye-liste div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--ink-700);
}
.us-kunye-liste dt {
  padding-top: 2px;
  font-size: var(--fs-xs);
  color: var(--on-dark-muted);
}
.us-kunye-liste dd {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--on-dark);
}


@media (min-width: 820px) and (max-width: 1099.98px) {
  .us-urun-ikon img {
    width: 104px;
  }
  /* Tablet: künye tam genişlikte iki kolon — solda ad + tanım, sağda tanım listesi */
  .us-kunye {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--gap);
    align-items: start;
  }
  .us-kunye-liste {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    border-top: 0;
  }
}
@media (min-width: 1100px) {
  .us-urun-hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: var(--gap);
    row-gap: var(--sp-4);
    align-items: end;
  }
  .us-urun-ikon {
    grid-column: 9 / -1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .us-urun-ikon img {
    width: 144px;
  }
  .us-urun-hero-main {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .us-kunye {
    grid-column: 9 / -1;
    grid-row: 2;
  }
  /* Şekil künyenin arkasında; şerit ikonun üstünde, arada boşlukla kalır (ikona değmez) */
  .us-urun-hero .marka-sekli,
  .us-sektor-hero .marka-sekli {
    --ms-ust: -16px;
  }
}

/* 2. Servisly: neden Servisly — koyu imza bölümü ---------------------------
   Ayrımlar tipografik (ikonsuz), üst çizgili; gerçek uygulama ikonu marka şeklinin
   yanında. <820 alt alta (ikon liste sonunda solda, şekil sağ altta) · 820–1099 liste
   3 kolon · ≥1100 solda başlık + ikon, sağda liste; şekil sol altta ikonun yanından yükselir. */

.us-ayrim-grid {
  display: grid;
  gap: var(--sp-6) var(--gap);
}
.us-ayrim .us-ayrim-bas {
  margin-bottom: 0;
}
.us-ayrim-liste {
  display: grid;
  gap: var(--sp-5) var(--gap);
}
.us-ayrim-oge {
  padding-top: var(--sp-3);
  border-top: 2px solid var(--ink-600);
}
.us-ayrim-oge:first-child {
  border-top-color: var(--blue);
}
.us-ayrim-baslik {
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #fff;
}
.us-ayrim-oge p {
  margin-top: 12px;
  max-width: 40ch;
  color: var(--on-dark-2);
}
.us-ayrim-ikon img {
  display: block;
  width: 96px;
  height: auto;
  border-radius: 22%;
  box-shadow: 0 0 0 1px var(--ink-700), var(--sh-frame);
}
/* <1100: ikon satırı şeklin görünen yüksekliği kadar yer açar; son ayrım metni şeklin üstünde biter */
.us-ayrim-ikon {
  margin-top: var(--sp-2);
}
/* Telefon: şekil ikonun sağındaki boşlukta, alt kenardan yükselir (kutusu son metnin altında başlar) */
@media (max-width: 819.98px) {
  .us-ayrim .marka-sekli {
    --ms-gen: 260px;
    --ms-ust: calc(100% - 172px);
    --ms-sag: -40px;
  }
}
@media (min-width: 820px) {
  .us-ayrim-liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .us-ayrim-ikon img {
    width: 120px;
  }
}
@media (min-width: 1100px) {
  .us-ayrim-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--gap);
    row-gap: var(--sp-7);
  }
  .us-ayrim .us-ayrim-bas {
    grid-column: 1 / span 5;
    grid-row: 1;
  }
  .us-ayrim-liste {
    grid-column: 7 / -1;
    grid-row: 1 / span 2;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .us-ayrim-oge p {
    max-width: 46ch;
  }
  .us-ayrim-ikon {
    grid-column: 1 / span 5;
    grid-row: 2;
    align-self: end;
    margin-top: 0;
  }
  .us-ayrim-ikon img {
    width: 176px;
  }
  /* Şekil sol altta, ikonun hemen sağında zeminden yükselir; liste kolonuna (7–12) uzanmaz
     (1100'de 286 px → sağ ucu 534, liste 566'da başlar) */
  .us-ayrim .marka-sekli {
    --ms-gen: clamp(240px, 26vw, 340px);
    --ms-ust: calc(100% - var(--ms-gen) * 0.7);
    right: auto;
    left: calc(var(--ms-kenar) + var(--gutter) + 176px + var(--sp-4));
  }
}

/* 3. Servisly: özellikler (9) ----------------------------------------------
   <820: tek kolon satır listesi (ikon başlığın solunda, metin başlık hizasında).
   ≥820: 3×3 tablo ızgarası (9 öğe 2 kolona bölünmez; öksüz satır oluşmaz). */

.us-ozellik-izgara {
  border-top: 1px solid var(--fg);
}
.us-ozellik-oge {
  position: relative;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line-strong);
}
.us-ozellik-ad {
  padding-right: 2.5rem;
  text-wrap: balance;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.us-ozellik-oge p {
  margin-top: 6px;
  padding-left: calc(22px + 0.6 * var(--fs-h4));
  font-size: 1rem;
  color: var(--muted);
}
@media (min-width: 820px) {
  .us-ozellik-izgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--fg);
  }
  .us-ozellik-oge {
    padding: var(--sp-5) var(--sp-3) var(--sp-5);
  }
  .us-ozellik-oge:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--line-strong);
  }
  .us-ozellik-oge:nth-child(3n + 1) {
    padding-left: 0;
  }
  .us-ozellik-oge:nth-child(3n) {
    padding-right: 0;
  }
  .us-ozellik-oge:nth-last-child(-n + 3) {
    border-bottom: 0;
  }
  .us-ozellik-oge .us-no {
    top: calc(var(--sp-5) + 4px);
    right: var(--sp-3);
  }
  .us-ozellik-oge:nth-child(3n) .us-no {
    right: 0;
  }
  .us-ozellik-oge p {
    margin-top: 10px;
    padding-left: 0;
    max-width: 34ch;
  }
}
@media (min-width: 820px) and (max-width: 1099.98px) {
  /* Dar 3 kolonda orta kolon iki yandan dolgu aldığı için başlıkları kırıyordu */
  .us-ozellik-oge {
    padding-inline: 16px;
  }
  .us-ozellik-oge .us-no {
    right: 16px;
  }
  .us-ozellik-ad {
    font-size: 1.125rem;
  }
}
@media (min-width: 1100px) {
  .us-ozellik-oge {
    padding-inline: var(--sp-4);
  }
  .us-ozellik-oge .us-no {
    right: var(--sp-4);
  }
}

/* 4. Servisly: kimler için (gri zemin; not kutusu beyaz) ------------------- */

.us-kimler-grid {
  display: grid;
  gap: var(--sp-6);
}
.us-kimler-liste {
  border-top: 1px solid var(--fg);
}
.us-kimler-liste li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.us-kimler-liste li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--blue);
  transform: translateY(-3px);
}
.us-kimler-not {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-top: var(--sp-5);
  padding: var(--sp-3);
  border-radius: var(--r-3);
  background: var(--paper);
}
.us-kimler-not p {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  max-width: 52ch;
}
.us-kimler-not .link-arrow {
  min-height: 44px;
  font-size: var(--fs-sm);
}
.us-editor {
  margin-top: var(--sp-6);
}
@media (min-width: 1100px) {
  .us-kimler-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .us-kimler-bas {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--header-h) + var(--admin-bar) + var(--sp-5));
  }
  .us-kimler-govde {
    grid-column: 7 / -1;
  }
}

/* 5. Servisly: kapanış CTA'sında ürün imzası (mavi bant, cta 'ek') -------- */

.us-cta-urun {
  display: flex;
  align-items: center;
  gap: 16px;
}
.us-cta-urun .labs-ikon {
  width: 64px;
  height: 64px;
  box-shadow: 0 0 0 1px var(--line-on-blue);
}
.us-cta-urun p {
  display: grid;
  gap: 2px;
}
.us-cta-urun-ad {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--on-blue);
}
.us-cta-urun-alt {
  font-size: var(--fs-sm);
  color: var(--on-blue-2);
}

/* 6. Su arıtma: başlık — gerçek mobil ekran yelpazesi her genişlikte -------
   Yelpaze sayfa-basligi 'html' yuvasında, 'telefonlar' türünün sınıflarıyla (ölçüler main.css).
   <820: metnin ÜSTÜNDE küçük yelpaze (ilk ekranda gerçek görsel); marka şekli yanında, sağda.
   820–1099: metnin altında ortalı. ≥1100: sağ kolonda şeklin önünde; olgular sol kolonda
   butonların altında (şeklin çubukları olguların arkasından geçmez). */

.us-sektor-hero .page-hero-gorsel--telefonlar {
  display: flex;
}
@media (max-width: 819.98px) {
  .us-sektor-hero .page-hero-gorsel--telefonlar {
    order: -1;
    width: 248px;
    align-items: flex-start;
    padding-bottom: 18px;
    margin-bottom: calc(var(--sp-6) * -0.25);
  }
  .us-sektor-hero .page-hero-gorsel--telefonlar .telefon--arka {
    transform: translateY(18px);
  }
}
@media (min-width: 820px) and (max-width: 1099.98px) {
  /* Tablet: telefonlar metnin altında, olgulardan önce; yelpaze ortalanmış ve ölçülü */
  /* (container-type: inline-size kabın genişliği içerikten gelmez: auto kenar boşluğu
     yerine açık genişlik) */
  .us-sektor-hero .page-hero-gorsel--telefonlar {
    width: min(100%, 34rem);
    justify-self: center;
  }
  /* Başlık sağ üstteki şeklin solunda biter */
  .us-sektor-hero .page-title {
    max-width: calc(100% - 13rem);
  }
}
@media (min-width: 1100px) {
  .us-sektor-hero .page-hero-side {
    display: contents;
  }
  .us-sektor-hero .page-hero-main {
    grid-row: 1;
  }
  /* Telefonlar şeklin önünde, sağ kolonda iki satır boyunca */
  .us-sektor-hero .page-hero-gorsel--telefonlar {
    grid-column: 8 / -1;
    grid-row: 1 / span 2;
    align-self: center;
    padding-top: var(--sp-2);
  }
  /* Olgular sol kolonda butonların altında, 2×2 (main.css'teki .page-hero-side .facts
     grid-column: auto kuralını geçmek için aynı zincir) */
  .us-sektor-hero .page-hero-side .facts {
    grid-column: 1 / span 7;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    max-width: 40rem;
    border-top: 0;
  }
  .us-sektor-hero .facts div {
    display: block;
    padding-block: 14px 16px;
    border-top: 1px solid var(--ink-700);
    border-bottom: 0;
  }
  .us-sektor-hero .facts dd {
    margin-top: 4px;
  }
}

/* 7. Su arıtma: yayındaki mağazalar (iki kolonlu vitrin) -------------------
   Başlık ve kartlar tek ızgarada, sorgu sırasıyla (DOM, mobil ve odak sırası
   aynı). ≥820: başlık ilk hücrede ve ilk kartın altına hizalı; kartlar ikişer
   yan yana akar. Başlık bir hücre saydığı için tek sayıda kartta öksüz kalmaz. */

.us-vitrin {
  display: grid;
  gap: var(--sp-7);
}
.us-vitrin .us-vitrin-bas {
  margin-bottom: 0;
}
.us-vitrin-bas .section-head-side .link-arrow {
  margin-top: var(--sp-2);
}
@media (min-width: 820px) {
  .us-vitrin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: var(--sp-8);
    align-items: start;
  }
  .us-vitrin .us-vitrin-bas {
    align-self: end;
    padding-bottom: var(--sp-2);
  }
}
@media (min-width: 1100px) {
  .us-vitrin {
    column-gap: var(--sp-7);
  }
}

/* 8. Su arıtma: ihtiyaçlar (6) — kutusuz çizgili ızgara ---------------------
   Servisly özellik ızgarasıyla aynı dil: üst çizgi + ikon başlık + metin.
   <600 tek kolon · 600–1099 2×3 · ≥1100 3×2 (her düzende tam satırlar). */

.us-ihtiyac-izgara {
  display: grid;
  border-top: 1px solid var(--fg);
  border-bottom: 1px solid var(--fg);
}
.us-ihtiyac-oge {
  position: relative;
  padding-block: var(--sp-3) var(--sp-4);
}
.us-ihtiyac-oge + .us-ihtiyac-oge {
  border-top: 1px solid var(--line-strong);
}
.us-ihtiyac-ad {
  padding-right: 2.5rem;
  text-wrap: balance;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.us-ihtiyac-oge p {
  margin-top: 8px;
  padding-left: calc(22px + 0.6 * var(--fs-h4));
  font-size: 1rem;
  color: var(--muted);
}
@media (min-width: 600px) {
  .us-ihtiyac-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .us-ihtiyac-oge {
    padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
  }
  .us-ihtiyac-oge + .us-ihtiyac-oge {
    border-top: 0;
  }
  .us-ihtiyac-oge p {
    margin-top: 10px;
    padding-left: 0;
    max-width: 36ch;
  }
  .us-ihtiyac-oge .us-no {
    top: calc(var(--sp-5) + 4px);
    right: var(--sp-4);
  }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
  .us-ihtiyac-oge:nth-child(2n) {
    padding-left: var(--sp-4);
    padding-right: 0;
    border-left: 1px solid var(--line-strong);
  }
  .us-ihtiyac-oge:nth-child(2n) .us-no {
    right: 0;
  }
  .us-ihtiyac-oge:nth-child(n + 3) {
    border-top: 1px solid var(--line-strong);
  }
}
@media (min-width: 1100px) {
  .us-ihtiyac-izgara {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .us-ihtiyac-oge:not(:nth-child(3n + 1)) {
    padding-left: var(--sp-4);
    border-left: 1px solid var(--line-strong);
  }
  .us-ihtiyac-oge:nth-child(3n) {
    padding-right: 0;
  }
  .us-ihtiyac-oge:nth-child(3n) .us-no {
    right: 0;
  }
  .us-ihtiyac-oge:nth-child(n + 4) {
    border-top: 1px solid var(--line-strong);
  }
}

/* 9. Su arıtma: satıştan bakıma (asistan + Servisly) ----------------------- */

.us-cozum-panel .panel-title {
  margin-top: 0;
}
.us-panel-ikon {
  display: inline-flex;
  color: var(--blue-text);
}
.us-cozum-panel .panel-text {
  max-width: 50ch;
}
/* Servisly paneli: başlık yanında gerçek uygulama ikonu (köşedeki kesik şekil kaldırıldı) */
.us-panel-urun {
  display: flex;
  align-items: center;
  gap: 14px;
}
.us-panel-urun .labs-ikon {
  width: 48px;
  height: 48px;
  box-shadow: 0 0 0 1px var(--ink-700);
}
/* Özellik şeridi: kolonlar eşit dağılır ama hiçbiri içeriğinden dar olamaz;
   dar panelde ilk kolon ("Windows masaüstü") genişler, satır kırılmaz. */
@media (min-width: 480px) {
  .us-cozum-panel .spec {
    grid-template-columns: repeat(3, minmax(max-content, 1fr));
  }
  .us-cozum-panel .spec div + div {
    padding-left: 12px;
  }
}
.us-canli {
  display: grid;
  justify-items: start;
  gap: 2px;
  margin-top: var(--sp-4);
  padding: 16px 20px;
  border-radius: var(--r-3);
  background: var(--paper-2);
}
.us-canli-etiket {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.us-canli-alan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.us-canli-alan:hover {
  color: var(--blue-text);
}
.us-canli-alan .ikon {
  color: var(--blue-text);
}

/* 10. SSS yan başlığı ------------------------------------------------------ */

.us-sss .split-head .us-eposta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Hareket (yalnızca transform/opacity; reduced-motion'da kapalı) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .us-canli-alan .ikon {
    transition: transform var(--dur-1) var(--ease);
  }
  .us-canli-alan:hover .ikon {
    transform: translate(2px, -2px);
  }
}

/* ==========================================================================
   11. Servisly sektörleri (2026-10): sektör sayfaları, Servisly sayfasındaki
   sektör kartları + paket karşılaştırması, menü bağlantıları.
   ========================================================================== */

/* 11.1 Sektör sayfası: "{Sektör} için hazır gelir" --------------------------
   <820 alt alta · 820–1099 ayarlar 3 kolon, iş şablonları altta · ≥1100 solda
   ayarlar (5/12), sağda iş şablonları paneli (6/12). */

.us-hazir-grid {
  display: grid;
  gap: var(--sp-6) var(--gap);
}
.us-ayar-liste {
  display: grid;
  gap: var(--sp-4);
}
.us-ayar {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-strong);
}
.us-ayar:first-child {
  border-top: 2px solid var(--blue-btn);
}
.us-ayar dt {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.us-ayar dd {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.us-ayar-deger {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.us-ayar-metin {
  max-width: 40ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
}
.us-ayar--ozel .us-ayar-deger {
  color: var(--blue-text);
}

.us-isler {
  padding: var(--sp-4) 20px;
  border-radius: var(--r-4);
  background: var(--paper-2);
}
.us-isler-baslik {
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.us-isler-not {
  margin-top: 6px;
  max-width: 52ch;
  font-size: var(--fs-sm);
  color: var(--muted);
}
/* İş şablonları: işaretli onay kutuları; sütunlara akar (tek sayıda öğede son satır
   yalnız kalmaz — sütun akışı dengeli bölünür) */
.us-kutu-liste {
  margin-top: var(--sp-3);
  column-gap: var(--sp-4);
}
.us-kutu-liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 9px;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg);
}
.us-kutu {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 5px;
  background: var(--blue-btn);
  color: #fff;
}
.us-kutu .ikon {
  stroke-width: 2.4;
}
.us-cihazlar {
  margin-top: var(--sp-4);
}
.us-cihazlar-baslik {
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.us-cihaz-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
/* Çipler satırı doldurur (flex-grow): son satırda kalan çip(ler) satır boyunca yayılır,
   kısa son satır ya da tek başına küçük çip oluşmaz. */
.us-cihaz-liste .tag {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 32px;
  padding-inline: 12px;
  background: var(--paper);
  font-size: var(--fs-xs);
  white-space: normal;
}
.us-sektor-not {
  margin-top: var(--sp-5);
  max-width: 48rem;
  padding: 16px 20px;
  border-left: 3px solid var(--blue-btn);
  border-radius: 0 var(--r-3) var(--r-3) 0;
  background: var(--paper-2);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.us-sektor-not strong {
  color: var(--fg);
}
@media (min-width: 480px) {
  .us-isler {
    padding: var(--sp-5) var(--sp-4);
  }
  .us-kutu-liste {
    columns: 2;
  }
}
@media (min-width: 820px) and (max-width: 1099.98px) {
  .us-ayar-liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}
@media (min-width: 1100px) {
  .us-hazir-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .us-ayar-liste {
    grid-column: 1 / span 5;
    gap: var(--sp-5);
  }
  .us-isler {
    grid-column: 7 / -1;
    padding: var(--sp-6) var(--sp-5);
  }
}

/* 11.2 Sektör sayfası: hatırlatma mesajı (gri zemin) ------------------------
   Sade mesaj kutusu: şablonun kendisi (sahte WhatsApp arayüzü değil). */

.us-hatirlatma-grid {
  display: grid;
  gap: var(--sp-6) var(--gap);
}
.us-hatirlatma-bas .h2 {
  max-width: 18em;
}
.us-adimlar {
  counter-reset: us-adim;
  margin-top: var(--sp-4);
  border-top: 1px solid var(--line-strong);
}
.us-adimlar li {
  counter-increment: us-adim;
  position: relative;
  max-width: 34rem;
  padding: 16px 0 16px 44px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--fg-2);
}
.us-adimlar li::before {
  content: counter(us-adim);
  position: absolute;
  left: 0;
  top: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--blue-text);
  font-variant-numeric: tabular-nums;
}

.us-mesaj {
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  background: var(--paper);
  box-shadow: var(--sh-2);
}
.us-mesaj-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.us-mesaj-kanal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
}
.us-mesaj-kanal .ikon {
  color: var(--ok);
}
.us-mesaj-etiket {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--fg-2);
}
.us-mesaj-govde {
  margin: 20px;
  padding: 18px 20px;
  border-radius: 4px var(--r-3) var(--r-3) var(--r-3);
  background: var(--paper-2);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg);
}
.us-mesaj-govde p + p {
  margin-top: 12px;
}
.us-yer {
  display: inline-block;
  padding: 0 4px;
  border-radius: var(--r-1);
  background: var(--blue-tint);
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.6;
  color: var(--blue-text);
  white-space: nowrap;
}
.us-islem {
  font-weight: 700;
  color: var(--blue-text);
}
.us-mesaj-alt {
  padding: 0 20px 20px;
}
.us-yer-liste {
  display: grid;
  gap: 8px 16px;
}
.us-yer-liste div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
@media (min-width: 480px) {
  .us-yer-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .us-mesaj-govde {
    margin: 24px;
    padding: 20px 24px;
  }
  .us-mesaj-ust,
  .us-mesaj-alt {
    padding-inline: 24px;
  }
}
@media (min-width: 1100px) {
  .us-hatirlatma-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
  }
  .us-hatirlatma-bas {
    grid-column: 1 / span 5;
  }
  .us-mesaj {
    grid-column: 7 / -1;
  }
}

/* 11.3 Servisly Plus / E-Servis Formu (koyu) -------------------------------
   Telefonlar her genişlikte yan yana iki tane; ikincisi aşağıdan başlar (dolgu ile —
   reveal'ın transform'u ile çakışmasın diye kaydırma yok). */

.us-eservis-grid {
  position: relative;
  z-index: 1; /* dokunun (::before) önünde: ızgara çizgileri ekran görüntülerinin üstünden geçmez */
  display: grid;
  gap: var(--sp-7) var(--gap);
}
.us-eservis .kicker {
  margin-bottom: var(--sp-2);
}
.us-eservis .lead {
  margin-top: var(--sp-3);
  max-width: 36rem;
}
.us-eservis-liste {
  margin-top: var(--sp-4);
  max-width: 38rem;
}
.us-eservis-liste li {
  color: var(--on-dark-2);
}
.us-eservis-liste li + li {
  margin-top: 12px;
}
.us-eservis-not {
  margin-top: var(--sp-4);
  max-width: 38rem;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ink-700);
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
}
.us-eservis .btn {
  margin-top: var(--sp-4);
}
.us-eservis-telefonlar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.us-eservis-tel:nth-child(2) {
  padding-top: 48px;
}
.us-eservis-tel .telefon {
  box-shadow: 0 0 0 1px var(--ink-600), var(--sh-frame);
}
.us-eservis-etiket {
  display: block;
  margin-top: 12px;
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--on-dark-muted);
}
.us-eservis-alt {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--on-dark-faint);
}
@media (min-width: 600px) {
  .us-eservis-gorseller {
    width: min(100%, 32rem);
    justify-self: center;
  }
  .us-eservis-telefonlar {
    gap: 28px;
  }
}
@media (min-width: 1100px) {
  .us-eservis-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
  }
  .us-eservis-metin {
    grid-column: 1 / span 6;
  }
  .us-eservis-gorseller {
    grid-column: 8 / -1;
    width: 100%;
  }
  .us-eservis-tel:nth-child(2) {
    padding-top: 72px;
  }
}

/* 11.4 Sektör sayfası: diğer sektörler (gri, kısa bölüm) ---------------------
   <600 tek kolon · 600–1099 2×2 · ≥1100 4 kolon (4 bağlantı; öksüz yok). */

.us-diger-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px var(--sp-4);
  margin-bottom: var(--sp-4);
}
.us-diger-bas .link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.us-diger-liste {
  display: grid;
  border-top: 1px solid var(--fg);
}
.us-diger-liste li {
  border-bottom: 1px solid var(--line-strong);
}
.us-diger-link {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 16px 4px;
  color: var(--fg);
}
.us-diger-ikon {
  color: var(--blue-text);
}
.us-diger-ad {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.us-diger-meta {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.us-diger-ok {
  color: var(--blue-text);
}
@media (min-width: 600px) {
  .us-diger-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
  /* Tek sayıda bağlantıda son satır tam genişlik (öksüz kalmaz) */
  .us-diger-liste li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1100px) {
  .us-diger-liste--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .us-diger-liste--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 11.5 Servisly sayfası: sektör kartları (gri zemin, beyaz kart) -----------
   <600 tek kolon · 600–1099 ilk kart tam satır + 2×2 · ≥1100 6 kolon: üstte 2 geniş,
   altta 3 kart. Kartın tamamı tek bağlantı (.kaldir > a.kaldir-golge). */

.us-sektor-izgara {
  display: grid;
  gap: var(--gap);
}
.us-sektor-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-4) 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--paper);
  color: var(--fg);
}
.us-sektor-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.us-sektor-ikon {
  color: var(--blue-text);
}
.us-sektor-periyot {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--blue-tint);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--blue-text);
  white-space: nowrap;
}
.us-sektor-ad {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.us-sektor-islem {
  margin-top: 4px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-2);
}
.us-sektor-isler {
  display: grid;
  gap: 8px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.us-sektor-is {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg-2);
}
.us-sektor-is .ikon {
  flex: none;
  margin-top: 0.2em;
  color: var(--blue-text);
}
.us-sektor-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-wrap: balance;
  margin-top: auto;
  padding-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue-text);
}
.us-sektor-alt .ikon {
  flex: none;
}
@media (min-width: 600px) {
  .us-sektor-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .us-sektor-izgara--5 .us-sektor-kart:first-child,
  .us-sektor-izgara--3 .us-sektor-kart:first-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
  .us-sektor-izgara--5 .us-sektor-kart:first-child .us-sektor-isler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}
@media (min-width: 820px) {
  .us-sektor-izgara--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .us-sektor-izgara--3 .us-sektor-kart:first-child {
    grid-column: auto;
  }
}
@media (min-width: 1100px) {
  .us-sektor-izgara--5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .us-sektor-izgara--5 .us-sektor-kart,
  .us-sektor-izgara--5 .us-sektor-kart:first-child {
    grid-column: span 2;
  }
  .us-sektor-izgara--5 .us-sektor-kart:nth-child(-n + 2) {
    grid-column: span 3;
  }
}
@media (min-width: 1100px) {
  .us-sektor-link {
    padding: var(--sp-5) var(--sp-4);
  }
  /* Geniş iki kartta iş şablonları 2 kolon */
  .us-sektor-izgara--5 .us-sektor-kart:nth-child(-n + 2) .us-sektor-isler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .us-sektor-izgara--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 11.6 Servisly sayfası: paket karşılaştırması ------------------------------
   <1100 alt alta · ≥1100 yan yana (5/12 + 7/12), eşit yükseklik. Plus kartında telefon
   <600 metnin altında ortalı, ≥600 metnin sağında. */

.us-paket-izgara {
  display: grid;
  gap: var(--gap);
}
.us-paket {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-4);
  background: var(--paper);
}
.us-paket--plus {
  border-color: var(--ink-950);
  background: var(--ink-950);
}
.us-paket-metin {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.us-paket-ust {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.us-paket--plus .us-paket-ust {
  color: var(--blue-text-dark);
}
.us-paket-ad {
  margin-top: var(--sp-2);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.us-paket--plus .us-paket-ad {
  color: #fff;
}
.us-paket-ozet {
  margin-top: 10px;
  font-size: var(--fs-body);
  color: var(--fg-2);
}
.us-paket--plus .us-paket-ozet {
  color: var(--on-dark-2);
}
.us-paket-liste {
  margin-top: var(--sp-4);
}
.us-paket-liste li {
  font-size: 1rem;
  color: var(--fg-2);
}
.us-paket-liste li + li {
  margin-top: 10px;
}
.us-paket--plus .us-paket-liste li {
  color: var(--on-dark-2);
}
.panel-dark ul.liste-onay > li::before {
  background: var(--blue);
}
.us-paket-lisans {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.us-paket--plus .us-paket-lisans {
  border-top-color: var(--ink-700);
}
.us-paket-lisans dt {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.us-paket--plus .us-paket-lisans dt {
  color: var(--on-dark-muted);
}
.us-paket-lisans dd {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.us-paket-gorsel {
  align-self: center;
  width: 180px;
}
.us-paket-gorsel .telefon {
  box-shadow: 0 0 0 1px var(--ink-600), var(--sh-frame);
}
.us-paket-gorsel figcaption {
  margin-top: 10px;
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--on-dark-muted);
}
.us-paket-not {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px var(--sp-4);
  margin-top: var(--gap);
  padding: 20px;
  border-radius: var(--r-3);
  background: var(--paper-2);
}
.us-paket-not p {
  max-width: 60ch;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
@media (min-width: 480px) {
  .us-paket {
    padding: var(--sp-5) var(--sp-4);
  }
  .us-paket-not {
    padding: 20px var(--sp-4);
  }
}
/* Telefon metnin sağında: iki kolon, lisans satırı altta tam genişlik.
   600–1099 kartlar alt alta (tam genişlik); ≥1100 yan yana 5/12 + 7/12 (Plus geniş:
   telefon ve metin rahat sığar). */
@media (min-width: 600px) {
  .us-paket--plus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    grid-template-rows: 1fr auto;
    column-gap: var(--sp-4);
  }
  .us-paket--plus .us-paket-lisans {
    grid-column: 1 / -1;
  }
  .us-paket-gorsel {
    width: 160px;
  }
}
@media (min-width: 1100px) {
  .us-paket-izgara {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .us-paket {
    padding: var(--sp-6) var(--sp-5);
  }
  .us-paket--plus {
    grid-template-columns: minmax(0, 1fr) 180px;
    column-gap: var(--sp-5);
  }
  .us-paket-gorsel {
    width: 180px;
  }
}

/* 11.7 Servisly sayfası: "Kimler için" satırları sektör sayfalarına bağlı ---- */

.us-kimler-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--fg);
}
.us-kimler-link:hover {
  color: var(--blue-text);
}
.us-kimler-link .ikon {
  flex: none;
  color: var(--blue-text);
}
.us-kimler-liste li:has(.us-kimler-link) {
  align-items: center;
  padding-block: 12px;
}
.us-kimler-liste li:has(.us-kimler-link)::before {
  transform: none;
}

/* 11.8 Menü: Servisly kartındaki sektör bağlantıları ----------------------- */

/* Mega panel (≥1100): kart iki bağlantı taşır; arka plan yalnız ürün bağlantısının
   hover'ında koyulaşır, sektör çipleri kendi hover'ını taşır. */
.mega-product--sektorlu {
  gap: 20px;
}
.mega-product--sektorlu:hover {
  background: var(--ink-950);
}
.mega-product--sektorlu:has(> .mega-product-ana:hover) {
  background: var(--ink-900);
}
.mega-product-ana {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: inherit;
}
.mega-sektorler {
  padding-top: 16px;
  border-top: 1px solid var(--ink-700);
}
.mega-sektor-baslik {
  margin-bottom: 10px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
/* 6 kolonluk ızgara: üst satırda üç çip (2'şer kolon), beş sektörde alt satırdaki iki çip
   3'er kolon — iki satır da boydan boya dolu, boş hücre ya da öksüz çip yok. */
.mega-sektor-liste {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.mega-sektor-liste > li {
  grid-column: span 2;
}
.mega-sektor-liste > li:nth-child(3n + 1):nth-last-child(2),
.mega-sektor-liste > li:nth-child(3n + 2):last-child {
  grid-column: span 3;
}
.mega-sektor-liste > li:nth-child(3n + 1):last-child {
  grid-column: 1 / -1;
}
.mega-sektor-liste a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--ink-700);
  border-radius: var(--r-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--on-dark-2);
}
.mega-sektor-liste .ikon {
  flex: none;
  color: var(--blue-text-dark);
}
.mega-sektor-liste a:hover,
.mega-sektor-liste a[aria-current] {
  border-color: var(--blue);
  background: var(--ink-850);
  color: #fff;
}

/* Mobil menü: Servisly satırının altında sektör çipleri (yatay kaydırma yok, öksüz satır
   yok). <820: iki sütun, tek sayıda öğede son çip satırı boydan boya (2 + 2 + 1 tam);
   ≥480 ürün adının hizasından başlar. ≥820 (grup yarım genişlikte): beşi tek satırda,
   satır genişliğine yayılır. */
.m-sub-sektorler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 0 8px;
}
.m-sub-sektorler > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (min-width: 480px) {
  .m-sub-sektorler {
    padding-left: 40px;
  }
}
@media (min-width: 820px) {
  .m-sub-sektorler {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
  .m-sub-sektorler > :last-child:nth-child(odd) {
    grid-column: auto;
  }
  .m-sub-sektorler {
    padding-left: 0;
  }
  .m-sub .m-sub-sektorler li a {
    padding: 0 4px;
    font-size: var(--fs-xs);
    white-space: nowrap;
  }
}
.m-sub .m-sub-sektorler a {
  justify-content: center;
  min-width: 44px;
  padding: 0 8px;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  font-size: var(--fs-sm);
}
.m-sub .m-sub-sektorler a[aria-current] {
  border-color: var(--blue-text);
  background: var(--blue-tint);
}

/* Hareket (yalnız transform/opacity) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .us-sektor-alt .ikon,
  .us-kimler-link .ikon,
  .us-diger-ok {
    transition: transform var(--dur-2) var(--ease);
  }
  .us-sektor-kart:hover .us-sektor-alt .ikon,
  .us-kimler-link:hover .ikon,
  .us-diger-link:hover .us-diger-ok {
    transform: translateX(4px);
  }
}

/* Ana sayfa yapay zekâ bölümü — gerçek WaterAI ekranı (telefon çerçevesi) ----------- */
.ana-ai .ai-telefon {
  margin: 0;
  justify-self: center;
  width: min(240px, 72vw);
}
.ana-ai .ai-telefon-not {
  margin-top: 14px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-align: center;
  color: var(--on-blue-2);
}
@media (max-width: 1099.98px) {
  .ana-ai .ai-text {
    order: 1;
  }
  .ana-ai .ai-telefon {
    order: 2;
  }
  .ana-ai .ai-yan {
    order: 3;
  }
}
@media (min-width: 1100px) {
  .ana-ai .ai {
    align-items: start;
  }
  .ana-ai .ai-text {
    grid-column: 1 / span 6;
    grid-row: 1;
  }
  .ana-ai .ai-yan {
    grid-column: 1 / span 6;
    grid-row: 2;
  }
  .ana-ai .ai-telefon {
    grid-column: 8 / -1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 300px;
  }
}

/* ==========================================================================
   31. Sayfa: KVKK Aydınlatma Metni
   ========================================================================== */

/* ==========================================================================
   page-kvkk-aydinlatma-metni.php (metin: inc/sayfa-kvkk.php). Yalnızca .kvkk- önekli sınıflar.
   Metin sütunu editör tipografisini (.entry-content, 23. bölüm) kullanır; burada bölüm ritmi,
   içindekiler ve dar ekran tablo kartları var. Hukuki metinde reveal yok: içerik her koşulda görünür.
   ========================================================================== */

/* 1. Izgara: tek kolon; ≥1100'de solda yapışkan içindekiler (3/12), metin 5–12 ------------- */
.kvkk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}
.kvkk-yan {
  display: none;
}
.kvkk-metin {
  min-width: 0;
}
@media (min-width: 1100px) {
  .kvkk-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .kvkk-yan {
    display: block;
    grid-column: 1 / span 3;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + var(--admin-bar) + var(--sp-4));
  }
  .kvkk-metin {
    grid-column: 5 / -1;
    grid-row: 1;
  }
  .kvkk-icindekiler {
    display: none;
  }
}

/* 2. İçindekiler. Masaüstü: ortak .toc (22. bölüm), 12 bölüme sığsın diye sık satır; alçak
   ekranda liste kendi içinde dikey kayar (yatay kaydırma yok). Dar ekran: katlanır liste. */
.kvkk-toc {
  max-height: calc(100vh - var(--header-h) - var(--admin-bar) - var(--sp-4) * 2);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Çerez çubuğu açıkken ("Daha fazla bilgi" ile gelinen sayfa) liste çubuğun üstünde biter:
   alttaki şerit son maddeleri örtmez, kalanlar listenin içinde kaydırılır (32. bölüm). */
html.cerez-acik .kvkk-toc {
  max-height: calc(100vh - var(--header-h) - var(--admin-bar) - var(--sp-4) * 2 - var(--cerez-h, 0px));
}
.kvkk-toc a {
  min-height: 36px;
  padding-block: 6px;
  line-height: 1.35;
}
.kvkk-toc a::before {
  top: calc(6px + 0.675em);
}

.kvkk-icindekiler {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  background: var(--paper);
}
.kvkk-icindekiler summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 12px var(--sp-3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.kvkk-icindekiler summary::-webkit-details-marker {
  display: none;
}
.kvkk-icindekiler-ok {
  color: var(--muted);
}
.kvkk-icindekiler[open] .kvkk-icindekiler-ok {
  transform: rotate(180deg);
}
.kvkk-icindekiler ol {
  margin: 0 var(--sp-3);
  padding: 0 0 8px;
  border-top: 1px solid var(--line);
}
.kvkk-icindekiler li + li {
  border-top: 1px solid var(--line);
}
.kvkk-icindekiler a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 8px;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--fg-2);
}
.kvkk-icindekiler a:hover {
  color: var(--blue-text);
}
@media (prefers-reduced-motion: no-preference) {
  .kvkk-icindekiler-ok {
    transition: transform var(--dur-2) var(--ease);
  }
}

/* 3. Bölümler: ince çizgiyle ayrılır; "Kısaca" gri özet kutusu ------------------------------ */
.kvkk-metin > .kvkk-bolum {
  max-width: var(--prose);
}
.kvkk-metin > .kvkk-bolum + .kvkk-bolum {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.kvkk-metin > .kvkk-bolum--kisaca {
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-3);
  background: var(--paper-2);
}
.kvkk-metin > .kvkk-bolum--kisaca + .kvkk-bolum {
  padding-top: 0;
  border-top: 0;
}
@media (min-width: 820px) {
  .kvkk-metin > .kvkk-bolum--kisaca {
    padding: var(--sp-5);
  }
}
.kvkk-bolum > * + * {
  margin-top: 1.1em;
}
.kvkk-bolum > h2 {
  margin-top: 0;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.kvkk-bolum > h2 + * {
  margin-top: var(--sp-2);
}
/* İç içe liste ("Hukuki sebep" altındaki maddeler): içi boş madde işareti */
.kvkk-bolum li > ul {
  list-style: circle;
}
/* Haklar listesi Kanun'daki bent harfleriyle (a, b, c…) başlar: ayrıca madde işareti yok */
.kvkk-bolum--haklariniz ul {
  padding-left: 0;
  list-style: none;
}
.kvkk-metin a {
  overflow-wrap: anywhere;
}

/* Çerez tercihleri düğmesi: metin içinde bağlantı görünümünde (JS gösterir; yoksa düz metin) */
.kvkk-cerez-dugme {
  font-weight: 600;
  color: var(--blue-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.kvkk-cerez-dugme:hover {
  text-decoration-thickness: 2px;
}

/* 4. Tablolar. ≥820: klasik tablo (sabit sütun oranları). Altında her satır bir kart:
   ilk hücre kartın başlığı, diğerleri sunucuda yazılan sütun adıyla (data-etiket) alt alta.
   Seçiciler .kvkk-metin.entry-content ile başlar: 23. bölümdeki genel 5+ sütun kurallarını ezer. */
.kvkk-tablo td:first-child {
  font-weight: 600;
  color: var(--fg);
}
.kvkk-tablo--2 th:first-child {
  width: 42%;
}
/* Oranlar en dar tablo genişliğine göre (≈ 667 px, 1100'de içindekiler açılınca): her sütunun
   en uzun kelimesi ("ziyaretinizden", "WordPress'in", "yöneticiler)") hücreye sığar, sabit
   düzendeki overflow-wrap:anywhere kelimeyi ortasından bölmez. Tür sütunu kalan %16. */
.kvkk-tablo--5 th:nth-child(1) {
  width: 19%;
}
.kvkk-tablo--5 th:nth-child(2) {
  width: 22%;
}
.kvkk-tablo--5 th:nth-child(3) {
  width: 25%;
}
.kvkk-tablo--5 th:nth-child(4) {
  width: 18%;
}
@media (max-width: 819.98px) {
  .kvkk-metin.entry-content .kvkk-tablo,
  .kvkk-metin.entry-content .kvkk-tablo :is(thead, tbody, tr, th, td) {
    display: block;
    width: auto;
  }
  .kvkk-metin.entry-content .kvkk-tablo thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .kvkk-metin.entry-content .kvkk-tablo tbody {
    border-top: 1px solid var(--fg);
  }
  .kvkk-metin.entry-content .kvkk-tablo tr {
    padding-block: 16px;
    border-bottom: 1px solid var(--line);
  }
  .kvkk-metin.entry-content .kvkk-tablo :is(th, td) {
    padding: 0;
    border-bottom: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
  }
  .kvkk-metin.entry-content .kvkk-tablo td + td {
    margin-top: 10px;
  }
  .kvkk-metin.entry-content .kvkk-tablo td[data-etiket]::before {
    content: none;
  }
  .kvkk-metin.entry-content .kvkk-tablo td + td[data-etiket]::before {
    content: attr(data-etiket);
    display: block;
    margin-bottom: 2px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ==========================================================================
   32. Çerez onay çubuğu
   ========================================================================== */

/* ==========================================================================
   template-parts/cerez-onay.php + main.js 11. bölüm. Çubuk hidden gelir, JS gösterir.
   Altta tam genişlikte koyu mürekkep şerit (ink-900, üst kenar çizgisi): içeriği bir kart gibi
   örtmez; açıkken kapladığı yükseklik (--cerez-h) kaydırma payı ve footer boşluğu olur.
   Öğeler tek ızgaranın doğrudan çocukları; DOM sırası her kırılımda okuma sırasıyla aynı:
   - dar: "başlık | bilgi" / metin / "kabul | zorunlu" (iki eşit sütun; uzun etiket kırılır).
   - orta: aynı akış, karar düğmeleri eşit genişlikte (15.5em) solda.
   - geniş: tek satır — metin solda; bilgi, kabul, zorunlu sağda dikey ortalı.
   Izgara kırılımları container query'dir ve rem cinsindendir (51.25rem / 68.75rem = varsayılan
   16 px yazıda tam 820 / 1100 px): tarayıcıda yazı büyütülünce düğme sütunları metni ezmez,
   düzen bir alt kademeye iner. Container query desteklemeyen tarayıcı dar düzeni kullanır.
   İki karar düğmesi aynı boyutta ve ikisi de dolgulu (mavi / beyaz): eşit ağırlık.
   z-index 40: mega menü perdesinin (50) ve mobil menünün (header 60 / panel 55) altında.
   ========================================================================== */

.cerez-onay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  /* Alçak yatay ekranda header'ın altına girmesin; sığmazsa kendi içinde dikey kayar */
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  container: cerez / inline-size;
  padding: 14px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ink-700);
  background: var(--ink-900);
  box-shadow: 0 -16px 40px -24px rgba(8, 11, 17, 0.45);
  color: var(--on-dark-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.cerez-onay[hidden] {
  display: none;
}
.cerez-onay-ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "ust ust"
    "metin metin"
    "tumu zorunlu";
  align-items: center;
  gap: 6px 8px;
}
/* Başlık solda, "Daha fazla bilgi" sağda; dar ekranda bilgi tek satırda kalır, başlık daralır */
.cerez-onay-ust {
  grid-area: ust;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cerez-onay-baslik {
  grid-area: baslik;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--on-dark);
}
.cerez-onay-bilgi {
  grid-area: bilgi;
  flex: none;
  justify-self: end;
  min-height: 36px;
  padding-inline: 12px;
  gap: 6px;
}
.cerez-onay .cerez-onay-bilgi {
  white-space: nowrap;
}
.cerez-onay-metin {
  grid-area: metin;
}
.cerez-onay-tumu {
  grid-area: tumu;
}
.cerez-onay-zorunlu {
  grid-area: zorunlu;
}
.cerez-onay-tumu,
.cerez-onay-zorunlu {
  align-self: stretch;
  margin-top: 6px;
}
/* Düğme etiketi sığmazsa kırılır (genel .btn nowrap'ı burada geçersiz): taşma ve kesilme yok */
.cerez-onay .btn {
  white-space: normal;
  padding-block: 8px;
}
@media (min-width: 820px) {
  .cerez-onay {
    padding-block: 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 1100px) {
  .cerez-onay {
    padding-block: 18px calc(18px + env(safe-area-inset-bottom, 0px));
  }
}
@container cerez (min-width: 51.25rem) {
  .cerez-onay-ic {
    grid-template-columns: 15.5em 15.5em minmax(0, 1fr);
    grid-template-areas:
      "ust ust ust"
      "metin metin metin"
      "tumu zorunlu .";
  }
  .cerez-onay-metin {
    max-width: 72ch;
  }
}
@container cerez (min-width: 68.75rem) {
  .cerez-onay-ic {
    grid-template-columns: minmax(0, 1fr) auto 15.5em 15.5em;
    grid-template-areas:
      "baslik bilgi tumu zorunlu"
      "metin bilgi tumu zorunlu";
    gap: 2px 12px;
  }
  .cerez-onay-ust {
    display: contents;
  }
  .cerez-onay-bilgi {
    min-height: 44px;
    margin-left: 20px;
    padding-inline: 16px;
  }
  .cerez-onay-tumu,
  .cerez-onay-zorunlu {
    align-self: center;
    margin-top: 0;
  }
}

/* Çubuk açıkken kapladığı alan (--cerez-h, main.js yazar) ayrılır: klavye odağı çubuğun altında
   kalmaz, sayfanın sonu (footer alt satırı) çubuğun üstüne kadar kaydırılabilir. */
html.cerez-acik {
  scroll-padding-bottom: calc(var(--cerez-h, 0px) + 16px);
}
html.cerez-acik .site-footer {
  padding-bottom: var(--cerez-h, 0px);
}

@media (prefers-reduced-motion: no-preference) {
  .cerez-onay:not([hidden]) {
    animation: cerez-gir 360ms var(--ease) both;
  }
}
@keyframes cerez-gir {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* Footer alt satırı: "Çerez tercihleri" (yalnızca GA varken, JS gösterir) + "Başa dön" */
.footer-bottom-eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
}
.footer-cerez {
  min-height: 44px;
  color: var(--on-dark-muted);
}
.footer-cerez:hover {
  color: #fff;
}

@media print {
  .cerez-onay {
    display: none;
  }
}