/* ==========================================================================
   ServistServis.tr — stil dosyası (TASARIM-SISTEMI.md, "Nane ve yuvarlak", v3, 21 Eki 2026)

   Kimlik: BEYAZ zeminli teknik plaka. Sayfa ve plaka yüzü beyaz; ikincil yüzey
   "çelik" (#f1f8f4, soğuk açık gri). Grafit (#0f2e23) başlık, ölçü çubuğu ve
   son plaka; yakut (#136f3c) birincil düğme (BEYAZ yazı, 8,50:1), odak ve
   logodaki nokta. Outfit (başlık, kod, sayı) + Lexend (gövde).
   Köşe dili YUVARLAK: kart ve plaka 20 px, düğme, girdi, etiket ve kod karosu
   tam hap (999 px). Kesik köşe YOK (servisk imzası bu sitede yok).
   Gölge yok, degrade dolgu yok.
   Sınıf öneki: stt-   Belirteç öneki: --stt-
   Türkçe: text-transform: uppercase hiçbir yerde yok (İ/I).

   Bölümler (TASARIM-SISTEMI §06 adları; bölüm sırası servisfer, §08):
     §00 yazı dosyaları   §01 belirteçler   §02 taban, yazı tabanı
     plaka boyama kalıbı (::before zemin + kenar + yuvarlak köşe çizgisi, ::after yakut nokta)
     §03 kap, iki yan, kesit       §12 soru plakası, katlanan plaka
     §04 rubrik, manşet, bölüm başı §13 form
     §05 üst plaka, menü, çekmece  §14 plaka notu, uyarı
     §06 yuvarlak düğme, ok bağlantı  §15 açılış, izometrik çizim, parça tablosu
     §07 plaka, cihaz, yan plaka   §16 mobil alt plaka
     §08 iş plakası                §17 çelik altbilgi, tip etiketi, son plaka
     §09 sayfa yolu                §18 ölçü satırı, hat plakası, logo, konum
     §10 yuvarlak etiket, çip         §19 satır dökümü, harf bölmeleri, sekme
     §11 kod plakası, tip tablosu  §20 sayfa aileleri · §40–§41 il haritası
   ========================================================================== */

/* --- 00 Yazı dosyaları (Google Fonts'tan öz barındırılan, OFL; latin + latin-ext
       alt kümesi: İ Ş Ğ ı ç ö ü dahil). Outfit ve Lexend değişken yazı: 100–900 ve 100–700 eksenleri tek dosyada. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit-latin-ext.e2b64ddcb351.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit-latin.98ccc2b7f189.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: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/lexend-latin-ext.a981ad4865c7.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/lexend-latin.7e692144d823.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; }

/* --- 01 Belirteçler ------------------------------------------------------ */
:root {
  color-scheme: light;

  /* renk: beyaz plaka, çelik, grafit, yakut (TASARIM-SISTEMI §02 — kontrastlar orada hesaplı) */
  --stt-beyaz: #ffffff;         /* sayfa zemini, plaka yüzü */
  --stt-celik: #f1f8f4;         /* çelik: ikincil bölüm, altbilgi, künye plakası */
  --stt-celik-2: #e2f1e9;       /* tablo başı, sekme rayı, pasif düğme */
  --stt-celik-3: #d0e7da;       /* üzerine gelme, basılı yüzey */
  --stt-grafit: #0f2e23;        /* başlık, plaka kenarı, logo (beyazda 18,15) */
  --stt-metin: #1d3a2f;         /* gövde metni (beyazda 14,27; çelikte 12,96) */
  --stt-gri: #4a6356;           /* ikincil metin (beyazda 6,99; çelik-2'de 5,85) */
  --stt-gri-2: #587061;         /* yer tutucu, dip satır (beyazda 5,41; çelik-2'de 4,53) */
  --stt-cizgi-ince: #dcebe3;    /* 1 px kıl çizgi (süs) */
  --stt-cizgi: #b7d4c3;         /* plaka kenarı, ayırıcı (süs) */
  --stt-cizgi-sert: #6b8a79;    /* girdi kenarı (beyazda 3,69; çelikte 3,35; ≥3:1) */
  --stt-yakut: #136f3c;         /* birincil düğme, yakut nokta, odak (beyaz ve celik-2 üzerinde 4,5 üstü) */
  --stt-yakut-bas: #0e6639;     /* düğme üzerine gelme (beyaz yazıyla 11,26) */
  --stt-yakut-ust: #ffffff;     /* yakut düğmedeki yazı: BEYAZ */
  --stt-yakut-acik: #e4f7ec;    /* uyarı notu, "Cihazı kapatın" etiketi (yakut yazı 7,18) */
  --stt-yakut-isik: #5fe39a;   /* koyu zeminde (son plaka) yakut nokta; grafitte 6,65 */
  --stt-hata: #b42318;          /* hata ve uyarı (beyazda 6,6) */
  --stt-hata-acik: #fdecea;     /* hatalı alan zemini */
  --stt-yesil: #1a6b44;         /* "Kendiniz bakın", başarı (beyazda 6,44) */

  /* forma: köşe dili YUVARLAK. Kart ve plaka 20 px; düğme, girdi, etiket ve kod karosu hap (999 px). */
  --stt-r-card: 20px;
  --stt-r-pill: 999px;

  /* yazı aileleri */
  --stt-f-baslik: "Outfit", "Lexend", ui-sans-serif, system-ui, sans-serif;
  --stt-f-govde: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --stt-f-sayi: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --stt-f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* yazı ölçeği (mobil → masaüstü akışkan). Outfit köşeli ve dar omuzlu. */
  --stt-y-dev: clamp(3rem, 2.1rem + 4.2vw, 5.5rem);
  --stt-y-manset: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --stt-y-1: clamp(1.875rem, 1.45rem + 1.8vw, 2.875rem);
  --stt-y-2: clamp(1.375rem, 1.2rem + 0.9vw, 2rem);
  --stt-y-3: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --stt-y-giris: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --stt-y-govde: 1.0625rem;     /* 17 px Lexend */
  --stt-y-kucuk: 0.9375rem;     /* 15 px */
  --stt-y-etiket: 0.8125rem;    /* 13 px: plaka etiketi (Outfit 600) */

  /* yerleşim */
  --stt-sutun: 12;
  --stt-oluk: 16px;
  --stt-kap: 1280px;
  --stt-okuma: 720px;
  --stt-yan: 340px;             /* yan plaka (≥1080 px), yapışkan değil */

  /* boşluk (8 tabanlı, 4 yarım adım) */
  --stt-a1: 4px;
  --stt-a2: 8px;
  --stt-a3: 12px;
  --stt-a4: 16px;
  --stt-a5: 24px;
  --stt-a6: 32px;
  --stt-a7: 48px;
  --stt-a8: 64px;
  --stt-a9: 96px;
  --stt-kenar: 16px;
  --stt-bolum: 56px;

  /* biçim: yuvarlak köşeler (kart 20 px, hap 999 px); plaka boyama kalıbı aşağıda */
  --stt-kil-kalinlik: 1px;
  --stt-vurgu-kalinlik: 2px;
  --stt-ust-boy: 64px;
  --stt-hat-boy: 64px;

  /* hareket: kısa, doğrusal (ölçü aleti) */
  --stt-sure: 120ms;
  --stt-egri: cubic-bezier(0.4, 0, 0.2, 1);

  /* ikon maskeleri (renk currentColor ile; ince kalem 1,6 px, KARE uç, sivri birleşim) */
  --stt-m-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E");
  --stt-m-sag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 12h16'/%3E%3Cpath d='M14 7l5 5-5 5'/%3E%3C/svg%3E");
  --stt-m-asagi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  --stt-m-onay: 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.1' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E");
  --stt-m-ara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M8 4h5l3 3v5l-3 3H8l-3-3V7z'/%3E%3Cpath d='M16.2 16.2 20 20'/%3E%3C/svg%3E");
  --stt-m-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 4h3.5l1.5 4-2 1.5 6.5 6.5 1.5-2 4 1.5V19l-1.5 1.5C10.5 20 4 13.5 3.5 5.5z'/%3E%3C/svg%3E");
  --stt-m-bilgi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M8.5 3h7L21 8.5v7L15.5 21h-7L3 15.5v-7z'/%3E%3Cpath d='M12 10.5v6'/%3E%3Cpath d='M12 7.5v.5'/%3E%3C/svg%3E");
  --stt-ok-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M14 7l5 5-5 5'/%3E%3C/svg%3E");
}

@media (min-width: 720px) {
  :root { --stt-kenar: 24px; --stt-oluk: 20px; --stt-bolum: 72px; }
}
@media (min-width: 1080px) {
  :root { --stt-kenar: 40px; --stt-oluk: 24px; --stt-ust-boy: 72px; --stt-bolum: 96px; }
}
/* Koyu tema YOK. Yazdırmada çelik tonları beyaza iner. */
@media print {
  :root {
    --stt-celik: #ffffff; --stt-celik-2: #ffffff; --stt-celik-3: #ffffff;
    --stt-grafit: #000000; --stt-metin: #111111; --stt-gri: #444444; --stt-gri-2: #555555;
    --stt-cizgi-ince: #cccccc; --stt-cizgi: #999999; --stt-cizgi-sert: #555555;
  }
}

/* --- 02 Taban, yazı tabanı ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--stt-ust-boy) + var(--stt-a4));
}
body {
  margin: 0;
  background: var(--stt-beyaz);
  color: var(--stt-metin);
  font-family: var(--stt-f-govde);
  font-size: var(--stt-y-govde);
  line-height: 1.6;
  font-weight: 400;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
/* Başlık: Outfit 600, grafit; köşeli harf, aralık nötr. */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--stt-grafit);
  font-family: var(--stt-f-baslik);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
  hyphens: manual;
}
h1 { font-size: var(--stt-y-1); line-height: 1.1; letter-spacing: -0.012em; }
h2 { font-size: var(--stt-y-2); line-height: 1.16; }
h3 { font-size: var(--stt-y-3); line-height: 1.3; font-weight: 600; }
h4 { font-size: 1rem; font-family: var(--stt-f-govde); font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 var(--stt-a4); max-width: 68ch; }
ul, ol { margin: 0; padding: 0; }
/* Bağlantı: yazı rengi + 1 px sert gri alt çizgi; üzerine gelince çizgi yakut ve 2 px. */
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--stt-cizgi-sert); text-decoration-thickness: 1px; text-underline-offset: 0.24em; }
a:hover { color: inherit; text-decoration-color: var(--stt-yakut); text-decoration-thickness: 2px; }
strong, b { font-weight: 600; color: var(--stt-grafit); }
code, kbd, samp { font-family: var(--stt-f-mono); font-size: 0.92em; font-weight: 500; }
/* hr: grafit kıl çizgi, sol ucunda yakut yakut nokta */
hr { border: 0; height: 8px; margin: var(--stt-a6) 0; background: linear-gradient(var(--stt-cizgi), var(--stt-cizgi)) 0 100% / 100% 1px no-repeat, linear-gradient(225deg, var(--stt-yakut) 50%, transparent 50%) 0 0 / 8px 8px no-repeat; }
table { font-variant-numeric: tabular-nums; }
::selection { background: var(--stt-yakut); color: var(--stt-yakut-ust); }
/* Odak: 2 px yakut çizgi, 2 px açıklık. Hale yok. */
:focus-visible { outline: 2px solid var(--stt-yakut); outline-offset: 2px; }
.stt-screen-beyond {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stt-straight-content {
  position: absolute; left: var(--stt-a4); top: -100px; z-index: 100;
  background: var(--stt-grafit); color: var(--stt-beyaz); padding: var(--stt-a2) var(--stt-a4);
  font-family: var(--stt-f-baslik); font-weight: 600; text-decoration: none;
}
.stt-straight-content:focus { top: var(--stt-a2); }

/* ==========================================================================
   BİLEŞENLER §03–§19 (TASARIM-SISTEMI §06) — stil rehberinde onaylanan biçim.
   PLAKA BOYAMA KALIBI: yüzey öğenin kendisine dokunmaz; zemin ve 1 px kenar
   ::before'da çizilir, köşeler --p-r ile yuvarlanır. Ayar: --p-zemin, --p-kenar,
   --p-r. Düğme ve girdi gibi küçük öğeler doğrudan border-radius'lu; odak
   halkaları bu yüzden İÇ gölgedir.
   ========================================================================== */
.stt-slab-tile, .stt-side-slab, .stt-first-slab, .stt-fill-slab, .stt-job-slab,
.stt-kind-tag, .stt-last-slab, .stt-seek-slab, .stt-slab-note, .stt-slab-dropdown-list,
.stt-sketch-frame, .stt-line-slab, .stt-mark-slab, .stt-place-slab,
.stt-gauge-row, .stt-suggest-list, .stt-cookie-slab, .stt-code-dropdown-detail[open], .stt-diff-rule {
  --p-zemin: var(--stt-beyaz);
  --p-kenar: var(--stt-cizgi);
  --p-r: var(--stt-r-card);
  position: relative;
  isolation: isolate;
}
.stt-slab-tile::before, .stt-side-slab::before, .stt-first-slab::before, .stt-fill-slab::before,
.stt-job-slab::before, .stt-kind-tag::before, .stt-last-slab::before, .stt-seek-slab::before,
.stt-slab-note::before, .stt-slab-dropdown-list::before, .stt-sketch-frame::before, .stt-line-slab::before,
.stt-mark-slab::before, .stt-place-slab::before, .stt-gauge-row::before, .stt-suggest-list::before,
.stt-cookie-slab::before, .stt-code-dropdown-detail[open]::before, .stt-diff-rule::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--p-zemin);
  border-radius: var(--p-r);
  box-shadow: inset 0 0 0 1px var(--p-kenar);
  transition: box-shadow var(--stt-sure) var(--stt-egri);
}
/* --- §03 Kap, iki yan, kesit -------------------------------------------- */
.stt-slab-pillar { max-width: var(--stt-kap); margin-inline: auto; padding-inline: var(--stt-kenar); }
.stt-main-torso { display: block; min-height: 50vh; }
/* İki yan: ana │ yan plaka (≥1080 px). Yan plaka YAPIŞKAN DEĞİL. */
.stt-slab-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stt-a6); align-items: start; }
.stt-slab-pair > * { min-width: 0; }
@media (min-width: 1080px) { .stt-slab-pair { grid-template-columns: minmax(0, 1fr) var(--stt-yan); gap: var(--stt-a7); } }
.stt-slab-stack { display: grid; gap: var(--stt-a4); }
.stt-slab-stack > * { min-width: 0; }
/* Kesit: sayfanın bir bölümü. Beyaz ↔ çelik dönüşümü servisfer'in koyu bant
   dönüşümünün ServistServis.tr karşılığıdır (--celik: tam genişlik çelik zemin). */
.stt-slab-notch { margin-top: var(--stt-bolum); }
.stt-slab-notch--steel { padding-block: var(--stt-bolum); background: var(--stt-celik); }
.stt-slab-notch--steel .stt-slab-tile { --p-zemin: var(--stt-beyaz); }
.stt-slab-pair + .stt-slab-notch, .stt-page-slab + .stt-slab-notch { margin-top: calc(var(--stt-bolum) * 0.75); }
.stt-page-slab + .stt-slab-pillar { margin-top: var(--stt-a6); }
[id] { scroll-margin-top: calc(var(--stt-ust-boy) + var(--stt-a5)); }

/* --- §04 Rubrik, manşet, giriş, bölüm başı -------------------------------- */
.stt-tagged-tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--stt-f-baslik); font-size: var(--stt-y-etiket); font-weight: 600; line-height: 1.25; letter-spacing: 0.02em; color: var(--stt-gri); }
.stt-tagged-tag::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--stt-yakut); border-radius: 50%; }
.stt-slab-banner { margin: 0; font-family: var(--stt-f-baslik); font-size: var(--stt-y-manset); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; color: var(--stt-grafit); text-wrap: balance; overflow-wrap: anywhere; }
.stt-slab-entry { margin: 16px 0 0; max-width: 58ch; font-size: var(--stt-y-giris); line-height: 1.55; color: var(--stt-metin); }
/* Bölüm başı: üstte 1 px çizgi, solda 64×3 grafit ölçü çubuğu + ucunda yakut üçgen. */
.stt-slab-heading { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px var(--stt-a4); margin-bottom: var(--stt-a5); padding-top: 18px; border-top: 1px solid var(--stt-cizgi); }
.stt-slab-heading::before { content: ""; position: absolute; left: 0; top: -2px; width: 64px; height: 3px; background: var(--stt-grafit); }
.stt-slab-heading::after { content: ""; position: absolute; left: 64px; top: -2px; width: 10px; height: 10px; background: var(--stt-yakut); border-radius: 50%; }
.stt-slab-heading > div { min-width: 0; }
.stt-slab-heading h2 { margin: 0; overflow-wrap: anywhere; }
.stt-slab-heading p { margin: 6px 0 0; color: var(--stt-gri); font-size: var(--stt-y-kucuk); }
.stt-slab-notch--steel .stt-slab-heading { border-top-color: var(--stt-cizgi-sert); }
/* Düz metin sütunu. */
.stt-slab-copy { max-width: 68ch; }
.stt-slab-copy > :last-child { margin-bottom: 0; }
.stt-slab-copy h3 { margin: var(--stt-a5) 0 8px; }
.stt-slab-copy ul, .stt-slab-copy ol { padding-left: 1.25rem; margin: 0 0 var(--stt-a4); }
.stt-slab-copy li { margin-bottom: 6px; }
.stt-slab-copy li::marker { color: var(--stt-yakut); }
.stt-gauge-digit { font-family: var(--stt-f-sayi); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.01em; color: var(--stt-grafit); }
.stt-tabular-digit { font-variant-numeric: tabular-nums; }
.stt-upper-share.stt-upper-share { margin-top: var(--stt-a4); }
.stt-fault-tally { display: block; font-family: var(--stt-f-sayi); font-size: var(--stt-y-dev); font-weight: 700; line-height: 1; color: var(--stt-grafit); }

/* --- §05 Üst plaka (başlık), menü, arama, öneriler, çekmece --------------- */
.stt-upper-slab { position: sticky; top: 0; z-index: 40; background: var(--stt-beyaz); border-bottom: 1px solid var(--stt-cizgi); }
.stt-upper-slab::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 120px; height: 3px; background: var(--stt-grafit); }
.stt-upper-slab-inner { display: flex; align-items: center; gap: var(--stt-a3); max-width: var(--stt-kap); height: var(--stt-ust-boy); margin-inline: auto; padding-inline: var(--stt-kenar); }
.stt-upper-slab-mark { flex: none; display: block; line-height: 0; }
.stt-upper-slab-mark img { height: 28px; width: auto; }
@media (min-width: 1080px) { .stt-upper-slab-mark img { height: 30px; } }
.stt-upper-slab-guide { display: none; }
.stt-upper-slab-menu { display: flex; list-style: none; margin: 0; padding: 0; }
.stt-upper-slab-menu > li { position: relative; }
.stt-upper-slab-menu > li > a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; font-family: var(--stt-f-baslik); font-size: 15px; font-weight: 500; color: var(--stt-grafit); text-decoration: none; white-space: nowrap; transition: color var(--stt-sure) var(--stt-egri); }
.stt-upper-slab-menu > li > a:hover { color: var(--stt-yakut); }
.stt-upper-slab-menu > li > a[aria-current] { color: var(--stt-yakut); box-shadow: inset 0 -2px 0 var(--stt-yakut); }
.stt-slab-dropdown > a::after { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--stt-m-asagi) center / contain no-repeat; mask: var(--stt-m-asagi) center / contain no-repeat; }
/* Açılır liste: sağ üstü yuvarlak beyaz plaka; üzerine gelince ya da klavye odağında açılır. */
.stt-slab-dropdown-list { position: absolute; top: 100%; left: 0; z-index: 45; display: none; min-width: 248px; margin: 0; padding: 8px 0; list-style: none; }
.stt-slab-dropdown:hover > .stt-slab-dropdown-list, .stt-slab-dropdown:focus-within > .stt-slab-dropdown-list { display: block; }
.stt-slab-dropdown-list--wide { width: 500px; columns: 2; column-gap: 0; }
.stt-slab-dropdown-list li { break-inside: avoid; }
.stt-slab-dropdown-list a { display: flex; align-items: center; min-height: 38px; padding: 0 16px; color: var(--stt-metin); font-size: 15px; text-decoration: none; }
.stt-slab-dropdown-list a:hover { background: var(--stt-celik); color: var(--stt-grafit); }
.stt-slab-dropdown-list-top { display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px; font-family: var(--stt-f-baslik); font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--stt-gri); }
.stt-slab-dropdown-list-top::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--stt-yakut); border-radius: 50%; }
.stt-slab-dropdown-list .stt-slab-dropdown-list-top a { min-height: 0; padding: 0; color: var(--stt-gri); font-size: inherit; }
.stt-slab-dropdown-list .stt-slab-dropdown-list-top a:hover { background: none; color: var(--stt-yakut); }
.stt-upper-slab-act { display: flex; align-items: center; gap: var(--stt-a2); margin-left: auto; }
.stt-upper-slab-phone { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; font-family: var(--stt-f-baslik); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--stt-grafit); text-decoration: none; white-space: nowrap; }
.stt-upper-slab-phone svg { width: 18px; height: 18px; color: var(--stt-yakut); }
.stt-upper-slab-phone:hover { color: var(--stt-yakut); }
.stt-upper-slab-act .stt-upper-slab-request, .stt-upper-slab-act .stt-upper-slab-line { display: none; }
@media (min-width: 720px) { .stt-upper-slab-act .stt-upper-slab-request, .stt-upper-slab-act .stt-upper-slab-line { display: inline-flex; } }
@media (min-width: 1240px) {
  .stt-upper-slab-guide { display: block; margin-left: var(--stt-a3); }
  .stt-upper-slab-act .stt-upper-slab-menu-unfold { display: none; }
}
@media (min-width: 1560px) { .stt-upper-slab-phone { display: inline-flex; } }
@media (max-width: 359px) { .stt-upper-slab-mark img { height: 24px; } .stt-upper-slab-act { gap: 4px; } }
@media (min-width: 360px) and (max-width: 479px) { .stt-upper-slab-mark img { height: 22px; } }
/* Büyütecin açtığı arama satırı (başlığın altında, her genişlikte). */
.stt-seek-row { padding-block: 0 var(--stt-a3); }
/* Pahlı arama kutusu: girdi + grafit yuvarlak gönder karosu. --buyuk 404 ve kod dizininde. */
.stt-search-box { position: relative; display: flex; align-items: center; width: 100%; min-height: 48px; background: var(--stt-beyaz); box-shadow: inset 0 0 0 1.5px var(--stt-cizgi-sert); border-radius: var(--stt-r-pill); transition: box-shadow var(--stt-sure) var(--stt-egri); }
.stt-search-box:focus-within { box-shadow: inset 0 0 0 2px var(--stt-yakut); }
.stt-search-box input { flex: 1; min-width: 0; height: 46px; padding: 0 8px 0 16px; border: 0; background: transparent; color: var(--stt-grafit); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.stt-search-box input::placeholder { color: var(--stt-gri-2); }
.stt-search-box input:focus-visible { outline: none; }
.stt-search-box input::-webkit-search-cancel-button { display: none; }
.stt-search-box button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 4px; border: 0; background: var(--stt-grafit); color: var(--stt-beyaz); border-radius: var(--stt-r-pill); cursor: pointer; transition: background-color var(--stt-sure) var(--stt-egri); }
.stt-search-box button:hover { background: var(--stt-yakut); }
.stt-search-box button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--stt-beyaz), inset 0 0 0 4px var(--stt-yakut); }
.stt-search-box button svg { width: 18px; height: 18px; }
.stt-search-box--large { min-height: 60px; }
.stt-search-box--large input { height: 58px; padding-left: 20px; font-size: 18px; }
.stt-search-box--large button { width: 50px; height: 50px; margin-right: 5px; background: var(--stt-yakut); }
.stt-search-box--large button:hover { background: var(--stt-yakut-bas); }
.stt-search-box--large button svg { width: 22px; height: 22px; }
form[data-bul] { position: relative; }
/* Öneri listesi (servistservistr.js "Bul kutuları"): kutunun altında yuvarlak beyaz plaka. */
.stt-suggest-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; max-height: min(60vh, 480px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; --p-kenar: var(--stt-cizgi-sert); }
.stt-suggest-list--up { top: auto; bottom: calc(100% + 6px); }
.stt-suggest-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; min-height: 44px; padding: 11px 12px; color: var(--stt-grafit); text-decoration: none; }
.stt-suggest-list a[aria-selected="true"], .stt-suggest-list a:hover { background: var(--stt-celik); }
.stt-advice-kind { color: var(--stt-gri); font-size: 13px; text-align: right; }
.stt-advice-row--code .stt-suggest-label { font-family: var(--stt-f-sayi); font-weight: 700; font-variant-numeric: tabular-nums; }
.stt-advice-none { padding: 10px 12px; color: var(--stt-gri); font-size: var(--stt-y-kucuk); }
/* Çekmece (#dizin, "Menü"): sağdan gelen beyaz plaka, mobilde tam ekran. */
body.stt-torso-locked { overflow: hidden; }
.stt-slab-drawer-cover { position: fixed; inset: 0; z-index: 70; background: rgba(18, 22, 28, 0.46); }
.stt-slab-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(420px, 100%); overflow-y: auto; overscroll-behavior: contain; padding: var(--stt-a4) var(--stt-a5) var(--stt-a7); background: var(--stt-beyaz); box-shadow: inset 1px 0 0 var(--stt-cizgi); }
.stt-slab-drawer-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--stt-a3); margin: 0 0 var(--stt-a5); padding-bottom: var(--stt-a4); border-bottom: 1px solid var(--stt-cizgi); }
.stt-slab-drawer-top::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 72px; height: 3px; background: var(--stt-grafit); }
.stt-slab-drawer-top img { height: 26px; width: auto; }
.stt-slab-drawer-acts { display: grid; gap: var(--stt-a2); }
.stt-slab-drawer-group { margin-top: var(--stt-a5); }
.stt-slab-drawer-group h2 { margin: 0 0 4px; font-size: 1.0625rem; }
.stt-slab-drawer-group h2 a { text-decoration: none; }
.stt-slab-drawer-group h2 a[aria-current] { color: var(--stt-yakut); }
.stt-slab-drawer-group .stt-slab-dropdown-list-top { padding: 12px 0 2px; }
.stt-slab-drawer-bottom { margin: var(--stt-a5) 0 0; padding-top: var(--stt-a4); border-top: 1px solid var(--stt-cizgi-ince); color: var(--stt-gri); font-size: 15px; max-width: none; }
.stt-lang-rule { font-size: var(--stt-y-kucuk); }
.stt-lang-rule summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; list-style: none; box-shadow: inset 0 0 0 1.5px var(--stt-grafit); border-radius: var(--stt-r-pill); font-family: var(--stt-f-baslik); font-weight: 600; color: var(--stt-grafit); cursor: pointer; }
.stt-lang-rule summary::-webkit-details-marker { display: none; }
.stt-lang-rule ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--stt-a4); margin: var(--stt-a2) 0 0; }
.stt-lang-rule a { display: inline-block; padding: 10px 0; color: var(--stt-gri); text-decoration: none; }
.stt-lang-rule a:hover, .stt-lang-rule a[aria-current="true"] { color: var(--stt-grafit); }

/* --- §06 Pahlı düğmeler, ok bağlantı -------------------------------------- */
.stt-pill-key { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 0; background: var(--stt-beyaz); color: var(--stt-grafit); border-radius: var(--stt-r-pill); font-family: var(--stt-f-baslik); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--stt-sure) var(--stt-egri), color var(--stt-sure) var(--stt-egri); }
.stt-pill-key svg { width: 18px; height: 18px; flex: none; }
.stt-pill-key b { font-weight: 600; font-variant-numeric: tabular-nums; }
.stt-pill-key span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stt-pill-key--signal { background: var(--stt-yakut); color: var(--stt-yakut-ust); }
.stt-pill-key--signal:hover { background: var(--stt-yakut-bas); color: var(--stt-yakut-ust); }
/* Çizgili: 1,5 px grafit kenar (iç gölge) + kesikte çapraz çizgi. */
.stt-pill-key--striped { color: var(--stt-grafit); box-shadow: inset 0 0 0 1.5px var(--stt-grafit);
  background:
    linear-gradient(to bottom left, transparent calc(50% - 0.75px), var(--stt-grafit) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) top right / var(--stt-yuvarlak köşe-orta) var(--stt-yuvarlak köşe-orta) no-repeat,
    linear-gradient(to top right, transparent calc(50% - 0.75px), var(--stt-grafit) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) bottom left / var(--stt-yuvarlak köşe-orta) var(--stt-yuvarlak köşe-orta) no-repeat,
    var(--stt-beyaz); }
.stt-pill-key--striped:hover { background: var(--stt-grafit); color: var(--stt-beyaz); }
/* Koyu: son plakanın grafit zemininde beyaz çizgili. */
.stt-pill-key--dark { color: var(--stt-beyaz); box-shadow: inset 0 0 0 1.5px #c9ced6;
  background:
    linear-gradient(to bottom left, transparent calc(50% - 0.75px), #c9ced6 calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) top right / var(--stt-yuvarlak köşe-orta) var(--stt-yuvarlak köşe-orta) no-repeat,
    linear-gradient(to top right, transparent calc(50% - 0.75px), #c9ced6 calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) bottom left / var(--stt-yuvarlak köşe-orta) var(--stt-yuvarlak köşe-orta) no-repeat,
    transparent; }
.stt-pill-key--dark:hover { background: var(--stt-beyaz); color: var(--stt-grafit); }
.stt-pill-key--plain { background: transparent; color: var(--stt-grafit); }
.stt-pill-key--plain:hover { background: var(--stt-celik); }
.stt-pill-key--small { min-height: 44px; padding: 0 18px; font-size: 15px; }
.stt-pill-key--wide { width: 100%; }
.stt-pill-key--emblem { width: 44px; padding: 0; flex: none; }
.stt-pill-key[aria-disabled="true"] { background: var(--stt-celik-2); color: var(--stt-gri-2); box-shadow: none; cursor: not-allowed; }
.stt-pill-key[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.stt-pill-key:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--stt-grafit), inset 0 0 0 5px var(--stt-beyaz); }
.stt-pill-key--signal:focus-visible { box-shadow: inset 0 0 0 3px var(--stt-grafit), inset 0 0 0 5px var(--stt-beyaz); }
.stt-pill-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.stt-pill-acts--vertical { display: grid; gap: var(--stt-a2); margin-top: var(--stt-a5); }
/* Ok bağlantı: Outfit yazı + yuvarlak grafit karo içinde beyaz ok. */
.stt-round-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--stt-f-baslik); font-weight: 600; color: var(--stt-grafit); text-decoration: none; transition: color var(--stt-sure) var(--stt-egri); }
.stt-round-arrow::after { content: ""; flex: none; width: 26px; height: 26px; background: var(--stt-grafit) var(--stt-ok-ikon) center / 14px 14px no-repeat; border-radius: var(--stt-r-pill); transition: background-color var(--stt-sure) var(--stt-egri); }
.stt-round-arrow:hover { color: var(--stt-yakut); }
.stt-round-arrow:hover::after { background-color: var(--stt-yakut); }

/* --- §07 Plaka (kart), cihaz plakası, yan plaka --------------------------- */
.stt-slab-tile { padding: 22px; min-width: 0; }
.stt-slab-tile--steel { --p-zemin: var(--stt-celik); }
.stt-slab-tile > :last-child { margin-bottom: 0; }
.stt-slab-tile h3 { margin: 0 0 8px; }
a.stt-slab-tile { display: block; color: inherit; text-decoration: none; }
a.stt-slab-tile:hover { --p-kenar: var(--stt-grafit); }
a.stt-slab-tile p { color: var(--stt-gri); font-size: var(--stt-y-kucuk); }
@media (max-width: 719px) { .stt-slab-tile { padding: 18px 16px; } }
.stt-tile-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--stt-a4); margin-bottom: var(--stt-a4); }
.stt-tile-top h2, .stt-tile-top h3 { margin: 0; }
.stt-tile-top h2 { font-size: clamp(1.25rem, 1.12rem + 0.6vw, 1.625rem); }
.stt-tile-top p { margin: 6px 0 0; color: var(--stt-gri); font-size: var(--stt-y-kucuk); }
.stt-tile-top small { color: var(--stt-gri); font-size: 14px; }
.stt-tile-top h3 a { text-decoration: none; }
.stt-tile-top h3 a:hover { text-decoration: underline; text-decoration-color: var(--stt-yakut); }
.stt-slabs { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.stt-slabs > * { min-width: 0; }
@media (min-width: 720px) { .stt-slabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .stt-slabs--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stt-slabs--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stt-slabs > .stt-slab-tile > .stt-tagged-tag { margin-bottom: 8px; }
.stt-slabs > .stt-slab-tile > p { margin: 0; color: var(--stt-gri); font-size: var(--stt-y-kucuk); }
.stt-slabs > .stt-slab-tile > h3 + p { margin-top: 0; }
/* Cihaz plakası: izometrik çizim + ad satırı (ad + yuvarlak ok). */
.stt-slab-device { padding: 10px 10px 14px; }
a.stt-slab-device { display: grid; }
.stt-slab-device .stt-sketch-frame { padding: 0; }
.stt-slab-device .stt-sketch-frame::before, .stt-slab-device .stt-sketch-frame::after { display: none; }
.stt-slab-device img { width: 100%; height: auto; }
.stt-slab-device-tie { display: block; color: inherit; text-decoration: none; }
.stt-slab-device-under { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 12px 4px 0; border-top: 1px solid var(--stt-cizgi-ince); }
.stt-slab-device-under h3 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.stt-slab-device-under p { margin: 2px 0 0; color: var(--stt-gri); font-size: 14px; }
.stt-slab-device-under::after { content: ""; flex: none; width: 26px; height: 26px; background: var(--stt-grafit) var(--stt-ok-ikon) center / 14px 14px no-repeat; border-radius: var(--stt-r-pill); transition: background-color var(--stt-sure) var(--stt-egri); }
.stt-slab-device:hover .stt-slab-device-under::after, .stt-slab-device-tie:hover .stt-slab-device-under::after { background-color: var(--stt-yakut); }
.stt-slab-device:hover, li.stt-slab-device:focus-within { --p-kenar: var(--stt-grafit); }
.stt-device-rank-numeral { margin-right: 8px; font-family: var(--stt-f-sayi); font-size: 13px; font-weight: 700; color: var(--stt-yakut); font-variant-numeric: tabular-nums; }
.stt-slab-device--dotted { display: grid; grid-template-rows: auto 1fr auto; }
.stt-slab-device-act { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 10px; padding: 10px 4px 0; border-top: 1px solid var(--stt-cizgi-ince); font-size: 14px; }
.stt-slab-device-act a { color: var(--stt-gri); text-decoration: none; }
.stt-slab-device-act a:hover { color: var(--stt-grafit); text-decoration: underline; text-decoration-color: var(--stt-yakut); }
.stt-slab-device-act .stt-slab-device-request { display: inline-flex; align-items: center; gap: 4px; font-family: var(--stt-f-baslik); font-weight: 600; color: var(--stt-grafit); }
.stt-slab-device-act .stt-slab-device-request:hover { color: var(--stt-yakut); }
@media (max-width: 719px) {
  .stt-slabs--device { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stt-slabs--device .stt-slab-device { padding: 6px 6px 10px; }
  .stt-slabs--device .stt-slab-device-under { padding: 8px 2px 0; }
  .stt-slabs--device .stt-slab-device-under::after { display: none; }
  .stt-slabs--device .stt-slab-device-under h3 { font-size: 15px; }
  .stt-slabs--device .stt-slab-device-under p { font-size: 13px; }
  .stt-slabs--device .stt-slab-device-act { padding: 8px 2px 0; font-size: 13px; }
}
/* Yan plaka: çelik, sağ üstü yuvarlak, köşe imli; yapışkan DEĞİL. */
.stt-side-slab { --p-zemin: var(--stt-celik); --p-kenar: var(--stt-celik); padding: 24px; min-width: 0; }
.stt-side-slab-heading { margin: 0 0 12px; font-size: 19px; }
.stt-side-slab dl { margin: 0; }
.stt-side-slab dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--stt-cizgi); }
.stt-side-slab dt { font-family: var(--stt-f-baslik); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--stt-gri); }
.stt-side-slab dd { margin: 0; font-family: var(--stt-f-baslik); font-weight: 600; color: var(--stt-grafit); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stt-side-slab .stt-definition-slab > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.stt-side-slab .stt-definition-slab dd { font-family: var(--stt-f-govde); font-weight: 400; text-align: left; color: var(--stt-metin); }
.stt-side-slab > .stt-pill-key { margin-top: var(--stt-a4); }
.stt-side-slab-note { margin: var(--stt-a4) 0 0; color: var(--stt-gri); font-size: 14px; }

/* --- §08 İş plakası (süreç, imza): tek yuvarlak plakada alanlar ---------------- */
.stt-job-slab { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 1px; list-style: none; }
/* Alanların zemini (etkin alan çelik) yuvarlak köşeı örtmesin: öğe kesilir, kenar ve yuvarlak köşe çizgisi alanların ÜSTÜNDE. */
.stt-job-slab { --p-zemin: transparent; background: var(--stt-beyaz); border-radius: var(--stt-r-card); }
.stt-job-slab::before { z-index: 1; }
@media (min-width: 900px) { .stt-job-slab:not(.stt-job-slab--vertical) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.stt-job-zone { position: relative; padding: 18px 20px 22px; min-width: 0; }
.stt-job-zone + .stt-job-zone { border-top: 1px solid var(--stt-cizgi); }
@media (min-width: 900px) { .stt-job-slab:not(.stt-job-slab--vertical) > .stt-job-zone + .stt-job-zone { border-top: 0; border-left: 1px solid var(--stt-cizgi); } }
.stt-job-zone small { display: block; margin-bottom: 10px; font-family: var(--stt-f-baslik); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--stt-gri); }
.stt-job-zone h3 { margin: 0 0 6px; font-size: 19px; }
.stt-job-zone p { margin: 0; color: var(--stt-gri); font-size: var(--stt-y-kucuk); }
.stt-job-zone--now { background: var(--stt-celik); }
.stt-job-zone--now small { color: var(--stt-yakut); }
.stt-job-zone--now::before { content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: var(--stt-yakut); border-radius: 50%; }
.stt-job-slab--vertical { margin: var(--stt-a5) 0; }
.stt-job-slab--vertical .stt-job-zone { padding: 14px 18px 16px; }
.stt-job-slab--vertical .stt-job-zone small { margin-bottom: 6px; }
.stt-job-slab--vertical .stt-job-zone h3 { font-size: 17px; }
.stt-job-slab--vertical .stt-job-zone small + p { color: var(--stt-metin); }

/* --- §09 Sayfa yolu ------------------------------------------------------- */
.stt-slab-path { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 14px; padding: 0; list-style: none; font-family: var(--stt-f-baslik); font-size: 14px; color: var(--stt-gri); }
.stt-slab-path li + li::before { content: "/"; margin-right: 10px; color: var(--stt-yakut); }
.stt-slab-path a { color: var(--stt-gri); text-decoration: none; }
.stt-slab-path a:hover { color: var(--stt-grafit); text-decoration: underline; text-decoration-color: var(--stt-yakut); }
.stt-slab-path [aria-current] { color: var(--stt-grafit); }

/* --- §10 Pahlı etiket (durum), yuvarlak çip, sık aranan -------------------------- */
.stt-round-label { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--stt-r-pill); background: var(--stt-celik-2); color: var(--stt-grafit); font-family: var(--stt-f-baslik); font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.stt-pill-tag--self { background: #e2f0e8; color: var(--stt-yesil); }
.stt-round-label--serve { background: var(--stt-celik-2); color: var(--stt-grafit); }
.stt-round-label--halt { background: var(--stt-yakut); color: var(--stt-yakut-ust); }
.stt-common-slabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stt-round-pip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; background: var(--stt-celik); color: var(--stt-grafit); font-size: 14.5px; text-decoration: none; border-radius: var(--stt-r-pill); transition: background-color var(--stt-sure) var(--stt-egri); }
a.stt-round-pip:hover { background: var(--stt-celik-3); color: var(--stt-grafit); }
a.stt-round-pip:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--stt-yakut); }
.stt-slab-notch--steel .stt-round-pip, .stt-slab-tile--steel .stt-round-pip { background: var(--stt-beyaz); }
.stt-common-sought-row { display: grid; gap: 8px; margin-top: var(--stt-a5); }
.stt-common-sought-row > span { font-family: var(--stt-f-baslik); font-size: 13px; font-weight: 600; color: var(--stt-gri); }

/* --- §11 Kod plakası ------------------------------------------------------ */
.stt-code-slab { width: 100%; border-collapse: collapse; font-size: 15px; box-shadow: inset 0 0 0 1px var(--stt-cizgi); }
.stt-code-slab caption { padding: 0 0 10px; text-align: left; font-family: var(--stt-f-baslik); font-size: 13.5px; font-weight: 600; color: var(--stt-gri); }
.stt-code-slab th, .stt-code-slab td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stt-cizgi-ince); overflow-wrap: anywhere; }
.stt-code-slab thead th { background: var(--stt-grafit); color: var(--stt-beyaz); font-family: var(--stt-f-baslik); font-size: 13px; font-weight: 600; letter-spacing: 0.03em; vertical-align: middle; }
.stt-code-slab tbody tr:last-child > * { border-bottom: 0; }
.stt-code-slab td b { display: block; font-weight: 600; color: var(--stt-grafit); }
.stt-code-slab td b + span { display: block; color: var(--stt-gri); font-size: 14px; }
.stt-code-slab tr:target > td { background: var(--stt-celik); }
.stt-code-slab tr[hidden] { display: none; }
.stt-code-box { display: inline-block; min-width: 58px; padding: 4px 10px; background: var(--stt-celik); color: var(--stt-grafit); font-family: var(--stt-f-sayi); font-size: 18px; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; border-radius: var(--stt-r-pill); transition: background-color var(--stt-sure) var(--stt-egri), color var(--stt-sure) var(--stt-egri); }
a.stt-code-box:hover { background: var(--stt-grafit); color: var(--stt-beyaz); }
a.stt-code-box:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--stt-yakut); }
@media (max-width: 719px) {
  .stt-code-slab thead { display: none; }
  .stt-code-slab tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--stt-cizgi-ince); }
  .stt-code-slab tbody tr:last-child { border-bottom: 0; }
  .stt-code-slab td { padding: 2px 0; border: 0; }
  .stt-code-slab td:first-child { grid-row: span 2; }
}
/* Tam kod tablosu (marka × cihaz) ve markanın tabloları. */
.stt-code-slab--full td:first-child { width: 1%; white-space: nowrap; }
.stt-code-slab--full td p { margin: 0 0 6px; max-width: 64ch; }
.stt-code-slab--full td strong { font-weight: 700; color: var(--stt-grafit); }
.stt-code-spotted { color: var(--stt-gri); }
.stt-code-dropdown-detail { margin-top: 8px; }
.stt-code-dropdown-detail > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; list-style: none; box-shadow: inset 0 0 0 1.5px var(--stt-grafit); border-radius: var(--stt-r-pill); font-family: var(--stt-f-baslik); font-size: 14px; font-weight: 600; color: var(--stt-grafit); cursor: pointer; }
.stt-code-dropdown-detail > summary::-webkit-details-marker { display: none; }
.stt-code-dropdown-detail > summary::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--stt-m-asagi) center / contain no-repeat; mask: var(--stt-m-asagi) center / contain no-repeat; }
.stt-code-dropdown-detail > summary:hover { background: var(--stt-grafit); color: var(--stt-beyaz); }
.stt-code-dropdown-detail[open] { --p-zemin: var(--stt-celik); --p-kenar: var(--stt-celik); margin-top: 10px; padding: 12px 16px 8px; }
.stt-code-dropdown-detail[open] > summary { min-height: 34px; padding: 0; box-shadow: none; border-radius: 0; background: none; color: var(--stt-grafit); }
.stt-code-dropdown-detail[open] > summary::after { transform: rotate(180deg); }
.stt-code-dropdown-detail h3 { margin: var(--stt-a3) 0 0; font-size: 15px; }
.stt-code-dropdown-detail .stt-sheet-row { min-height: 40px; padding-block: 6px; font-size: 15px; }
.stt-code-filter-slab { max-width: 520px; }
.stt-code-filter-slab .stt-zone-gloss { min-height: 1.5em; margin-top: 8px; }
.stt-code-slab--brand td:first-child a { text-decoration: none; }
.stt-code-slab--brand td:first-child a:hover b { text-decoration: underline; text-decoration-color: var(--stt-yakut); }
.stt-code-slab--brand .stt-common-slabs { gap: 6px; }
.stt-code-slab--brand td:last-child, .stt-code-slab--brand th:last-child { text-align: right; color: var(--stt-gri); }
@media (max-width: 719px) {
  .stt-code-slab--brand tr { grid-template-columns: minmax(0, 1fr) auto; }
  .stt-code-slab--brand td:first-child { grid-row: auto; }
  .stt-code-slab--brand td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; padding-top: 6px; }
  .stt-code-slab--full td:last-child { grid-column: 2; padding-top: 6px; }
}
/* Tip tablosu: veri tablosu (renkler, basın, ekipler, resmi hatlar, işin sırası). */
.stt-kind-table { width: 100%; border-collapse: collapse; font-size: var(--stt-y-kucuk); box-shadow: inset 0 0 0 1px var(--stt-cizgi); }
.stt-kind-table th, .stt-kind-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stt-cizgi-ince); overflow-wrap: anywhere; }
.stt-kind-table thead th { background: var(--stt-celik-2); color: var(--stt-grafit); font-family: var(--stt-f-baslik); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; vertical-align: bottom; }
.stt-kind-table tbody th { font-family: var(--stt-f-baslik); font-weight: 600; color: var(--stt-grafit); border-right: 1px solid var(--stt-cizgi-ince); }
.stt-kind-table tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 719px) {
  .stt-kind-table--narrow thead { display: none; }
  .stt-kind-table--narrow tr { display: grid; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--stt-cizgi-ince); }
  .stt-kind-table--narrow tbody tr:last-child { border-bottom: 0; }
  .stt-kind-table--narrow td, .stt-kind-table--narrow tbody th { padding: 0; border: 0; }
}
/* Tanım plakası: alan adı (küçük Outfit) │ değer; 1 px çizgilerle bölünmüş satırlar. */
.stt-definition-slab { margin: 0; font-size: var(--stt-y-kucuk); }
.stt-definition-slab > div { display: grid; grid-template-columns: minmax(7rem, 2fr) minmax(0, 5fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--stt-cizgi-ince); }
.stt-definition-slab > div:first-child { padding-top: 0; border-top: 0; }
.stt-definition-slab dt { font-family: var(--stt-f-baslik); font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--stt-gri); }
.stt-definition-slab dd { margin: 0; color: var(--stt-metin); overflow-wrap: anywhere; }
@media (max-width: 559px) { .stt-definition-slab > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* --- §12 Soru plakası (SSS), katlanan plaka --------------------------------- */
.stt-question-slab { box-shadow: inset 0 0 0 1px var(--stt-cizgi); }
.stt-question-slab-row + .stt-question-slab-row { border-top: 1px solid var(--stt-cizgi); }
.stt-question-slab-row summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 18px; list-style: none; font-family: var(--stt-f-baslik); font-size: 17px; font-weight: 600; color: var(--stt-grafit); cursor: pointer; }
.stt-question-slab-row summary::-webkit-details-marker { display: none; }
.stt-question-slab-row summary::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--stt-grafit); -webkit-mask: var(--stt-m-asagi) center / contain no-repeat; mask: var(--stt-m-asagi) center / contain no-repeat; }
.stt-question-slab-row summary:hover { background: var(--stt-celik); }
.stt-question-slab-row[open] { background: var(--stt-celik); }
.stt-question-slab-row[open] summary::after { transform: rotate(180deg); background: var(--stt-yakut); }
.stt-question-slab-row > div { padding: 0 18px 16px; color: var(--stt-metin); }
.stt-question-slab-row > div p { margin: 0 0 10px; }
.stt-question-slab-row > div p:last-child { margin-bottom: 0; }
@media (min-width: 1080px) {
  .stt-question-slab--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; box-shadow: none; }
  .stt-question-slab--two .stt-question-slab-row { box-shadow: inset 0 0 0 1px var(--stt-cizgi); }
  .stt-question-slab--two .stt-question-slab-row + .stt-question-slab-row { border-top: 0; }
}
.stt-folding-slab { border-top: 1px solid var(--stt-cizgi-ince); }
.stt-folding-slab > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; list-style: none; cursor: pointer; }
.stt-folding-slab > summary::-webkit-details-marker { display: none; }
.stt-folding-slab > summary h3 { flex: 1; min-width: 0; margin: 0; font-size: 17px; }
.stt-folding-slab > summary small { font-family: var(--stt-f-sayi); font-size: 14px; font-weight: 600; color: var(--stt-gri-2); font-variant-numeric: tabular-nums; }
.stt-folding-slab > summary::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--stt-grafit); -webkit-mask: var(--stt-m-asagi) center / contain no-repeat; mask: var(--stt-m-asagi) center / contain no-repeat; }
.stt-folding-slab[open] > summary::after { transform: rotate(180deg); background: var(--stt-yakut); }
.stt-folding-slab > summary:hover h3 { text-decoration: underline; text-decoration-color: var(--stt-yakut); }
.stt-folding-slab > p { margin: 0 0 8px; color: var(--stt-gri); }
.stt-folding-slab > .stt-row-rule { margin-bottom: var(--stt-a3); }
.stt-slab-tile > .stt-folding-slab:first-of-type { margin-top: var(--stt-a3); }

/* --- §13 Form ------------------------------------------------------------- */
.stt-slab-fill { display: grid; gap: var(--stt-a5); min-width: 0; }
.stt-fill-part { display: grid; gap: 14px; min-width: 0; }
.stt-fill-part + .stt-fill-part { padding-top: var(--stt-a5); border-top: 1px solid var(--stt-cizgi-ince); }
.stt-part-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.stt-part-label::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--stt-yakut); border-radius: 50%; }
.stt-part-label b { font-family: var(--stt-f-baslik); font-size: 17px; font-weight: 600; color: var(--stt-grafit); }
.stt-part-label small { color: var(--stt-gri); font-size: 14px; }
.stt-zones-side-beside { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 640px) { .stt-zones-side-beside { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stt-zones-side-beside > .stt-slab-zone--full, .stt-zones-side-beside > .stt-consent-row { grid-column: 1 / -1; } }
.stt-slab-zone { display: grid; gap: 6px; min-width: 0; align-content: start; }
.stt-slab-zone > label, .stt-zone-heading { font-family: var(--stt-f-baslik); font-size: 14px; font-weight: 600; color: var(--stt-grafit); }
.stt-slab-zone label small { font-family: var(--stt-f-govde); font-weight: 400; color: var(--stt-gri); }
.stt-slab-zone input, .stt-slab-zone select, .stt-slab-zone textarea { width: 100%; min-width: 0; min-height: 52px; padding: 0 14px; border: 0; background: var(--stt-beyaz); color: var(--stt-grafit); font: inherit; font-size: 16px; box-shadow: inset 0 0 0 1.5px var(--stt-cizgi-sert); border-radius: var(--stt-r-pill); -webkit-appearance: none; appearance: none; transition: box-shadow var(--stt-sure) var(--stt-egri); }
.stt-slab-zone textarea { min-height: 116px; border-radius: var(--stt-r-card); padding-block: 14px; resize: vertical; }
.stt-slab-zone select { padding-right: 44px; background: var(--stt-beyaz) right 14px center / 18px 18px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2E23' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); }
.stt-slab-zone select[multiple] { min-height: 160px; padding: 8px; background-image: none; }
.stt-slab-zone input::placeholder, .stt-slab-zone textarea::placeholder { color: var(--stt-gri-2); }
.stt-slab-zone input:hover, .stt-slab-zone select:hover, .stt-slab-zone textarea:hover { box-shadow: inset 0 0 0 1.5px var(--stt-grafit); }
.stt-slab-zone input:focus-visible, .stt-slab-zone select:focus-visible, .stt-slab-zone textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--stt-yakut); }
.stt-slab-zone input[type="date"], .stt-slab-zone input[type="time"] { display: block; -webkit-appearance: auto; appearance: auto; color-scheme: light; }
.stt-slab-zone input[type="date"]::-webkit-calendar-picker-indicator, .stt-slab-zone input[type="time"]::-webkit-calendar-picker-indicator { width: 22px; height: 22px; cursor: pointer; }
.stt-slab-zone input[type="file"] { padding: 10px 12px; }
.stt-slab-zone input[type="file"]::file-selector-button { margin-right: var(--stt-a3); min-height: 34px; padding: 0 14px; border: 0; background: var(--stt-grafit); color: var(--stt-beyaz); font: inherit; font-family: var(--stt-f-baslik); font-weight: 600; border-radius: var(--stt-r-pill); cursor: pointer; }
.stt-slab-zone--invalid input, .stt-slab-zone--invalid select, .stt-slab-zone--invalid textarea { background-color: var(--stt-yakut-acik); box-shadow: inset 0 0 0 2px var(--stt-yakut); }
.stt-zone-gloss { margin: 0; color: var(--stt-gri); font-size: 13.5px; }
.stt-zone-error-row { display: flex; gap: 8px; align-items: center; margin: 0; max-width: none; color: var(--stt-hata); font-size: 14px; font-weight: 600; }
.stt-zone-error-row::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--stt-hata); border-radius: 50%; }
.stt-consent-row { display: flex; gap: 12px; align-items: flex-start; color: var(--stt-metin); font-size: 15px; cursor: pointer; }
.stt-consent-row input { flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 1px 0 0; border: 0; background: var(--stt-beyaz); box-shadow: inset 0 0 0 1.5px var(--stt-cizgi-sert); -webkit-appearance: none; appearance: none; cursor: pointer; }
.stt-consent-row input:checked { background: var(--stt-hata); box-shadow: none; }
.stt-consent-row input:checked::after { content: ""; width: 16px; height: 16px; background: var(--stt-hata-ust); -webkit-mask: var(--stt-m-onay) center / contain no-repeat; mask: var(--stt-m-onay) center / contain no-repeat; }
.stt-consent-row input:focus-visible { outline: 2px solid var(--stt-hata); outline-offset: 2px; }
.stt-slab-zone--invalid.stt-consent-row input { box-shadow: inset 0 0 0 2px var(--stt-hata); }
/* Uygun gün: önümüzdeki günler yuvarlak küçük plakalar (servistservistr.js). */
.stt-day-slabs { display: flex; flex-wrap: wrap; gap: 8px; }
.stt-day-slabs button { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; background: var(--stt-celik); color: var(--stt-gri); font: inherit; font-size: 14px; border-radius: var(--stt-r-pill); cursor: pointer; transition: background-color var(--stt-sure) var(--stt-egri); }
.stt-day-slabs button b { font-family: var(--stt-f-sayi); font-size: 16px; font-weight: 700; color: var(--stt-grafit); font-variant-numeric: tabular-nums; }
.stt-day-slabs button:hover { background: var(--stt-celik-3); }
.stt-day-slabs button[aria-pressed="true"] { background: var(--stt-grafit); color: #c9ced6; }
.stt-day-slabs button[aria-pressed="true"] b { color: var(--stt-beyaz); }
.stt-day-slabs button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--stt-yakut); }
.stt-fill-send-row { display: grid; gap: var(--stt-a3); }
.stt-fill-send-row p { margin: 0; color: var(--stt-gri); font-size: 14px; }
@media (min-width: 720px) { .stt-fill-send-row .stt-pill-key { justify-self: start; min-width: 300px; } }
.stt-screen-outer-zone { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* İki yan form: solda etiket, başlık, giriş, dikey iş plakası; sağda form plakası. */
.stt-fill-slab-pair { display: grid; gap: var(--stt-a6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.stt-fill-slab-pair > * { min-width: 0; }
@media (min-width: 1080px) { .stt-fill-slab-pair { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--stt-a7); } }
.stt-fill-gloss h2 { margin: 0 0 var(--stt-a3); font-size: var(--stt-y-1); }
.stt-fill-gloss .stt-slab-entry { margin-top: 0; }
.stt-fill-footnote { color: var(--stt-gri); font-size: 14px; }
.stt-fill-slab { --p-kenar: var(--stt-cizgi-sert); padding: var(--stt-a6) var(--stt-a5); }
@media (max-width: 719px) { .stt-fill-slab { padding: var(--stt-a5) var(--stt-a4); } }

/* --- §14 Plaka notu, uyarı ------------------------------------------------ */
.stt-slab-note { --p-zemin: var(--stt-celik); --p-kenar: var(--stt-celik); margin: 0 0 var(--stt-a4); padding: 14px 18px 14px 21px; max-width: none; color: var(--stt-metin); font-size: var(--stt-y-kucuk); }
.stt-slab-note::after { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--stt-grafit); }
.stt-slab-note b { display: block; margin-bottom: 2px; font-family: var(--stt-f-baslik); font-weight: 600; color: var(--stt-grafit); }
.stt-slab-note p { margin: 0; }
.stt-slab-note:last-child { margin-bottom: 0; }
.stt-slab-note--warning { --p-zemin: var(--stt-hata-acik); --p-kenar: var(--stt-hata-acik); }
.stt-slab-note--warning::after { background: var(--stt-hata); }
.stt-slab-note--warning b { color: var(--stt-hata); }
.stt-slab-note--okay::after { background: var(--stt-yesil); }
.stt-slab-note--okay b { color: var(--stt-yesil); }

/* --- §15 Açılış plakası, izometrik çizim, parça tablosu ---------------------- */
.stt-page-slab { padding-top: var(--stt-a6); }
.stt-page-slab-inner { display: grid; gap: var(--stt-a6); grid-template-columns: minmax(0, 1fr); align-items: center; }
.stt-page-slab-inner > * { min-width: 0; }
.stt-page-slab-inner h1 { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 1080px) { .stt-page-slab-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--stt-a8); } }
.stt-page-slab-picture { display: grid; gap: var(--stt-a3); align-content: center; }
.stt-page-slab-picture:empty { display: none; }
@media (min-width: 1080px) { .stt-page-slab-inner:has(> .stt-page-slab-picture:empty) { grid-template-columns: minmax(0, 1fr); } }
.stt-page-slab-body > h1 { margin: 0; overflow-wrap: anywhere; }
.stt-page-slab .stt-tab-rail { margin-top: var(--stt-a6); }
.stt-page-slab .stt-pill-acts { margin-top: var(--stt-a5); }
/* Çizim plakası: sağ üstü 28 px yuvarlak beyaz plaka, köşede 20 px yakut nokta. */
.stt-sketch-frame { --p-r: var(--stt-r-card); display: block; padding: 14px; }
.stt-sketch-frame img { width: 100%; height: auto; }
.stt-sketch-frame picture { display: block; }
.stt-page-slab-picture > .stt-sketch-frame { width: 100%; max-width: 440px; justify-self: center; }
@media (max-width: 1079px) { .stt-page-slab-picture > .stt-sketch-frame { max-width: 320px; justify-self: start; } }
/* Ana sayfa açılışı. */
.stt-intro-notch { padding-top: var(--stt-a6); }
@media (min-width: 1080px) { .stt-intro-notch { padding-top: var(--stt-a8); } }
.stt-intro-slab { display: grid; gap: var(--stt-a6); grid-template-columns: minmax(0, 1fr); align-items: center; }
.stt-intro-slab > * { min-width: 0; }
@media (min-width: 1080px) { .stt-intro-slab { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--stt-a8); } }
.stt-intro-copy .stt-pill-acts { margin-top: var(--stt-a5); }
/* İlke plakası: tip etiketi gibi üç alan. */
.stt-policy-slab { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--stt-a5) 0 0; padding: 0; list-style: none; box-shadow: inset 0 0 0 1px var(--stt-cizgi); }
.stt-policy-slab li { padding: 12px 14px; color: var(--stt-grafit); font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.stt-policy-slab li + li { border-left: 1px solid var(--stt-cizgi); }
.stt-policy-slab small { display: block; margin-bottom: 4px; font-family: var(--stt-f-baslik); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--stt-yakut); }
@media (max-width: 419px) { .stt-policy-slab li { padding: 10px; font-size: 13.5px; } }
.stt-first-slab { --p-r: var(--stt-r-card); margin: 0; padding: 18px; }
.stt-first-slab figcaption { margin-top: 12px; }
.stt-round-stipple { position: relative; }
.stt-round-stipple picture { display: block; }
.stt-round-stipple img { display: block; width: 100%; height: auto; }
.stt-numeral-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stt-round-numeral { transition: opacity var(--stt-sure) var(--stt-egri); }
.stt-numeral-ground { fill: var(--stt-grafit); }
.stt-num-tick { fill: var(--stt-yakut); }
.stt-round-numeral text { fill: #ffffff; font-family: var(--stt-f-baslik); font-size: 3.3px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.stt-pill-num--chosen .stt-numeral-ground { fill: var(--stt-yakut); }
.stt-pill-num--chosen .stt-num-tick { fill: var(--stt-grafit); }
.stt-numeral-layer:has(.stt-pill-num--chosen) .stt-round-numeral:not(.stt-pill-num--chosen) { opacity: 0.3; }
.stt-slab-device--dotted .stt-round-numeral { opacity: 0; }
.stt-slab-device--dotted:hover .stt-round-numeral, .stt-slab-device--dotted:focus-within .stt-round-numeral { opacity: 1; }
@media (hover: none) { .stt-slab-device--dotted .stt-round-numeral { opacity: 1; } }
.stt-piece-table-top { display: block; margin-bottom: 8px; font-family: var(--stt-f-baslik); font-size: 13px; font-weight: 600; color: var(--stt-gri); }
.stt-piece-table { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; box-shadow: inset 0 0 0 1px var(--stt-cizgi); font-size: 14px; }
@media (min-width: 420px) { .stt-piece-table { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stt-piece-table li:nth-child(odd) { border-right: 1px solid var(--stt-cizgi-ince); } }
.stt-piece-table li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-bottom: 1px solid var(--stt-cizgi-ince); color: var(--stt-metin); }
.stt-piece-table b { flex: none; display: inline-grid; place-items: center; width: 26px; height: 20px; background: var(--stt-grafit); color: var(--stt-beyaz); font-family: var(--stt-f-baslik); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: var(--stt-r-pill); }

/* --- §16 Mobil alt plaka (<1080 px) --------------------------------------- */
.stt-under-slab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 8px; padding: 10px var(--stt-kenar) calc(10px + env(safe-area-inset-bottom)); background: var(--stt-beyaz); border-top: 1px solid var(--stt-cizgi); transition: transform var(--stt-sure) var(--stt-egri); }
.stt-under-slab::before { content: ""; position: absolute; left: 0; top: -2px; width: 72px; height: 3px; background: var(--stt-grafit); }
.stt-under-slab > .stt-pill-key { flex: 1; min-width: 0; }
.stt-under-slab > .stt-under-slab-phone { flex: 0 0 auto; padding-inline: 18px; }
.stt-under-slab--hidden { transform: translateY(calc(100% + 8px)); }
body.stt-under-slabbed { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 1080px) { .stt-under-slab { display: none; } body.stt-under-slabbed { padding-bottom: 0; } }

/* --- §17 Çelik altbilgi, tip etiketi, dip satır, son plaka ----------------- */
.stt-steel-colophon { position: relative; margin-top: var(--stt-bolum); padding: var(--stt-a7) 0 0; background: var(--stt-celik); border-top: 1px solid var(--stt-cizgi); }
.stt-steel-colophon::before { content: ""; position: absolute; left: 0; top: -2px; width: 120px; height: 3px; background: var(--stt-grafit); }
.stt-last-slab-notch + .stt-steel-colophon { margin-top: var(--stt-bolum); }
.stt-steel-colophon-grid { display: grid; gap: var(--stt-a6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .stt-steel-colophon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .stt-steel-colophon-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.stt-colophon-identity > a img { height: 28px; width: auto; margin-bottom: var(--stt-a4); }
.stt-colophon-identity > p { max-width: 42ch; color: var(--stt-metin); font-size: var(--stt-y-kucuk); }
.stt-colophon-contact { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.stt-colophon-contact a { color: var(--stt-grafit); text-decoration-color: var(--stt-cizgi-sert); }
.stt-colophon-contact .stt-tabular-digit { font-family: var(--stt-f-baslik); font-size: 19px; font-weight: 600; text-decoration: none; }
.stt-colophon-catalog { min-width: 0; }
.stt-colophon-catalog > nav + nav { margin-top: var(--stt-a5); }
.stt-colophon-catalog h2 { margin: 0 0 8px; font-size: 15px; letter-spacing: 0; }
.stt-colophon-catalog ul { margin: 0; padding: 0; list-style: none; }
.stt-colophon-catalog a, .stt-colophon-catalog button { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 0; border: 0; background: none; color: var(--stt-metin); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
.stt-colophon-catalog a:hover, .stt-colophon-catalog button:hover { color: var(--stt-yakut); }
.stt-colophon-small { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: var(--stt-a6); padding-top: var(--stt-a4); border-top: 1px solid var(--stt-cizgi); }
.stt-colophon-small > a { margin-right: 4px; font-family: var(--stt-f-baslik); font-weight: 600; color: var(--stt-grafit); text-decoration: none; }
.stt-colophon-small ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.stt-colophon-small ul a { color: var(--stt-gri); text-decoration: none; }
.stt-colophon-small ul a:hover { color: var(--stt-grafit); }
/* Tip etiketi: kurum bilgisi plakası (cihaz arkasındaki üretici etiketi gibi). */
.stt-kind-tag { --p-kenar: var(--stt-cizgi-sert); display: flex; flex-wrap: wrap; margin: var(--stt-a6) 0 0; padding: 1px; font-size: 13.5px; }
.stt-kind-tag > div { flex: 1 1 200px; min-width: 0; padding: 12px 16px; box-shadow: -1px 0 0 var(--stt-cizgi-ince), 0 -1px 0 var(--stt-cizgi-ince); }
.stt-kind-tag dt { margin-bottom: 4px; font-family: var(--stt-f-baslik); font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--stt-gri); }
.stt-kind-tag dd { margin: 0; color: var(--stt-metin); overflow-wrap: anywhere; }
.stt-kind-tag-statement { flex-basis: 100% !important; }
.stt-colophon-statement { color: var(--stt-gri); }
.stt-steel-floor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: var(--stt-a4) 0 var(--stt-a5); font-size: 13.5px; color: var(--stt-gri); }
.stt-steel-floor p { margin: 0; }
.stt-steel-floor a { color: var(--stt-gri); }
.stt-steel-floor nav { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.stt-tally-row b { font-family: var(--stt-f-sayi); font-weight: 700; color: var(--stt-grafit); font-variant-numeric: tabular-nums; }
/* Son plaka: sayfanın TEK koyu yüzeyi — grafit, 28 px yuvarlak köşe, köşede açık yakut yakut nokta. */
.stt-last-slab { --p-zemin: var(--stt-grafit); --p-kenar: var(--stt-grafit); --p-r: var(--stt-r-card); display: grid; gap: var(--stt-a5); align-items: center; padding: 30px 24px; color: #c9ced6; }
@media (min-width: 900px) { .stt-last-slab { grid-template-columns: minmax(0, 1fr) auto; padding: 36px 48px; } }
.stt-last-slab h2 { margin: 0 0 8px; color: var(--stt-beyaz); }
.stt-last-slab p { margin: 0; color: #c9ced6; }
.stt-last-slab .stt-tagged-tag { margin-bottom: 10px; color: #c9ced6; }
.stt-last-slab .stt-tagged-tag::before { background: var(--stt-yakut-isik); }
.stt-last-slab .stt-pill-key--signal:focus-visible, .stt-last-slab .stt-pill-key--dark:focus-visible { box-shadow: inset 0 0 0 3px var(--stt-beyaz), inset 0 0 0 5px var(--stt-grafit); }
/* Ara plaka (sayfa ortası tek satır çağrı): çelik, köşe imli. */
.stt-seek-slab { --p-zemin: var(--stt-celik); --p-kenar: var(--stt-celik); display: grid; gap: var(--stt-a4); align-items: center; padding: 22px; }
@media (min-width: 900px) { .stt-seek-slab { grid-template-columns: minmax(0, 1fr) auto; padding: 26px 32px; } }
.stt-seek-slab p { margin: 0; color: var(--stt-gri); }
.stt-seek-slab b { display: block; font-family: var(--stt-f-baslik); font-size: var(--stt-y-3); color: var(--stt-grafit); }
/* Çerez plakası: alt plakanın üstünde yüzen beyaz plaka. */
.stt-cookie-slab { --p-kenar: var(--stt-cizgi-sert); position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 90; max-width: 760px; margin-inline: auto; padding: var(--stt-a4) var(--stt-a5); }
.stt-cookie-slab p { margin: 0 0 12px; max-width: none; color: var(--stt-metin); font-size: 14px; }
/* Dar ekran (390 px): bant ekranın alt kenarında kısa kalır; iki seçim yan yana. */
@media (max-width: 480px) {
  .stt-cookie-slab { left: 6px; right: 6px; bottom: calc(6px + env(safe-area-inset-bottom)); padding: 12px 14px; }
  .stt-cookie-slab p { margin: 0 0 10px; font-size: 13px; line-height: 1.4; }
  .stt-cookie-slab .stt-pill-acts { flex-wrap: nowrap; gap: 8px; }
  .stt-cookie-slab .stt-pill-key--small { flex: 1 1 0; min-height: 40px; padding: 0 10px; font-size: 14px; }
}

/* --- §18 Sayfa ekleri: ölçü satırı, hat plakası, açılış maddeleri, logo ---- */
.stt-gauge-row { --p-zemin: var(--stt-celik); --p-kenar: var(--stt-celik); display: flex; flex-wrap: wrap; margin: 0; padding: 1px; }
.stt-gauge-row > div { flex: 1 1 120px; display: flex; flex-direction: column-reverse; gap: 6px; padding: 18px 20px; }
.stt-gauge-row > div + div { box-shadow: -1px 0 0 var(--stt-cizgi); }
.stt-gauge-row dd { margin: 0; font-size: var(--stt-y-dev); }
.stt-gauge-row dt { font-family: var(--stt-f-baslik); font-size: var(--stt-y-etiket); font-weight: 600; color: var(--stt-gri); }
.stt-line-slab { --p-zemin: var(--stt-celik); --p-kenar: var(--stt-celik); display: grid; gap: 6px; padding: 22px; }
.stt-line-slab .stt-tagged-tag { margin: 0; }
.stt-line-slab .stt-gauge-digit { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); text-decoration: none; overflow-wrap: anywhere; }
.stt-line-slab .stt-gauge-digit:hover { color: var(--stt-yakut); }
.stt-line-slab p { margin: 0; color: var(--stt-gri); font-size: 14px; }
.stt-intro-points .stt-sheet-row { min-height: 40px; padding-block: 6px; font-size: 15px; color: var(--stt-metin); }
.stt-intro-points .stt-sheet-row::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--stt-yakut); border-radius: 50%; }
.stt-mark-slab { display: grid; place-items: center; min-height: 140px; margin-bottom: var(--stt-a4); padding: var(--stt-a5); }
.stt-mark-slab--dark { --p-zemin: var(--stt-grafit); --p-kenar: var(--stt-grafit); }
.stt-mark-slab img { max-height: 56px; width: auto; }
/* İletişim: tıkla-yükle harita plakası (iletisim-harita.js --acik ekler). */
.stt-place-slab { --p-zemin: var(--stt-celik); --p-kenar: var(--stt-celik); display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--stt-a5); text-align: center; overflow: hidden; }
.stt-place-slab .stt-pill-acts { justify-content: center; }
.stt-place-slab iframe { width: 100%; height: 100%; border: 0; }
.stt-place-slab--ajar { padding: 0; }
.stt-place-slab--ajar > div { display: none; }
@media (min-width: 720px) { .stt-place-slab { aspect-ratio: 16 / 9; } }
.stt-place-slab-address { color: var(--stt-metin); }
/* Yorum plakası (yalnız onaylı kayıttan). */
.stt-review-slab { margin: 0; }
.stt-review-slab blockquote { margin: 0 0 var(--stt-a3); }
.stt-review-slab figcaption { color: var(--stt-gri); font-size: 14px; }
/* Mahalle adları: düz metin dizisi, "·" ayraçlı. */
.stt-title-rule { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; color: var(--stt-metin); font-size: var(--stt-y-kucuk); line-height: 1.9; }
.stt-title-rule li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--stt-gri-2); }

/* --- §19 Satır dökümü, harf bölmeleri, sekme çubuğu -------------------------- */
.stt-row-rule { margin: 0; padding: 0; list-style: none; }
.stt-sheet-row { display: flex; align-items: center; gap: var(--stt-a3); min-height: 50px; padding: 10px 2px; border-top: 1px solid var(--stt-cizgi-ince); }
.stt-sheet-row:first-child { border-top: 0; }
.stt-sheet-row > a { flex: 1; min-width: 0; color: var(--stt-grafit); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.stt-sheet-row > a:hover { text-decoration: underline; text-decoration-color: var(--stt-yakut); }
.stt-sheet-row small { flex: 0 1 auto; min-width: 0; color: var(--stt-gri); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.stt-sheet-row:has(> a)::after { content: ""; flex: none; width: 16px; height: 16px; background: var(--stt-gri-2); -webkit-mask: var(--stt-m-ok) center / contain no-repeat; mask: var(--stt-m-ok) center / contain no-repeat; }
.stt-sheet-row:has(> a:hover)::after { background: var(--stt-yakut); }
.stt-sheet-row > span { flex: 1; min-width: 0; }
.stt-row-rule:not(.stt-row-rule--columns, .stt-intro-points) > .stt-sheet-row > span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; background: var(--stt-grafit); border-radius: 50%; }
.stt-row-gloss { display: inline-block; width: 100%; margin-top: 2px; color: var(--stt-gri); font-size: 14px; font-weight: 400; }
.stt-row-rule--columns { columns: 1; column-gap: var(--stt-a6); }
.stt-row-rule--columns .stt-sheet-row { break-inside: avoid; min-height: 48px; border-top: 0; border-bottom: 1px solid var(--stt-cizgi-ince); }
.stt-row-rule--quad { columns: 2; column-gap: var(--stt-a4); }
@media (max-width: 559px) { .stt-row-rule--quad small { display: none; } }
@media (min-width: 560px) { .stt-row-rule--columns { columns: 2; } }
@media (min-width: 1080px) {
  .stt-row-rule--columns { columns: 3; }
  .stt-row-rule--quad { columns: 4; }
  .stt-twin-left .stt-row-rule--columns, .stt-slabs > .stt-slab-tile .stt-row-rule--columns { columns: 2; }
}
/* Harf bölmeleri (A–Z dizinleri) + ad süzgeci. */
.stt-title-filter { max-width: 360px; margin-bottom: var(--stt-a4); }
.stt-letter-parts { columns: 1; column-gap: var(--stt-a6); }
@media (min-width: 560px) { .stt-letter-parts { columns: 2; } }
@media (min-width: 1080px) { .stt-letter-parts { columns: 4; } }
.stt-letter-part { break-inside: avoid; margin-bottom: var(--stt-a4); }
.stt-letter-part .stt-tagged-tag { margin: 0; color: var(--stt-grafit); font-size: 15px; }
.stt-letter-part .stt-sheet-row { min-height: 44px; padding-block: 6px; }
.stt-letter-part .stt-sheet-row small { font-size: 13px; text-align: right; }
/* Sekme çubuğu: çelik-2 ray üstünde sekmeler; etkin sekme beyaz + yakut alt çizgi. */
.stt-tab-rail { display: flex; gap: 2px; width: max-content; max-width: 100%; margin: var(--stt-a4) 0; padding: 4px; overflow-x: auto; scrollbar-width: none; background: var(--stt-celik-2); border-radius: var(--stt-r-pill); }
.stt-tab-rail::-webkit-scrollbar { display: none; }
.stt-tab-rail a, .stt-tab-rail button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border: 0; background: transparent; color: var(--stt-gri); font: inherit; font-family: var(--stt-f-baslik); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--stt-sure) var(--stt-egri), color var(--stt-sure) var(--stt-egri); }
.stt-tab-rail a:hover, .stt-tab-rail button:hover { color: var(--stt-grafit); background: var(--stt-celik-3); }
.stt-tab-rail [aria-selected="true"], .stt-tab-rail [aria-current="true"] { background: var(--stt-beyaz); color: var(--stt-grafit); font-weight: 600; box-shadow: inset 0 -2px 0 var(--stt-yakut); }
.stt-tab-rail a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--stt-yakut); }
.stt-tab-rail sup { font-family: var(--stt-f-sayi); font-size: 12px; color: var(--stt-gri-2); font-variant-numeric: tabular-nums; vertical-align: baseline; }
.stt-tab-rail[data-az-harfler] { margin-top: 0; }
.stt-tab-rail[data-az-harfler] a { min-width: 44px; justify-content: center; padding: 0 12px; font-weight: 600; }
.stt-tab-slab[hidden] { display: none; }
.stt-tab-slab:focus-visible { outline-offset: 4px; }

/* ==========================================================================
   §20 SAYFA AİLELERİ (TASARIM-SISTEMI §08): ana sayfa bölümleri, cihaz,
   bölge, marka, hata kodu. Burada yalnız aileye özgü ekler.
   ========================================================================== */
/* Arıza bulucu (ana sayfa): JS yoksa gizli (aynı belirtiler cihaz sayfalarında). */
html:not(.stt-cursive) .stt-finder-notch { display: none; }
.stt-symptom-slab { display: grid; gap: var(--stt-a5); grid-template-columns: minmax(0, 1fr); align-items: center; }
.stt-symptom-slab > * { min-width: 0; }
@media (min-width: 900px) { .stt-symptom-slab { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.stt-symptom-slab > .stt-sketch-frame { max-width: 420px; justify-self: center; width: 100%; }
.stt-symptom-question-row { margin: 0 0 var(--stt-a3); font-family: var(--stt-f-baslik); font-size: var(--stt-y-3); font-weight: 600; color: var(--stt-grafit); }
.stt-symptom-key-series { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.stt-symptom-key-series button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; background: var(--stt-celik); color: var(--stt-metin); font: inherit; font-size: 15px; text-align: left; border-radius: var(--stt-r-pill); cursor: pointer; transition: background-color var(--stt-sure) var(--stt-egri), box-shadow var(--stt-sure) var(--stt-egri); }
.stt-symptom-key-series button span { flex: none; display: inline-grid; place-items: center; width: 28px; height: 22px; background: var(--stt-grafit); color: var(--stt-beyaz); font-family: var(--stt-f-sayi); font-size: 12px; font-weight: 700; border-radius: var(--stt-r-pill); }
.stt-symptom-key-series button:hover { background: var(--stt-celik-3); color: var(--stt-grafit); }
.stt-symptom-key-series button[aria-pressed="true"] { background: var(--stt-beyaz); color: var(--stt-grafit); box-shadow: inset 0 0 0 2px var(--stt-yakut); }
.stt-symptom-key-series button[aria-pressed="true"] span { background: var(--stt-yakut); }
.stt-symptom-key-series button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--stt-grafit); }
.stt-symptom-state { min-height: 3em; margin: var(--stt-a4) 0; color: var(--stt-gri); font-size: 14px; }
.stt-symptom-state b { color: var(--stt-grafit); }
/* Neden ServistServis.tr: dört plaka + katlanır fark dökümü. */
.stt-why-slabs h3 { margin: var(--stt-a3) 0 6px; }
.stt-why-slabs p { margin: 0; color: var(--stt-gri); font-size: var(--stt-y-kucuk); }
.stt-pill-glyph { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--stt-celik); color: var(--stt-grafit); border-radius: var(--stt-r-pill); }
.stt-diff-rule { padding: 18px 22px; }
.stt-diff-rule summary { display: flex; justify-content: space-between; gap: 12px; list-style: none; font-family: var(--stt-f-baslik); font-weight: 600; color: var(--stt-grafit); cursor: pointer; }
.stt-diff-rule summary::-webkit-details-marker { display: none; }
.stt-diff-rule summary::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--stt-grafit); -webkit-mask: var(--stt-m-asagi) center / contain no-repeat; mask: var(--stt-m-asagi) center / contain no-repeat; }
.stt-diff-rule[open] summary::after { transform: rotate(180deg); background: var(--stt-yakut); }
.stt-diff-rule dl { display: grid; margin: var(--stt-a4) 0 0; }
.stt-diff-rule dl > div { display: grid; gap: 4px 24px; padding: 12px 0; border-top: 1px solid var(--stt-cizgi-ince); }
@media (min-width: 720px) { .stt-diff-rule dl > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.stt-diff-rule dt { color: var(--stt-gri); text-decoration: line-through; text-decoration-color: var(--stt-cizgi-sert); }
.stt-diff-rule dd { margin: 0; color: var(--stt-metin); }
/* İl ve ilçeler (ana sayfa, çelik kesit): başlık + ölçü değerleri, harita, dizin. */
.stt-city-slab-top { display: grid; gap: var(--stt-a5); margin-bottom: var(--stt-a5); }
@media (min-width: 900px) { .stt-city-slab-top { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.stt-city-slab-top h2 { margin: 0 0 8px; }
.stt-city-slab-top p { margin: 0; color: var(--stt-gri); }
.stt-city-gauges { display: flex; margin: 0; box-shadow: inset 0 0 0 1px var(--stt-cizgi-sert); background: var(--stt-beyaz); }
.stt-city-gauges div { display: flex; flex-direction: column; padding: 12px 18px; }
.stt-city-gauges div + div { border-left: 1px solid var(--stt-cizgi); }
.stt-city-gauges dd { margin: 0; font-family: var(--stt-f-sayi); font-size: clamp(2rem, 1.6rem + 1.8vw, 3.25rem); font-weight: 700; line-height: 1; color: var(--stt-grafit); font-variant-numeric: tabular-nums; }
.stt-city-gauges dt { margin-top: 6px; font-family: var(--stt-f-baslik); font-size: 12.5px; font-weight: 600; color: var(--stt-gri); }
.stt-city-rule { margin-top: var(--stt-a4); }
.stt-city-rule summary { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--stt-f-baslik); font-weight: 600; color: var(--stt-grafit); cursor: pointer; }
/* Resmi hat kesitinden sonra gelen iki yan (küçük alet, marka × cihaz) nefes alsın. */
#resmi-hat + .stt-slab-pillar { margin-top: var(--stt-bolum); }
.stt-twin-left > .stt-slab-tile > .stt-tile-top + .stt-zone-gloss { margin-top: calc(var(--stt-a3) * -1); }
.stt-twin-left > .stt-slab-tile > p { max-width: 68ch; }
.stt-twin-left > .stt-slab-tile > .stt-slabs--device { margin-top: var(--stt-a2); }
.stt-slab-tile .stt-common-sought-row .stt-common-slabs { margin: 0; }

/* --- Hareket azaltma, yazdırma ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .stt-upper-slab, .stt-under-slab, .stt-slab-drawer, .stt-slab-drawer-cover, .stt-cookie-slab, .stt-last-slab-notch, .stt-seek-slab, .stt-tab-rail { display: none !important; }
  .stt-tab-slab[hidden] { display: block !important; }
  .stt-code-dropdown-detail { display: block; }
  .stt-folding-slab > summary::after { display: none; }
}

/* ==========================================================================
   §40–§41 İL HARİTASI (il ve ilçeler: parcalar/harita.html + js/harita.js;
   SVG'ler araclar/harita_uret.py). Plaka dili: köşe 0, yuvarlak düğme ve
   seçici, 1 px çizgi, gölge yok; yakut YALNIZ üzerine gelinen, odaklanan
   ya da listeden vurgulanan ildedir/ilçededir.
   ========================================================================== */
/* --- §40 Kap ve üst satır: Bütün iller · il seçici · durum --------------- */
.stt-city-map { margin: var(--stt-a4) 0 var(--stt-a6); border-top: 1px solid var(--stt-cizgi); border-bottom: 1px solid var(--stt-cizgi-ince); }
.stt-city-map[hidden] { display: none; }
.stt-city-map-top { display: flex; flex-wrap: wrap; align-items: end; gap: var(--stt-a3) var(--stt-a4); padding: var(--stt-a3) 0; border-bottom: 1px solid var(--stt-cizgi-ince); }
.stt-city-map-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; background: var(--stt-beyaz); color: var(--stt-grafit); box-shadow: inset 0 0 0 1.5px var(--stt-grafit); border-radius: var(--stt-r-pill); font: 600 15px/1 var(--stt-f-baslik); cursor: pointer; transition: background-color var(--stt-sure) var(--stt-egri), color var(--stt-sure) var(--stt-egri); }
.stt-city-map-back[hidden] { display: none; }
.stt-city-map-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.stt-city-map-back:hover { background: var(--stt-grafit); color: var(--stt-beyaz); }
.stt-city-map-back:focus-visible, .stt-city-map-city-box:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--stt-yakut); }
.stt-city-map-city { display: grid; gap: 6px; flex: 1 1 220px; min-width: 0; max-width: 320px; }
.stt-city-map-city label { font-family: var(--stt-f-baslik); font-size: var(--stt-y-etiket); font-weight: 600; color: var(--stt-grafit); }
.stt-city-map-city-box { width: 100%; min-height: 44px; padding: 0 44px 0 12px; border: 0; box-shadow: inset 0 0 0 1.5px var(--stt-cizgi-sert); border-radius: var(--stt-r-pill); color: var(--stt-metin); font: inherit; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; background: var(--stt-beyaz) right 12px center / 18px 18px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2E23' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); }
.stt-city-map-state { flex: 1 1 100%; margin: 0; color: var(--stt-gri); font-size: var(--stt-y-kucuk); font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .stt-city-map-state { flex: 1 1 0; padding-bottom: 12px; text-align: right; } }

/* --- §41 Tuval ve ilçe yanı: ince sınırlı iller, yakut yalnız etkin alan --- */
.stt-city-map-inner { display: grid; gap: var(--stt-a4); padding-top: var(--stt-a4); }
.stt-city-map-canvas { min-width: 0; transition: opacity var(--stt-sure) var(--stt-egri); }
.stt-city-map-canvas svg { display: block; width: 100%; height: auto; }
.stt-city-map-region { fill: var(--stt-celik-2); stroke: var(--stt-beyaz); stroke-width: 0.9; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill var(--stt-sure) var(--stt-egri); }
.stt-slab-notch--steel .stt-city-map-region { fill: var(--stt-beyaz); stroke: var(--stt-cizgi); }
.stt-city-map-region:hover, .stt-city-map-region:focus, .stt-city-map-region.stt-city-map-region--accent { fill: var(--stt-yakut); outline: none; }
.stt-city-map--loading .stt-city-map-canvas { opacity: 0.4; cursor: progress; }
.stt-city-map-side { min-width: 0; border-top: 1px solid var(--stt-cizgi); }
.stt-city-map-side[hidden] { display: none; }
.stt-city-map-side-top { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--stt-cizgi-ince); font-family: var(--stt-f-baslik); font-size: 1.125rem; font-weight: 600; }
.stt-city-map-side-top a { color: var(--stt-grafit); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.stt-city-map-side-top a:hover { text-decoration-color: var(--stt-yakut); }
.stt-city-map-districts { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: var(--stt-oluk); }
.stt-city-map-districts li { break-inside: avoid; }
.stt-city-map-districts a { display: flex; align-items: center; min-height: 44px; padding: 0 2px; border-bottom: 1px solid var(--stt-cizgi-ince); color: var(--stt-metin); text-decoration: none; }
.stt-city-map-districts a:hover, .stt-city-map-districts a:focus-visible { outline: none; color: var(--stt-yakut); border-bottom-color: var(--stt-yakut); }
@media (min-width: 1080px) {
  .stt-city-map--city-ajar .stt-city-map-inner { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .stt-city-map--city-ajar.stt-city-map--narrow .stt-city-map-inner { grid-template-columns: minmax(0, 1fr) 240px; }
  .stt-city-map-districts { columns: 1; max-height: 480px; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .stt-city-map-region, .stt-city-map-canvas, .stt-city-map-back { transition: none; } }
@media print { .stt-city-map { display: none !important; } }