/* ==========================================================================
   Assist Grup — stil dosyası (TASARIM-SISTEMI.md v1, Eylül 2026)

   Sıfırdan yazıldı: başka bir projenin iskeletinden,
   renklerinden ve sınıf adlarından hiçbiri taşınmadı.

   İlke: yumuşak ama net. Büyük yuvarlak yüzeyler, gölge yerine ton farkı,
   1 px ayırıcı. Bağırmayan mavi; hardal YALNIZ durum ("şu an") içindir.
   Türkçe: text-transform: uppercase hiçbir yerde yok (İ/I).

   Bölümler
     00 yazı dosyaları        06 seçici (ana sayfa)
     01 tokenlar              07 liste satırı, A–Z, çip bulutu
     02 taban                 08 durum çizgisi, SSS, form
     03 düzen                 09 üç bölme + onarım paneli
     04 başlık + bağlam       10 yüzen hap, çekmece, menü, palet
     05 düğme, çip, rozet     11 altbilgi, çerez, harita, tablo
                              12 hareket azaltma
   ========================================================================== */

/* --- 00 Yazı dosyaları (CSP: font-src 'self') ---------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.b21945eb5067.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.c47ac31e5437.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.8811e895c448.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/figtree-latin.392aed3eb142.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext.e6155c5cfacf.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.570751c5f8b4.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 Tokenlar (TASARIM-SISTEMI §02, §04, §10) ------------------------- */
:root {
  /* Renk — 60/30/10: beyaz + sis / mavi tonları / gece + hardal */
  --gece: #0A1F44;
  --lacivert: #12367A;
  --mavi-700: #1848A8;
  --mavi-600: #1F5FD1;
  --mavi-400: #5B8DEF;
  --mavi-300: #9DBBF5;
  --mavi-50: #EAF1FF;
  --sis: #F6F8FC;
  --beyaz: #FFFFFF;
  --cizgi: #D3DEF2;
  --gri: #4A5873;
  --hardal: #F4B63F;
  --hardal-hale: rgba(244, 182, 63, 0.32);
  --yesil: #17784F;
  --kiremit: #B3261E;
  --buz-koyu: #DCE7FD; /* buz üzerindeki üzerine gelme tonu (buz + gök karışımı) */

  /* Köşe */
  --kose-hap: 999px;
  --kose-girdi: 14px;
  --kose-kap: 20px;
  --kose-balon: 24px 24px 24px 6px;
  --kose-cekmece: 28px 28px 0 0;

  /* Gölge — yalnız yüzen öğede */
  --golge-yuzen: 0 12px 32px -8px rgba(10, 31, 68, 0.18), 0 2px 6px rgba(10, 31, 68, 0.06);

  /* Yazı */
  --font-baslik: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-govde: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-kod: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Boşluk — 4'lük taban */
  --b-1: 4px;
  --b-2: 8px;
  --b-3: 12px;
  --b-4: 16px;
  --b-5: 24px;
  --b-6: 32px;
  --b-7: 48px;
  --b-8: 72px;
  --b-9: 104px;

  /* Düzen */
  --genislik: 1280px;
  --kenar: 16px;
  --tepe-boy: 60px;
  --okuma: 720px;

  /* Hareket */
  --gecis: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 768px) {
  :root { --kenar: 24px; --tepe-boy: 72px; }
}
@media (min-width: 1120px) {
  :root { --kenar: 32px; }
}

/* --- 02 Taban ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--tepe-boy) + 16px); }
body {
  margin: 0;
  background: var(--sis);
  color: var(--gece);
  font-family: var(--font-govde);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Süs daireleri kenardan taşar; clip kaydırma kabı yaratmaz, yapışkan öğeler çalışır. */
main { overflow-x: clip; }
@media (min-width: 768px) { body { font-size: 17px; line-height: 1.65; } }

h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gece);
  margin: 0 0 var(--b-3);
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 2.2vw + 22px, 48px); line-height: 1.08; }
h2 { font-size: clamp(26px, 1.2vw + 20px, 34px); line-height: 1.18; font-weight: 700; }
h3 { font-size: clamp(21px, 0.5vw + 19px, 24px); line-height: 1.28; font-weight: 600; }
h4 { font-size: 19px; line-height: 1.4; font-weight: 600; }
p { margin: 0 0 var(--b-4); }
p:last-child { margin-bottom: 0; }
a { color: var(--mavi-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mavi-700); }
img, svg, video { max-width: 100%; }
img { height: auto; }
ul, ol { padding-left: 1.25em; }
strong, b { font-weight: 600; }
small { font-size: 14px; }
hr { border: 0; border-top: 1px solid var(--cizgi); margin: var(--b-6) 0; }
code, kbd, .kod { font-family: var(--font-kod); font-weight: 500; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--mavi-600);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--beyaz);
}
::selection { background: var(--mavi-300); color: var(--gece); }

.gizli, .gizli-yol {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.atla {
  position: absolute; left: var(--b-4); top: -80px; z-index: 100;
  background: var(--gece); color: var(--beyaz);
  padding: var(--b-3) var(--b-4); border-radius: var(--kose-hap);
  text-decoration: none; font-weight: 600;
}
.atla:focus { top: var(--b-3); color: var(--beyaz); }

.metin-bag { font-weight: 500; }
.metin-dugme {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--mavi-600); font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: var(--b-1);
}
.metin-dugme:hover { color: var(--mavi-700); }

/* --- 03 Düzen ------------------------------------------------------------ */
.kap { max-width: var(--genislik); margin-inline: auto; padding-inline: var(--kenar); }

/* Henüz yeni düzene geçmemiş sayfalar için yumuşak geri dönüş: ana içerikteki
   üst düzey bölümler okunur genişlikte ve kenar boşluğuyla durur. */
main > section:not(.kesit), main > article, main > nav, main > div:not(.kap):not(.uc-bolme) {
  max-width: var(--genislik);
  margin-inline: auto;
  padding: var(--b-6) var(--kenar) 0;
}

.kesit { margin-top: var(--b-7); }
@media (min-width: 768px) { .kesit { margin-top: var(--b-8); } }
.kesit-bas { max-width: 68ch; margin-bottom: var(--b-5); }
.kesit-bas p { color: var(--gri); font-size: 17px; }
@media (min-width: 768px) { .kesit-bas p { font-size: 19px; line-height: 1.5; } }

.balon {
  background: var(--beyaz);
  border-radius: var(--kose-balon);
  padding: 20px;
}
@media (min-width: 768px) { .balon { padding: var(--b-5); } }
.balon-buz { background: var(--mavi-50); }

/* --- 04 Başlık + bağlam çubuğu (§6.1) ------------------------------------- */
.tepe {
  position: sticky; top: 0; z-index: 40;
  background: var(--beyaz);
  border-bottom: 1px solid var(--cizgi);
}
.tepe-ic {
  max-width: 1440px; margin-inline: auto;
  height: var(--tepe-boy);
  padding-inline: calc(var(--kenar) - 8px) var(--kenar);
  display: flex; align-items: center; gap: var(--b-2);
}
.menu-dugme, .kapat-dugme {
  flex: none;
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border: 0; border-radius: var(--kose-hap);
  background: transparent; color: var(--gece); cursor: pointer;
  transition: background var(--gecis);
}
.menu-dugme:hover, .kapat-dugme:hover { background: var(--mavi-50); }

/* Logo: halka ayrı işaret; yazı küçük harf "assist" + mavi "grup". */
.imza {
  flex: none;
  display: inline-block;
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gece);
  text-decoration: none;
  white-space: nowrap;
}
.imza:hover { color: var(--gece); }
.imza-halka {
  width: 0.82em; height: 0.82em;
  vertical-align: -0.06em;
  margin-right: 0.2em;
  color: var(--mavi-600);
  overflow: visible;
}
.imza-nokta { fill: var(--hardal); }
.imza-grup { color: var(--mavi-600); }
.imza-kucuk { font-size: 20px; }
@media (min-width: 768px) { .tepe .imza { font-size: 26px; } }
@media (max-width: 767px) { .tepe .imza-yazi { display: none; } .tepe .imza-halka { width: 30px; height: 30px; vertical-align: middle; } }

.baglam { display: none; align-items: center; gap: var(--b-1); margin-inline: auto; min-width: 0; }
.baglam-ara { color: var(--mavi-300); font-weight: 700; }
@media (min-width: 1024px) { .baglam { display: flex; } }

.cip-tek { margin-inline: auto; min-width: 0; max-width: 100%; flex: 0 1 auto; }
.cip-tek .cip-deger { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1024px) { .tepe .cip-tek { display: none; } }

.ara-dugme {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--b-2);
  height: 44px; padding: 0 var(--b-3);
  border: 0; border-radius: var(--kose-hap);
  background: var(--mavi-50); color: var(--mavi-700);
  font-weight: 500; cursor: pointer;
  transition: background var(--gecis);
}
.ara-dugme:hover { background: var(--buz-koyu); }
.ara-yazi, .ara-kisayol { display: none; }
.ara-kisayol {
  font-size: 12px; padding: 2px 6px; border-radius: 6px;
  background: var(--beyaz); color: var(--gri);
}
@media (min-width: 1024px) {
  .ara-dugme { padding: 0 var(--b-3) 0 var(--b-4); min-width: 140px; }
  .ara-yazi { display: inline; margin-right: auto; }
  .ara-kisayol { display: inline; }
}
.tepe-hap { flex: none; }
@media (max-width: 767px) { .tepe .tepe-hap { display: none; } }

/* --- 05 Düğme, çip, rozet (§6.5) ------------------------------------------ */
.hap {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b-2);
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--kose-hap);
  font-family: var(--font-govde); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}
.hap svg { flex: none; transition: transform var(--gecis); }
.hap:hover svg:last-child:not(:first-child) { transform: translateX(4px); }
.hap-mavi { background: var(--mavi-600); color: var(--beyaz); }
.hap-mavi:hover { background: var(--mavi-700); color: var(--beyaz); }
.hap-mavi:active { background: var(--lacivert); }
.hap-acik { background: var(--mavi-50); color: var(--mavi-700); }
.hap-acik:hover { background: var(--buz-koyu); color: var(--mavi-700); }
.hap-buyuk { min-height: 56px; padding: 0 28px; font-size: 17px; }
.hap-tam { width: 100%; }
.hap[disabled], .hap[aria-busy="true"] { opacity: 0.7; cursor: progress; }

.cip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 14px;
  border: 0; border-radius: var(--kose-hap);
  background: var(--mavi-50); color: var(--gece);
  font-family: var(--font-govde); font-size: 15px; font-weight: 500; line-height: 1.25;
  text-decoration: none; cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.cip:hover { background: var(--buz-koyu); color: var(--gece); }
.cip-secili, .cip[aria-pressed="true"] { background: var(--mavi-600); color: var(--beyaz); }
.cip-secili::before, .cip[aria-pressed="true"]::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cip-secili:hover, .cip[aria-pressed="true"]:hover { background: var(--mavi-700); color: var(--beyaz); }
.cip-mavi { background: transparent; color: var(--mavi-600); box-shadow: inset 0 0 0 1.5px var(--mavi-300); }
.cip-mavi:hover { background: var(--mavi-50); color: var(--mavi-700); }

/* Bağlam çipi: etiket + değer; boşken gri yer tutucu, doluyken gece metin. */
.cip-baglam { background: var(--sis); gap: var(--b-2); padding-right: 10px; max-width: 220px; }
.cip-baglam .cip-etiket { color: var(--gri); font-size: 13px; }
.cip-baglam .cip-deger { color: var(--gri); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cip-baglam svg, .cip-tek svg { flex: none; color: var(--mavi-600); }
.cip-baglam.cip-dolu { background: var(--mavi-50); }
.cip-baglam.cip-dolu .cip-etiket { color: var(--mavi-700); }
.cip-baglam.cip-dolu .cip-deger { color: var(--gece); font-weight: 600; }
.cip-baglam[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--mavi-600); }
.cip-tek { background: var(--mavi-50); font-weight: 600; }

.rozet {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 2px 10px;
  border-radius: var(--kose-hap);
  background: var(--mavi-50); color: var(--mavi-700);
  font-size: 14px; font-weight: 500; line-height: 1.3;
}
.rozet svg { flex: none; width: 14px; height: 14px; }
.rozet-durum { background: var(--hardal); color: var(--gece); font-weight: 600; }
.rozetler { display: flex; flex-wrap: wrap; gap: var(--b-2); list-style: none; padding: 0; margin: 0 0 var(--b-4); }

.cip-bulutu { display: flex; flex-wrap: wrap; gap: var(--b-2); list-style: none; padding: 0; margin: 0; }
.cip-kod { gap: var(--b-2); }
.cip-kod .kod { color: var(--mavi-700); font-weight: 700; }
.cip-kod span:last-child { color: var(--gri); font-size: 14px; }

/* --- 06 Ana sayfa: açılış + seçici (§6.2, §8.1) --------------------------- */
.acilis { position: relative; isolation: isolate; padding-top: var(--b-6); }
.acilis::before {
  content: ""; position: absolute; z-index: -1;
  width: 560px; height: 560px; border-radius: 50%;
  background: var(--mavi-50);
  right: -220px; top: -140px;
}
.acilis-baslik { font-size: clamp(26px, 1.2vw + 20px, 34px); line-height: 1.15; margin-bottom: var(--b-2); }
.acilis-baslik span { color: var(--mavi-600); }
.acilis-giris { color: var(--gri); max-width: 60ch; margin-bottom: var(--b-5); font-size: 17px; }
@media (min-width: 768px) { .acilis-giris { font-size: 19px; line-height: 1.5; } }

.secici {
  display: grid; gap: var(--b-4);
  background: var(--mavi-50);
  border-radius: 28px 28px 28px 8px;
  padding: var(--b-4);
}
@media (min-width: 768px) { .secici { padding: var(--b-6); gap: var(--b-5); } }
@media (min-width: 1120px) {
  .secici { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
.secici-akis { min-width: 0; }
.secici-ust { display: flex; align-items: center; justify-content: space-between; gap: var(--b-4); margin-bottom: var(--b-4); }

/* Üç noktalı ilerleme — logo dilinde: geçilen mavi, etkin hardal, gelecek açık gök halka. */
.adim-noktalari { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.adim-noktalari li { display: flex; align-items: center; gap: var(--b-2); color: var(--gri); font-size: 14px; font-weight: 500; }
.adim-noktalari li + li::before {
  content: ""; width: 28px; margin: 0 var(--b-2);
  border-top: 2px dotted var(--mavi-300);
}
@media (min-width: 768px) { .adim-noktalari li + li::before { width: 44px; } }
.adim-isaret {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--beyaz); box-shadow: inset 0 0 0 2px var(--mavi-300);
  transition: background var(--gecis), box-shadow var(--gecis);
}
.adim-noktalari .adim-gecti .adim-isaret { background: var(--mavi-600); box-shadow: none; }
.adim-noktalari .adim-etkin { color: var(--gece); font-weight: 600; }
.adim-noktalari .adim-etkin .adim-isaret { background: var(--hardal); box-shadow: 0 0 0 5px var(--hardal-hale); }
@media (max-width: 479px) { .adim-ad { display: none; } .adim-etkin .adim-ad { display: inline; } }

.secici-adim { border: 0; margin: 0; padding: 0; min-width: 0; }
.secici-adim { display: none; } /* JS yoksa ana_sayfa.html'deki <noscript> stili hepsini açar */
.secici-adim.adim-etkin { display: block; animation: adim-gir 260ms cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes adim-gir { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.secici-soru {
  font-family: var(--font-baslik); font-weight: 700; letter-spacing: -0.015em;
  font-size: clamp(21px, 0.6vw + 19px, 26px); line-height: 1.25;
  padding: 0; margin-bottom: var(--b-4);
}
.secici-yardim { color: var(--gri); }
.secici .cip:not([aria-pressed="true"]) { background: var(--beyaz); }
.secici .cip:not([aria-pressed="true"]):hover { background: var(--buz-koyu); }
.secici .cip { text-align: left; }
.secici .cip-mavi:not([aria-pressed="true"]) { background: transparent; }
.secici-alt { margin-top: var(--b-4); font-size: 15px; }

.karolar {
  display: grid; gap: var(--b-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 560px) { .karolar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b-3); } }
@media (min-width: 900px) { .karolar { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.karo {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--b-2);
  min-height: 118px; padding: var(--b-3) var(--b-2);
  background: var(--beyaz); border-radius: var(--kose-kap);
  color: var(--gece); text-decoration: none; text-align: center;
  transition: box-shadow var(--gecis), transform var(--gecis);
}
.karo:hover { color: var(--gece); box-shadow: inset 0 0 0 2px var(--mavi-300); }
.karo[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--mavi-600); }
.karo .siluet { width: 56px; height: 56px; }
.karo-ad { font-weight: 600; font-size: 15px; line-height: 1.25; }
.karo-not { font-size: 12px; color: var(--gri); margin-top: -4px; }
.karo-kucuk { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cizgi); }

/* Silüet: dolu, iki ton mavi, tek hardal arıza noktası (§07) */
.siluet-govde { fill: var(--mavi-300); }
.siluet-detay { fill: var(--mavi-600); }
.siluet-ic { fill: var(--mavi-50); }
.siluet-cizgi { fill: none; stroke: var(--mavi-600); stroke-linecap: round; }
.siluet-nokta { fill: var(--hardal); }

.kod-girisi { margin-top: var(--b-4); max-width: 360px; }
.kod-girisi-satir { display: flex; gap: var(--b-2); }
.kod-girisi-satir .girdi { flex: 1; min-width: 0; }
.kod-girisi label { display: block; font-weight: 500; font-size: 15px; margin-bottom: 6px; }

.satirlar-oneri { margin-top: var(--b-2); }
.satirlar-oneri:empty { display: none; }

/* Canlı özet balonu: sohbet köşeli beyaz kart, cümle adım adım kurulur. */
.ozet {
  background: var(--beyaz);
  border-radius: var(--kose-balon);
  padding: 20px;
  display: grid; gap: var(--b-3);
}
@media (min-width: 1120px) { .ozet { position: sticky; top: calc(var(--tepe-boy) + 24px); padding: var(--b-5); } }
.ozet-ust { display: flex; align-items: center; gap: var(--b-2); margin: 0; color: var(--gri); font-size: 14px; font-weight: 500; }
.ozet-ust .imza-halka { width: 20px; height: 20px; vertical-align: middle; margin: 0; }
.ozet-cumle {
  margin: 0;
  font-family: var(--font-baslik); font-weight: 600; letter-spacing: -0.01em;
  font-size: 21px; line-height: 1.3; color: var(--gece);
}
.ozet-cumle .ozet-bos { color: var(--gri); font-weight: 600; }
.ozet-eylem { display: grid; gap: var(--b-2); margin-top: var(--b-2); }

.secici-form .onarim-formu { background: var(--beyaz); border-radius: var(--kose-balon); padding: 20px; }
@media (min-width: 768px) { .secici-form .onarim-formu { padding: var(--b-5); } }

/* Niyet kapıları (§6.3): üç yatay hap-kart */
.niyetler { display: grid; gap: var(--b-3); margin-top: var(--b-5); }
@media (min-width: 900px) { .niyetler { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.niyet {
  display: flex; align-items: center; gap: var(--b-3);
  padding: 10px 20px 10px 10px;
  background: var(--beyaz); border-radius: var(--kose-hap);
  color: var(--gece); text-decoration: none;
  transition: background var(--gecis);
}
.niyet:hover { background: var(--mavi-50); color: var(--gece); }
.niyet-ikon {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mavi-50); color: var(--mavi-700);
}
.niyet:hover .niyet-ikon { background: var(--beyaz); }
.niyet-metin { display: grid; line-height: 1.3; min-width: 0; }
.niyet-metin strong { font-size: 16px; }
.niyet-metin span { color: var(--gri); font-size: 14px; }

/* Hata kodu araması */
.kod-arama { display: flex; flex-wrap: wrap; gap: var(--b-3); align-items: center; max-width: 720px; padding: var(--b-3); }
.kod-arama .girdi { flex: 1 1 240px; }
.kod-cipleri { margin-top: var(--b-4); }

.yorumlar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-3); }
@media (min-width: 900px) { .yorumlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.yorum blockquote { margin: 0 0 var(--b-3); font-size: 17px; }
.yorum-alt { color: var(--gri); font-size: 14px; }

/* --- 07 Liste satırı, A–Z, marka bulutu (§6.4) ----------------------------- */
.satirlar {
  list-style: none; margin: 0; padding: var(--b-1) 0;
  background: var(--beyaz);
  border-radius: var(--kose-kap);
  overflow: hidden;
}
.satirlar > li { position: relative; }
.satirlar > li + li::before {
  content: ""; position: absolute; top: 0; right: 0; left: 72px;
  border-top: 1px solid var(--cizgi);
}
.satirlar-sik > li + li::before { left: var(--b-4); }
.satir {
  display: flex; align-items: center; gap: var(--b-4);
  min-height: 56px; padding: 10px var(--b-4);
  color: var(--gece); text-decoration: none;
  transition: background var(--gecis);
}
a.satir:hover { background: var(--mavi-50); color: var(--gece); }
.satir > svg:last-child { flex: none; margin-left: auto; color: var(--mavi-600); transition: transform var(--gecis); }
a.satir:hover > svg:last-child { transform: translateX(4px); }
.satir-ikon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mavi-50); color: var(--mavi-700);
}
.satir-ikon .siluet { width: 28px; height: 28px; }
.satir-metin { display: grid; min-width: 0; line-height: 1.35; }
.satir-metin strong { font-weight: 600; font-size: 16px; }
.satir-metin span { color: var(--gri); font-size: 14px; }
.satirlar-bilgi .satir { align-items: flex-start; }
@media (min-width: 1120px) {
  .satirlar-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .satirlar-iki > li:nth-child(2)::before { display: none; }
}

.az-liste { display: grid; gap: var(--b-3); }
.az-suz { max-width: 420px; }
.harf-serit {
  position: sticky; top: var(--tepe-boy); z-index: 5;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--kenar) * -1); padding: var(--b-2) var(--kenar);
  background: var(--sis);
}
.harf-serit::-webkit-scrollbar { display: none; }
.harf-serit a {
  flex: none; min-width: 36px; height: 36px; border-radius: var(--kose-hap);
  display: grid; place-items: center;
  font-weight: 600; font-size: 15px; color: var(--mavi-700); text-decoration: none;
}
.harf-serit a:hover { background: var(--mavi-50); }
@media (min-width: 1120px) {
  .az-liste { grid-template-columns: minmax(0, 1fr) 44px; align-items: start; }
  .az-suz { grid-column: 1 / -1; }
  .harf-serit {
    order: 2; grid-column: 2; flex-direction: column; overflow: visible;
    top: calc(var(--tepe-boy) + 16px); margin: 0; padding: 0; background: none;
  }
  .harf-serit a { min-width: 32px; height: 28px; font-size: 14px; }
  .harf-gruplari { grid-column: 1; grid-row: 2; }
}
.harf-gruplari { columns: 1; }
@media (min-width: 1120px) { .harf-gruplari { columns: 2; column-gap: var(--b-5); } }
/* Dar ekranda kısa il adları iki sütuna akar (uzun tek sütun 4.500 px tutuyordu); geniş ekranda harf grupları zaten iki sütun. */
@media (max-width: 1119px) {
  .harf-grup .satirlar-sik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .harf-grup .satirlar-sik > li:nth-child(2)::before { display: none; }
}
.harf-grup .satirlar-sik .satir { min-height: 48px; }
.harf-grup { break-inside: avoid; margin-bottom: var(--b-4); scroll-margin-top: calc(var(--tepe-boy) + 64px); }
.harf-bas {
  font-family: var(--font-baslik); font-weight: 700; font-size: 22px; line-height: 1;
  color: var(--mavi-700); margin: 0 0 var(--b-2) var(--b-2);
}
.bos-sonuc { color: var(--gri); }

.marka-bulutu { display: grid; gap: var(--b-3); }
.marka-harf { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: var(--b-2); }
.marka-harf .harf-bas { margin: 8px 0 0; font-size: 20px; }
.marka-harf .cip { background: var(--beyaz); }
.marka-harf .cip:hover { background: var(--mavi-50); }

/* --- 08 Durum çizgisi (§6.6), SSS (§6.9), form (§6.10) --------------------- */
.durum {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
}
.durak { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--b-3); padding-bottom: var(--b-5); }
.durak:last-child { padding-bottom: 0; }
.durak::after {
  content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px;
  border-left: 2px dotted var(--mavi-300);
}
.durak:last-child::after { display: none; }
.durak-isaret {
  grid-row: 1 / span 2;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--beyaz); box-shadow: inset 0 0 0 2px var(--mavi-300);
  color: var(--beyaz);
}
.durak-ad { font-family: var(--font-baslik); font-weight: 700; font-size: 19px; line-height: 28px; }
.durak-not { color: var(--gri); font-size: 15px; line-height: 1.5; }
.durak-gecti .durak-isaret { background: var(--mavi-600); box-shadow: none; }
.durak-gecti::after { border-left-style: solid; border-left-color: var(--mavi-600); }
.durak-simdi .durak-isaret { background: var(--beyaz); box-shadow: inset 0 0 0 2px var(--hardal); }
.durak-simdi .durak-isaret::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--hardal);
  animation: nabiz 2s ease-in-out infinite;
}
@keyframes nabiz { 0%, 100% { box-shadow: 0 0 0 0 var(--hardal-hale); } 50% { box-shadow: 0 0 0 8px var(--hardal-hale); } }
.durak-simdi .durak-ad { color: var(--gece); }
.durum-pasif .durak-isaret::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mavi-600);
}
@media (min-width: 900px) {
  .durum:not(.durum-dikey) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--b-4); }
  .durum:not(.durum-dikey) .durak { grid-template-columns: 1fr; padding-bottom: 0; row-gap: var(--b-2); }
  .durum:not(.durum-dikey) .durak-isaret { grid-row: auto; }
  .durum:not(.durum-dikey) .durak::after {
    left: 36px; right: calc(var(--b-4) * -1 + 4px); top: 13px; bottom: auto;
    border-left: 0; border-top: 2px dotted var(--mavi-300);
  }
  .durum:not(.durum-dikey) .durak-gecti::after { border-top-style: solid; border-top-color: var(--mavi-600); }
}

.sss-kesit .kesit-bas { margin-bottom: var(--b-4); }
.soru-cevap { max-width: 960px; }
.soru { border-top: 1px solid var(--cizgi); }
.soru:last-child { border-bottom: 1px solid var(--cizgi); }
.soru summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-3);
  min-height: 56px; padding: var(--b-3) var(--b-1);
  font-weight: 600; font-size: 17px; line-height: 1.35;
  cursor: pointer; list-style: none;
  scroll-margin-top: calc(var(--tepe-boy) + 16px);
}
.soru summary::-webkit-details-marker { display: none; }
.soru summary svg { flex: none; color: var(--mavi-600); transition: transform var(--gecis); }
.soru[open] summary svg { transform: rotate(180deg); }
.cevap {
  background: var(--mavi-50);
  border-radius: var(--kose-balon);
  padding: var(--b-4) 20px;
  margin: 0 0 var(--b-4);
}
.cevap strong { font-weight: 600; }
/* Masaüstü + JS: solda soru satırları, sağda seçili cevap balonu. */
.sc-balon { display: none; }
@media (min-width: 1120px) {
  .soru-cevap.sc-iki {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--b-6); align-items: start;
  }
  .sc-iki .soru { grid-column: 1; border: 0; }
  .sc-iki .soru + .soru { border-top: 1px solid var(--cizgi); }
  .sc-iki .soru .cevap { display: none; }
  .sc-iki .soru summary { padding-inline: var(--b-4); border-radius: 14px; }
  .sc-iki .soru summary svg { transform: rotate(-90deg); }
  .sc-iki .soru-etkin summary { background: var(--beyaz); color: var(--mavi-700); }
  .sc-balon {
    display: block;
    grid-column: 2; grid-row: 1 / span 40;
    position: sticky; top: calc(var(--tepe-boy) + 24px);
    background: var(--beyaz); border-radius: var(--kose-balon);
    padding: var(--b-5); font-size: 17px;
  }
  .sc-balon h3 { font-size: 19px; margin-bottom: var(--b-2); }
}

.onarim-formu { display: grid; gap: var(--b-4); max-width: 760px; }
.form-izgara { display: grid; gap: var(--b-4); }
@media (min-width: 640px) { .form-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-alan { display: grid; gap: 6px; align-content: start; }
.form-alan label { font-weight: 500; font-size: 15px; color: var(--gece); }
.form-ops { color: var(--gri); font-weight: 400; }
.form-ipucu { color: var(--gri); font-size: 14px; margin: 0; }
.form-ozet { display: flex; flex-wrap: wrap; gap: var(--b-2); }
.form-ozet .cip { background: var(--mavi-50); }
.girdi {
  width: 100%; min-height: 52px;
  padding: 0 var(--b-4);
  border: 1.5px solid var(--cizgi); border-radius: var(--kose-girdi);
  background: var(--beyaz); color: var(--gece);
  font-family: var(--font-govde); font-size: 16px; line-height: 1.4;
  transition: border-color var(--gecis), box-shadow var(--gecis);
  -webkit-appearance: none; appearance: none;
}
textarea.girdi { padding: 14px var(--b-4); min-height: 112px; resize: vertical; }
select.girdi {
  padding-right: 44px;
  background: var(--beyaz) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5FD1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 20px no-repeat;
}
.girdi::placeholder { color: #6B7891; }
.girdi:hover { border-color: var(--mavi-300); }
.girdi:focus { outline: none; border-color: var(--mavi-600); box-shadow: 0 0 0 1px var(--mavi-600); }
.girdi-buyuk { min-height: 60px; font-size: 18px; padding-inline: 20px; }
.girdi-kod { font-family: var(--font-kod); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; }
.girdi-kucuk { min-height: 44px; font-size: 15px; }
input[type="search"].girdi::-webkit-search-cancel-button { -webkit-appearance: none; }
.form-alan-hata .girdi { border: 2px solid var(--kiremit); }
.form-alan-hata .girdi:focus { box-shadow: 0 0 0 1px var(--kiremit); }
.form-hata { display: flex; align-items: center; gap: 6px; color: var(--kiremit); font-size: 14px; font-weight: 500; margin: 0; }
.form-hata::before {
  content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--kiremit); color: var(--beyaz); font-size: 12px; font-weight: 700;
}
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--mavi-600); }

/* --- 09 Üç bölme + onarım paneli (§05, §6.11) ------------------------------ */
.uc-bolme {
  max-width: 1440px; margin-inline: auto;
  padding: var(--b-5) var(--kenar) 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-5);
}
.okuma { min-width: 0; max-width: var(--okuma); }
.okuma > .kesit:first-child { margin-top: 0; }
.icindekiler { min-width: 0; }
.icindekiler-bas { font-size: 14px; font-weight: 600; color: var(--gri); margin-bottom: var(--b-2); }
.icindekiler ol { list-style: none; margin: 0; padding: 0; }
.icindekiler a { color: var(--gri); text-decoration: none; font-size: 15px; }
.icindekiler a:hover, .icindekiler a[aria-current="true"] { color: var(--mavi-700); }
.icindekiler ol:empty, .icindekiler:has(ol:empty) { display: none; }
@media (max-width: 1119px) {
  .icindekiler {
    position: sticky; top: var(--tepe-boy); z-index: 5;
    margin-inline: calc(var(--kenar) * -1); padding: var(--b-2) var(--kenar);
    background: var(--sis);
  }
  .icindekiler-bas { display: none; }
  .icindekiler ol { display: flex; gap: var(--b-2); overflow-x: auto; scrollbar-width: none; }
  .icindekiler ol::-webkit-scrollbar { display: none; }
  .icindekiler li { flex: none; }
  .icindekiler a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--kose-hap); background: var(--beyaz); }
  .icindekiler a[aria-current="true"] { background: var(--mavi-600); color: var(--beyaz); }
}
@media (min-width: 1120px) {
  .uc-bolme { grid-template-columns: 200px minmax(0, var(--okuma)) 320px; justify-content: space-between; gap: var(--b-7); padding-top: var(--b-6); }
  .icindekiler { position: sticky; top: calc(var(--tepe-boy) + 24px); align-self: start; }
  .icindekiler li { border-left: 2px solid var(--cizgi); }
  .icindekiler a { display: block; padding: 6px 0 6px var(--b-3); margin-left: -2px; border-left: 2px solid transparent; }
  .icindekiler a[aria-current="true"] { border-left-color: var(--mavi-600); font-weight: 600; }
  .panel-yeri { position: sticky; top: calc(var(--tepe-boy) + 24px); align-self: start; }
}
@media (max-width: 767px) { .panel-yeri { display: none; } }

.onarim-paneli {
  display: grid; gap: var(--b-3);
  background: var(--beyaz);
  border-radius: var(--kose-balon);
  box-shadow: var(--golge-yuzen);
  padding: var(--b-5);
}
.panel-ust { margin: 0; color: var(--gri); font-size: 14px; font-weight: 500; }
.panel-baglam { margin: 0; font-family: var(--font-baslik); font-weight: 700; font-size: 22px; line-height: 1.25; }
.panel-not, .panel-kucuk { margin: 0; color: var(--gri); font-size: 14px; }
.panel-eksik { display: grid; gap: var(--b-2); }
.panel-rozetler { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.panel-takip {
  display: inline-flex; align-items: center; gap: 6px;
  padding-top: var(--b-3); border-top: 1px solid var(--cizgi);
  font-weight: 500; font-size: 15px; text-decoration: none;
}
.mini-secici { display: flex; flex-wrap: wrap; gap: var(--b-2); }

/* --- 10 Yüzen hap, alt çekmece, yan menü, palet (§09) ---------------------- */
.yuzen {
  position: fixed; z-index: 30;
  left: var(--b-4); right: var(--b-4);
  bottom: calc(var(--b-4) + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
  pointer-events: none;
  transition: transform var(--gecis), opacity var(--gecis);
}
.yuzen-hap {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: var(--b-3);
  width: 100%; max-width: 440px; min-height: 56px;
  padding: 8px 24px;
  border-radius: var(--kose-hap);
  background: var(--mavi-600); color: var(--beyaz);
  box-shadow: var(--golge-yuzen);
  text-decoration: none;
  min-width: 0;
  transition: max-width var(--gecis), padding var(--gecis), background var(--gecis);
}
.yuzen-hap:hover { background: var(--mavi-700); color: var(--beyaz); }
.yuzen-hap svg { flex: none; }
.yuzen-yazi { display: grid; line-height: 1.25; min-width: 0; }
.yuzen-yazi strong { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yuzen-yazi small { font-size: 13px; opacity: 0.88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yuzen-ufak .yuzen-hap { max-width: 168px; padding-inline: 20px; }
.yuzen-ufak .yuzen-yazi small { display: none; }
.yuzen-gizli, .yuzen-secicide { transform: translateY(140%); opacity: 0; }
@media (min-width: 1120px) { .yuzen { display: none; } }
@media (max-width: 1119px) { body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } }

.perde {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 31, 68, 0.42);
  animation: sol 180ms ease-out;
}
@keyframes sol { from { opacity: 0; } to { opacity: 1; } }
body.kilitli { overflow: hidden; }

.alt-cekmece {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
  max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--beyaz);
  border-radius: var(--kose-cekmece);
  box-shadow: var(--golge-yuzen);
  padding: var(--b-2) 20px calc(var(--b-5) + env(safe-area-inset-bottom));
  display: grid; gap: var(--b-4);
  animation: cekmece-gir 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes cekmece-gir { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 768px) { .alt-cekmece { left: 50%; right: auto; width: 520px; transform: translateX(-50%); animation: none; } }
.tutamac { justify-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--cizgi); }
.alt-cekmece-bas { display: flex; align-items: center; justify-content: space-between; gap: var(--b-3); }
.alt-cekmece-bas h2 { font-size: 22px; margin: 0; }
.alt-cekmece-not { color: var(--gri); margin: 0; font-size: 15px; }
.alt-cekmece .mini-secici .cip-baglam { max-width: none; flex: 1 1 100%; justify-content: flex-start; min-height: 48px; }
.alt-cekmece .mini-secici .cip-baglam svg { margin-left: auto; }
.alt-cekmece-eylem { display: grid; gap: var(--b-2); }
.alt-cekmece-eylem .metin-bag { justify-self: center; padding: var(--b-2); }

.yan-menu {
  position: fixed; z-index: 60; top: 0; right: 0; bottom: 0;
  width: min(380px, 92vw);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--beyaz);
  border-radius: 28px 0 0 28px;
  box-shadow: var(--golge-yuzen);
  padding: var(--b-3) var(--b-4) var(--b-6);
  animation: yan-gir 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes yan-gir { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.yan-menu-bas { display: flex; align-items: center; justify-content: space-between; padding: 0 0 var(--b-3) var(--b-2); }
.yan-liste { list-style: none; margin: 0 0 var(--b-2); padding: 0; }
.yan-oge {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-2);
  min-height: 48px; padding: 0 var(--b-3);
  border-radius: 14px;
  color: var(--gece); text-decoration: none; font-weight: 500;
}
.yan-oge:hover { background: var(--mavi-50); color: var(--gece); }
.yan-oge-vurgu { background: var(--mavi-600); color: var(--beyaz); font-weight: 600; margin-bottom: var(--b-2); }
.yan-oge-vurgu:hover { background: var(--mavi-700); color: var(--beyaz); }
.yan-grup { border-top: 1px solid var(--cizgi); }
.yan-grup summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 0 var(--b-3);
  font-weight: 600; cursor: pointer; list-style: none;
}
.yan-grup summary::-webkit-details-marker { display: none; }
.yan-grup summary svg { color: var(--mavi-600); transition: transform var(--gecis); }
.yan-grup[open] summary svg { transform: rotate(180deg); }
.yan-liste-alt { padding-left: var(--b-2); }
.yan-liste-alt .yan-oge { min-height: 44px; font-size: 15px; }
.yan-ara-baslik { padding: var(--b-3) var(--b-3) var(--b-1); font-size: 13px; font-weight: 600; color: var(--gri); }
.yan-ara-baslik a { color: var(--mavi-700); text-decoration: none; }
.yan-oge-tek { border-top: 1px solid var(--cizgi); border-radius: 0; font-weight: 600; min-height: 52px; }
.yan-dil { margin-top: var(--b-4); }

.dil-menusu summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 500; }
.dil-menusu ul { list-style: none; padding: 0; margin: var(--b-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--b-2); }
.dil-menusu a { text-decoration: none; }

.palet {
  position: fixed; z-index: 70;
  top: max(8vh, 56px); left: 50%; transform: translateX(-50%);
  width: min(640px, calc(100vw - 24px));
  max-height: min(72vh, 640px);
  display: flex; flex-direction: column;
  background: var(--beyaz);
  border-radius: var(--kose-balon);
  box-shadow: var(--golge-yuzen), 0 0 0 1px var(--cizgi);
  overflow: hidden;
}
.perde-palet { z-index: 65; }
.palet-kutu {
  display: flex; align-items: center; gap: var(--b-3);
  padding: 0 var(--b-4); min-height: 64px;
  border-bottom: 1px solid var(--cizgi);
  color: var(--mavi-600);
}
.palet-kutu input {
  flex: 1; min-width: 0; height: 60px;
  border: 0; outline: 0; background: none;
  font-family: var(--font-govde); font-size: 18px; color: var(--gece);
}
.palet-kutu input::-webkit-search-cancel-button { -webkit-appearance: none; }
.palet-esc { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--mavi-50); color: var(--gri); }
.palet-sonuc { overflow-y: auto; overscroll-behavior: contain; padding: var(--b-2); }
.palet-sonuc:empty { display: none; }
.palet-grup { margin: 0; padding: var(--b-3) var(--b-3) var(--b-1); font-size: 13px; font-weight: 600; color: var(--gri); }
.palet-oge {
  display: flex; align-items: center; gap: var(--b-3);
  min-height: 48px; padding: 6px var(--b-3);
  border-radius: 14px;
  color: var(--gece); text-decoration: none;
}
.palet-oge[aria-selected="true"], .palet-oge:hover { background: var(--mavi-50); color: var(--gece); }
.palet-oge .kod { font-weight: 700; color: var(--mavi-700); min-width: 64px; }
.palet-oge small { margin-left: auto; color: var(--gri); font-size: 13px; text-align: right; }
.palet-ipucu { margin: 0; padding: var(--b-3) var(--b-4); color: var(--gri); font-size: 14px; border-top: 1px solid var(--cizgi); }
.palet-bos { display: grid; justify-items: center; gap: var(--b-2); padding: var(--b-6) var(--b-4); text-align: center; color: var(--gri); }
.palet-bos .imza-halka { width: 40px; height: 40px; }

.acilir {
  position: fixed; z-index: 70;
  width: min(340px, calc(100vw - 24px));
  max-height: min(460px, 70vh);
  display: flex; flex-direction: column; gap: var(--b-2);
  background: var(--beyaz);
  border-radius: 20px;
  box-shadow: var(--golge-yuzen), 0 0 0 1px var(--cizgi);
  padding: var(--b-3);
}
.acilir-bas { display: flex; align-items: center; justify-content: space-between; gap: var(--b-2); padding: 0 var(--b-1); }
.acilir-baslik { font-size: 17px; margin: 0; }
.acilir-kaldir { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.acilir-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.acilir-liste a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-2);
  min-height: 44px; padding: 0 var(--b-3);
  border-radius: 12px;
  color: var(--gece); text-decoration: none;
}
.acilir-liste a:hover, .acilir-liste a[aria-selected="true"] { background: var(--mavi-50); }
.acilir-liste small { color: var(--gri); font-size: 13px; }
.acilir-liste .acilir-bos { padding: var(--b-3); color: var(--gri); font-size: 14px; }

/* --- 11 Altbilgi (§6.12), çerez, harita, tablo ----------------------------- */
.dip {
  margin-top: var(--b-9);
  background: var(--mavi-50);
  padding: var(--b-7) 0 var(--b-6);
  font-size: 15px;
}
.dip-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-3); margin-bottom: var(--b-5); }
.dip-baslik { font-size: clamp(21px, 0.5vw + 19px, 24px); margin: 0; }
.dip-suz { max-width: 420px; background: var(--beyaz); border-color: transparent; }
.dip-az { display: grid; gap: var(--b-2); }
.dip-harf { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; gap: var(--b-2); }
.dip-harf-ad { font-family: var(--font-baslik); font-weight: 700; font-size: 18px; color: var(--mavi-700); }
.dip-harf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 16px; }
.dip-harf a, .dip-cihazlar a, .dip-satir a { color: var(--gece); text-decoration: none; line-height: 1.9; }
.dip-harf a:hover, .dip-cihazlar a:hover, .dip-satir a:hover { color: var(--mavi-700); text-decoration: underline; }
.dip-harf .dip-marka { color: var(--mavi-700); }
@media (max-width: 767px) {
  .dip-harf ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; white-space: nowrap; }
  .dip-harf ul::-webkit-scrollbar { display: none; }
}
.dip-cihazlar { margin-top: var(--b-6); padding-top: var(--b-5); border-top: 1px solid var(--cizgi); }
.dip-kucuk-baslik { font-family: var(--font-govde); font-size: 15px; font-weight: 600; letter-spacing: 0; margin: 0 0 var(--b-1); }
.dip-kucuk-baslik a { color: var(--gece); }
.dip-kucuk-baslik span { color: var(--gri); font-weight: 400; display: inline-block; }
.dip-cihazlar ul, .dip-satir, .dip-sosyal, .dip-yasal, .dip-kurum-bilgi {
  list-style: none; margin: 0 0 var(--b-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: 2px 18px;
}
.dip-kurumsal { margin-top: var(--b-4); padding-top: var(--b-5); border-top: 1px solid var(--cizgi); }
.dip-kurum {
  margin-top: var(--b-4); padding-top: var(--b-5); border-top: 1px solid var(--cizgi);
  display: grid; gap: var(--b-3); color: var(--gri); font-size: 14px;
}
.dip-kurum-bilgi, .dip-yasal { margin: 0; gap: 2px 16px; }
.dip-kurum a, .dip-yasal a { color: var(--gri); }
.dip-kurum a:hover { color: var(--mavi-700); }
.dip-not { color: var(--gri); margin: 0; max-width: 90ch; }
.dip-diller { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.dip-diller a { color: var(--gri); text-decoration: none; }
.dip .imza { justify-self: start; }
.dip-yasal .metin-dugme { color: var(--gri); font-weight: 400; font-size: 14px; }
.dip-yasal .metin-dugme { text-decoration: underline; }
.dip-gizli { display: none !important; }

.cerez {
  position: fixed; z-index: 80;
  left: var(--b-3); right: var(--b-3);
  bottom: calc(var(--b-3) + env(safe-area-inset-bottom));
  max-width: 640px;
  display: grid; gap: var(--b-3);
  background: var(--beyaz);
  border-radius: var(--kose-balon);
  box-shadow: var(--golge-yuzen), 0 0 0 1px var(--cizgi);
  padding: var(--b-4) 20px;
  font-size: 14px;
}
.cerez p { margin: 0; color: var(--gece); }
.cerez-dugmeler { display: flex; gap: var(--b-2); justify-content: flex-end; flex-wrap: wrap; }
.cerez-dugmeler .hap { min-height: 44px; }
@media (min-width: 768px) { .cerez { left: var(--b-5); bottom: var(--b-5); } }

.tablo-kap { overflow-x: auto; background: var(--beyaz); border-radius: var(--kose-kap); }
.tablo { width: 100%; border-collapse: collapse; font-size: 15px; }
.tablo th, .tablo td { padding: var(--b-3) var(--b-4); text-align: left; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo th { font-weight: 600; color: var(--gri); font-size: 14px; background: var(--beyaz); }
.tablo tr:last-child td { border-bottom: 0; }

.resmi-hat { display: grid; gap: var(--b-3); justify-items: start; }
.resmi-hat h2 { font-size: clamp(21px, 0.5vw + 19px, 24px); margin: 0; }

/* Harita (harita.js durum sınıfları: harita-yukleniyor, harita-il-acik, vurgu) */
.harita-kap { background: var(--beyaz); border-radius: var(--kose-balon); padding: var(--b-4); margin-top: var(--b-4); }
.harita-ust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-3); margin-bottom: var(--b-3); }
.harita-secici { display: flex; align-items: center; gap: var(--b-2); }
.harita-secici label { font-weight: 500; font-size: 15px; }
.harita-secici select {
  min-height: 44px; padding: 0 40px 0 14px; border: 1.5px solid var(--cizgi); border-radius: var(--kose-girdi);
  background: var(--beyaz) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5FD1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat;
  -webkit-appearance: none; appearance: none; font: inherit; font-size: 15px; color: var(--gece);
}
.harita-geri { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--kose-hap); background: var(--mavi-50); color: var(--mavi-700); font-weight: 500; cursor: pointer; }
.harita-durum { margin: 0; color: var(--gri); font-size: 14px; }
.harita-govde { display: grid; gap: var(--b-4); }
.harita-il-acik .harita-govde { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .harita-il-acik .harita-govde { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .harita-dar.harita-il-acik .harita-govde { grid-template-columns: 1fr; } }
.harita-tuval svg { display: block; width: 100%; height: auto; }
.harita-alan { fill: var(--mavi-300); stroke: var(--beyaz); stroke-width: 0.8; cursor: pointer; transition: fill var(--gecis); }
.harita-alan:hover, .harita-alan.vurgu, .harita-alan:focus { fill: var(--mavi-600); outline: none; }
.harita-yukleniyor .harita-tuval { opacity: 0.55; }
.harita-yan-bas { font-weight: 600; margin-bottom: var(--b-2); }
.harita-ilce-listesi { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--b-4); font-size: 15px; }
.harita-ilce-listesi a { display: block; padding: 4px 0; text-decoration: none; }

/* --- 12 Hareket azaltma --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === HİZMET-KURUMSAL === */
/* Cihaz sayfaları (/tamir/…), kurumsal sayfalar, onarım başlat, yasal,
   404. Yalnız yeni sınıflar; yukarıdaki kurallara dokunulmaz. */

/* Okuma sütununun tepesi */
.okuma-bas { margin-bottom: var(--b-5); }
.okuma-bas h1 { margin-bottom: var(--b-3); }
.ust-baslik { margin: 0 0 var(--b-2); color: var(--mavi-700); font-size: 15px; font-weight: 600; }
.giris { color: var(--gri); font-size: 17px; line-height: 1.55; max-width: 62ch; margin-bottom: var(--b-4); }
@media (min-width: 768px) { .giris { font-size: 19px; line-height: 1.5; } }
.okuma-bas-siluet { display: flex; align-items: center; gap: var(--b-4); }
.bas-siluet { flex: none; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--mavi-50); }
.bas-siluet .siluet { width: 64px; height: 64px; }
@media (max-width: 479px) { .bas-siluet { width: 64px; height: 64px; } .bas-siluet .siluet { width: 44px; height: 44px; } }
.okuma-metni { max-width: 68ch; }
.okuma-metni p { font-size: 17px; }
.kesit-bag { margin-top: var(--b-4); }
.baslik-bag { color: inherit; text-decoration: none; }
.baslik-bag:hover { color: var(--mavi-700); text-decoration: underline; }

/* Cihaz çizimi (dolu silüet + hardal arıza noktaları) */
.cizim-duzen { display: grid; gap: var(--b-4); }
@media (min-width: 640px) { .cizim-duzen { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
.cizim-kap { margin: 0; display: grid; gap: var(--b-3); }
.cizim { display: block; width: 100%; max-width: 260px; height: auto; margin-inline: auto; overflow: visible; }
.cizim .nokta-halka { fill: var(--hardal); stroke: var(--beyaz); stroke-width: 3; }
.cizim .nokta text { fill: var(--gece); font-family: var(--font-govde); font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.nokta-lejant { margin: 0; padding: 0; list-style: none; counter-reset: nokta; display: grid; gap: 4px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 14px; color: var(--gri); }
.nokta-lejant li { counter-increment: nokta; display: flex; gap: 6px; align-items: baseline; }
.nokta-lejant li::before { content: counter(nokta); flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--hardal); color: var(--gece); font-size: 12px; font-weight: 700; }
.belirti-listesi { list-style: none; margin: 0; padding: var(--b-1) 0; background: var(--beyaz); border-radius: var(--kose-kap); overflow: hidden; }
.belirti-listesi li + li { border-top: 1px solid var(--cizgi); margin-left: var(--b-4); }
.belirti { display: flex; align-items: center; gap: var(--b-3); min-height: 52px; padding: 8px var(--b-4); color: var(--gece); text-decoration: none; font-weight: 500; line-height: 1.35; }
.belirti-listesi li + li .belirti { margin-left: calc(var(--b-4) * -1); padding-left: var(--b-4); }
a.belirti { transition: background var(--gecis); }
a.belirti:hover { background: var(--mavi-50); color: var(--gece); }
a.belirti > svg { flex: none; margin-left: auto; color: var(--mavi-600); transition: transform var(--gecis); }
a.belirti:hover > svg { transform: translateX(4px); }
.belirti-no { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--mavi-50); color: var(--mavi-700); font-size: 13px; font-weight: 700; }

/* Siz / ekip kontrol listesi (§6.7) */
.kontrol { display: grid; gap: var(--b-3); }
@media (min-width: 900px) { .kontrol { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.kontrol-sutun { display: grid; gap: var(--b-3); }
.kontrol-sutun h3 { display: flex; align-items: center; gap: var(--b-2); font-size: 19px; margin: 0; }
.kontrol-sutun h3 svg { color: var(--yesil); flex: none; }
.balon-buz.kontrol-sutun h3 svg { color: var(--mavi-700); }
.kontrol-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-3); font-size: 16px; line-height: 1.5; }
.kontrol-liste label { display: flex; gap: var(--b-3); align-items: flex-start; cursor: pointer; }
.kontrol-liste input[type="checkbox"] { flex: none; margin: 2px 0 0; accent-color: var(--yesil); }
.kontrol-liste input:checked + span { color: var(--gri); text-decoration: line-through; text-decoration-color: var(--yesil); }
.kontrol-usta li, .kontrol-duz li { display: flex; gap: var(--b-3); align-items: flex-start; }
.kontrol-usta li svg, .kontrol-duz li svg { flex: none; margin-top: 4px; color: var(--mavi-700); }
.kontrol-duz li svg { color: var(--yesil); }

/* Bilgi çipi (seçilemez) */
.cip-bilgi { cursor: default; background: var(--beyaz); }
.cip-bilgi:hover { background: var(--beyaz); }
.rozet-kucuk { font-size: 12px; min-height: 22px; padding: 1px 8px; margin-left: auto; white-space: nowrap; }
.rozet-kucuk + svg { margin-left: var(--b-2) !important; }
.satir-alt strong { color: var(--mavi-700); font-weight: 600; }

/* Arama kutusu (liste ve 404) */
.liste-arama { display: flex; flex-wrap: wrap; gap: var(--b-2); max-width: 620px; margin-bottom: var(--b-2); }
.liste-arama .girdi { flex: 1 1 240px; }

/* Boş durum (§6.13) */
.bos-durum { display: flex; gap: var(--b-4); align-items: center; }
.bos-durum .imza-halka { flex: none; width: 44px; height: 44px; margin: 0; }
.bos-durum p { margin: 0; }

/* Kurum bilgisi */
.kimlik { display: grid; gap: 0; margin: 0; padding-block: var(--b-2); }
.kimlik > div { display: grid; gap: 2px; padding: var(--b-3) 0; border-top: 1px solid var(--cizgi); }
.kimlik > div:first-child { border-top: 0; }
@media (min-width: 640px) { .kimlik > div { grid-template-columns: 200px minmax(0, 1fr); gap: var(--b-4); } }
.kimlik dt { color: var(--gri); font-size: 15px; font-weight: 500; }
.kimlik dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* Çalışma ilkeleri ve kariyer kartları */
.ilke-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-3); }
.ilke-liste h3 { font-size: 19px; margin-bottom: var(--b-1); }
.ilke-liste p { color: var(--gri); font-size: 16px; }
.pozisyonlar { display: grid; gap: var(--b-3); }
.pozisyon h3 { margin-bottom: var(--b-2); }
.pozisyon > p { color: var(--gri); }

/* Bildirim kutuları: bilgi buz zeminde; kiremit yalnız form hatası (§02) */
.bildirim { display: flex; gap: var(--b-3); align-items: flex-start; margin-bottom: var(--b-4); }
.bildirim > svg { flex: none; margin-top: 3px; color: var(--mavi-700); }
.bildirim p { margin: 0; }
.bildirim-hata { box-shadow: inset 0 0 0 1.5px var(--kiremit); }
.bildirim-hata > svg { color: var(--kiremit); }

/* Kısa formlar (iletişim, kariyer, bayilik) */
.kisa-form { display: grid; gap: var(--b-4); }
.kisa-form .hap { justify-self: start; }
.form-onay label { display: flex; gap: var(--b-3); align-items: flex-start; font-weight: 400; font-size: 15px; line-height: 1.5; }
.form-onay input { flex: none; margin-top: 1px; }

/* Onarım başlat /randevu/ */
.kayit-sayfa, .iletisim-sayfa, .bos-sayfa { padding-top: var(--b-5); }
@media (min-width: 1120px) { .kayit-sayfa, .iletisim-sayfa, .bos-sayfa { padding-top: var(--b-6); } }
.kayit-adimlari { margin-top: var(--b-4); }
.kayit-duzen { display: grid; gap: var(--b-5); }
@media (min-width: 1024px) { .kayit-duzen { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: var(--b-6); } }
.kayit-formu { display: grid; gap: var(--b-4); }
.kayit-formu > .hap { justify-self: start; }
.kayit-adim { border: 0; margin: 0; display: grid; gap: var(--b-4); min-width: 0; }
.kayit-soru { display: flex; align-items: center; gap: var(--b-3); padding: 0; margin-bottom: var(--b-1); font-family: var(--font-baslik); font-weight: 700; font-size: clamp(21px, 0.6vw + 19px, 24px); letter-spacing: -0.015em; }
.kayit-no { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--mavi-50); color: var(--mavi-700); font-family: var(--font-govde); font-size: 15px; font-weight: 700; }
.kayit-yan { display: grid; gap: var(--b-3); }
@media (min-width: 1024px) { .kayit-yan { position: sticky; top: calc(var(--tepe-boy) + 24px); } }
.kayit-sirada { display: grid; gap: var(--b-3); }
.kayit-sirada h2 { font-size: 21px; margin: 0; }
.kayit-sirada .durak-ad { font-size: 17px; }
.kayit-gaz p { margin: 0; font-size: 15px; }
.kayit-gaz svg { vertical-align: -3px; color: var(--mavi-700); }
.kayit-tamam { display: grid; gap: var(--b-4); max-width: 960px; }
.kayit-tamam .durum { margin-block: var(--b-3); }
.kayit-tamam .durak { align-content: start; }

/* İletişim */
.kart-cift { display: grid; gap: var(--b-4); }
@media (min-width: 1024px) { .kart-cift { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.kart-cift > .balon { display: grid; gap: var(--b-3); padding: var(--b-5); }
.kart-cift h2 { margin: 0; }
.kart-onarim { background: var(--mavi-50); }
.kart-onarim .hap { justify-self: start; }
.kart-ikon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--beyaz); color: var(--mavi-700); }
.kart-form .kart-ikon { background: var(--mavi-50); }
.kart-baglar { list-style: none; margin: var(--b-2) 0 0; padding: var(--b-3) 0 0; border-top: 1px solid var(--cizgi); display: grid; gap: var(--b-2); font-size: 15px; }
.kart-baglar a { display: inline-flex; gap: 6px; align-items: center; }

/* Hukuki metinler */
.yasal-tarih { margin: 0; }
.yasal-metin .kesit { margin-top: var(--b-6); }
.yasal-metin h2 { font-size: clamp(21px, 0.6vw + 19px, 26px); }
.yasal-metin p, .yasal-metin li { font-size: 16px; line-height: 1.65; }
.yasal-metin ul { display: grid; gap: var(--b-2); padding-left: 1.2em; margin: 0 0 var(--b-4); }
.yasal-metin li::marker { color: var(--mavi-600); }
.yasal-panel { gap: var(--b-2); }
.yasal-panel .metin-bag { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; overflow-wrap: anywhere; }
.yasal-dizin { margin-top: var(--b-3); padding-top: var(--b-3); border-top: 1px solid var(--cizgi); }
.yasal-dizin ul { list-style: none; margin: var(--b-2) 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }

/* Fieldset başlığı çerçeveye oturmasın: akış içine alınır */
.kayit-adim > legend.kayit-soru { float: left; width: 100%; }
.okuma-metni + .cip-bulutu { margin-top: var(--b-4); }

/* 404: halkadan çıkmış nokta */
.bulunamadi { display: grid; gap: var(--b-2); justify-items: start; max-width: 720px; }
.bulunamadi .liste-arama { width: 100%; }
.yoldan-cikan { width: 88px; height: 88px; color: var(--mavi-600); overflow: visible; margin-bottom: var(--b-3); }
.bulunamadi-baglar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-3) var(--b-4); margin-top: var(--b-3); }

/* === BÖLGE === */
/* Bölge sayfaları (il, ilçe, bölge × grup/cihaz/marka, küçük aletler, /bolge/,
   onarım noktaları). Yalnız bu sayfaların kendi sınıfları; ortak kurallara dokunmaz. */
.bolge-bas { margin-bottom: var(--b-4); }
.bolge-bas h1 { margin: 0 0 var(--b-3); }
.bolge-bas-siluetli { display: flex; align-items: center; gap: var(--b-4); }
.bolge-bas-siluetli h1 { margin: 0; }
.bolge-siluet {
  flex: none; width: 88px; height: 88px; border-radius: var(--kose-kap);
  display: grid; place-items: center; background: var(--mavi-50);
}
.bolge-siluet .siluet { width: 64px; height: 64px; }
@media (min-width: 768px) {
  .bolge-siluet { width: 112px; height: 112px; }
  .bolge-siluet .siluet { width: 84px; height: 84px; }
}
.bolge-ust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 var(--b-2); color: var(--gri); font-size: 15px; font-weight: 500;
}
.bolge-ust svg { color: var(--mavi-600); flex: none; }
.bolge-ust a { color: var(--mavi-700); text-decoration: none; }
.bolge-ust a:hover { text-decoration: underline; }
.bolge-giris { font-size: 18px; line-height: 1.45; color: var(--gece); }
@media (min-width: 768px) { .bolge-giris { font-size: 19px; line-height: 1.4; } }
.bolge-ara { margin-top: var(--b-2); }
.bolge-paragraf { max-width: 68ch; }
.bolge-not { color: var(--gri); font-size: 15px; margin: 0 0 var(--b-3); }
.bolge-alt-bag { margin: var(--b-3) 0 0; }
.bolge-alt-bas { font-size: 19px; margin: var(--b-5) 0 var(--b-3); }

/* Gruplu liste: grup başlığı + satır kabı; küçük aletler gri grup. */
.bolge-grup + .bolge-grup { margin-top: var(--b-5); }
.bolge-grup-bas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2);
  font-size: 19px; margin: 0 0 var(--b-2) var(--b-2);
}
.bolge-grup-bas a { color: var(--gece); text-decoration: none; }
.bolge-grup-bas a:hover { color: var(--mavi-700); }
.bolge-grup-bas > span:not(.rozet) { color: var(--gri); font-family: var(--font-govde); font-size: 14px; font-weight: 500; }
.bolge-grup-gri { background: var(--mavi-50); border-radius: var(--kose-kap); padding: var(--b-4); }
.bolge-grup-gri .bolge-grup-bas { margin-left: 0; }
.bolge-grup-gri .cip { background: var(--beyaz); }
.bolge-grup-gri .cip:hover { background: var(--buz-koyu); }

/* Karolar okuma sütununda (≤720 px): masaüstünde 5 değil 4 sütun. */
@media (min-width: 900px) { .bolge-karolar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bolge-karolar .karo { min-height: 112px; }

/* Belirti çipleri: uzun cümle taşımasın, satır içi kırılsın. */
.belirti-cipleri .cip, .cip-duz { white-space: normal; text-align: left; line-height: 1.35; padding-block: 7px; }
.cip-duz { cursor: default; background: var(--beyaz); }
.cip-duz:hover { background: var(--beyaz); }
.bolge-markalar .cip { background: var(--beyaz); }
.bolge-markalar .cip:hover { background: var(--mavi-50); }
.bolge-plaka { color: var(--mavi-700); font-size: 13px; font-weight: 700; }

/* "Siz / biz" kontrol listesi (§6.7): iki balon, ≥900 px yan yana. */
.siz-biz { display: grid; gap: var(--b-3); }
@media (min-width: 900px) { .siz-biz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.siz-biz h3 { display: flex; align-items: center; gap: var(--b-2); font-size: 18px; margin: 0 0 var(--b-3); }
.siz-biz-siz h3 svg { color: var(--yesil); }
.siz-biz-biz h3 svg { color: var(--mavi-700); }
.siz-biz .metin-bag { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--b-3); font-weight: 600; }
.kontrol-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-2); }
.kontrol-listesi li { position: relative; padding-left: 28px; line-height: 1.45; }
.kontrol-listesi li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--yesil);
}
.kontrol-usta li::before { border-radius: 50%; box-shadow: none; background: var(--mavi-300); width: 10px; height: 10px; top: 8px; left: 4px; }
.kontrol-sirali { counter-reset: sira; }
.kontrol-sirali li { counter-increment: sira; padding-left: 36px; }
.kontrol-sirali li::before {
  content: counter(sira); box-shadow: none; border-radius: 50%;
  width: 26px; height: 26px; top: -1px; display: grid; place-items: center;
  background: var(--beyaz); color: var(--mavi-700); font-weight: 700; font-size: 14px;
}
.hazirlik { margin: var(--b-4) 0; }
.hazirlik h3 { font-size: 18px; margin: 0 0 var(--b-3); }

/* Onarım noktaları: kurum kimliği. */
.bolge-kimlik { display: grid; gap: var(--b-3); margin: 0; }
.bolge-kimlik div { display: grid; gap: 2px; }
.bolge-kimlik dt { color: var(--gri); font-size: 14px; }
.bolge-kimlik dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (min-width: 640px) { .bolge-kimlik div { grid-template-columns: 180px minmax(0, 1fr); gap: var(--b-3); } }

/* === MARKA === */
/* Marka, marka × cihaz, marka dizini ve hata kodu sayfaları (templates/marka/*).
   Sınıflar mk- önekli; ortak bileşenler (satirlar, cip, rozet, az-liste, durum)
   olduğu gibi kullanılır. */
.mk-bas { display: grid; gap: var(--b-3); margin-bottom: var(--b-6); }
.mk-bas h1 { margin: 0; }
.mk-ust { margin: 0; color: var(--gri); font-size: 14px; font-weight: 500; }
.mk-ust a { color: var(--mavi-700); text-decoration: none; }
.mk-ust a:hover { text-decoration: underline; }
.mk-giris { margin: 0; color: var(--gri); font-size: 17px; line-height: 1.55; max-width: 64ch; }
@media (min-width: 768px) { .mk-giris { font-size: 19px; line-height: 1.5; } }
.mk-bas .rozetler { margin: 0; }
.mk-ilke {
  margin: 0; padding: var(--b-4) 20px;
  background: var(--mavi-50); border-radius: var(--kose-balon);
  font-size: 16px; line-height: 1.55; color: var(--gece);
}
.mk-ilke strong { display: block; font-family: var(--font-baslik); font-size: 19px; font-weight: 700; margin-bottom: 2px; }
.mk-bas-ic { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-3); align-items: start; }
.mk-bas-ic > div { display: grid; gap: var(--b-3); min-width: 0; }
.mk-bas-siluet {
  display: grid; place-items: center; width: 88px; height: 88px;
  border-radius: 20px; background: var(--beyaz);
}
.mk-bas-siluet .siluet { width: 64px; height: 64px; }
@media (min-width: 640px) { .mk-bas-ic { grid-template-columns: 88px minmax(0, 1fr); gap: var(--b-5); } }

.mk-metin p { max-width: 68ch; }
.mk-metin { margin-bottom: var(--b-4); }

/* Satır içinde mono sayı */
.satir-metin .kod { font-weight: 700; color: var(--mavi-700); }

/* Arıza grupları: silüet + başlık + belirti çipleri */
.mk-grup {
  background: var(--beyaz); border-radius: var(--kose-balon);
  padding: 20px; margin-bottom: var(--b-4);
  scroll-margin-top: calc(var(--tepe-boy) + 64px);
}
@media (min-width: 768px) { .mk-grup { padding: var(--b-5); } }
.mk-grup-bas { display: flex; align-items: center; gap: var(--b-3); margin-bottom: var(--b-3); }
.mk-grup-bas h3 { margin: 0; font-size: clamp(19px, 0.4vw + 17px, 22px); }
.mk-grup > p { color: var(--gri); font-size: 16px; }
.mk-siluet {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mavi-50);
}
.mk-siluet .siluet { width: 36px; height: 36px; }
.mk-belirtiler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--b-2); }
.mk-belirtiler li {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 6px 14px; border-radius: var(--kose-hap);
  background: var(--mavi-50); color: var(--gece); font-size: 15px; font-weight: 500; line-height: 1.3;
}
.mk-belirtiler a { color: inherit; text-decoration: none; }
.mk-belirtiler li:has(a):hover { background: var(--buz-koyu); }

/* Model etiketi galerisi — yatay kaydırma */
.mk-etiketler {
  list-style: none; margin: 0; padding: 0 0 var(--b-2);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: var(--b-3);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.mk-etiket {
  scroll-snap-align: start;
  display: grid; gap: 6px; align-content: start;
  background: var(--beyaz); border-radius: var(--kose-balon); padding: var(--b-4);
}
.mk-etiket .siluet { width: 48px; height: 48px; }
.mk-etiket strong { font-size: 16px; }
.mk-etiket span { color: var(--gri); font-size: 14px; line-height: 1.45; }
.mk-etiket-tek { display: flex; gap: var(--b-4); align-items: flex-start; }
.mk-etiket-tek .siluet { flex: none; width: 56px; height: 56px; }
.mk-etiket-tek p { margin: 0; }

/* Marka kod tabloları: cihaz başlığı + mono çipler */
.mk-kod-tablolari { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-3); }
.mk-kod-tablolari > li { background: var(--beyaz); border-radius: var(--kose-kap); padding: var(--b-4); display: grid; gap: var(--b-3); }
.mk-kod-tablo-bas { display: flex; justify-content: space-between; align-items: center; gap: var(--b-3); color: var(--gece); text-decoration: none; }
.mk-kod-tablo-bas > span { display: inline-flex; align-items: center; gap: 4px; color: var(--mavi-700); font-size: 14px; font-weight: 500; white-space: nowrap; }
.mk-kod-tablo-bas:hover strong { color: var(--mavi-700); }
.cip-kod .kod:only-child { font-size: 15px; }

/* Bilgi satırları ve kardeş markalar */
.mk-bilgiler { margin-bottom: var(--b-4); }
.mk-kardes { margin-top: var(--b-5); }
.mk-kardes p { color: var(--gri); max-width: 68ch; }
.mk-alt-cipler { margin-top: var(--b-4); }
.mk-alt-bag { margin-top: var(--b-3); }

/* Garanti kartı (panel altı; dar ekranda okuma sütununda) */
.mk-garanti {
  display: grid; gap: var(--b-2);
  margin-top: var(--b-4); padding: 20px;
  background: var(--mavi-50); border-radius: var(--kose-balon);
  font-size: 15px;
}
.mk-garanti p { margin: 0; color: var(--gri); }
.mk-garanti-bas { display: flex; align-items: center; gap: var(--b-2); color: var(--gece) !important; font-weight: 600; }
.mk-garanti-bas svg { color: var(--mavi-600); }
.mk-garanti-tel { display: inline-flex; align-items: center; gap: var(--b-2); font-size: 18px; font-weight: 700; text-decoration: none; color: var(--mavi-700); }
.mk-garanti-tel .kod { font-weight: 700; }
.mk-kaynak { font-size: 13px; }
.mk-yalniz-dar { display: grid; }
@media (min-width: 768px) { .mk-yalniz-dar { display: none; } }

/* Siz / Ekip kontrol listesi (§6.7) */
.mk-siz-ekip { display: grid; gap: var(--b-3); }
@media (min-width: 900px) { .mk-siz-ekip:not(.mk-tek) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-siz, .mk-ekip { background: var(--beyaz); border-radius: var(--kose-balon); padding: 20px; display: grid; gap: var(--b-3); align-content: start; }
.mk-siz h3, .mk-ekip h3 { display: flex; align-items: center; gap: var(--b-2); margin: 0; font-size: 19px; }
.mk-siz h3 svg { color: var(--yesil); }
.mk-ekip h3 svg { color: var(--mavi-600); }
.mk-siz ul, .mk-ekip ul, .mk-siz-liste, .mk-nedenler { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-2); }
.mk-siz li, .mk-siz-liste li { position: relative; padding-left: 30px; }
.mk-siz li::before, .mk-siz-liste li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 6px;
  background: var(--yesil) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.mk-ekip li, .mk-nedenler li { position: relative; padding-left: 22px; color: var(--gece); }
.mk-ekip li::before, .mk-nedenler li::before {
  content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mavi-300);
}

/* Rehber düzeni */
.mk-duraklar .durak-not { font-size: 16px; }
.mk-durak-ek { display: block; font-style: normal; color: var(--mavi-700); font-size: 14px; font-weight: 500; margin-top: 2px; }
.mk-kalemler { list-style: none; margin: 0; padding: 0; counter-reset: kalem; display: grid; gap: var(--b-2); }
.mk-kalemler li {
  counter-increment: kalem; position: relative;
  background: var(--beyaz); border-radius: var(--kose-kap); padding: var(--b-4) var(--b-4) var(--b-4) 60px;
  display: grid; gap: 2px;
}
.mk-kalemler li::before {
  content: counter(kalem); position: absolute; left: var(--b-4); top: var(--b-4);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mavi-50); color: var(--mavi-700); font-family: var(--font-kod); font-weight: 700; font-size: 14px;
}
.mk-kalemler span { color: var(--gri); font-size: 15px; }
.mk-kanal { font-weight: 600; font-size: 16px !important; color: var(--mavi-700) !important; }
.mk-sozler { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-3); }
.mk-sozler li { display: grid; gap: var(--b-1); }
.mk-sozler strong { font-family: var(--font-baslik); font-size: 19px; }
.mk-sozler p { color: var(--gri); margin: 0; font-size: 15px; }
.mk-soz-ikon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--mavi-50); color: var(--mavi-700); margin-bottom: var(--b-1); }

/* Marka dizini */
.mk-vitrin { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-3); }
@media (min-width: 900px) { .mk-vitrin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-vitrin-oge { background: var(--beyaz); border-radius: var(--kose-kap); padding: var(--b-4); display: grid; gap: var(--b-3); align-content: start; }
.mk-vitrin-oge h3 { margin: 0; font-size: 20px; }
.mk-vitrin-oge h3 a { color: var(--gece); text-decoration: none; }
.mk-vitrin-oge h3 a:hover { color: var(--mavi-700); }
.mk-vitrin-oge .cip { min-height: 32px; font-size: 14px; }
@media (max-width: 1119px) {
  .harf-grup .mk-marka-satirlari { grid-template-columns: minmax(0, 1fr); }
}
.mk-marka-satirlari .satir { min-height: 52px; }

/* Hata kodu sayfaları — kod kartı (§6.8) */
.mk-kod-dizini {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 220px; overflow-y: auto; padding: 2px;
}
.mk-kod-dizini a {
  display: inline-grid; place-items: center; min-width: 48px; min-height: 36px; padding: 0 10px;
  border-radius: var(--kose-hap); background: var(--beyaz);
  font-family: var(--font-kod); font-weight: 700; font-size: 14px; color: var(--mavi-700); text-decoration: none;
}
.mk-kod-dizini a:hover { background: var(--mavi-50); }
.mk-suzgec { display: grid; gap: 6px; max-width: 360px; }
.mk-suzgec label { font-weight: 500; font-size: 15px; }
.kod-suzgec-sonuc { color: var(--gri); font-size: 14px; }
.mk-kod-liste { display: grid; gap: var(--b-4); }
.mk-kod-kart {
  background: var(--beyaz); border-radius: var(--kose-balon);
  padding: 20px; display: grid; gap: var(--b-3);
  scroll-margin-top: calc(var(--tepe-boy) + 64px);
}
@media (min-width: 768px) { .mk-kod-kart { padding: var(--b-5); } }
.mk-kod-kart:target { box-shadow: inset 0 0 0 2px var(--mavi-600); }
.mk-kod-ust { display: flex; align-items: center; justify-content: space-between; gap: var(--b-3); flex-wrap: wrap; }
.kod-etiket {
  font-family: var(--font-kod); font-weight: 700; color: var(--mavi-700);
  font-size: clamp(30px, 2vw + 20px, 40px); line-height: 1; letter-spacing: 0.01em; overflow-wrap: anywhere;
}
.mk-kod-kart h2 { margin: 0; font-size: clamp(20px, 0.6vw + 17px, 24px); }
.mk-ciddiyet { display: inline-flex; align-items: center; gap: 3px; }
.mk-ciddiyet > span { width: 18px; height: 8px; border-radius: 4px; background: var(--mavi-50); }
.mk-ciddiyet em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--gri); margin-left: 6px; }
.mk-ciddiyet-1 > span:nth-child(1),
.mk-ciddiyet-2 > span:nth-child(-n+2),
.mk-ciddiyet-3 > span:nth-child(-n+2) { background: var(--mavi-400); }
.mk-ciddiyet-3 > span:nth-child(3) { background: var(--hardal); }
.kod-ozet { margin: 0; font-size: 17px; line-height: 1.55; }
.kod-ozet strong { font-family: var(--font-kod); font-weight: 700; }
.mk-kod-sinir, .mk-kod-uyari {
  display: flex; gap: var(--b-2); align-items: flex-start; margin: 0;
  padding: var(--b-3) var(--b-4); border-radius: 14px; background: var(--mavi-50);
  font-size: 15px; color: var(--gece);
}
.mk-kod-sinir svg, .mk-kod-uyari svg { flex: none; margin-top: 3px; color: var(--mavi-700); }
.mk-kod-uyari { background: #FFF6E3; box-shadow: inset 3px 0 0 var(--hardal); }
.mk-kod-alanlar { margin: 0; display: grid; gap: var(--b-2); }
.mk-kod-alanlar dt { font-weight: 600; font-size: 15px; color: var(--gri); margin-top: var(--b-2); }
.mk-kod-alanlar dd { margin: 0; }
.mk-kod-bag { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.mk-kaynak-satir { display: flex; flex-wrap: wrap; gap: var(--b-2); align-items: center; margin: 0; overflow-wrap: anywhere; }
.mk-kaynak-satir svg { color: var(--mavi-700); }
.mk-kod-arama { display: flex; flex-wrap: wrap; gap: var(--b-3); align-items: center; padding: var(--b-3); }
.mk-kod-arama .girdi { flex: 1 1 220px; min-width: 0; }
.mk-populer { margin: 0; }
.mk-kod-mavi { color: var(--mavi-700); }
.mk-grup-kesit-bas { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--b-3); align-items: center; }
.mk-grup-kesit-bas h2 { margin: 0; }
.mk-grup-kesit-bas p { grid-column: 2; margin: 0; font-size: 15px !important; }

/* Logo sayfası */
.mk-logolar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-3); }
@media (min-width: 640px) { .mk-logolar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-logo { background: var(--beyaz); border-radius: var(--kose-balon); padding: var(--b-4); display: grid; gap: 6px; align-content: start; }
.mk-logo span { color: var(--gri); font-size: 14px; }
.mk-logo p { margin: var(--b-1) 0 0; font-size: 15px; }
.mk-logo-onizleme { display: grid; place-items: center; min-height: 120px; padding: var(--b-4); border-radius: 20px; background: var(--sis); margin-bottom: var(--b-2); }
.mk-logo-onizleme img { max-height: 72px; width: auto; }
.mk-logo-koyu { background: var(--gece); }
.mk-renk { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.mk-renk-cizgili { box-shadow: inset 0 0 0 1px var(--cizgi); }
.mk-il-listesi .marka-bulutu { gap: var(--b-2); }
.mk-il-listesi .cip { min-height: 36px; }

/* Hata kodu kartı, Assist Grup düzeni (30 Eyl 2026): rozet satırı + açılır ayrıntı */
.mk-kod-okuma p { margin: 0; font-size: 15px; color: var(--gri); }
.mk-kod-kapsam { display: flex; gap: var(--b-2); align-items: flex-start; margin-top: var(--b-2) !important; color: var(--gece) !important; }
.mk-kod-kapsam svg { flex: none; margin-top: 3px; color: var(--mavi-700); }
.mk-kart2-bas { display: flex; align-items: center; gap: var(--b-3); flex-wrap: wrap; }
.mk-kart2-rozet { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-kart2-rozet .mk-ciddiyet { padding: 4px 10px; border-radius: var(--kose-hap); background: var(--sis); }
.mk-rozet2 {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px;
  border-radius: var(--kose-hap); background: var(--mavi-50); color: var(--mavi-700);
  font-size: 13px; font-weight: 500;
}
.mk-rozet2-durdur { background: #FFF6E3; color: var(--gece); box-shadow: inset 0 0 0 1px var(--hardal); }
.mk-rozet2-durdur svg { color: #A86B00; }
.mk-rozet2-bilgi { background: var(--sis); color: var(--gri); }
.mk-kart2-model { margin: 0; font-size: 14px; color: var(--gri); }
.mk-kart2-gorulen { display: grid; gap: 4px; padding: var(--b-3) var(--b-4); border-radius: var(--kose-balon); background: var(--sis); }
.mk-kart2-gorulen > span { font-size: 13px; font-weight: 600; color: var(--mavi-700); letter-spacing: 0.02em; }
.mk-kart2-gorulen p { margin: 0; }
.mk-kart2-ayrinti { border-top: 1px solid var(--cizgi); padding-top: var(--b-3); }
.mk-kart2-ayrinti > summary {
  display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--gece);
}
.mk-kart2-ayrinti > summary::-webkit-details-marker { display: none; }
.mk-kart2-ayrinti > summary svg { color: var(--mavi-700); transition: transform .15s ease; }
.mk-kart2-ayrinti[open] > summary svg { transform: rotate(90deg); }
.mk-kart2-sayi { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--gri); }
.mk-kart2-ayrinti[open] { display: grid; gap: var(--b-3); }
.mk-kart2-adimlar { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.mk-kart2-alt { margin: 0; font-size: 14px; font-weight: 600; color: var(--gri); }
@media (prefers-reduced-motion: reduce) { .mk-kart2-ayrinti > summary svg { transition: none; } }