/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════
   css/masa.css — MATAİ PRO «Masa» tasarım dili (PA-SA-1 · mimari/38)
   Kolay moddaki «Sınav Masası» dilinin (v2_kolay.css, --k-*) platformun tamamına genişletilmiş hâli:
   serin gri masa zemini · beyaz kâğıt yüzeyler · mürekkep laciverti · TEK vurgu mavisi · koyu lacivert ray ·
   başlık Poppins, gövde sistem yazısı · imza öğesi CETVEL (ölçme = ölçü çizgisi).
   ⭐ KAPSAM: yalnız .m-* sınıfları ve html[data-masa] taban kuralları. Dosyayı bağlamak eski sayfada HİÇBİR ŞEYİ değiştirmez;
      sayfa <html data-masa> yazınca taban (zemin, yazı, bağlantı) devreye girer.
   ⭐ RENK: düz ve net. Degrade ve mor / indigo YOK. Bileşen ham renk YAZMAZ, jeton kullanır (kapı: tests/masa_css_test.js).
   ⭐ ROL AYRIMI: dolgu rengi (--m-yesil, beyaz yazı taşır) ile yazı rengi (--m-yesil-yazi) ayrı jetondur; koyu temada yazı açılır, dolgu aynı kalır.
   ⭐ TEMA: aydınlık varsayılan; <html data-tema="koyu"> «gece masası». Hesabım'daki renk paleti yalnız --m-vurgu* ailesini ezer (js/tema.js aile «masa»).
   ⭐ DOKUNMA HEDEFİ en az 44 px, birincil eylem 48 px. En küçük yazı 13 px. Odak halkası her etkileşimli öğede görünür.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/vendor/fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/vendor/fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/vendor/fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.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}

/* ── jetonlar: aydınlık «gündüz masası» ── */
:root{
  --m-zemin:#f2f5f9;--m-kagit:#ffffff;--m-kagit2:#f6f8fb;
  --m-murekkep:#0f1f33;--m-metin2:#3f4f63;--m-soluk:#5b6b80;
  --m-cizgi:#dbe3ec;--m-cizgi2:#b7c4d2;
  --m-vurgu:#0474c4;--m-vurgu2:#045f9f;--m-vurgu3:#06457f;--m-vurgu-yazi:#06457f;--m-vurguZ:#e9f3fc;--m-vurguK:#b5d5f0;
  --m-ray:#0c2740;--m-ray2:#143654;--m-rayCizgi:#2b4a69;--m-rayMetin:#a9bdd1;--m-rayYesil:#2bb38a;
  --m-yesil:#12735a;--m-yesil-yazi:#12735a;--m-yesilZ:#e4f4ee;--m-yesilK:#a9d9c7;
  --m-amber:#8a5a00;--m-amber-yazi:#8a5a00;--m-amberZ:#fdf4dc;--m-amberK:#ecd08f;
  --m-kirmizi:#b42318;--m-kirmizi-yazi:#b42318;--m-kirmiziZ:#fdf0ee;--m-kirmiziK:#f3c2ba;
  --m-golge:0 1px 2px rgba(15,31,51,.06),0 10px 24px -14px rgba(15,31,51,.22);
  --m-golge2:0 22px 48px -20px rgba(15,31,51,.42);
  --m-r:16px;--m-r2:12px;--m-r3:10px;
  --m-baslik:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --m-govde:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --m-ray-en:264px;--m-ust-boy:56px;--m-sekme-boy:64px;
  --m-hiz1:.12s;--m-hiz2:.2s;--m-hiz3:.32s;--m-egri:cubic-bezier(.2,.7,.2,1);
}
/* ── jetonlar: koyu «gece masası» ── */
html[data-tema="koyu"]{
  --m-zemin:#0a1724;--m-kagit:#11263a;--m-kagit2:#163049;
  --m-murekkep:#e9eff6;--m-metin2:#b7c5d4;--m-soluk:#93a6ba;
  --m-cizgi:#213c56;--m-cizgi2:#34587a;
  --m-vurgu-yazi:#7cc0f5;--m-vurguZ:#0f3350;--m-vurguK:#1f5c8f;
  --m-ray:#071421;--m-ray2:#0e2337;--m-rayCizgi:#1f3a54;
  --m-yesil-yazi:#6fd3b1;--m-yesilZ:#0e3229;--m-yesilK:#1d5a48;
  --m-amber-yazi:#f0c264;--m-amberZ:#382a08;--m-amberK:#6b520f;
  --m-kirmizi-yazi:#ff9d91;--m-kirmiziZ:#3a1512;--m-kirmiziK:#7a2a22;
  --m-golge:0 1px 2px rgba(0,0,0,.3),0 10px 24px -14px rgba(0,0,0,.6);
  --m-golge2:0 22px 48px -20px rgba(0,0,0,.75);
}

/* ── taban (yalnız <html data-masa>). :where() ile özgüllük sıfırlanır: .m-* bileşeni ve sayfanın kendi kuralı tabanı her zaman ezer
   (bağlantı rengi düğme yazısını bastırıyordu: a.m-dgm lacivert yazı + mavi zemin). ── */
html[data-masa]{-webkit-text-size-adjust:100%;color-scheme:light}
html[data-masa][data-tema="koyu"]{color-scheme:dark}
:where(html[data-masa]) body{margin:0;background:var(--m-zemin);color:var(--m-murekkep);font:400 1rem/1.55 var(--m-govde);-webkit-font-smoothing:antialiased;overflow-x:clip}
:where(html[data-masa]) *,:where(html[data-masa]) *::before,:where(html[data-masa]) *::after{box-sizing:border-box}
:where(html[data-masa]) h1,:where(html[data-masa]) h2,:where(html[data-masa]) h3{font-family:var(--m-baslik);font-weight:600;color:var(--m-murekkep);letter-spacing:-.01em;line-height:1.25;margin:0}
:where(html[data-masa]) a{color:var(--m-vurgu-yazi);text-underline-offset:3px}
:where(html[data-masa]) :focus-visible{outline:3px solid var(--m-vurgu);outline-offset:2px;border-radius:6px}
html[data-masa] [hidden]{display:none!important}
.m-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.m-atla{position:fixed;left:12px;top:-64px;z-index:400;padding:12px 16px;border-radius:var(--m-r3);background:var(--m-murekkep);color:var(--m-kagit);font-weight:600;text-decoration:none}
.m-atla:focus{top:12px}
.m-simge{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── kabuk: ray (≥ 1000 px) · üst çubuk + alt sekme (< 1000 px) ── */
.m-kabuk{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.m-ray{display:none}
.m-ust{position:sticky;top:0;z-index:40;flex:none;display:flex;align-items:center;gap:12px;min-height:var(--m-ust-boy);padding:0 16px;padding-top:env(safe-area-inset-top,0px);
  background:var(--m-kagit);border-bottom:1px solid var(--m-cizgi)}
.m-marka{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:44px;line-height:1.2;text-decoration:none}
.m-marka b{font:700 1rem/1.2 var(--m-baslik);letter-spacing:.04em;color:var(--m-vurgu-yazi)}
.m-marka span{font-size:.8125rem;color:var(--m-soluk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-ust-bosluk{flex:1 1 auto}
.m-ana{flex:1 0 auto;width:100%;max-width:1040px;margin:0 auto;padding:24px 16px calc(var(--m-sekme-boy) + 32px + env(safe-area-inset-bottom,0px));outline:none}
.m-ana--dar{max-width:788px}
.m-ana--genis{max-width:1280px}
/* kabuk bağlı sayfada kabukla ÇİFTLENEN sayfa öğeleri (sayfanın kendi «ana sayfa» bağı, ad etiketi): DOM'da kalır (testler ve eski betikler arar), görünmez */
.m-kabuk [data-masa-cift]{display:none !important}
.m-sekme{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:space-around;gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
  background:var(--m-kagit);border-top:1px solid var(--m-cizgi)}
.m-sekme a{flex:1 1 0;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 2px;border-radius:var(--m-r3);
  color:var(--m-soluk);font-size:.8125rem;font-weight:600;line-height:1.15;text-decoration:none;text-align:center}
.m-sekme a .m-simge{width:22px;height:22px}
.m-sekme a[aria-current="page"]{color:var(--m-vurgu-yazi);background:var(--m-vurguZ)}
@media (min-width:641px){.m-ana{padding-left:24px;padding-right:24px;padding-top:32px}.m-ust{padding-left:24px;padding-right:24px}}
@media (min-width:1000px){
  .m-kabuk{padding-left:var(--m-ray-en)}
  .m-ray{position:fixed;left:0;top:0;bottom:0;z-index:50;width:var(--m-ray-en);display:flex;flex-direction:column;gap:4px;padding:28px 16px 20px;overflow-y:auto;
    background:var(--m-ray);color:var(--m-rayMetin)}
  .m-ust,.m-sekme{display:none}
  .m-ana{padding:40px 40px 56px}
}
/* ray içeriği ekran boyundan uzunsa (öğretmen: 21 bağ, 800 px) esnek öğeler SIKIŞIRDI: marka alt yazısı kırpılıyordu. Ray kaydırılır, öğeler sıkışmaz. */
.m-ray > *{flex:none}
.m-ray .m-marka{padding:0 12px 20px}
.m-ray .m-marka b{color:#fff;font-size:1.0625rem}
.m-ray .m-marka span{color:var(--m-rayMetin)}
.m-ray-baslik{margin:18px 12px 6px;font-size:.8125rem;font-weight:600;color:var(--m-rayMetin)}
.m-ray a.m-ray-bag{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:var(--m-r3);color:var(--m-rayMetin);font-size:.9375rem;font-weight:600;text-decoration:none;
  transition:background-color var(--m-hiz1) ease,color var(--m-hiz1) ease}
.m-ray a.m-ray-bag:hover{background:var(--m-ray2);color:#fff}
.m-ray a.m-ray-bag[aria-current="page"]{background:var(--m-ray2);color:#fff;box-shadow:inset 3px 0 0 var(--m-rayYesil)}
.m-ray :focus-visible{outline-color:#fff}
.m-ray-alt{margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--m-rayCizgi);font-size:.875rem}
.m-ray-alt b{display:block;color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* «Menü» penceresi (< 1000 px; js/masa_kabuk.js): tam gezinme listesi kâğıt üstünde */
.m-menu-liste{display:flex;flex-direction:column;gap:2px;margin:0 0 14px}
.m-menu-liste .m-ray-baslik{margin:14px 12px 4px;color:var(--m-soluk)}
.m-menu-liste a.m-ray-bag{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border-radius:var(--m-r3);color:var(--m-murekkep);font-size:1rem;font-weight:600;text-decoration:none}
.m-menu-liste a.m-ray-bag:hover{background:var(--m-kagit2)}
.m-menu-liste a.m-ray-bag[aria-current="page"]{background:var(--m-vurguZ);color:var(--m-vurgu-yazi)}

/* ── sayfa başlığı ve karşılama ── */
.m-bas{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin:0 0 24px}
.m-bas h1{font-size:1.75rem;max-width:22em}
.m-bas p{margin:6px 0 0;color:var(--m-metin2);max-width:62ch}
.m-ust-yazi{margin:0 0 6px;font-size:.875rem;font-weight:600;color:var(--m-soluk)}
@media (max-width:640px){.m-bas h1{font-size:1.375rem}}

/* ── kâğıt (kart) ── */
.m-kart{background:var(--m-kagit);border:1px solid var(--m-cizgi);border-radius:var(--m-r);padding:20px;margin:0 0 20px}
.m-kart > h2{font-size:1.125rem;margin:0 0 14px}
.m-kart--siki{padding:14px 16px}
.m-kart--vurgu{border:1.5px solid var(--m-murekkep);box-shadow:var(--m-golge)}
.m-kart--yigin{position:relative;box-shadow:0 1px 0 var(--m-kagit),0 2px 0 var(--m-cizgi),0 4px 0 -1px var(--m-kagit2),0 5px 0 -1px var(--m-cizgi)}
.m-kart--bag{display:block;color:inherit;text-decoration:none;transition:border-color var(--m-hiz1) ease,box-shadow var(--m-hiz2) ease}
.m-kart--bag:hover{border-color:var(--m-cizgi2);box-shadow:var(--m-golge)}
@media (min-width:641px){.m-kart{padding:22px 24px}}
.m-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.m-izgara > .m-kart{margin:0}
.m-iki{display:grid;gap:20px}
@media (min-width:1000px){.m-iki{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}}

/* ── düğmeler ── */
.m-dgm{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 20px;border:1.5px solid transparent;border-radius:var(--m-r2);
  background:var(--m-vurgu);color:#fff;font:600 1rem/1.2 var(--m-baslik);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--m-hiz1) ease,border-color var(--m-hiz1) ease,transform var(--m-hiz1) ease}
.m-dgm:hover{background:var(--m-vurgu2)}
.m-dgm:active{transform:translateY(1px)}
.m-dgm[disabled],.m-dgm[aria-disabled="true"]{background:var(--m-cizgi);color:var(--m-soluk);cursor:not-allowed;transform:none}
.m-dgm--ikincil{background:var(--m-kagit);color:var(--m-murekkep);border-color:var(--m-cizgi2)}
.m-dgm--ikincil:hover{background:var(--m-kagit2);border-color:var(--m-soluk)}
.m-dgm--metin{min-height:44px;padding:8px 10px;background:none;color:var(--m-vurgu-yazi)}
.m-dgm--metin:hover{background:var(--m-vurguZ)}
.m-dgm--tehlike{background:var(--m-kirmizi)}
.m-dgm--tehlike:hover{background:var(--m-kirmizi);filter:brightness(.9)}
.m-dgm--kucuk{min-height:44px;padding:8px 14px;font-size:.9375rem}
.m-dgm--tam{display:flex;width:100%}
.m-eylem{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* yapışkan eylem çubuğu: tek birincil eylem + özet (kolay moddaki «Soruları üret» çubuğu) */
.m-cubuk{position:sticky;bottom:calc(var(--m-sekme-boy) + 20px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;
  margin:20px 0 0;padding:11px 12px 11px 20px;background:var(--m-kagit);border:1.5px solid var(--m-murekkep);border-radius:var(--m-r);box-shadow:var(--m-golge2)}
.m-cubuk-ozet{flex:1 1 220px;min-width:0;font:600 1rem/1.35 var(--m-baslik);overflow-wrap:anywhere}
@media (min-width:1000px){.m-cubuk{bottom:16px}}

/* ── form ── */
.m-alan{margin:0 0 16px}
.m-alan > label,.m-etiket{display:block;margin:0 0 7px;font-size:.9375rem;font-weight:600;color:var(--m-murekkep)}
.m-gir,.m-sec{width:100%;min-height:48px;padding:11px 14px;font:inherit;font-size:1rem;color:var(--m-murekkep);background-color:var(--m-kagit);border:1.5px solid var(--m-cizgi2);border-radius:var(--m-r3);
  transition:border-color var(--m-hiz1) ease}
.m-gir:hover,.m-sec:hover{border-color:var(--m-soluk)}
.m-gir:focus-visible,.m-sec:focus-visible{border-color:var(--m-vurgu)}
.m-gir::placeholder{color:var(--m-soluk)}
select.m-sec{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;background-repeat:no-repeat;background-position:right 14px center;background-size:14px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%235b6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html[data-tema="koyu"] select.m-sec{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%2393a6ba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
textarea.m-gir{min-height:96px;resize:vertical;line-height:1.5}
.m-ipucu{margin:7px 0 0;font-size:.875rem;line-height:1.5;color:var(--m-soluk)}
.m-alan-hata{margin:7px 0 0;font-size:.875rem;font-weight:600;color:var(--m-kirmizi-yazi)}
.m-gir[aria-invalid="true"],.m-sec[aria-invalid="true"]{border-color:var(--m-kirmizi)}
.m-onay{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:10px 0;cursor:pointer}
.m-onay input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--m-vurgu)}

/* ── çip ve rozet ── */
.m-cipler{display:flex;flex-wrap:wrap;gap:8px}
.m-cip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border:1.5px solid var(--m-cizgi2);border-radius:999px;background:var(--m-kagit);color:var(--m-metin2);
  font:inherit;font-size:.9375rem;font-weight:600;text-decoration:none;cursor:pointer;transition:border-color var(--m-hiz1) ease,background-color var(--m-hiz1) ease}
.m-cip:hover{border-color:var(--m-soluk)}
.m-cip[aria-pressed="true"],.m-cip[aria-selected="true"],.m-cip.secili{background:var(--m-murekkep);border-color:var(--m-murekkep);color:var(--m-kagit)}
.m-rozet{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--m-vurguK);border-radius:999px;background:var(--m-vurguZ);color:var(--m-vurgu-yazi);
  font-size:.8125rem;font-weight:600;line-height:1.5;white-space:nowrap}
.m-rozet--yesil{background:var(--m-yesilZ);border-color:var(--m-yesilK);color:var(--m-yesil-yazi)}
.m-rozet--amber{background:var(--m-amberZ);border-color:var(--m-amberK);color:var(--m-amber-yazi)}
.m-rozet--kirmizi{background:var(--m-kirmiziZ);border-color:var(--m-kirmiziK);color:var(--m-kirmizi-yazi)}
.m-rozet--sade{background:var(--m-kagit2);border-color:var(--m-cizgi);color:var(--m-metin2)}

/* ── CETVEL: ölçünün göstergesi (ilerleme, ustalık, başarı). Dolgu + altında çeyrek çentikleri.
   <div class="m-cetvel" style="--m-deger:62" role="img" aria-label="…"><i></i></div>   değer 0–100 · çentikler çeyreklerde (ortadaki uzun) ── */
.m-cetvel{--m-deger:0;position:relative;height:22px;min-width:72px;padding:0}
.m-cetvel > i{position:absolute;left:0;top:0;height:10px;width:100%;border-radius:5px;background:var(--m-cizgi);overflow:hidden}
.m-cetvel > i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--m-deger) * 1%);border-radius:5px;background:var(--m-vurgu);transition:width var(--m-hiz3) var(--m-egri)}
.m-cetvel::before,.m-cetvel::after{content:"";position:absolute;top:13px;box-sizing:border-box}
.m-cetvel::before{left:25%;width:50%;height:5px;border-left:1.5px solid var(--m-cizgi2);border-right:1.5px solid var(--m-cizgi2)}
.m-cetvel::after{left:50%;height:8px;margin-left:-.75px;border-left:1.5px solid var(--m-soluk)}
.m-cetvel--yesil > i::after{background:var(--m-yesil)}
.m-cetvel--amber > i::after{background:var(--m-amber)}
.m-cetvel--kirmizi > i::after{background:var(--m-kirmizi)}
.m-cetvel--ince{height:10px}
.m-cetvel--ince::before,.m-cetvel--ince::after{display:none}
/* ölçü: büyük sayı + etiket + cetvel */
.m-olcu{display:flex;flex-direction:column;gap:6px;min-width:0}
.m-olcu b{font:700 2rem/1.1 var(--m-baslik);font-variant-numeric:tabular-nums;color:var(--m-murekkep)}
.m-olcu b small{font-size:1rem;font-weight:600;color:var(--m-soluk)}
.m-olcu span{font-size:.875rem;color:var(--m-metin2)}

/* ── ÇİZELGE: dikey adım / gün akışı (kolay moddaki adım çizelgesinin platform karşılığı).
   <ol class="m-cizelge"><li class="bitti|aktif|"><span class="m-cizelge-no">1</span><div>…</div></li></ol> ── */
.m-cizelge{list-style:none;margin:0;padding:0}
.m-cizelge > li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 14px;padding:0 0 20px}
.m-cizelge > li::before{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;background:var(--m-cizgi)}
.m-cizelge > li:last-child{padding-bottom:0}
.m-cizelge > li:last-child::before{display:none}
.m-cizelge-no{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--m-cizgi2);background:var(--m-kagit);color:var(--m-metin2);
  font:700 .8125rem/1 var(--m-baslik);font-variant-numeric:tabular-nums}
.m-cizelge > li.aktif .m-cizelge-no{background:var(--m-vurgu);border-color:var(--m-vurgu);color:#fff}
.m-cizelge > li.bitti .m-cizelge-no{background:var(--m-yesil);border-color:var(--m-yesil);color:transparent}
.m-cizelge > li.bitti .m-cizelge-no::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.875rem}
.m-cizelge > li.bitti::before{background:var(--m-yesil)}
.m-cizelge-ad{margin:2px 0 2px;font:600 1rem/1.35 var(--m-baslik);color:var(--m-murekkep)}
.m-cizelge-not{margin:0;font-size:.9375rem;color:var(--m-metin2)}
.m-cizelge > li > div > .m-eylem{margin-top:10px}

/* ── liste satırı ── */
.m-liste{list-style:none;margin:0;padding:0}
.m-liste > li{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 0;border-top:1px solid var(--m-cizgi)}
.m-liste > li:first-child{border-top:0}
.m-liste-govde{flex:1 1 auto;min-width:0}
.m-liste-govde b{display:block;font-weight:600;overflow-wrap:anywhere}
.m-liste-govde span{display:block;font-size:.875rem;color:var(--m-soluk)}

/* ── tablo: ≤ 640 px'te her satır bir karta döner (hücrede data-etiket) ── */
.m-tablo-sar{overflow-x:auto;border:1px solid var(--m-cizgi);border-radius:var(--m-r2);background:var(--m-kagit)}
.m-tablo{width:100%;border-collapse:collapse;font-size:.9375rem}
.m-tablo th{position:sticky;top:0;padding:12px 14px;background:var(--m-kagit2);border-bottom:1px solid var(--m-cizgi2);color:var(--m-metin2);font-size:.875rem;font-weight:600;text-align:left;white-space:nowrap}
.m-tablo td{padding:12px 14px;border-bottom:1px solid var(--m-cizgi);vertical-align:middle}
.m-tablo tr:last-child td{border-bottom:0}
.m-tablo tbody tr:hover td{background:var(--m-kagit2)}
.m-tablo .m-sayi{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .m-tablo--kart thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .m-tablo--kart,.m-tablo--kart tbody,.m-tablo--kart tr,.m-tablo--kart td{display:block;width:100%}
  .m-tablo--kart tr{padding:10px 14px;border-bottom:1px solid var(--m-cizgi)}
  .m-tablo--kart td{display:flex;justify-content:space-between;gap:16px;padding:5px 0;border:0;text-align:right}
  .m-tablo--kart td::before{content:attr(data-etiket);flex:none;color:var(--m-soluk);font-size:.875rem;text-align:left}
  .m-tablo--kart td:first-child{font-weight:600;text-align:left}
  .m-tablo--kart td:first-child::before{display:none}
  .m-tablo--kart td > .m-cetvel{flex:0 1 150px}
}

/* ── sekmeler ── */
.m-sekmeler{display:flex;gap:4px;overflow-x:auto;margin:0 0 20px;border-bottom:1px solid var(--m-cizgi);scrollbar-width:none}
.m-sekmeler::-webkit-scrollbar{display:none}
.m-sekmeler [role="tab"]{flex:none;min-height:48px;padding:10px 14px;border:0;border-bottom:3px solid transparent;background:none;color:var(--m-soluk);font:600 .9375rem/1.2 var(--m-baslik);cursor:pointer;white-space:nowrap}
.m-sekmeler [role="tab"]:hover{color:var(--m-murekkep)}
.m-sekmeler [role="tab"][aria-selected="true"]{color:var(--m-murekkep);border-bottom-color:var(--m-vurgu)}

/* ── not, uyarı, boş durum, iskelet ── */
.m-not{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 14px;border:1px solid var(--m-vurguK);border-radius:var(--m-r2);background:var(--m-vurguZ);color:var(--m-murekkep);font-size:.9375rem}
.m-not--amber{background:var(--m-amberZ);border-color:var(--m-amberK)}
.m-not--kirmizi{background:var(--m-kirmiziZ);border-color:var(--m-kirmiziK)}
.m-not--yesil{background:var(--m-yesilZ);border-color:var(--m-yesilK)}
.m-not .m-simge{margin-top:2px;color:var(--m-vurgu-yazi)}
.m-not--amber .m-simge{color:var(--m-amber-yazi)}
.m-not--kirmizi .m-simge{color:var(--m-kirmizi-yazi)}
.m-not--yesil .m-simge{color:var(--m-yesil-yazi)}
.m-bos{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:24px 20px;border:1.5px dashed var(--m-cizgi2);border-radius:var(--m-r);color:var(--m-metin2)}
.m-bos b{font:600 1.0625rem/1.35 var(--m-baslik);color:var(--m-murekkep)}
.m-bos .m-dgm{margin-top:10px}
.m-iskelet{display:block;height:14px;border-radius:7px;background:var(--m-cizgi);animation:m-nabiz 1.2s ease-in-out infinite alternate}
.m-iskelet + .m-iskelet{margin-top:10px}
@keyframes m-nabiz{to{opacity:.45}}

/* ── bildirim yığını (aria-live bölgesi) ve pencere ── */
.m-bildirimler{position:fixed;left:16px;right:16px;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:300;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.m-bildirim{pointer-events:auto;box-sizing:border-box;width:max-content;max-width:min(100%,560px);padding:12px 16px;border-radius:var(--m-r2);background:var(--m-vurgu3);color:#fff;font:600 .9375rem/1.45 var(--m-govde);
  text-align:center;overflow-wrap:anywhere;box-shadow:var(--m-golge2)}
.m-bildirim--yesil{background:var(--m-yesil)}
.m-bildirim--kirmizi{background:var(--m-kirmizi)}
.m-bildirim--amber{background:var(--m-amber)}
@media (min-width:1000px){.m-bildirimler{left:calc(var(--m-ray-en) + 16px);top:20px}}
.m-perde{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(7,20,33,.62)}
.m-pencere{width:100%;max-width:520px;max-height:calc(100dvh - 32px);overflow-y:auto;padding:22px 22px 18px;border-radius:var(--m-r);background:var(--m-kagit);color:var(--m-murekkep);box-shadow:var(--m-golge2)}
.m-pencere > h2{font-size:1.25rem;margin:0 0 10px}
.m-pencere > .m-eylem{justify-content:flex-end;margin-top:20px}
@media (max-width:640px){.m-perde{place-items:end center;padding:0}.m-pencere{max-width:none;border-radius:var(--m-r) var(--m-r) 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}}

/* ── baskı ve azaltılmış hareket ── */
@media print{.m-ray,.m-ust,.m-sekme,.m-bildirimler,.m-cubuk,.m-atla{display:none!important}.m-kabuk{padding:0}.m-kart{break-inside:avoid;box-shadow:none}}
@media (prefers-reduced-motion:reduce){
  .m-dgm,.m-cip,.m-gir,.m-sec,.m-kart--bag,.m-ray a.m-ray-bag,.m-cetvel > i::after{transition:none}
  .m-iskelet{animation:none}
}
