/* ==========================================================================
   Servisjoy — stil dosyası (TASARIM-SISTEMI.md, "Güler yüz", Faz 3, 11 Eki 2026)

   Kimlik: BEYAZ zeminli, yumuşak ve sıcak. Sayfa ve kart beyaz (ak); ikincil
   yüzey tül (#FFF4F6). Koyu (#1E191C) başlık; kiraz (#BC1C4A) birincil düğme
   (BEYAZ yazı, 6,17:1), tebessüm yayı, odak, logodaki yaprak. Rubik (başlık) +
   Nunito Sans (gövde). Köşe dili YAPRAK: sol üst + sağ alt büyük, diğer ikisi
   küçük (22/6 px; düğme 14/4 px). Çerçeve yerine tül renk farkı; gölge,
   degrade, hap, tam daire YOK. Sınıf öneki sj-, belirteç öneki --sj-.
   Türkçe: text-transform: uppercase hiçbir yerde yok (İ/I).

   İskelet servisfer'in (bölüm sırası TASARIM-SISTEMI §08), görünüm Servisjoy'un.
     00 yazı dosyaları          10 yaprak rozet, ok listesi
     01 belirteçler             11 kod yaprağı
     02 taban, yazı tabanı      12 sekme yaprakları
     03 kap, iki yan, bölüm     13 soru yaprağı
     04 yazı rolleri            14 form, bilgi/uyarı yaprağı
     05 üst yaprak, Menü        15 ana sayfa bileşenleri
     06 düğmeler, ok bağlantı   16 mobil alt yaprak
     07 kartlar, yan yaprak     17 son yaprak, altbilgi, çerez
     08 adım yaprakları         18 sayfa tepesi, kurumsal ekler
     09 sayfa yolu              19 yardımcılar
     20 bölge ve cihaz grubu · 21 marka ve arıza kodu · 22 kurumsal, talep, 404
     40–41 il haritası
   ========================================================================== */

/* --- 00 Yazı dosyaları (CSP: font-src 'self'; Google Fonts'tan indirildi,
       Rubik (değişken 400–800) + Nunito Sans (değişken 400–800); latin + latin-ext alt kümesi:
       İ Ş Ğ ı ç ö ü dahil) ------------------------------------------------ */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/rubik-latin-ext.fb299d85c631.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: "Rubik";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/rubik-latin.94df5f5371c1.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: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/nunito-sans-latin-ext.3a97847bca8b.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: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/nunito-sans-latin.e31445dff877.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: ak, tül, koyu, kiraz (TASARIM-SISTEMI §02 — kontrastlar orada hesaplı) */
  --sj-ak: #ffffff;            /* sayfa zemini, kart */
  --sj-tul: #fff4f6;           /* tül: ikincil bölüm, altbilgi, girdi zemini */
  --sj-tul-2: #fce6ec;         /* yaprak fon, tablo başı, sekme rayı */
  --sj-tul-3: #f8d5df;         /* üzerine gelme, basılı yüzey, cihaz zemin gölgesi */
  --sj-koyu: #1e191c;          /* başlık, logo (akta 17,34) */
  --sj-metin: #2f282c;         /* gövde metni (akta 14,38; tülde 13,37) */
  --sj-gri: #5f565b;           /* ikincil metin (akta 7,07; tül-2'de 5,95) */
  --sj-gri-2: #6e6469;         /* yer tutucu, dip satır (akta 5,69; tül-2'de 4,79) */
  --sj-hat-ince: #f1e2e7;      /* 1 px kıl çizgi (süs) */
  --sj-hat: #e0c9d1;           /* ayırıcı, ikincil kenar (süs) */
  --sj-hat-sert: #8d7f85;      /* girdi kenarı (akta 3,81; tülde 3,55; ≥3:1) */
  --sj-kiraz: #bc1c4a;         /* birincil düğme, tebessüm yayı, odak (akta 6,17) */
  --sj-kiraz-bas: #97143a;     /* düğme üzerine gelme (beyaz yazıyla 8,48) */
  --sj-kiraz-ust: #ffffff;     /* kiraz düğmedeki yazı: BEYAZ */
  --sj-kiraz-acik: #fde4ea;    /* uyarı notu, "Cihazı kapatın" rozeti (kiraz yazı 5,13) */
  --sj-yesil: #24704a;         /* "Kendiniz bakın", başarı (akta 6,01) */

  /* imza: tebessüm yayı (maske) ve yaprak köşe */
  --sj-tebessum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M3 3c9 8 25 8 34 0' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --sj-yaprak: 22px 6px;        /* kart, panel, görsel levha: sol üst + sağ alt büyük */
  --sj-yaprak-orta: 14px 4px;   /* düğme, girdi, sekme */
  --sj-yaprak-kucuk: 10px 3px;  /* rozet, kod karosu */

  /* yazı aileleri */
  --sj-f-baslik: "Rubik", ui-rounded, "SF Pro Rounded", ui-sans-serif, system-ui, sans-serif;
  --sj-f-govde: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sj-f-sayi: "Rubik", ui-sans-serif, system-ui, sans-serif;
  --sj-f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* yazı ölçeği (mobil → masaüstü akışkan). Rubik yuvarlak ve iri: aralık sıfıra yakın. */
  --sj-y-dev: clamp(3rem, 2.1rem + 4.2vw, 5.25rem);
  --sj-y-manset: clamp(2.375rem, 1.7rem + 3vw, 4.125rem);
  --sj-y-1: clamp(1.9375rem, 1.5rem + 1.9vw, 3rem);
  --sj-y-2: clamp(1.4375rem, 1.25rem + 0.85vw, 2.0625rem);
  --sj-y-3: clamp(1.125rem, 1.08rem + 0.25vw, 1.3125rem);
  --sj-y-giris: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --sj-y-govde: 1.0625rem;     /* 17 px Nunito Sans */
  --sj-y-kucuk: 0.9375rem;     /* 15 px */
  --sj-y-etiket: 0.875rem;     /* 14 px */

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

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

  /* biçim: yaprak köşe (iki büyük + iki küçük); çerçeve yerine tül farkı */
  --sj-kil-kalinlik: 1px;
  --sj-vurgu-kalinlik: 3px;
  --sj-ust-boy: 68px;
  --sj-hat-boy: 64px;

  /* hareket: kısa, yumuşak çıkış (kaldırma/ölçekleme yok) */
  --sj-sure: 200ms;
  --sj-egri: cubic-bezier(0.22, 1, 0.36, 1);

  /* ikon maskeleri (renk currentColor ile; 2 px, yuvarlak uç) */
  --sj-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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.5 15 12l-5.5 5.5'/%3E%3C/svg%3E");
  --sj-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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5h13.5'/%3E%3Cpath d='m13 7.5 5 5-5 5'/%3E%3C/svg%3E");
  --sj-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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E");
  --sj-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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E");
  --sj-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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E");
  --sj-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.9l1.5 4.1-2.1 1.4a11.5 11.5 0 0 0 6.1 6.1l1.4-2.1 4.1 1.5v2.9a2.1 2.1 0 0 1-2.2 2.1C10.6 18.8 5.2 13.4 4.5 5.7a2.1 2.1 0 0 1 2.1-2.2z'/%3E%3C/svg%3E");
  --sj-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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6v.2'/%3E%3C/svg%3E");
  /* ok bağlantının yaprak karosundaki kiraz ok (iki tonlu) */
  --sj-ok-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC1C4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5h13'/%3E%3Cpath d='m13.5 7.5 5 5-5 5'/%3E%3C/svg%3E");
  --sj-secim-oku: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F565B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E");
}
@media (min-width: 720px) {
  :root { --sj-kenar: 24px; --sj-oluk: 20px; --sj-bolum: 72px; }
}
@media (min-width: 1080px) {
  :root { --sj-kenar: 40px; --sj-oluk: 24px; --sj-ust-boy: 76px; --sj-bolum: 96px; }
}
/* Koyu tema YOK. Yazdırmada tül tonları beyaza iner. */
@media print {
  :root {
    --sj-tul: #ffffff; --sj-tul-2: #ffffff; --sj-tul-3: #ffffff;
    --sj-koyu: #000000; --sj-metin: #111111; --sj-gri: #444444; --sj-gri-2: #555555;
    --sj-hat-ince: #cccccc; --sj-hat: #999999; --sj-hat-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(--sj-ust-boy) + var(--sj-a4));
}
body {
  margin: 0;
  background: var(--sj-ak);
  color: var(--sj-metin);
  font-family: var(--sj-f-govde);
  font-size: var(--sj-y-govde);
  line-height: 1.66;
  font-weight: 400;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--sj-koyu);
  font-family: var(--sj-f-baslik);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}
h1 { font-size: var(--sj-y-1); line-height: 1.1; letter-spacing: -0.018em; }
h2 { font-size: var(--sj-y-2); line-height: 1.18; }
h3 { font-size: var(--sj-y-3); line-height: 1.3; letter-spacing: 0; }
h4 { font-size: 1rem; font-family: var(--sj-f-govde); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 var(--sj-a4); max-width: 68ch; }
ul, ol { margin: 0; padding: 0; }
/* Bağlantı: yazı rengi + 1 px sert hat alt çizgi; üzerine gelince kiraz ve 2 px. */
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--sj-hat-sert); text-decoration-thickness: 1px; text-underline-offset: 0.24em; }
a:hover { color: inherit; text-decoration-color: var(--sj-kiraz); text-decoration-thickness: 2px; }
strong, b { font-weight: 700; color: var(--sj-koyu); }
code, kbd, samp { font-family: var(--sj-f-mono); font-size: 0.92em; font-weight: 500; }
/* hr: ortada küçük tebessüm yayı, iki yanda tül çizgi */
hr { border: 0; height: 12px; margin: var(--sj-a6) 0; background: linear-gradient(var(--sj-hat), var(--sj-hat)) left center / calc(50% - 30px) 1px no-repeat, linear-gradient(var(--sj-hat), var(--sj-hat)) right center / calc(50% - 30px) 1px no-repeat; position: relative; overflow: visible; }
hr::after { content: ""; position: absolute; left: 50%; top: 0; width: 40px; height: 12px; margin-left: -20px; background: var(--sj-kiraz); -webkit-mask: var(--sj-tebessum) center / contain no-repeat; mask: var(--sj-tebessum) center / contain no-repeat; }
table { font-variant-numeric: tabular-nums; }
::selection { background: var(--sj-kiraz); color: var(--sj-kiraz-ust); }
/* Odak: 3 px kiraz çizgi, 2 px açıklık; yaprak köşeyi izler. */
:focus-visible { outline: 3px solid var(--sj-kiraz); outline-offset: 2px; }
.sj-ekran-okur {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sj-icerige-atla {
  position: absolute; left: var(--sj-a4); top: -100px; z-index: 100;
  background: var(--sj-koyu); color: var(--sj-ak); padding: var(--sj-a2) var(--sj-a4);
  border-radius: var(--sj-yaprak-orta); font-weight: 700; text-decoration: none;
}
.sj-icerige-atla:focus { top: var(--sj-a2); }

/* ==========================================================================
   FAZ 3 BİLEŞENLERİ (TASARIM-SISTEMI §06 adları, §08 kompozisyonları).
   Bölüm SIRASI servisfer şablonlarından; görünüm Servisjoy'un: ak ↔ tül,
   yaprak köşe, tebessüm yayı, çizgisiz yumuşak düz çizim. Gölge, degrade,
   hap, tam daire YOK.
   ========================================================================== */

/* --- 03 Kap, iki yan, bölüm, bölüm başı -------------------------------- */
.sj-yaprak-kabi { max-width: var(--sj-kap); margin-inline: auto; padding-inline: var(--sj-kenar); }
.sj-ana-icerik { display: block; min-height: 50vh; }
.sj-yaprak-ikili { display: grid; gap: var(--sj-a6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.sj-yaprak-ikili > * { min-width: 0; }
.sj-ikili-govde, .sj-ikili-kenar { min-width: 0; }  /* sağ sütun yan yaprak; yapışkan DEĞİL */
@media (min-width: 1080px) { .sj-yaprak-ikili { grid-template-columns: minmax(0, 1fr) var(--sj-yan); gap: 48px; } }
/* Bölüm: ak zeminde açık aralık; --tul yumuşak kenarlı tül yaprak bant
   (servisfer'in koyu bant dönüşümünün Servisjoy karşılığı: ak ↔ tül). */
.sj-yaprak-bolumu { margin-top: calc(var(--sj-bolum) * 0.62); }
.sj-yaprak-bolumu--tul { padding-block: calc(var(--sj-bolum) * 0.56); background: var(--sj-tul); margin-inline: clamp(0px, 1.1vw, 16px); border-radius: clamp(0px, 3.2vw, 48px) clamp(0px, 0.9vw, 12px); }
.sj-yaprak-bolumu--tul + .sj-yaprak-bolumu--tul { margin-top: 12px; }
.sj-yaprak-basligi { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 20px; margin-bottom: 22px; }
.sj-yaprak-basligi > div { min-width: 0; }
.sj-yaprak-basligi h2 { display: flex; align-items: center; gap: 12px; margin: 0; }
.sj-yaprak-basligi h2::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 9px 2px; background: var(--sj-kiraz); }
.sj-yaprak-basligi p { margin: 6px 0 0 28px; color: var(--sj-gri); font-size: var(--sj-y-kucuk); }
.sj-dikey-akis { display: grid; gap: var(--sj-a5); }
.sj-dikey-akis > * { min-width: 0; }

/* --- 04 Yazı rolleri ---------------------------------------------------- */
.sj-tebessum-etiketi { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--sj-f-govde); font-size: var(--sj-y-etiket); font-weight: 700; line-height: 1.25; color: var(--sj-kiraz); }
.sj-tebessum-etiketi::before { content: ""; flex: none; width: 26px; height: 9px; background: var(--sj-kiraz); -webkit-mask: var(--sj-tebessum) center / contain no-repeat; mask: var(--sj-tebessum) center / contain no-repeat; }
.sj-tebessum-manset { font-family: var(--sj-f-baslik); font-weight: 600; font-size: var(--sj-y-manset); line-height: 1.06; letter-spacing: -0.022em; color: var(--sj-koyu); margin: 0; text-wrap: balance; overflow-wrap: break-word; }
.sj-gulen-sozcuk { position: relative; display: inline-block; white-space: nowrap; }
.sj-gulen-sozcuk::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -0.2em; height: 0.3em; background: var(--sj-kiraz); -webkit-mask: var(--sj-tebessum) center / 100% 100% no-repeat; mask: var(--sj-tebessum) center / 100% 100% no-repeat; }
.sj-yaprak-girisi { font-size: var(--sj-y-giris); line-height: 1.55; color: var(--sj-metin); max-width: 56ch; margin: 18px 0 0; }
.sj-iri-rakam { font-family: var(--sj-f-sayi); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; color: var(--sj-koyu); }
.sj-dev-sayi { font-family: var(--sj-f-sayi); font-weight: 700; font-size: var(--sj-y-dev); line-height: 1; color: var(--sj-kiraz); font-variant-numeric: tabular-nums; }
.sj-uzun-yazi { max-width: 68ch; }
.sj-uzun-yazi > :last-child { margin-bottom: 0; }
.sj-uzun-yazi h2 { margin: var(--sj-a6) 0 10px; font-size: var(--sj-y-3); }
.sj-uzun-yazi h3 { margin: var(--sj-a5) 0 8px; }
.sj-uzun-yazi ul, .sj-uzun-yazi ol { padding-left: 1.3rem; margin: 0 0 var(--sj-a4); }
.sj-uzun-yazi li { margin-bottom: 6px; }
.sj-uzun-yazi li::marker { color: var(--sj-kiraz); }

/* --- 05 Üst yaprak (başlık), açılır menü, bul satırı, Menü yaprağı ------ */
/* servisfer'in tek satırı: logo · 7 öğe (3'ü açılır; ≥1240 px) · bul ·
   telefon (≥1560 px) · "Servis iste" · Menü (<1240 px). Beyaz, tül kıl çizgi. */
.sj-ust-yaprak { position: sticky; top: 0; z-index: 40; background: var(--sj-ak); border-bottom: 1px solid var(--sj-hat-ince); }
.sj-ust-yaprak-ic { display: flex; align-items: center; gap: 12px; height: var(--sj-ust-boy); }
.sj-ust-yaprak-logo { flex: none; display: block; line-height: 0; }
.sj-ust-yaprak-logo img { height: 34px; width: auto; }
.sj-ust-yaprak-menu { display: none; list-style: none; margin: 0 auto 0 14px; padding: 0; gap: 2px; }
.sj-ust-yaprak-menu > li { position: relative; }
.sj-ust-yaprak-menu > li > a { display: inline-flex; align-items: center; gap: 4px; min-height: 42px; padding: 0 11px; border-radius: var(--sj-yaprak-orta); font-size: 15px; font-weight: 700; color: var(--sj-koyu); text-decoration: none; white-space: nowrap; transition: background-color var(--sj-sure) var(--sj-egri), border-radius var(--sj-sure) var(--sj-egri); }
.sj-ust-yaprak-menu > li > a:hover, .sj-ust-yaprak-menu > li:focus-within > a { background: var(--sj-tul); }
.sj-ust-yaprak-menu > li > a[aria-current] { background: var(--sj-tul); color: var(--sj-kiraz); }
.sj-yaprak-acilir > a::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--sj-m-asagi) center / contain no-repeat; mask: var(--sj-m-asagi) center / contain no-repeat; transition: transform var(--sj-sure) var(--sj-egri); }
.sj-yaprak-acilir:hover > a::after, .sj-yaprak-acilir:focus-within > a::after { transform: rotate(180deg); }
/* Açılır liste: tül yaprak, basit liste (mega menü YOK). */
.sj-yaprak-acilir-listesi { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 45; min-width: 250px; list-style: none; margin: 0; padding: 10px; background: var(--sj-tul); border-radius: var(--sj-yaprak); }
.sj-yaprak-acilir-listesi::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.sj-yaprak-acilir:hover > .sj-yaprak-acilir-listesi, .sj-yaprak-acilir:focus-within > .sj-yaprak-acilir-listesi { display: grid; gap: 2px; }
.sj-yaprak-acilir-listesi a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--sj-yaprak-orta); color: var(--sj-metin); font-size: 15px; text-decoration: none; white-space: nowrap; }
.sj-yaprak-acilir-listesi a:hover { background: var(--sj-ak); color: var(--sj-kiraz); }
.sj-acilir-basi { padding: 10px 12px 2px; font-family: var(--sj-f-baslik); font-weight: 600; font-size: 13.5px; color: var(--sj-kiraz); }
.sj-acilir-basi a { display: inline; min-height: 0; padding: 0; color: var(--sj-kiraz); font-size: inherit; }
.sj-acilir-basi a:hover { background: none; text-decoration: underline; }
.sj-acilir-basi:first-child { padding-top: 2px; }
.sj-ust-yaprak-eylem { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sj-ust-yaprak-tel { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; font-family: var(--sj-f-sayi); font-weight: 600; color: var(--sj-koyu); text-decoration: none; white-space: nowrap; }
.sj-ust-yaprak-tel svg { width: 18px; height: 18px; color: var(--sj-kiraz); }
.sj-ust-yaprak-tel:hover { color: var(--sj-kiraz); }
.sj-ust-yaprak-eylem .sj-servis-iste { display: none; }
.sj-bul-dugmesi { color: var(--sj-koyu); }
@media (max-width: 719px) { .sj-ust-yaprak-hat span { display: none; } .sj-ust-yaprak-hat { width: 44px; padding: 0; } }
@media (max-width: 379px) { .sj-ust-yaprak-logo img { height: 28px; } .sj-ust-yaprak-eylem { gap: 4px; } }
@media (min-width: 720px) { .sj-ust-yaprak-eylem .sj-servis-iste { display: inline-flex; } }
@media (min-width: 1240px) {
  .sj-ust-yaprak-menu { display: flex; }
  .sj-ust-yaprak-eylem { margin-left: 0; }
  .sj-ust-yaprak-eylem .sj-menu-dugmesi { display: none; }
}
@media (min-width: 1560px) { .sj-ust-yaprak-tel { display: inline-flex; } }
/* Bul satırı: büyüteç başlığın altında tam genişlik bul kutusunu açar. */
.sj-bul-yapragi-satiri { padding-block: 0 14px; }
/* Bul kutusu: tül zemin, yaprak köşe, kiraz kenar odakta. --iri 404 ve dizin sayfalarında. */
.sj-bul-yapragi { position: relative; display: flex; align-items: center; width: 100%; min-height: 48px; border: 1.5px solid var(--sj-hat-sert); border-radius: var(--sj-yaprak-orta); background: var(--sj-tul); transition: border-color var(--sj-sure) var(--sj-egri), background-color var(--sj-sure) var(--sj-egri); }
.sj-bul-yapragi:focus-within { border-color: var(--sj-kiraz); background: var(--sj-ak); }
.sj-bul-yapragi input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; padding: 0 8px 0 16px; font: inherit; font-size: 16px; color: var(--sj-koyu); -webkit-appearance: none; appearance: none; }
.sj-bul-yapragi input::placeholder { color: var(--sj-gri-2); }
.sj-bul-yapragi input:focus-visible { outline: none; }
.sj-bul-yapragi input::-webkit-search-cancel-button { display: none; }
.sj-bul-yapragi button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 3px; border: 0; border-radius: 12px 3px; background: var(--sj-tul-2); color: var(--sj-koyu); cursor: pointer; transition: background-color var(--sj-sure) var(--sj-egri), border-radius var(--sj-sure) var(--sj-egri); }
.sj-bul-yapragi button:hover { background: var(--sj-tul-3); border-radius: 3px 12px; }
.sj-bul-yapragi button svg { width: 18px; height: 18px; }
.sj-bul-yapragi--iri { min-height: 62px; }
.sj-bul-yapragi--iri input { height: 58px; font-size: 18px; padding-left: 22px; }
.sj-bul-yapragi--iri button { width: 52px; height: 52px; margin-right: 4px; border-radius: 16px 4px; background: var(--sj-kiraz); color: var(--sj-kiraz-ust); }
.sj-bul-yapragi--iri button:hover { background: var(--sj-kiraz-bas); }
form[data-bul] { position: relative; }
/* Öneri yaprağı (servisjoy.js "Bul kutuları"). */
.sj-oneri-yapragi { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; list-style: none; margin: 0; padding: 8px; max-height: min(60vh, 480px); overflow-y: auto; background: var(--sj-ak); border: 1px solid var(--sj-hat); border-radius: var(--sj-yaprak); }
.sj-oneri-yapragi--yukari { top: auto; bottom: calc(100% + 6px); }
.sj-oneri-yapragi a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; min-height: 44px; padding: 11px 12px; border-radius: var(--sj-yaprak-orta); color: var(--sj-koyu); text-decoration: none; }
.sj-oneri-yapragi a[aria-selected="true"], .sj-oneri-yapragi a:hover { background: var(--sj-tul); }
.sj-oneri-yapragi-turu { color: var(--sj-gri); font-size: 13px; text-align: right; }
.sj-oneri-kodu .sj-oneri-yapragi-adi { font-family: var(--sj-f-sayi); font-weight: 700; color: var(--sj-kiraz); }
.sj-oneri-yapragi-bos { padding: 10px 12px; color: var(--sj-gri); font-size: var(--sj-y-kucuk); }
/* Menü yaprağı (#dizin): sağdan gelir; tül zemin, sol üst köşe büyük yaprak. */
body.sj-menu-acikken { overflow: hidden; }
.sj-menu-ortusu { position: fixed; inset: 0; z-index: 70; background: rgba(30, 25, 28, 0.38); }
.sj-menu-yapragi { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(420px, 100%); overflow-y: auto; overscroll-behavior: contain; padding: var(--sj-a4) var(--sj-a5) var(--sj-a7); background: var(--sj-tul); }
@media (min-width: 480px) { .sj-menu-yapragi { border-radius: 40px 0 0 10px; } }
.sj-menu-yapragi-ust { display: flex; justify-content: space-between; align-items: center; gap: var(--sj-a3); margin-bottom: var(--sj-a4); }
.sj-menu-yapragi-ust img { height: 30px; width: auto; }
.sj-menu-yapragi-eylem { display: grid; gap: var(--sj-a2); margin-bottom: var(--sj-a5); }
.sj-menu-yapragi-eylem > a:first-child:not(.sj-yaprak-dugme) { font-weight: 700; color: var(--sj-koyu); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.sj-menu-obegi { margin-top: var(--sj-a4); padding: 14px 16px; background: var(--sj-ak); border-radius: var(--sj-yaprak); }
.sj-menu-obegi h2 { font-size: 1.0625rem; margin: 0 0 4px; }
.sj-menu-obegi h2 a { text-decoration: none; }
.sj-menu-obegi h2 a:hover { color: var(--sj-kiraz); }
.sj-menu-obegi ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 14px; }
.sj-menu-obegi li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--sj-metin); text-decoration: none; font-size: 15px; }
.sj-menu-obegi li a:hover { color: var(--sj-kiraz); }
.sj-menu-obegi .sj-acilir-basi { flex-basis: 100%; padding: 6px 0 0; }
.sj-menu-yapragi-dip { margin: var(--sj-a5) 0 0; color: var(--sj-gri); font-size: 15px; max-width: none; }
/* Dil yaprağı (Menü yaprağının dibinde). */
.sj-dil-yapragi { font-size: var(--sj-y-kucuk); }
.sj-dil-yapragi summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--sj-yaprak-orta); background: var(--sj-tul-2); color: var(--sj-koyu); font-weight: 700; }
.sj-dil-yapragi summary::-webkit-details-marker { display: none; }
.sj-dil-yapragi ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--sj-a4); margin: var(--sj-a2) 0 0; }
.sj-dil-yapragi a { display: inline-block; padding: 10px 0; color: var(--sj-gri); text-decoration: none; }
.sj-dil-yapragi a:hover, .sj-dil-yapragi a[aria-current="true"] { color: var(--sj-kiraz); }

/* --- 06 Düğmeler, ok bağlantı ------------------------------------------ */
/* Yaprak köşe 14/4; üzerine gelince köşeler yer değiştirir (yaprak döner). */
.sj-yaprak-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 0; border-radius: var(--sj-yaprak-orta); font-family: var(--sj-f-baslik); font-weight: 500; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--sj-sure) var(--sj-egri), color var(--sj-sure) var(--sj-egri), border-radius var(--sj-sure) var(--sj-egri); }
.sj-yaprak-dugme svg { width: 18px; height: 18px; flex: none; }
.sj-yaprak-dugme b { font-family: var(--sj-f-sayi); font-weight: 600; font-variant-numeric: tabular-nums; color: inherit; }
.sj-yaprak-dugme--kiraz { background: var(--sj-kiraz); color: var(--sj-kiraz-ust); }
.sj-yaprak-dugme--kiraz:hover { background: var(--sj-kiraz-bas); color: var(--sj-kiraz-ust); border-radius: 4px 14px; }
.sj-yaprak-dugme--tul { background: var(--sj-tul-2); color: var(--sj-koyu); }
.sj-yaprak-dugme--tul:hover { background: var(--sj-tul-3); color: var(--sj-koyu); border-radius: 4px 14px; }
.sj-yaprak-dugme--ak { background: var(--sj-ak); color: var(--sj-kiraz); }
.sj-yaprak-dugme--ak:hover { background: var(--sj-tul-2); color: var(--sj-kiraz-bas); border-radius: 4px 14px; }
.sj-yaprak-dugme--sade { background: transparent; color: var(--sj-koyu); padding-inline: 10px; }
.sj-yaprak-dugme--sade:hover { color: var(--sj-kiraz); background: var(--sj-tul); }
.sj-yaprak-dugme--kucuk { min-height: 44px; font-size: 15px; padding: 0 18px; }
.sj-yaprak-dugme--genis { width: 100%; }
.sj-yaprak-dugme--simge { width: 50px; padding: 0; flex: none; }
.sj-yaprak-dugme--kucuk.sj-yaprak-dugme--simge { width: 44px; }
.sj-yaprak-dugme[aria-disabled="true"] { background: var(--sj-tul); color: var(--sj-gri-2); cursor: not-allowed; }
.sj-yaprak-dugme[aria-busy="true"] { opacity: 0.72; cursor: progress; }
.sj-yaprak-eylemleri { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sj-yaprak-eylemleri > .sj-yaprak-dugme { max-width: 100%; }
@media (max-width: 479px) { .sj-yaprak-eylemleri > .sj-yaprak-dugme { flex: 1 1 100%; white-space: normal; } }
.sj-gulen-ok { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--sj-koyu); text-decoration: none; }
.sj-gulen-ok::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 12px 3px; background: var(--sj-tul-2) var(--sj-ok-ikon) center / 16px 16px no-repeat; transition: border-radius var(--sj-sure) var(--sj-egri), background-color var(--sj-sure) var(--sj-egri); }
.sj-gulen-ok:hover { color: var(--sj-kiraz); text-decoration: none; }
.sj-gulen-ok:hover::after { border-radius: 3px 12px; background-color: var(--sj-tul-3); }

/* --- 07 Yaprak kart, kart ızgarası, cihaz kartı, yan yaprak ------------- */
.sj-yaprak-kart { background: var(--sj-ak); border: 1px solid var(--sj-hat-ince); border-radius: var(--sj-yaprak); padding: 22px; min-width: 0; }
.sj-yaprak-kart > :last-child { margin-bottom: 0; }
.sj-yaprak-kart--tul { background: var(--sj-tul); border-color: transparent; }
.sj-yaprak-bolumu--tul .sj-yaprak-kart:not(.sj-yaprak-kart--tul) { border-color: transparent; }
.sj-yaprak-bolumu--tul .sj-yaprak-kart--tul { background: var(--sj-ak); }
.sj-yaprak-kart h3 { margin: 0 0 6px; }
.sj-yaprak-kart > p { color: var(--sj-metin); }
a.sj-yaprak-kart { display: block; color: inherit; text-decoration: none; transition: background-color var(--sj-sure) var(--sj-egri), border-radius var(--sj-sure) var(--sj-egri); }
a.sj-yaprak-kart:hover { background: var(--sj-tul); border-color: transparent; border-radius: 6px 22px; }
@media (max-width: 719px) { .sj-yaprak-kart { padding: 18px; } }
.sj-yaprak-kartlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.sj-yaprak-kartlar > * { min-width: 0; }
@media (min-width: 720px) { .sj-yaprak-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .sj-yaprak-kartlar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sj-yaprak-kartlar--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sj-kart-tepesi { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--sj-a4); margin-bottom: var(--sj-a4); }
.sj-kart-tepesi h2, .sj-kart-tepesi h3 { margin: 0; }
.sj-kart-tepesi p { margin: 6px 0 0; color: var(--sj-gri); font-size: var(--sj-y-kucuk); }
.sj-kart-tepesi small { color: var(--sj-gri); font-size: 14px; }
.sj-kart-tepesi h3 a { text-decoration: none; }
.sj-kart-tepesi h3 a:hover { color: var(--sj-kiraz); }
/* Çizim yaprağı: yaprak fonlu yumuşak çizim (görselin kendi fonu tül yaprak). */
.sj-cizim-yapragi { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 18px 5px; background: var(--sj-ak); }
.sj-cizim-yapragi picture { display: contents; }
.sj-cizim-yapragi img { width: 100%; height: 100%; object-fit: contain; }
/* Cihaz kartı: çerçevesiz; çizim + ad + kiraz ok karosu; üzerine gelince tül, yaprak döner. */
.sj-yaprak-kart.sj-yaprak-cihaz { padding: 10px 10px 14px; border-color: transparent; background: transparent; }
.sj-yaprak-cihaz { display: block; color: inherit; text-decoration: none; transition: background-color var(--sj-sure) var(--sj-egri), border-radius var(--sj-sure) var(--sj-egri); }
a.sj-yaprak-cihaz:hover, .sj-yaprak-cihaz--noktali:hover { background: var(--sj-tul); border-radius: 6px 22px; }
.sj-yaprak-cihaz-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 6px 0; }
.sj-yaprak-cihaz-alt h3 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.sj-yaprak-cihaz-alt p { margin: 2px 0 0; font-size: 14px; color: var(--sj-gri); }
.sj-yaprak-cihaz-alt::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 12px 3px; background: var(--sj-tul-2) var(--sj-ok-ikon) center / 16px 16px no-repeat; transition: border-radius var(--sj-sure) var(--sj-egri); }
a.sj-yaprak-cihaz:hover .sj-yaprak-cihaz-alt::after { border-radius: 3px 12px; }
.sj-yaprak-cihaz-bag { display: block; color: inherit; text-decoration: none; }
.sj-cihaz-numarasi { margin-right: 8px; font-family: var(--sj-f-sayi); font-size: 14px; font-weight: 700; color: var(--sj-kiraz); }
.sj-yaprak-cihaz-eylem { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 10px 6px 0; font-size: 14px; }
.sj-yaprak-cihaz-eylem a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; color: var(--sj-gri); text-decoration: none; }
.sj-yaprak-cihaz-eylem a:hover { color: var(--sj-koyu); }
.sj-yaprak-cihaz-eylem .sj-cihaz-servis-iste { color: var(--sj-kiraz); font-weight: 700; }
.sj-yaprak-cihaz-eylem .sj-cihaz-servis-iste:hover { color: var(--sj-kiraz-bas); }
.sj-yaprak-cihaz-eylem svg { width: 16px; height: 16px; }
/* Cihaz ızgarası dar ekranda iki sütun, kısa alt satır. */
@media (max-width: 719px) {
  .sj-yaprak-kartlar--cihaz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sj-yaprak-kartlar--cihaz .sj-yaprak-cihaz { padding: 6px 6px 10px; }
  .sj-yaprak-kartlar--cihaz .sj-yaprak-cihaz-alt { padding: 8px 4px 0; }
  .sj-yaprak-kartlar--cihaz .sj-yaprak-cihaz-alt::after { display: none; }
  .sj-yaprak-kartlar--cihaz .sj-yaprak-cihaz-alt h3 { font-size: 15.5px; }
  .sj-yaprak-kartlar--cihaz .sj-yaprak-cihaz-alt p { font-size: 13px; }
  .sj-yaprak-kartlar--cihaz .sj-yaprak-cihaz-eylem { font-size: 13px; padding-inline: 2px; }
}
/* Yan yaprak (servisfer'in yan kartı): tül, yapışkan DEĞİL. */
.sj-yan-yaprak { background: var(--sj-tul); border-radius: var(--sj-yaprak); padding: 24px; min-width: 0; }
.sj-yaprak-bolumu--tul .sj-yan-yaprak { background: var(--sj-ak); }
.sj-yan-yaprak > :last-child { margin-bottom: 0; }
.sj-yan-yaprak h2, .sj-yan-yaprak-baslik { font-family: var(--sj-f-baslik); font-weight: 600; font-size: 19px; line-height: 1.3; margin: 0 0 12px; color: var(--sj-koyu); }
.sj-yan-yaprak dl { margin: 0 0 var(--sj-a4); }
.sj-yan-yaprak dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sj-hat-ince); }
.sj-yan-yaprak dt { color: var(--sj-gri); font-size: 15px; }
.sj-yan-yaprak dd { margin: 0; color: var(--sj-koyu); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sj-yan-yaprak .sj-yaprak-dugme + .sj-yaprak-dugme { margin-top: var(--sj-a2); }
.sj-yan-yaprak .sj-adim-yapraklari { margin-bottom: var(--sj-a4); }
.sj-yan-yaprak-notu { margin: var(--sj-a3) 0 0; font-size: 14px; color: var(--sj-gri); }
.sj-yan-yaprak .sj-bilgi-dizelgesi > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.sj-yan-yaprak .sj-bilgi-dizelgesi dd { text-align: left; font-weight: 400; color: var(--sj-metin); }

/* --- 08 Adım yaprakları (imza): süreç ve "önce siz bakın" ---------------- */
.sj-adim-yapraklari { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; counter-reset: sj-adim; }
@media (min-width: 900px) { .sj-adim-yapraklari { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } .sj-adim-yapraklari--uc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sj-adim-yapraklari > li { position: relative; padding: 20px 20px 22px; border-radius: var(--sj-yaprak); background: var(--sj-ak); border: 1px solid var(--sj-hat-ince); min-width: 0; counter-increment: sj-adim; }
.sj-yaprak-bolumu--tul .sj-adim-yapraklari > li { border-color: transparent; }
.sj-adim-yapraklari > li > b:first-child { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 18px 5px; background: var(--sj-tul-2); color: var(--sj-kiraz); font-family: var(--sj-f-baslik); font-weight: 700; font-size: 18px; }
.sj-adim-yapragi--simdi { background: var(--sj-tul) !important; border-color: transparent !important; }
.sj-adim-yapragi--simdi > b:first-child { background: var(--sj-kiraz); color: var(--sj-kiraz-ust); }
.sj-adim-yapraklari h3 { margin: 0 0 6px; font-size: 19px; }
.sj-adim-yapraklari p { margin: 0; color: var(--sj-gri); font-size: var(--sj-y-kucuk); }
@media (min-width: 900px) { .sj-adim-yapraklari:not(.sj-adim-yapraklari--dikey) > li + li::before { content: ""; position: absolute; left: -32px; top: 32px; width: 36px; height: 12px; background: var(--sj-tul-3); -webkit-mask: var(--sj-tebessum) center / contain no-repeat; mask: var(--sj-tebessum) center / contain no-repeat; } }
/* Dikey: okuma sütununda ve yan yaprakta; rozet solda, yaylar yok. */
.sj-adim-yapraklari--dikey { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
.sj-adim-yapraklari--dikey > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 16px; }
.sj-adim-yapraklari--dikey > li > b:first-child { grid-row: span 3; width: 34px; height: 34px; margin: 0; font-size: 15px; border-radius: 15px 4px; }
.sj-adim-yapraklari--dikey h3 { font-size: 17px; margin: 4px 0 4px; }

/* --- 09 Sayfa yolu (kırıntı) ------------------------------------------- */
.sj-yaprak-yolu ol { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; margin: 0 0 14px; padding: 0; font-size: 14px; color: var(--sj-gri); }
.sj-yaprak-yolu li + li::before { content: "·"; margin-right: 8px; color: var(--sj-kiraz); font-weight: 900; }
.sj-yaprak-yolu a { color: var(--sj-gri); text-decoration: none; }
.sj-yaprak-yolu a:hover { color: var(--sj-kiraz); text-decoration: underline; }
.sj-yaprak-yolu [aria-current] { color: var(--sj-koyu); font-weight: 600; }

/* --- 10 Yaprak rozet, rozet dizisi, ok listesi -------------------------- */
.sj-yaprak-rozet { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: var(--sj-yaprak-kucuk); background: var(--sj-tul-2); font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--sj-koyu); white-space: nowrap; text-decoration: none; }
a.sj-yaprak-rozet { min-height: 38px; padding: 0 14px; border-radius: var(--sj-yaprak-orta); background: var(--sj-ak); border: 1.5px solid var(--sj-tul-3); font-size: 14.5px; font-weight: 600; transition: background-color var(--sj-sure) var(--sj-egri), border-color var(--sj-sure) var(--sj-egri); }
a.sj-yaprak-rozet:hover { background: var(--sj-tul); border-color: var(--sj-kiraz); color: var(--sj-koyu); }
.sj-yaprak-rozet--evde { color: var(--sj-yesil); background: #e5f2ea; }
.sj-yaprak-rozet--usta { color: var(--sj-koyu); background: var(--sj-tul-2); }
.sj-yaprak-rozet--dur { color: var(--sj-kiraz-ust); background: var(--sj-kiraz); }
.sj-rozet-dizisi { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
/* Ok listesi: satırlar arasında tül kıl, sağda küçük kiraz ok; üzerine gelince tül yaprak. */
.sj-ok-listesi { list-style: none; margin: 0; padding: 0; }
.sj-ok-satiri { display: flex; align-items: center; gap: var(--sj-a3); min-height: 50px; padding: 9px 8px; border-top: 1px solid var(--sj-hat-ince); }
.sj-ok-satiri:first-child { border-top: 0; }
.sj-ok-satiri > a { flex: 1; min-width: 0; color: var(--sj-koyu); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.sj-ok-satiri > a:hover { color: var(--sj-kiraz); }
.sj-ok-satiri:has(> a):hover { background: var(--sj-tul); border-radius: var(--sj-yaprak-orta); }
.sj-ok-satiri small { flex: none; color: var(--sj-gri); font-size: 14px; font-variant-numeric: tabular-nums; }
.sj-ok-satiri:has(> a)::after { content: ""; flex: none; width: 16px; height: 16px; background: var(--sj-kiraz); -webkit-mask: var(--sj-m-ok) center / contain no-repeat; mask: var(--sj-m-ok) center / contain no-repeat; }
.sj-ok-satiri > span { flex: 1; min-width: 0; }
.sj-ok-satiri:not(:has(> a))::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 4px 1px; background: var(--sj-tul-3); }
.sj-ok-satiri-notu { display: inline-block; width: 100%; margin-top: 2px; color: var(--sj-gri); font-size: 14px; font-weight: 400; }
.sj-ok-listesi--sutunlu { columns: 1; column-gap: var(--sj-a6); }
.sj-ok-listesi--sutunlu .sj-ok-satiri { break-inside: avoid; border-top: 0; border-bottom: 1px solid var(--sj-hat-ince); min-height: 48px; }
.sj-ok-listesi--dortlu { columns: 2; column-gap: var(--sj-a4); }
@media (max-width: 559px) { .sj-ok-listesi--dortlu small { display: none; } }
@media (min-width: 560px) { .sj-ok-listesi--sutunlu { columns: 2; } }
@media (min-width: 1080px) {
  .sj-ok-listesi--sutunlu { columns: 3; }
  .sj-ok-listesi--dortlu { columns: 4; }
  .sj-ikili-govde .sj-ok-listesi--sutunlu, .sj-yaprak-kartlar > .sj-yaprak-kart .sj-ok-listesi--sutunlu { columns: 2; }
}

/* --- 11 Kod yaprağı (arıza kodu tablosu) -------------------------------- */
.sj-kod-yapragi { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 15px; }
.sj-kod-yapragi caption { text-align: left; padding: 0 4px 4px; color: var(--sj-gri); font-size: 14px; }
.sj-kod-yapragi thead th { text-align: left; font-size: 13.5px; font-weight: 700; color: var(--sj-gri); padding: 0 14px; background: transparent; }
.sj-kod-yapragi tbody td, .sj-kod-yapragi tbody th { text-align: left; padding: 12px 14px; background: var(--sj-tul); vertical-align: middle; overflow-wrap: anywhere; }
.sj-yaprak-bolumu--tul .sj-kod-yapragi tbody td, .sj-yaprak-bolumu--tul .sj-kod-yapragi tbody th, .sj-yaprak-kart--tul .sj-kod-yapragi tbody td { background: var(--sj-ak); }
.sj-kod-yapragi tbody tr > :first-child { border-radius: 16px 0 0 4px; }
.sj-kod-yapragi tbody tr > :last-child { border-radius: 0 4px 16px 0; }
.sj-kod-yapragi td b { display: block; font-weight: 700; color: var(--sj-koyu); }
.sj-kod-yapragi td b + span { display: block; color: var(--sj-gri); font-size: 14px; }
.sj-kod-yapragi tr:target > * { background: var(--sj-kiraz-acik); }
.sj-kod-yapragi tr[hidden] { display: none; }
.sj-kod-tasi { display: inline-block; min-width: 58px; padding: 4px 10px; border-radius: var(--sj-yaprak-kucuk); background: var(--sj-ak); font-family: var(--sj-f-sayi); font-weight: 700; font-size: 19px; line-height: 1.35; color: var(--sj-kiraz); text-align: center; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
a.sj-kod-tasi:hover { background: var(--sj-kiraz); color: var(--sj-kiraz-ust); }
@media (max-width: 719px) {
  .sj-kod-yapragi thead { display: none; }
  .sj-kod-yapragi, .sj-kod-yapragi tbody, .sj-kod-yapragi caption { display: block; }
  .sj-kod-yapragi tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 12px 14px; margin-bottom: 8px; background: var(--sj-tul); border-radius: var(--sj-yaprak); }
  .sj-yaprak-bolumu--tul .sj-kod-yapragi tbody tr, .sj-yaprak-kart--tul .sj-kod-yapragi tbody tr { background: var(--sj-ak); }
  .sj-kod-yapragi tbody tr > * { padding: 2px 0; background: transparent !important; border-radius: 0 !important; }
  .sj-kod-yapragi tbody tr > :first-child { grid-row: span 2; }
}
.sj-kod-gorunumu { color: var(--sj-gri); }
.sj-kod-acilir { margin-top: 8px; }
.sj-kod-acilir > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--sj-yaprak-orta); background: var(--sj-tul-2); font-size: 14px; font-weight: 700; color: var(--sj-koyu); cursor: pointer; list-style: none; }
.sj-kod-acilir > summary::-webkit-details-marker { display: none; }
.sj-kod-acilir > summary::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--sj-m-asagi) center / contain no-repeat; mask: var(--sj-m-asagi) center / contain no-repeat; transition: transform var(--sj-sure) var(--sj-egri); }
.sj-kod-acilir[open] > summary::after { transform: rotate(180deg); }
.sj-kod-acilir > summary:hover { background: var(--sj-tul-3); }
.sj-kod-acilir[open] { padding: var(--sj-a3) var(--sj-a4) var(--sj-a2); border-radius: var(--sj-yaprak); background: var(--sj-ak); }
.sj-kod-acilir[open] > summary { background: transparent; padding: 0; min-height: 36px; }
.sj-kod-acilir h3 { margin: var(--sj-a3) 0 0; font-size: 15px; }
.sj-kod-acilir .sj-ok-satiri { min-height: 40px; padding-block: 6px; font-size: 15px; }
.sj-kod-elegi { max-width: 520px; }
.sj-kod-elegi .sj-alan-ipucu { min-height: 1.5em; margin-top: 8px; }
@media (max-width: 719px) {
}

/* --- 12 Sekme yaprakları (sekme / içindekiler / harf rayı) -------------- */
.sj-sekme-yapraklari { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; margin: var(--sj-a4) 0; padding: 2px; }
.sj-sekme-yapraklari::-webkit-scrollbar { display: none; }
.sj-sekme-yapraklari a, .sj-sekme-yapraklari button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--sj-yaprak-orta); background: var(--sj-tul); color: var(--sj-metin); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--sj-sure) var(--sj-egri), color var(--sj-sure) var(--sj-egri), border-radius var(--sj-sure) var(--sj-egri); }
.sj-sekme-yapraklari a:hover, .sj-sekme-yapraklari button:hover { background: var(--sj-tul-2); color: var(--sj-koyu); }
.sj-sekme-yapraklari [aria-selected="true"], .sj-sekme-yapraklari [aria-current="true"] { background: var(--sj-tul-3); color: var(--sj-kiraz); border-radius: 4px 14px; }
.sj-sekme-yapraklari sup { font-size: 12px; color: var(--sj-gri); font-variant-numeric: tabular-nums; vertical-align: baseline; }
.sj-sekme-yapraklari[data-az-harfler] { margin-top: 0; }
.sj-sekme-yapraklari[data-az-harfler] a { min-width: 44px; padding: 0 12px; justify-content: center; font-family: var(--sj-f-baslik); }
.sj-sekme-icerigi[hidden] { display: none; }
.sj-sekme-icerigi:focus-visible { outline-offset: 4px; }

/* --- 13 Soru yaprağı (SSS) ---------------------------------------------- */
.sj-soru-yapragi { display: grid; gap: 10px; }
@media (min-width: 1080px) { .sj-soru-yapragi--ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.sj-soru-tanesi { background: var(--sj-tul); border-radius: var(--sj-yaprak); padding: 0 20px; }
.sj-yaprak-bolumu--tul .sj-soru-tanesi { background: var(--sj-ak); }
.sj-soru-tanesi summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 58px; padding: 14px 0; cursor: pointer; list-style: none; font-family: var(--sj-f-baslik); font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--sj-koyu); }
.sj-soru-tanesi summary::-webkit-details-marker { display: none; }
.sj-soru-tanesi summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 12px 3px; background: var(--sj-ak); color: var(--sj-kiraz); font-weight: 700; font-size: 18px; line-height: 1; }
.sj-yaprak-bolumu--tul .sj-soru-tanesi summary::after { background: var(--sj-tul-2); }
.sj-soru-tanesi[open] summary::after { content: "−"; background: var(--sj-kiraz); color: var(--sj-kiraz-ust); }
.sj-soru-tanesi summary:hover { color: var(--sj-kiraz); }
.sj-soru-tanesi > div { padding: 0 0 16px; color: var(--sj-metin); }
.sj-soru-tanesi > div p { margin: 0 0 10px; }
.sj-soru-tanesi > div p:last-child { margin-bottom: 0; }

/* --- 14 Form, uyarı ve bilgi yaprakları --------------------------------- */
.sj-yaprak-formu { display: grid; gap: 16px; min-width: 0; }
.sj-form-obegi { display: grid; gap: 16px; }
.sj-form-obegi-adi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.sj-form-obegi-adi b { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sj-f-baslik); font-size: var(--sj-y-3); font-weight: 600; color: var(--sj-koyu); }
.sj-form-obegi-adi b::before { content: ""; width: 12px; height: 12px; border-radius: 7px 2px; background: var(--sj-kiraz); }
.sj-form-obegi-adi small { color: var(--sj-gri); font-size: 14px; }
.sj-alan-yapraklari { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 640px) { .sj-alan-yapraklari--iki { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sj-alan-yapraklari--iki > .sj-yaprak-alani--tam, .sj-alan-yapraklari--iki > .sj-onay-kutucugu, .sj-alan-yapraklari--iki > .sj-alan-ipucu, .sj-alan-yapraklari--iki > .sj-alan-hata-notu { grid-column: 1 / -1; } }
.sj-yaprak-alani { display: grid; gap: 6px; min-width: 0; align-content: start; }
.sj-yaprak-alani > label, .sj-alan-etiketi { font-size: 14.5px; font-weight: 700; color: var(--sj-koyu); }
.sj-yaprak-alani label small { font-weight: 400; color: var(--sj-gri); }
.sj-yaprak-alani input, .sj-yaprak-alani select, .sj-yaprak-alani textarea { width: 100%; min-width: 0; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--sj-hat-sert); border-radius: var(--sj-yaprak-orta); background: var(--sj-tul); color: var(--sj-koyu); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; transition: border-color var(--sj-sure) var(--sj-egri), background-color var(--sj-sure) var(--sj-egri); }
.sj-yaprak-kart--tul .sj-yaprak-alani input, .sj-yaprak-kart--tul .sj-yaprak-alani select, .sj-yaprak-kart--tul .sj-yaprak-alani textarea { background: var(--sj-ak); }
.sj-yaprak-alani textarea { padding-block: 14px; min-height: 112px; resize: vertical; }
.sj-yaprak-alani select { padding-right: 44px; background-image: var(--sj-secim-oku); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px; }
.sj-yaprak-alani select[multiple] { min-height: 160px; padding: 8px; background-image: none; }
/* forms.py kancaları (sj-yazi-girdisi, sj-secim-girdisi, sj-uzun-girdi, sj-dosya-girdisi): görünüm .sj-yaprak-alani içinde. */
.sj-yazi-girdisi, .sj-secim-girdisi, .sj-uzun-girdi, .sj-dosya-girdisi { max-width: 100%; }
.sj-yaprak-alani input::placeholder, .sj-yaprak-alani textarea::placeholder { color: var(--sj-gri-2); }
.sj-yaprak-alani input:hover, .sj-yaprak-alani select:hover, .sj-yaprak-alani textarea:hover { border-color: var(--sj-gri); }
.sj-yaprak-alani input:focus-visible, .sj-yaprak-alani select:focus-visible, .sj-yaprak-alani textarea:focus-visible { outline: 3px solid var(--sj-kiraz); outline-offset: 2px; border-color: var(--sj-kiraz); background-color: var(--sj-ak); }
.sj-yaprak-alani input[type="date"], .sj-yaprak-alani input[type="time"] { -webkit-appearance: auto; appearance: auto; color-scheme: light; display: block; }
.sj-yaprak-alani input[type="date"]::-webkit-calendar-picker-indicator, .sj-yaprak-alani input[type="time"]::-webkit-calendar-picker-indicator { width: 22px; height: 22px; cursor: pointer; }
.sj-yaprak-alani input[type="file"] { padding: 10px 12px; }
.sj-yaprak-alani input[type="file"]::file-selector-button { margin-right: var(--sj-a3); min-height: 34px; padding: 0 14px; border: 0; border-radius: var(--sj-yaprak-kucuk); background: var(--sj-tul-2); color: var(--sj-koyu); font: inherit; font-weight: 700; cursor: pointer; }
.sj-yaprak-alani--hatali input, .sj-yaprak-alani--hatali select, .sj-yaprak-alani--hatali textarea { border-color: var(--sj-kiraz); border-width: 2px; background-color: var(--sj-ak); }
.sj-alan-hata-notu { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 14px; font-weight: 700; color: var(--sj-kiraz); max-width: none; }
.sj-alan-hata-notu::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 6px 2px; background: var(--sj-kiraz); }
.sj-alan-ipucu { margin: 0; font-size: 13.5px; color: var(--sj-gri); }
.sj-onay-kutucugu { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--sj-metin); cursor: pointer; }
.sj-onay-kutucugu input { flex: none; -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin: 1px 0 0; border: 1.5px solid var(--sj-hat-sert); border-radius: 10px 3px; background: var(--sj-ak); display: grid; place-content: center; cursor: pointer; }
.sj-onay-kutucugu input:checked { background: var(--sj-kiraz); border-color: var(--sj-kiraz); }
.sj-onay-kutucugu input:checked::after { content: ""; width: 14px; height: 14px; background: var(--sj-kiraz-ust); -webkit-mask: var(--sj-m-onay) center / contain no-repeat; mask: var(--sj-m-onay) center / contain no-repeat; }
.sj-onay-kutucugu input:focus-visible { outline: 3px solid var(--sj-kiraz); outline-offset: 2px; }
.sj-yaprak-alani--hatali.sj-onay-kutucugu input { border-color: var(--sj-kiraz); border-width: 2px; }
/* Uygun gün: önümüzdeki 6 gün yaprak seçici (servisjoy.js). */
.sj-gun-yapraklari { display: flex; flex-wrap: wrap; gap: 8px; }
.sj-gun-yapraklari button { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--sj-tul-3); border-radius: var(--sj-yaprak-orta); background: var(--sj-ak); color: var(--sj-gri); font: inherit; font-size: 14px; cursor: pointer; transition: background-color var(--sj-sure) var(--sj-egri), border-color var(--sj-sure) var(--sj-egri), border-radius var(--sj-sure) var(--sj-egri); }
.sj-gun-yapraklari button b { font-family: var(--sj-f-sayi); font-weight: 700; font-size: 16px; color: var(--sj-koyu); }
.sj-gun-yapraklari button:hover { border-color: var(--sj-kiraz); }
.sj-gun-yapraklari button[aria-pressed="true"] { background: var(--sj-kiraz); border-color: var(--sj-kiraz); color: var(--sj-kiraz-ust); border-radius: 4px 14px; }
.sj-gun-yapraklari button[aria-pressed="true"] b { color: var(--sj-kiraz-ust); }
.sj-form-dibi { display: grid; gap: var(--sj-a3); }
.sj-form-dibi p { margin: 0; font-size: 14px; color: var(--sj-gri); }
@media (min-width: 720px) { .sj-form-dibi .sj-yaprak-dugme { justify-self: start; width: auto; min-width: 280px; } }
.sj-gorunmez-alan { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Bilgi yaprağı: gönderim sonucu, uyarı, boş liste notu. */
.sj-bilgi-yapragi { margin: 0 0 var(--sj-a4); padding: 14px 18px; border-radius: var(--sj-yaprak); background: var(--sj-tul); color: var(--sj-metin); font-size: var(--sj-y-kucuk); max-width: none; }
.sj-bilgi-yapragi b { display: block; color: var(--sj-koyu); margin-bottom: 2px; }
.sj-bilgi-yapragi--oldu { background: #e5f2ea; }
.sj-bilgi-yapragi--oldu b { color: var(--sj-yesil); }
.sj-bilgi-yapragi--uyari, .sj-yaprak-uyari { background: var(--sj-kiraz-acik); }
.sj-bilgi-yapragi--uyari b, .sj-yaprak-uyari b { color: var(--sj-kiraz); }
.sj-yaprak-uyari { padding: 16px 20px; border-radius: var(--sj-yaprak); }
.sj-yaprak-uyari b { display: block; margin-bottom: 4px; }
.sj-bilgi-yapragi p { margin: 0; }
.sj-bilgi-yapragi:last-child { margin-bottom: 0; }

/* --- 15 Ana sayfa: ilk ekran, noktalı çizim, bulucu, neden, iller, form -- */
.sj-ilk-ekran { padding-top: var(--sj-a6); }
@media (min-width: 1080px) { .sj-ilk-ekran { padding-top: var(--sj-a7); } }
.sj-ilk-sahne { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.sj-ilk-sahne > * { min-width: 0; }
@media (min-width: 1080px) { .sj-ilk-sahne { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; } }
.sj-ilk-ilkeler { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.sj-ilk-ilkeler li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--sj-yaprak-orta); background: var(--sj-tul); font-weight: 600; font-size: 15px; color: var(--sj-koyu); }
.sj-ilk-ilkeler li::before { content: ""; width: 16px; height: 6px; background: var(--sj-kiraz); -webkit-mask: var(--sj-tebessum) center / contain no-repeat; mask: var(--sj-tebessum) center / contain no-repeat; }
.sj-ilk-metin .sj-yaprak-eylemleri, .sj-sayfa-tepesi .sj-yaprak-eylemleri { margin-top: 26px; }
.sj-ilk-cizim { margin: 0; display: grid; gap: 14px; }
.sj-sik-obek { display: grid; gap: 8px; margin-top: 26px; }
.sj-sik-obek > span { font-size: 13.5px; font-weight: 700; color: var(--sj-gri); }
/* Noktalı çizim: kare görsel + parça rozetleri (SVG, viewBox 0–100). */
.sj-yaprak-noktali { position: relative; width: 100%; aspect-ratio: 1; }
.sj-yaprak-noktali img { width: 100%; height: 100%; object-fit: contain; }
.sj-parca-katmani { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sj-parca-rozeti { transition: opacity var(--sj-sure) var(--sj-egri); }
.sj-parca-rozeti text { font-family: var(--sj-f-baslik); font-size: 3.6px; font-weight: 700; text-anchor: middle; dominant-baseline: central; fill: var(--sj-kiraz-ust); }
.sj-parca-rozeti-yaprak { fill: var(--sj-kiraz); stroke: var(--sj-ak); stroke-width: 0.8; }
.sj-parca-rozeti-hale { fill: var(--sj-kiraz); fill-opacity: 0.18; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity var(--sj-sure) var(--sj-egri); }
.sj-parca-rozeti--secili .sj-parca-rozeti-hale { opacity: 1; animation: sj-tebessum-nabzi 1.6s var(--sj-egri) infinite; }
.sj-parca-katmani:has(.sj-parca-rozeti--secili) .sj-parca-rozeti:not(.sj-parca-rozeti--secili) { opacity: 0.32; }
@keyframes sj-tebessum-nabzi { 0% { transform: scale(0.75); } 70% { transform: scale(1.25); opacity: 0.25; } 100% { transform: scale(0.75); opacity: 1; } }
.sj-yaprak-cihaz--noktali .sj-parca-rozeti { opacity: 0; }
.sj-yaprak-cihaz--noktali:hover .sj-parca-rozeti, .sj-yaprak-cihaz--noktali:focus-within .sj-parca-rozeti { opacity: 1; }
@media (hover: none) { .sj-yaprak-cihaz--noktali .sj-parca-rozeti { opacity: 1; } }
.sj-parca-listesi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; list-style: none; margin: 0; padding: 16px 20px; border-radius: var(--sj-yaprak); background: var(--sj-tul); font-size: 14px; }
.sj-parca-listesi ol { display: contents; list-style: none; }
.sj-parca-listesi li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.sj-parca-listesi b { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 10px 3px; background: var(--sj-kiraz); color: var(--sj-kiraz-ust); font-family: var(--sj-f-baslik); font-size: 11.5px; }
.sj-parca-listesi-basi { grid-column: 1 / -1; display: block; color: var(--sj-koyu); font-weight: 700; font-size: 14.5px; }
/* Arıza bulucu: JS yoksa gizli (aynı belirtiler cihaz sayfalarında). */
html:not(.sj-betik-acik) .sj-bulucu-bolumu { display: none; }
.sj-ariza-bulucu { display: grid; gap: var(--sj-a5); grid-template-columns: minmax(0, 1fr); align-items: center; }
.sj-ariza-bulucu > *, .sj-bulucu-secimi { min-width: 0; }
@media (min-width: 900px) { .sj-ariza-bulucu { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.sj-bulucu-sorusu { margin: 0 0 var(--sj-a3); font-family: var(--sj-f-baslik); font-size: var(--sj-y-3); font-weight: 600; color: var(--sj-koyu); }
.sj-belirti-yapraklari { list-style: none; display: grid; gap: 8px; }
.sj-belirti-yapraklari button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 8px 14px; border: 1.5px solid transparent; border-radius: var(--sj-yaprak-orta); background: var(--sj-tul); color: var(--sj-metin); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: border-color var(--sj-sure) var(--sj-egri), background-color var(--sj-sure) var(--sj-egri), border-radius var(--sj-sure) var(--sj-egri); }
.sj-yaprak-bolumu--tul .sj-belirti-yapraklari button { background: var(--sj-ak); }
.sj-belirti-yapraklari button span { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 11px 3px; background: var(--sj-tul-2); font-family: var(--sj-f-baslik); font-weight: 700; font-size: 12.5px; color: var(--sj-kiraz); }
.sj-belirti-yapraklari button:hover { border-color: var(--sj-tul-3); color: var(--sj-koyu); }
.sj-belirti-yapraklari button[aria-pressed="true"] { border-color: var(--sj-kiraz); background: var(--sj-ak); color: var(--sj-koyu); border-radius: 4px 14px; }
.sj-belirti-yapraklari button[aria-pressed="true"] span { background: var(--sj-kiraz); color: var(--sj-kiraz-ust); }
.sj-bulucu-sonucu { margin: var(--sj-a4) 0; min-height: 3em; font-size: 14px; color: var(--sj-gri); }
.sj-bulucu-sonucu b { color: var(--sj-koyu); }
/* Neden Servisjoy: dört yaprak + katlanır fark yaprağı. */
.sj-neden-yapraklari h3 { margin: var(--sj-a3) 0 6px; }
.sj-neden-yapraklari p { margin: 0; color: var(--sj-gri); font-size: var(--sj-y-kucuk); }
.sj-ikon-yapragi { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 18px 5px; background: var(--sj-tul-2); color: var(--sj-kiraz); }
.sj-ikon-yapragi svg { width: 22px; height: 22px; }
.sj-fark-yapragi summary { cursor: pointer; font-weight: 700; color: var(--sj-koyu); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sj-fark-yapragi summary::-webkit-details-marker { display: none; }
.sj-fark-yapragi summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 12px 3px; background: var(--sj-tul-2); color: var(--sj-kiraz); font-size: 18px; line-height: 1; }
.sj-fark-yapragi[open] summary::after { content: "−"; background: var(--sj-kiraz); color: var(--sj-kiraz-ust); }
.sj-fark-yapragi dl { margin: var(--sj-a4) 0 0; display: grid; }
.sj-fark-yapragi dl > div { display: grid; gap: 4px 24px; padding: 12px 0; border-top: 1px solid var(--sj-hat-ince); }
@media (min-width: 720px) { .sj-fark-yapragi dl > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sj-fark-yapragi dt { color: var(--sj-gri); text-decoration: line-through; text-decoration-color: var(--sj-kiraz); }
.sj-fark-yapragi dd { margin: 0; color: var(--sj-metin); }
/* Hizmet verilen iller: tül bantta sayılar, harita, katlanır il listesi. */
.sj-iller-yapragi { min-width: 0; }
.sj-iller-basi { display: grid; gap: var(--sj-a5); margin-bottom: var(--sj-a5); }
@media (min-width: 900px) { .sj-iller-basi { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.sj-iller-basi h2 { margin: 0 0 8px; }
.sj-iller-basi p { margin: 0; color: var(--sj-gri); }
.sj-iller-sayilari { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.sj-iller-sayilari div { display: flex; flex-direction: column; min-width: 96px; padding: 12px 16px; border-radius: var(--sj-yaprak); background: var(--sj-ak); }
.sj-iller-sayilari dd { margin: 0; font-family: var(--sj-f-sayi); font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); font-weight: 700; line-height: 1; color: var(--sj-kiraz); font-variant-numeric: tabular-nums; }
.sj-iller-sayilari dt { margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--sj-gri); }
.sj-iller-dizini { margin-top: var(--sj-a4); }
.sj-iller-dizini summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--sj-yaprak-orta); background: var(--sj-ak); cursor: pointer; color: var(--sj-koyu); font-weight: 700; list-style: none; }
.sj-iller-dizini summary::-webkit-details-marker { display: none; }
/* Form ikilisi: solda başlık + adım yaprakları, sağda form yaprağı (yapışkan değil). */
.sj-form-ikilisi { display: grid; gap: var(--sj-a6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.sj-form-ikilisi > * { min-width: 0; }
@media (min-width: 1080px) { .sj-form-ikilisi { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.sj-form-yani h2 { margin: 0 0 var(--sj-a3); font-size: var(--sj-y-1); }
.sj-form-adimlari { list-style: none; display: grid; gap: 10px; margin: var(--sj-a5) 0; }
.sj-form-adimlari li { display: flex; gap: 14px; padding: 14px 16px; border-radius: var(--sj-yaprak); background: var(--sj-tul); }
.sj-yaprak-bolumu--tul .sj-form-adimlari li { background: var(--sj-ak); }
.sj-form-adimlari li > span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 15px 4px; background: var(--sj-tul-2); color: var(--sj-kiraz); font-family: var(--sj-f-baslik); font-weight: 700; font-size: 15px; }
.sj-form-adimlari li:first-child > span { background: var(--sj-kiraz); color: var(--sj-kiraz-ust); }
.sj-form-adimlari b { display: block; margin-bottom: 2px; font-family: var(--sj-f-baslik); font-weight: 600; }
.sj-form-adimlari p { margin: 0; font-size: 14px; color: var(--sj-gri); }
.sj-form-yani-notu { font-size: 14px; color: var(--sj-gri); }
.sj-istek-yapragi { padding: 22px; }
@media (min-width: 720px) { .sj-istek-yapragi { padding: 30px; } }
.sj-yorum-yapragi blockquote { margin: 0 0 var(--sj-a3); }
.sj-yorum-yapragi figcaption { font-size: 14px; color: var(--sj-gri); }

/* --- 16 Mobil alt yaprak (<1080 px) ------------------------------------- */
.sj-alt-yaprak { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--sj-ak); border-top: 1px solid var(--sj-hat-ince); border-radius: 22px 22px 0 0; transition: transform var(--sj-sure) var(--sj-egri), opacity var(--sj-sure) var(--sj-egri); }
.sj-alt-yaprak .sj-yaprak-dugme { flex: 1; min-width: 0; }
.sj-alt-yaprak .sj-yaprak-dugme span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-alt-yaprak--gizli { transform: translateY(calc(100% + 16px)); opacity: 0; }
body.sj-alt-yaprakli { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 1080px) {
  .sj-alt-yaprak { display: none; }
  body.sj-alt-yaprakli { padding-bottom: 0; }
}

/* --- 17 Son yaprak, ara yaprak, altbilgi, çerez -------------------------- */
/* Son yaprak: sayfanın tek dolu renkli yüzeyi; kiraz kart (bant değil), ak düğme. */
.sj-son-yaprak-bolumu { margin-top: calc(var(--sj-bolum) * 0.62); }
.sj-son-yaprak { display: grid; gap: 18px; align-items: center; padding: 30px 26px; border-radius: 40px 10px; background: var(--sj-kiraz); color: var(--sj-kiraz-ust); }
@media (min-width: 900px) { .sj-son-yaprak { grid-template-columns: minmax(0, 1fr) auto; padding: 40px 48px; } }
.sj-son-yaprak h2 { color: var(--sj-kiraz-ust); margin: 0; }
.sj-son-yaprak p { color: var(--sj-kiraz-acik); margin: 8px 0 0; }
.sj-son-yaprak .sj-tebessum-etiketi { color: var(--sj-kiraz-acik); }
.sj-son-yaprak .sj-tebessum-etiketi::before { background: var(--sj-kiraz-acik); }
.sj-son-yaprak .sj-yaprak-dugme--tul { background: transparent; color: var(--sj-kiraz-ust); box-shadow: inset 0 0 0 1.5px var(--sj-kiraz-acik); }
.sj-son-yaprak .sj-yaprak-dugme--tul:hover { background: var(--sj-kiraz-bas); color: var(--sj-kiraz-ust); }
.sj-son-yaprak :focus-visible { outline-color: var(--sj-ak); }
/* Ara yaprak: sayfa ortasında tek satırlık tül çağrı. */
.sj-ara-yaprak > .sj-yaprak-kabi > div { display: grid; gap: var(--sj-a4); align-items: center; padding: 22px 24px; border-radius: var(--sj-yaprak); background: var(--sj-tul-2); }
@media (min-width: 1080px) { .sj-ara-yaprak > .sj-yaprak-kabi > div { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding: 28px 36px; } .sj-ara-yaprak .sj-yaprak-eylemleri { justify-content: flex-end; } }
.sj-ara-yaprak p { margin: 0; color: var(--sj-metin); }
.sj-ara-yaprak p b { display: block; color: var(--sj-koyu); font-family: var(--sj-f-baslik); font-size: var(--sj-y-3); font-weight: 600; }
.sj-ara-yaprak .sj-yaprak-dugme--tul { background: var(--sj-ak); }
/* Altbilgi: tül zemin, üst köşeleri 48 px; servisfer'in dört sütunu. */
.sj-tul-altbilgi { margin-top: var(--sj-bolum); padding: 48px 0 0; background: var(--sj-tul); border-radius: 48px 48px 0 0; }
.sj-tul-altbilgi-izgara { display: grid; gap: 28px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sj-tul-altbilgi-izgara > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .sj-tul-altbilgi-izgara { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); } .sj-tul-altbilgi-izgara > :first-child { grid-column: auto; } }
.sj-tul-altbilgi h2 { font-size: 16px; margin: 0 0 10px; }
.sj-tul-altbilgi h2 + ul + h2 { margin-top: 20px; }
.sj-tul-altbilgi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 15px; }
.sj-tul-altbilgi ul a, .sj-tul-altbilgi ul button { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; color: var(--sj-metin); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.sj-tul-altbilgi ul a:hover, .sj-tul-altbilgi ul button:hover { color: var(--sj-kiraz); }
.sj-tul-altbilgi-logo img { height: 34px; width: auto; }
.sj-tul-altbilgi-tanim { margin: 14px 0 12px; font-size: 15px; color: var(--sj-gri); max-width: 44ch; }
.sj-altbilgi-kanallari { display: grid; gap: 4px; margin: 0; font-size: 15px; }
.sj-altbilgi-kanallari div { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sj-altbilgi-kanallari dt { color: var(--sj-gri); min-width: 5.5rem; }
.sj-altbilgi-kanallari dd { margin: 0; color: var(--sj-koyu); font-weight: 600; overflow-wrap: anywhere; }
.sj-altbilgi-kanallari a { text-decoration: none; }
.sj-altbilgi-kanallari a:hover { color: var(--sj-kiraz); }
/* Küçük ev aletleri satırı: yaprak rozetli bağlantılar. */
.sj-kucuk-alet-satiri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--sj-hat); font-size: 14.5px; }
.sj-kucuk-alet-satiri > b { margin-right: 4px; font-family: var(--sj-f-baslik); font-weight: 600; color: var(--sj-koyu); }
.sj-kucuk-alet-satiri > b a { text-decoration: none; }
.sj-kucuk-alet-satiri > a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--sj-yaprak-kucuk); background: var(--sj-ak); color: var(--sj-metin); text-decoration: none; }
.sj-kucuk-alet-satiri > a:hover { color: var(--sj-kiraz); background: var(--sj-tul-2); }
/* Kurum yaprağı: ak, üç sütun (hizmet · kapsam · beyan). */
.sj-kurum-yapragi { display: grid; gap: 16px 28px; grid-template-columns: minmax(0, 1fr); margin-top: 24px; padding: 20px 24px; border-radius: var(--sj-yaprak); background: var(--sj-ak); font-size: 14px; color: var(--sj-gri); }
@media (min-width: 900px) { .sj-kurum-yapragi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sj-kurum-yapragi b { display: block; margin-bottom: 4px; color: var(--sj-koyu); font-size: 14.5px; }
.sj-kurum-yapragi p { margin: 0; overflow-wrap: anywhere; }
.sj-kurum-yapragi a { color: var(--sj-metin); }
.sj-kurum-yapragi .sj-yetki-beyani { color: var(--sj-gri); }
/* Ziyaretçi sayacı + dip satır. */
.sj-ziyaret-yapragi { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin: 18px 0 0; padding: 10px 16px; border-radius: var(--sj-yaprak-orta); background: var(--sj-ak); font-size: 14px; color: var(--sj-gri); max-width: none; }
.sj-ziyaret-yapragi b { font-family: var(--sj-f-sayi); font-weight: 700; color: var(--sj-koyu); font-variant-numeric: tabular-nums; }
.sj-tul-dip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 18px 0 26px; font-size: 13.5px; color: var(--sj-gri); }
.sj-tul-dip p { margin: 0; }
.sj-tul-dip a { color: var(--sj-gri); }
.sj-tul-dip nav { display: flex; flex-wrap: wrap; gap: 4px 12px; }
/* Çerez penceresi: ak yaprak, alt yaprağın üstünde. */
.sj-cerez-penceresi { 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(--sj-a4) var(--sj-a5); background: var(--sj-ak); border: 1px solid var(--sj-hat); border-radius: var(--sj-yaprak); }
.sj-cerez-penceresi p { color: var(--sj-metin); font-size: 14px; margin: 0 0 12px; max-width: none; }

/* --- 18 Sayfa tepesi, dizelge, tablo, kurumsal ekler -------------------- */
.sj-sayfa-tepesi { padding-top: var(--sj-a5); }
@media (min-width: 1080px) { .sj-sayfa-tepesi { padding-top: var(--sj-a6); } }
/* Sayfa başı kutusuzdur: eski kartlı tepe de kutusuz basılır. */
.sj-sayfa-tepesi > .sj-yaprak-kart { padding: 0; border: 0; background: transparent; border-radius: 0; }
.sj-sayfa-tepesi h1 { margin: 0; overflow-wrap: break-word; }
.sj-sayfa-tepesi-izgara { display: grid; gap: var(--sj-a5); grid-template-columns: minmax(0, 1fr); align-items: center; }
.sj-sayfa-tepesi-izgara > * { min-width: 0; }
@media (min-width: 1080px) { .sj-sayfa-tepesi-izgara { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.sj-sayfa-tepesi-cizim { display: grid; gap: var(--sj-a3); align-content: center; }
.sj-sayfa-tepesi-cizim:empty { display: none; }
.sj-sayfa-tepesi-cizim > .sj-cizim-yapragi { width: 100%; max-width: 440px; justify-self: center; }
@media (max-width: 1079px) { .sj-sayfa-tepesi-cizim > .sj-cizim-yapragi { max-width: 300px; justify-self: start; } }
@media (min-width: 1080px) { .sj-sayfa-tepesi-izgara:has(> .sj-sayfa-tepesi-cizim:empty) { grid-template-columns: minmax(0, 1fr); } }
/* Bilgi dizelgesi: künye, iletişim, kurum kayıtları (sol ad, sağ değer). */
.sj-bilgi-dizelgesi { margin: 0; font-size: var(--sj-y-kucuk); }
.sj-bilgi-dizelgesi > div { display: grid; grid-template-columns: minmax(7rem, 2fr) minmax(0, 5fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--sj-hat-ince); }
.sj-bilgi-dizelgesi > div:first-child { border-top: 0; padding-top: 0; }
.sj-bilgi-dizelgesi dt { color: var(--sj-gri); }
.sj-bilgi-dizelgesi dd { margin: 0; color: var(--sj-metin); overflow-wrap: anywhere; }
/* Veri tablosu: renkler, basın, ekipler, resmi hatlar. */
.sj-veri-tablosu { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--sj-y-kucuk); }
.sj-veri-tablosu th { text-align: left; font-size: 13.5px; font-weight: 700; color: var(--sj-gri); padding: 0 12px 10px 0; border-bottom: 1px solid var(--sj-hat); vertical-align: bottom; }
.sj-veri-tablosu tbody th { font-size: var(--sj-y-kucuk); color: var(--sj-koyu); padding-top: 12px; vertical-align: top; border-bottom: 1px solid var(--sj-hat-ince); }
.sj-veri-tablosu td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--sj-hat-ince); vertical-align: top; overflow-wrap: anywhere; }
.sj-veri-tablosu tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 719px) {
  .sj-veri-tablosu--yigilir thead { display: none; }
  .sj-veri-tablosu--yigilir, .sj-veri-tablosu--yigilir tbody { display: block; }
  .sj-veri-tablosu--yigilir tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--sj-hat-ince); }
  .sj-veri-tablosu--yigilir tr:last-child { border-bottom: 0; }
  .sj-veri-tablosu--yigilir td, .sj-veri-tablosu--yigilir tbody th { border: 0; padding: 0; }
}
.sj-logo-tabani { display: grid; place-items: center; min-height: 140px; padding: var(--sj-a5); margin-bottom: var(--sj-a4); border-radius: 16px 4px; background: var(--sj-ak); border: 1px solid var(--sj-hat-ince); }
.sj-logo-tabani--koyu { background: var(--sj-koyu); border-color: var(--sj-koyu); }
.sj-logo-tabani img { max-height: 56px; width: auto; }
/* İletişim: tıkla-yükle harita çerçevesi (iletisim-harita.js sj-konum-acik ekler). */
.sj-konum-cercevesi { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--sj-a5); text-align: center; border-radius: var(--sj-yaprak); background: var(--sj-tul); overflow: hidden; }
.sj-konum-cercevesi .sj-yaprak-eylemleri { justify-content: center; }
.sj-konum-cercevesi iframe { width: 100%; height: 100%; border: 0; }
.sj-konum-cercevesi.sj-konum-acik { padding: 0; }
.sj-konum-cercevesi.sj-konum-acik > div { display: none; }
@media (min-width: 720px) { .sj-konum-cercevesi { aspect-ratio: 16 / 9; } }
/* Mahalle adları: "·" ayraçlı düz dizi (sayfa ya da bağlantı yok). */
.sj-mahalle-adlari { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; color: var(--sj-metin); font-size: var(--sj-y-kucuk); line-height: 1.9; }
.sj-mahalle-adlari li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--sj-kiraz); font-weight: 900; }
/* Hat yaprağı (marka sayfa başı çağrısı) ve ilke satırları. */
.sj-hat-yapragi { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--sj-yaprak); background: var(--sj-tul); }
.sj-hat-yapragi .sj-tebessum-etiketi { margin: 0; }
.sj-hat-yapragi .sj-iri-rakam { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); text-decoration: none; overflow-wrap: anywhere; }
.sj-hat-yapragi .sj-iri-rakam:hover { color: var(--sj-kiraz); }
.sj-hat-yapragi p { margin: 0; font-size: 14px; color: var(--sj-gri); }
.sj-ilke-satirlari .sj-ok-satiri { min-height: 40px; padding-block: 6px; font-size: 15px; color: var(--sj-metin); }
/* Sayı yaprakları (kod, tablo, marka sayısı). */
.sj-sayi-yapraklari { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.sj-sayi-yapraklari > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 12px 16px; border-radius: var(--sj-yaprak); background: var(--sj-tul); }
.sj-sayi-yapraklari dd { margin: 0; font-family: var(--sj-f-sayi); font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); line-height: 1; color: var(--sj-kiraz); }
.sj-sayi-yapraklari dt { font-size: var(--sj-y-etiket); font-weight: 700; color: var(--sj-gri); }
@media (min-width: 1080px) { .sj-sayi-yapraklari { justify-content: flex-end; } }
/* Açılır yaprak: belirti grupları, "Diğer iller". */
.sj-acilir-yaprak { border-top: 1px solid var(--sj-hat-ince); }
.sj-acilir-yaprak > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; cursor: pointer; list-style: none; }
.sj-acilir-yaprak > summary::-webkit-details-marker { display: none; }
.sj-acilir-yaprak > summary h3 { flex: 1; min-width: 0; margin: 0; font-size: 17px; }
.sj-acilir-yaprak > summary small { color: var(--sj-gri); font-size: 14px; font-variant-numeric: tabular-nums; }
.sj-acilir-yaprak > summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 11px 3px; background: var(--sj-tul-2); color: var(--sj-kiraz); font-weight: 700; line-height: 1; }
.sj-acilir-yaprak[open] > summary::after { content: "−"; background: var(--sj-kiraz); color: var(--sj-kiraz-ust); }
.sj-acilir-yaprak > summary:hover h3 { color: var(--sj-kiraz); }
.sj-acilir-yaprak > p { margin: 0 0 8px; color: var(--sj-gri); }
.sj-acilir-yaprak > .sj-ok-listesi { margin-bottom: var(--sj-a3); }
.sj-yaprak-kart > .sj-acilir-yaprak:first-of-type { margin-top: var(--sj-a3); }
/* A–Z harf öbekleri + süzgeç. */
.sj-harf-elegi { max-width: 360px; margin-bottom: var(--sj-a4); }
.sj-harf-obekleri { columns: 1; column-gap: var(--sj-a6); }
@media (min-width: 560px) { .sj-harf-obekleri { columns: 2; } }
@media (min-width: 1080px) { .sj-harf-obekleri { columns: 4; } }
.sj-harf-obegi { break-inside: avoid; margin-bottom: var(--sj-a4); }
.sj-harf-obegi .sj-tebessum-etiketi { margin: 0; font-family: var(--sj-f-baslik); font-size: 15px; }
.sj-harf-obegi .sj-ok-satiri { min-height: 44px; padding-block: 6px; }
.sj-harf-obegi .sj-ok-satiri small { font-size: 13px; text-align: right; }
/* Çapa hedefleri yapışkan başlığın altında kalmasın. */
.sj-ikili-govde > [id], .sj-yaprak-bolumu[id], .sj-kod-yapragi tr[id] { scroll-margin-top: calc(var(--sj-ust-boy) + 24px); }

/* --- 19 Yardımcılar, hareket azaltma, yazdırma -------------------------- */
.sj-ust-nefes { margin-top: var(--sj-a4); }
.sj-rakam-hizasi { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .sj-ust-yaprak, .sj-alt-yaprak, .sj-menu-yapragi, .sj-menu-ortusu, .sj-cerez-penceresi, .sj-son-yaprak-bolumu, .sj-ara-yaprak, .sj-sekme-yapraklari { display: none !important; }
  .sj-sekme-icerigi[hidden] { display: block !important; }
  .sj-kod-acilir { display: block; }
  .sj-tul-altbilgi { border-radius: 0; }
}

/* ==========================================================================
   §20 BÖLGE VE CİHAZ GRUBU AİLESİ (TASARIM-SISTEMI §8.4 grup, §8.5 il/ilçe,
   §8.6 bölge × cihaz/grup, §8.10 küçük alet bölgesi). Şablonlar:
   bolge/*.html, hizmetler/grup|liste.html, servis_agi.html. Çekirdek
   bileşenler §03–§19'da; burada yalnız aileye özgü ekler.
   ========================================================================== */
/* Sayfa başındaki bul kutusu (cihaz dizini): okuma genişliğinde. */
.sj-sayfa-tepesi form[role="search"] { max-width: 720px; margin-top: 24px; }
/* Sarılı adım yaprakları (bölge × cihaz "gelmeden önce" kontrolleri, 3–6 adım):
   satır başındaki yaprağın solunda tebessüm yayı basılmaz. */
@media (min-width: 900px) {
  .sj-adim-yapraklari--sarili { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sj-adim-yapraklari--sarili > li:nth-child(3n + 1)::before { display: none; }
}
@media (min-width: 1240px) {
  .sj-adim-yapraklari--sarili:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sj-adim-yapraklari--sarili:has(> li:nth-child(4):last-child) > li:nth-child(4)::before { display: block; }
}
/* Sayı yaprakları sayfa başının sağında: dar ekranda eşit yaprak satırı. */
.sj-sayfa-tepesi-cizim > .sj-sayi-yapraklari { align-self: center; }
@media (max-width: 1079px) { .sj-sayfa-tepesi-cizim > .sj-sayi-yapraklari > div { flex: 1 1 0; min-width: 0; } }
/* Başlıksız adım (yalnız cümle): cümle gövde renginde okunur. */
.sj-adim-yapraklari > li > b:first-child + p { color: var(--sj-metin); font-size: var(--sj-y-govde); }

/* ==========================================================================
   §21 MARKA VE ARIZA KODU AİLESİ (TASARIM-SISTEMI §8.7 bölge × marka, §8.8
   marka merkezi ve marka × cihaz, §8.9 arıza kodu dizini ve tablosu, §8.10
   küçük alet × marka). Şablonlar: marka/*.html. Yalnız aileye özgü ekler.
   ========================================================================== */
/* Marka sayfa başı: geniş yaprak fonlu çizim (beyaz eşya topluluğu). */
.sj-cizim-yapragi--genis { aspect-ratio: 1200 / 925; }
.sj-sayfa-tepesi-cizim > .sj-cizim-yapragi--genis { max-width: 480px; }
@media (max-width: 1079px) { .sj-sayfa-tepesi-cizim > .sj-cizim-yapragi--genis { max-width: 360px; } }
.sj-sayfa-tepesi-cizim .sj-hat-yapragi { width: 100%; max-width: 480px; justify-self: center; }
@media (max-width: 1079px) { .sj-sayfa-tepesi-cizim .sj-hat-yapragi { justify-self: start; } }
/* Açılış şeridi: tül yaprak maddeler, önlerinde küçük tebessüm yayı. */
.sj-acilis-yapraklari { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: var(--sj-a5) 0 0; padding: 0; }
.sj-acilis-yapraklari li { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: var(--sj-yaprak-orta); background: var(--sj-tul); font-size: 14.5px; font-weight: 600; color: var(--sj-koyu); }
.sj-acilis-yapraklari li::before { content: ""; flex: none; width: 16px; height: 6px; background: var(--sj-kiraz); -webkit-mask: var(--sj-tebessum) center / contain no-repeat; mask: var(--sj-tebessum) center / contain no-repeat; }
/* Belirti öbekleri: açılır yapraklar kart olarak, iki sütun (≥900 px). */
.sj-belirti-obekleri { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .sj-belirti-obekleri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sj-belirti-obekleri > .sj-acilir-yaprak { border-top: 0; padding: 4px 20px 8px; }
.sj-belirti-obekleri > .sj-acilir-yaprak > .sj-ok-listesi { margin-bottom: 8px; }
/* Ara başlık: bölüm içinde ikinci düzey başlık. */
.sj-ara-baslik { margin: var(--sj-a5) 0 8px; font-size: var(--sj-y-3); }
.sj-ikili-govde > .sj-ara-baslik:first-child, .sj-dikey-akis > div > .sj-ara-baslik:first-child { margin-top: 0; }
/* Belirti bağlantısı (marka × cihaz): kart bağlantı, numara kiraz. */
a.sj-belirti-baglantisi { display: flex; align-items: baseline; gap: 4px; height: 100%; color: var(--sj-koyu); font-weight: 600; }
a.sj-belirti-baglantisi::after { content: ""; flex: none; align-self: center; margin-left: auto; width: 16px; height: 16px; background: var(--sj-kiraz); -webkit-mask: var(--sj-m-ok) center / contain no-repeat; mask: var(--sj-m-ok) center / contain no-repeat; }
/* Markanın kod tabloları ve dizindeki marka kartları. */
.sj-kod-kartlari .sj-kart-tepesi h3 a { color: var(--sj-koyu); }
.sj-kod-kartlari .sj-rozet-dizisi { gap: 6px; }
.sj-kod-kartlari .sj-kod-tasi { font-size: 16px; min-width: 50px; }
.sj-marka-kod-kartlari a.sj-yaprak-kart, .sj-kod-kartlari + * a.sj-yaprak-kart { min-height: 100%; }
.sj-marka-kod-kartlari h3, a.sj-yaprak-kart > h3 { font-size: 17.5px; margin-bottom: 2px; }
/* Kod çapa dizini (tablo sayfası başı): küçük kod taşları; süzgeçle birlikte süzülür. */
.sj-kod-capalari { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sj-a5); padding: 14px; border-radius: var(--sj-yaprak); background: var(--sj-tul); }
.sj-kod-capalari .sj-kod-tasi { min-width: 0; padding: 2px 10px; font-size: 15px; }
.sj-kod-capalari .sj-kod-tasi[hidden] { display: none; }
/* Kod kartları: her kod bir yaprak kart (okuma genişliğinde). */
.sj-kod-kart-dizisi { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 900px; }
.sj-kod-karti { display: grid; gap: 12px; scroll-margin-top: calc(var(--sj-ust-boy) + 24px); }
.sj-kod-karti > * { margin: 0; }
.sj-kod-karti[hidden] { display: none; }
.sj-kod-karti:target { background: var(--sj-tul); border-color: var(--sj-tul-3); }
.sj-kod-karti-tepe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.sj-kod-karti-tepe h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; font-size: var(--sj-y-3); min-width: 0; }
.sj-kod-karti-tepe .sj-kod-tasi { background: var(--sj-tul-2); font-size: 20px; }
.sj-kod-karti .sj-ara-baslik { margin: 4px 0 0; font-size: 17px; }
.sj-kod-karti .sj-adim-yapraklari--dikey > li { background: var(--sj-tul); border-color: transparent; }
.sj-kod-karti .sj-adim-yapraklari--dikey > li > b:first-child { grid-row: auto; background: var(--sj-ak); }
.sj-kod-karti .sj-adim-yapraklari--dikey p { align-self: center; color: var(--sj-metin); }
.sj-kod-karti .sj-gulen-ok { justify-self: start; }
@media (max-width: 719px) { .sj-kod-karti-tepe .sj-yaprak-rozet { white-space: normal; } }
.sj-kod-karti .sj-adim-yapraklari--dikey { gap: 6px; }
.sj-kod-karti .sj-adim-yapraklari--dikey > li { padding: 9px 14px; align-items: center; }
.sj-kod-karti .sj-adim-yapraklari--dikey > li > b:first-child { width: 30px; height: 30px; font-size: 14px; }
.sj-kod-karti > .sj-yaprak-uyari { max-width: none; }
/* A–Z öbeklerinde uzun kategori notu satırı taşırmasın (390 px). */
.sj-harf-obegi .sj-ok-satiri { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
.sj-harf-obegi .sj-ok-satiri > a { flex: 1 1 auto; }
.sj-harf-obegi .sj-ok-satiri small { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ==========================================================================
   §22 KURUMSAL, SERVİS TALEBİ, 404 (TASARIM-SISTEMI §8.11, §8.12, §8.15).
   Şablonlar: kurum_sayfasi.html ve kurumsal sayfalar, servis_kaydi.html,
   404.html (500 kendi satır içi CSS'iyle). Yalnız aileye özgü ekler.
   ========================================================================== */
/* Form yaprağı tül bantta: öbekler ak kart üstünde tül kalsın (tül bant kuralını ezer). */
.sj-istek-yapragi .sj-form-obegi { background: var(--sj-tul); }
.sj-istek-yapragi .sj-bilgi-yapragi { margin-bottom: var(--sj-a4); }
/* Yasal metin: kutusuz bölümler, sık aralık, küçük bölüm başı. */
.sj-yasal-bolum { margin-top: calc(var(--sj-bolum) * 0.38); }
.sj-yasal-bolum .sj-yaprak-basligi { margin-bottom: 12px; }
.sj-yasal-bolum .sj-yaprak-basligi h2 { font-size: var(--sj-y-3); }
.sj-yasal-bolum .sj-uzun-yazi { margin-left: 28px; }
@media (max-width: 719px) { .sj-yasal-bolum .sj-uzun-yazi { margin-left: 0; } }
/* Kurumsal kimlik: renk karosu (renk değeri data-renk'ten; satır içi stil yok, CSP). */
.sj-renk-karosu { display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -3px; border-radius: 8px 2px; background: var(--sj-ak); border: 1px solid var(--sj-hat); }
.sj-renk-karosu[data-renk="#FFFFFF"] { background: #ffffff; }
.sj-renk-karosu[data-renk="#FFF4F6"] { background: #fff4f6; }
.sj-renk-karosu[data-renk="#1E191C"] { background: #1e191c; border-color: transparent; }
.sj-renk-karosu[data-renk="#BC1C4A"] { background: #bc1c4a; border-color: transparent; }
.sj-renk-karosu[data-renk="#5F565B"] { background: #5f565b; border-color: transparent; }
/* İletişim: tıkla-yükle harita penceresi ve adres satırı. */
.sj-harita-penceresi { display: block; }
.sj-adres-satiri { margin: 0 0 10px; font-size: var(--sj-y-3); }
.sj-konum-cercevesi > div { max-width: 52ch; }
/* 404: ak zeminde tül yaprak kart; dev sayı kiraz. */
.sj-hata-sahnesi { padding-top: var(--sj-a6); }
@media (min-width: 1080px) { .sj-hata-sahnesi { padding-top: var(--sj-a7); } }
.sj-hata-yapragi { max-width: 820px; padding: 30px 24px; border-radius: 40px 10px; background: var(--sj-tul); }
@media (min-width: 720px) { .sj-hata-yapragi { padding: 44px 48px; } }
.sj-hata-yapragi .sj-dev-sayi { display: block; margin: 4px 0 14px; }
.sj-hata-yapragi h1 { margin: 0; }
.sj-hata-yapragi .sj-bul-yapragi { background: var(--sj-ak); }
.sj-hata-eylemleri { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--sj-tul-3); }
/* Uzun yazılı yaprak kart kendi sütununu kaplar; satır boyu paragrafta (68ch) kalır. */
.sj-yaprak-kart.sj-uzun-yazi { max-width: none; }

/* ==========================================================================
   §40–§41 İL HARİTASI (parcalar/harita.html + js/harita.js; SVG'ler
   araclar/harita_uret.py). Tül iller, kiraz YALNIZ üzerine gelinen, odaklanan
   ya da listeden vurgulanan ilde/ilçede. Köşe yalnız --sj-yaprak-orta.
   ========================================================================== */
/* --- 40 Kap ve üst satır: Bütün iller · il seçici · durum ---------------- */
.sj-yurt { margin: var(--sj-a4) 0 var(--sj-a5); }
.sj-yurt[hidden] { display: none; }
.sj-yurt-ust { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sj-a3) var(--sj-a4); padding-bottom: var(--sj-a3); }
.sj-yurt-geri { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--sj-yaprak-orta); background: var(--sj-tul-2); color: var(--sj-koyu); font: 700 15px/1 var(--sj-f-govde); cursor: pointer; transition: background-color var(--sj-sure) var(--sj-egri); }
.sj-yurt-geri[hidden] { display: none; }
.sj-yurt-geri svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sj-yurt-geri:hover { background: var(--sj-tul-3); }
.sj-yurt-il { display: grid; gap: 6px; min-width: 0; flex: 1 1 220px; max-width: 320px; }
.sj-yurt-il label { font-size: var(--sj-y-etiket); font-weight: 700; color: var(--sj-koyu); }
.sj-yurt-il-secimi { width: 100%; min-height: 46px; padding: 0 44px 0 14px; border: 1.5px solid var(--sj-hat-sert); border-radius: var(--sj-yaprak-orta); font: inherit; font-size: 16px; color: var(--sj-metin); cursor: pointer; -webkit-appearance: none; appearance: none; background: var(--sj-ak) var(--sj-secim-oku) right 12px center / 18px 18px no-repeat; }
.sj-yurt-durumu { flex: 1 1 100%; margin: 0; font-size: var(--sj-y-kucuk); color: var(--sj-gri); font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .sj-yurt-durumu { flex: 1 1 0; text-align: right; padding-bottom: 12px; } }

/* --- 41 Tuval ve ilçe yanı ---------------------------------------------- */
.sj-yurt-ic { display: grid; gap: var(--sj-a4); padding: var(--sj-a4); border-radius: var(--sj-yaprak-orta); background: var(--sj-ak); }
.sj-yurt-tuvali { min-width: 0; transition: opacity var(--sj-sure) var(--sj-egri); }
.sj-yurt-tuvali svg, .sj-yurt-svg { display: block; width: 100%; height: auto; }
.sj-yurt-alani { fill: var(--sj-tul-2); stroke: var(--sj-ak); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill var(--sj-sure) var(--sj-egri); }
.sj-yurt-alani:hover, .sj-yurt-alani:focus, .sj-yurt-alani.sj-yurt-alani--vurgu { fill: var(--sj-kiraz); outline: none; }
.sj-yurt--yukleniyor .sj-yurt-tuvali { opacity: 0.4; cursor: progress; }
.sj-yurt-yani { min-width: 0; }
.sj-yurt-yani[hidden] { display: none; }
.sj-yurt-yani-basi { margin: 0; padding: 0 0 10px; font-family: var(--sj-f-baslik); font-weight: 600; font-size: 1.125rem; }
.sj-yurt-yani-basi a { color: var(--sj-koyu); }
.sj-yurt-yani-basi a:hover { color: var(--sj-kiraz); }
.sj-yurt-ilceleri { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--sj-oluk); }
.sj-yurt-ilceleri li { break-inside: avoid; }
.sj-yurt-ilceleri a { display: flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: var(--sj-yaprak-orta); color: var(--sj-metin); text-decoration: none; }
.sj-yurt-ilceleri a:hover, .sj-yurt-ilceleri a:focus-visible { background: var(--sj-tul); color: var(--sj-kiraz); }
@media (min-width: 1080px) {
  .sj-yurt--il-acik .sj-yurt-ic { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .sj-yurt--il-acik.sj-yurt--dar .sj-yurt-ic { grid-template-columns: minmax(0, 1fr) 240px; }
  .sj-yurt-ilceleri { columns: 1; max-height: 480px; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .sj-yurt-alani, .sj-yurt-tuvali, .sj-yurt-geri { transition: none; } }
@media print { .sj-yurt { display: none !important; } }