@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..700&display=swap");
/* tada mobil tasarim sistemi — SHOPIFY DESIGN.md uyarlamasi (Faz 309)
   Kullanici karari (2026-09-26 aksam): "npx getdesign@latest add shopify — bu tasarim sistemini kullan";
   Ayarlar Claude uygulamasi gibi sade/gruplu; koyu mod telefona uysun. Kaynak: repo kokundeki DESIGN.md
   (VoltAgent awesome-design-md, "transactional track"). Bilgisayar ekranlari (admin, root) degismez.
   Sistemden alinanlar: siyah hap (pill) dugmeler, beyaz/krem zemin, siyah murekkep yazi, aloe yesili vurgu
   (#c1fbd4, yalniz zemin — yazi rengi degil), Inter (ss03), kose 8/12/20, gri merdiveni (shade-30..70),
   katmanli ince golge (Level 3). Koyu mod: "cinematic track" siyah zemin + beyaz yazi + beyaz hap.
   Bilerek sapmalar (erisilebilirlik): giris alanlarinin cercevesi hairline #e4e4e7 degil shade-50 (3:1 kural),
   durum renkleri (basari/uyari/hata) sistemde yok, kontrasti olculerek eklendi; dokunma alani her yerde >= 48.
   Degisken adlari (--md-*) sayfalarda kullanildigi icin korundu; DEGERLER Shopify sistemidir.
   Yazi boyutu: --tm-olcek (tada-boyut.js, Kucuk .9 / Normal 1 / Buyuk 1.15). Tema: html[data-tm-tema]. */

:root {
  color-scheme: light;
  /* ---- renk rolleri (acik: transactional track) ---- */
  --md-primary: #000000;                 /* button-primary-pill */
  --md-on-primary: #FFFFFF;
  --md-primary-basili: #3F3F46;          /* button-primary-pill-pressed (shade-70) */
  --md-primary-container: #C1FBD4;       /* aloe-10: one cikan / secili zemin */
  --md-on-primary-container: #000000;
  --md-secondary-container: #C1FBD4;     /* secili gosterge, secili cip */
  --md-on-secondary-container: #000000;
  --md-surface: #FBFBF5;                 /* canvas-cream: sayfa zemini */
  --md-surface-container-lowest: #FFFFFF;/* canvas-light: kart, grup, alan */
  --md-surface-container-low: #FFFFFF;
  --md-surface-container: #FFFFFF;
  --md-surface-container-high: #F4F4F5;  /* yalniz yer tutucu/iskelet */
  --md-surface-container-highest: #E4E4E7;/* hairline-light */
  --md-on-surface: #000000;              /* ink */
  --md-on-surface-variant: #52525B;      /* shade-60 (ikincil yazi) */
  --md-outline: #71717A;                 /* shade-50: giris cercevesi (erisilebilirlik sapmasi) */
  --md-outline-variant: #E4E4E7;         /* hairline-light */
  --md-inverse-surface: #000000;
  --md-inverse-on-surface: #FFFFFF;
  --md-inverse-primary: #C1FBD4;
  --md-pistachio: #D4F9E0;
  --md-error: #B42318;
  --md-on-error: #FFFFFF;
  --md-error-container: #FDE8E6;
  --md-on-error-container: #8A1C12;
  --md-basari: #0B6B34;
  --md-basari-container: #C1FBD4;
  --md-uyari: #7A4A00;
  --md-uyari-container: #FFE8C2;
  --md-scrim: #000000;

  /* ---- sekil — DESIGN.md rounded ---- */
  --md-k-xs: 4px; --md-k-sm: 8px; --md-k-md: 12px; --md-k-lg: 20px; --md-k-xl: 20px; --md-k-tam: 9999px;
  /* ---- durum ---- */
  --md-hover: .06; --md-focus: .10; --md-pressed: .10; --md-disabled: .38;
  /* ---- hareket ---- */
  --md-hizli: 160ms; --md-orta: 240ms; --md-egri: cubic-bezier(.2, 0, 0, 1); --md-egri-yavaslayan: cubic-bezier(.05, .7, .1, 1);
  /* ---- golge — DESIGN.md Level 3 (katmanli ince) ve Level 4 (yuzen panel) ---- */
  --md-golge-1: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .06);
  --md-golge-2: 0 8px 8px rgba(0,0,0,.1), 0 4px 4px rgba(0,0,0,.1), 0 2px 2px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.1);
  --md-golge-3: 0 25px 50px -12px rgba(0, 0, 0, .25);

  --tm-olcek: 1;
  --tm-font: "Inter Variable", Inter, Helvetica, Arial, sans-serif;
  --tm-kenar: 16px;
  --tm-dokunma: 48px;
  /* Faz 303 uyumluluk adlari */
  --tm-vurgu: var(--md-primary); --tm-vurgu-dolgu: var(--md-primary);
  --tm-yazi: var(--md-on-surface); --tm-yazi-soluk: var(--md-on-surface-variant);
  --tm-zemin: var(--md-surface); --tm-cizgi-hafif: var(--md-outline-variant);
}
html[data-tm-boyut="kucuk"] { --tm-olcek: .9; }
html[data-tm-boyut="buyuk"] { --tm-olcek: 1.15; }

/* ---- Koyu tema (cinematic track): telefon koyu moddaysa; Ayarlar'da "Acik" secilirse uygulanmaz ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tm-tema="acik"]) {
    color-scheme: dark;
    --md-primary: #FFFFFF; --md-on-primary: #000000; --md-primary-basili: #D4D4D8;
    --md-primary-container: #C1FBD4; --md-on-primary-container: #000000;
    --md-secondary-container: #3F3F46; --md-on-secondary-container: #FFFFFF;
    --md-surface: #000000; --md-surface-container-lowest: #0A0A0A; --md-surface-container-low: #0A0A0A; --md-surface-container: #0A0A0A;
    --md-surface-container-high: #18181B; --md-surface-container-highest: #27272A;
    --md-on-surface: #FFFFFF; --md-on-surface-variant: #A1A1AA; --md-outline: #71717A; --md-outline-variant: #27272A;
    --md-inverse-surface: #FFFFFF; --md-inverse-on-surface: #000000; --md-inverse-primary: #C1FBD4;
    --md-error: #FF8A80; --md-on-error: #000000; --md-error-container: #3B0D0A; --md-on-error-container: #FFB4AB;
    --md-basari: #86EFAC; --md-basari-container: #0B3B20; --md-uyari: #FCD34D; --md-uyari-container: #3A2A00;
    --md-golge-1: 0 1px 2px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.04);
    --md-golge-2: 0 0 0 1px rgba(255,255,255,.08), 0 1px 3px rgba(0,0,0,.3), 0 5px 10px rgba(0,0,0,.2);
  }
}
html[data-tm-tema="koyu"] {
  color-scheme: dark;
  --md-primary: #FFFFFF; --md-on-primary: #000000; --md-primary-basili: #D4D4D8;
  --md-primary-container: #C1FBD4; --md-on-primary-container: #000000;
  --md-secondary-container: #3F3F46; --md-on-secondary-container: #FFFFFF;
  --md-surface: #000000; --md-surface-container-lowest: #0A0A0A; --md-surface-container-low: #0A0A0A; --md-surface-container: #0A0A0A;
  --md-surface-container-high: #18181B; --md-surface-container-highest: #27272A;
  --md-on-surface: #FFFFFF; --md-on-surface-variant: #A1A1AA; --md-outline: #71717A; --md-outline-variant: #27272A;
  --md-inverse-surface: #FFFFFF; --md-inverse-on-surface: #000000; --md-inverse-primary: #C1FBD4;
  --md-error: #FF8A80; --md-on-error: #000000; --md-error-container: #3B0D0A; --md-on-error-container: #FFB4AB;
  --md-basari: #86EFAC; --md-basari-container: #0B3B20; --md-uyari: #FCD34D; --md-uyari-container: #3A2A00;
  --md-golge-1: 0 1px 2px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.04);
  --md-golge-2: 0 0 0 1px rgba(255,255,255,.08), 0 1px 3px rgba(0,0,0,.3), 0 5px 10px rgba(0,0,0,.2);
}

/* ---------- Tipografi — DESIGN.md (Inter; basliklar ince/orta agirlik) ---------- */
.tm-t-display-s, .tm-t-headline-m { font-size: calc(1.75rem * var(--tm-olcek)); line-height: 1.28; font-weight: 500; letter-spacing: .015em; }
.tm-t-headline-s { font-size: calc(1.5rem * var(--tm-olcek)); line-height: 1.14; font-weight: 400; letter-spacing: .015em; }
.tm-t-title-l { font-size: calc(1.5rem * var(--tm-olcek)); line-height: 1.2; font-weight: 400; letter-spacing: .015em; }
.tm-t-title-m { font-size: calc(1.125rem * var(--tm-olcek)); line-height: 1.25; font-weight: 500; letter-spacing: .02em; }
.tm-t-title-s { font-size: calc(1rem * var(--tm-olcek)); line-height: 1.5; font-weight: 550; }
.tm-t-body-l { font-size: calc(1rem * var(--tm-olcek)); line-height: 1.5; font-weight: 420; }
.tm-t-body-m { font-size: calc(.875rem * var(--tm-olcek)); line-height: 1.49; font-weight: 500; letter-spacing: .02em; }
.tm-t-body-s { font-size: calc(.8125rem * var(--tm-olcek)); line-height: 1.5; font-weight: 500; letter-spacing: -.01em; }
.tm-t-label-l { font-size: calc(1rem * var(--tm-olcek)); line-height: 1.5; font-weight: 420; }
.tm-t-label-m { font-size: calc(.75rem * var(--tm-olcek)); line-height: 1.2; font-weight: 400; letter-spacing: .06em; }
.tm-soluk { color: var(--md-on-surface-variant); }

/* ---------- Ekran ---------- */
.tm-ekran, .tm-ekran *, .tm-ekran *::before, .tm-ekran *::after { box-sizing: border-box; }
.tm-ekran {
  min-height: 100vh; min-height: 100dvh; margin: 0;
  background: var(--md-surface); color: var(--md-on-surface);
  font-family: var(--tm-font); font-feature-settings: "ss03"; font-size: calc(1rem * var(--tm-olcek)); line-height: 1.5; font-weight: 420;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
}
.tm-icerik { width: min(640px, 100%); margin: 0 auto; }
.tm-ekran button, .tm-ekran input, .tm-ekran select, .tm-ekran textarea { font-family: inherit; font-feature-settings: inherit; }

.tm-dugme:focus-visible, .tm-ikon-dugme:focus-visible, .tm-cip:focus-visible, .tm-satir:focus-visible, .tm-gez a:focus-visible,
.tm-bolum-eylem:focus-visible, .tm-karo:focus-visible, .tm-bolumlu button:focus-visible, .tm-anahtar:focus-visible, .tm-kart--tik:focus-visible {
  outline: 2px solid var(--md-on-surface); outline-offset: 2px;
}
.tm-satir:focus-visible { outline-offset: -2px; }

/* ---------- Ayirici — hairline ---------- */
.tm-ayirici { height: 0; border: 0; border-top: 1px solid var(--md-outline-variant); margin: 0; }
.tm-ayirici--girintili { margin: 0 var(--tm-kenar); }

/* ---------- Ust cubuk — sayfa zemininde, baslik 18/500 ---------- */
.tm-baslik { position: sticky; top: 0; z-index: 30; background: var(--md-surface); padding-top: env(safe-area-inset-top);
  transition: box-shadow var(--md-orta) var(--md-egri); }
.tm-baslik.kaydirildi { box-shadow: 0 1px 0 var(--md-outline-variant); }
.tm-baslik-ic { height: 56px; padding: 0 4px; display: flex; align-items: center; gap: 4px; }
.tm-baslik-ad {
  flex: 1; min-width: 0; margin: 0 0 0 12px; font-size: calc(1.125rem * var(--tm-olcek)); line-height: 1.25; font-weight: 500; letter-spacing: .02em;
  color: var(--md-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-baslik-ic > .tm-ikon-dugme:first-child + .tm-baslik-ad { margin-left: 0; }
.tm-baslik--orta .tm-baslik-ad { text-align: center; margin: 0; }
.tm-baslik--orta .tm-baslik-ic::after { content: ""; width: 48px; flex: none; }
.tm-baslik-yan { display: flex; align-items: center; flex: none; }
.tm-marka { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; color: var(--md-on-surface); text-decoration: none;
  font-size: calc(1.25rem * var(--tm-olcek)); font-weight: 500; letter-spacing: .015em; }
.tm-marka img { width: 28px; height: 28px; object-fit: contain; }

/* ---------- Ikon dugme — 48 dokunma, 40 gorunen durum katmani ---------- */
.tm-ikon-dugme {
  position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 0; background: none;
  display: inline-grid; place-items: center; color: var(--md-on-surface); cursor: pointer; text-decoration: none; border-radius: var(--md-k-tam);
}
.tm-ikon-dugme::before { content: ""; position: absolute; width: 40px; height: 40px; left: 4px; top: 4px; border-radius: var(--md-k-tam);
  background: currentColor; opacity: 0; transition: opacity var(--md-hizli) var(--md-egri); }
@media (hover: hover) { .tm-ikon-dugme:hover::before { opacity: var(--md-hover); } }
.tm-ikon-dugme:active::before { opacity: var(--md-pressed); }
.tm-ikon-dugme svg { position: relative; width: 24px; height: 24px; }
.tm-ikon-dugme--tonal::before { background: var(--md-secondary-container); opacity: 1; }
.tm-ikon-dugme--tonal { color: var(--md-on-secondary-container); }

/* ---------- Dugmeler — DESIGN.md: HAP (pill) tek sekil; body-md 16/420, 48 px ---------- */
.tm-dugme {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--md-k-tam);
  border: 0; background: var(--md-primary); color: var(--md-on-primary);
  font: inherit; font-size: max(14px, calc(1rem * var(--tm-olcek))); line-height: 1.5; font-weight: 420;
  white-space: nowrap; cursor: pointer; text-decoration: none; -webkit-user-select: none; user-select: none;
  transition: background-color var(--md-hizli) var(--md-egri);
}
.tm-dugme::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 48px; transform: translateY(-50%); }
.tm-dugme:active { background: var(--md-primary-basili); }
.tm-dugme svg { width: 20px; height: 20px; flex: none; }
.tm-dugme--tonal, .tm-dugme--cerceveli { background: transparent; color: var(--md-on-surface); box-shadow: inset 0 0 0 1px var(--md-on-surface); }
.tm-dugme--tonal:active, .tm-dugme--cerceveli:active { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.tm-dugme--metin { background: transparent; color: var(--md-on-surface); padding: 0 16px; text-decoration: underline; text-underline-offset: 3px; }
.tm-dugme--metin:active { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.tm-dugme--aloe { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.tm-dugme--aloe:active { background: var(--md-pistachio); }
.tm-dugme--tehlike { background: var(--md-error); color: var(--md-on-error); }
.tm-dugme--tehlike-metin { background: transparent; color: var(--md-error); padding: 0 16px; }
.tm-dugme--buyuk { min-height: 56px; font-weight: 550; }
.tm-dugme--tam { display: flex; width: 100%; }
.tm-dugme:disabled, .tm-dugme[aria-disabled="true"] {
  background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); box-shadow: none; cursor: default; pointer-events: none;
}
.tm-dugme--metin:disabled, .tm-dugme--cerceveli:disabled { background: transparent; }
.tm-dugme[aria-busy="true"] { pointer-events: none; }
.tm-dugme[aria-busy="true"] > * { visibility: hidden; }
.tm-dugme[aria-busy="true"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; transform: none;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: tm-don .8s linear infinite;
}
@keyframes tm-don { to { transform: rotate(360deg); } }
.tm-dugme-cifti { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tm-dugme-cifti > .tm-dugme { min-width: 0; padding: 0 12px; }
.tm-dugme-satir { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ---------- Yuzen eylem ---------- */
.tm-fab {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 56px; height: 56px; padding: 0 24px; border: 0; border-radius: var(--md-k-tam);
  background: var(--md-primary); color: var(--md-on-primary); box-shadow: var(--md-golge-3);
  font: inherit; font-size: calc(1rem * var(--tm-olcek)); font-weight: 550; cursor: pointer; text-decoration: none;
}
.tm-fab svg { width: 24px; height: 24px; }
.tm-fab:active { background: var(--md-primary-basili); }

/* ---------- Arama — text-input: beyaz, 1px cerceve, kose 8, 48 ---------- */
.tm-ara {
  min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 4px 0 12px; border-radius: var(--md-k-sm);
  background: var(--md-surface-container-lowest); color: var(--md-on-surface-variant); box-shadow: inset 0 0 0 1px var(--md-outline);
}
.tm-ara > svg { width: 20px; height: 20px; flex: none; }
.tm-ara input {
  flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--md-on-surface);
  font: inherit; font-size: max(16px, calc(1rem * var(--tm-olcek))); line-height: 1.5; caret-color: var(--md-on-surface);
}
.tm-ara input::placeholder { color: var(--md-on-surface-variant); }
.tm-ara input::-webkit-search-cancel-button { display: none; }
.tm-ara:focus-within { box-shadow: inset 0 0 0 2px var(--md-on-surface); }
.tm-ara-temizle { position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--md-on-surface-variant); display: grid; place-items: center; cursor: pointer; }
.tm-ara-temizle svg { width: 20px; height: 20px; }

/* ---------- Cipler — pill-tag: hap; secili aloe (koyuda shade-70) ---------- */
.tm-cip-raf { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px var(--tm-kenar); }
.tm-cip-raf::-webkit-scrollbar { display: none; }
.tm-cip {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: var(--md-k-tam);
  background: transparent; border: 1px solid var(--md-outline-variant); color: var(--md-on-surface);
  font: inherit; font-size: max(14px, calc(.875rem * var(--tm-olcek))); line-height: 1.49; font-weight: 500; letter-spacing: .02em;
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.tm-cip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 48px; transform: translateY(-50%); }
.tm-cip svg { width: 18px; height: 18px; flex: none; }
.tm-cip[aria-pressed="true"], .tm-cip[aria-selected="true"], .tm-cip.secili {
  background: var(--md-secondary-container); border-color: transparent; color: var(--md-on-secondary-container);
}
.tm-cip:disabled { opacity: var(--md-disabled); cursor: default; }

/* ---------- Bolumlu secim — hap grubu; secili murekkep dolgu ---------- */
.tm-bolumlu { display: flex; width: 100%; padding: 4px; gap: 4px; border-radius: var(--md-k-tam); background: var(--md-surface-container-highest); }
.tm-bolumlu button {
  position: relative; flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--md-k-tam);
  background: transparent; color: var(--md-on-surface); cursor: pointer;
  font: inherit; font-size: max(14px, calc(.875rem * var(--tm-olcek))); font-weight: 500; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
.tm-bolumlu button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 48px; transform: translateY(-50%); }
.tm-bolumlu button[aria-pressed="true"] { background: var(--md-primary); color: var(--md-on-primary); }

/* ---------- Liste satirlari (Claude tarzi) ---------- */
.tm-liste { list-style: none; margin: 0; padding: 0; }
.tm-liste--bosluksuz { padding: 0; }
.tm-grup { list-style: none; margin: 0 var(--tm-kenar) 16px; padding: 0; border-radius: var(--md-k-lg); background: var(--md-surface-container-lowest);
  box-shadow: 0 0 0 1px var(--md-outline-variant); overflow: hidden; }
.tm-grup > li + li, .tm-grup > * + * { box-shadow: inset 0 1px 0 var(--md-outline-variant); }
.tm-satir {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 12px 16px; width: 100%;
  background: transparent; border: 0; color: var(--md-on-surface); font: inherit; text-align: start; text-decoration: none;
}
.tm-satir--iki { min-height: 72px; }
.tm-satir--uc { min-height: 88px; align-items: flex-start; }
a.tm-satir, button.tm-satir, label.tm-satir { cursor: pointer; }
a.tm-satir:active, button.tm-satir:active, label.tm-satir:active { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); }
.tm-satir[aria-disabled="true"], .tm-satir:disabled { opacity: var(--md-disabled); pointer-events: none; }
.tm-liste--cizgili > li + li > .tm-satir { box-shadow: inset 0 1px 0 var(--md-outline-variant); }
.tm-satir-on { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--md-on-surface); }
.tm-satir-on svg { width: 22px; height: 22px; }
.tm-satir-on--avatar { width: 40px; height: 40px; border-radius: var(--md-k-tam); background: var(--md-primary-container); color: var(--md-on-primary-container);
  font-size: calc(1rem * var(--tm-olcek)); font-weight: 550; overflow: hidden; }
.tm-satir-on--gorsel { width: 56px; height: 56px; border-radius: var(--md-k-md); background: var(--md-surface-container-high); overflow: hidden; }
.tm-satir-on--avatar img, .tm-satir-on--gorsel img { width: 100%; height: 100%; object-fit: cover; }
.tm-satir-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tm-satir-ust { font-size: calc(.75rem * var(--tm-olcek)); line-height: 1.2; letter-spacing: .06em; color: var(--md-on-surface-variant); }
.tm-satir-ad {
  display: block; font-size: calc(1rem * var(--tm-olcek)); line-height: 1.5; font-weight: 500; color: var(--md-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-satir-alt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: calc(.875rem * var(--tm-olcek)); line-height: 1.49; font-weight: 500; letter-spacing: .02em; color: var(--md-on-surface-variant);
}
.tm-satir-son { flex: none; display: flex; align-items: center; gap: 8px; color: var(--md-on-surface-variant);
  font-size: calc(.8125rem * var(--tm-olcek)); line-height: 1.5; font-weight: 500; text-align: end; }
.tm-satir-son--deger { font-size: calc(.875rem * var(--tm-olcek)); color: var(--md-on-surface); }
.tm-satir-ok { flex: none; width: 20px; height: 20px; color: var(--md-on-surface-variant); }
[dir="rtl"] .tm-satir-ok { transform: scaleX(-1); }
.tm-satir--tehlike, .tm-satir--tehlike .tm-satir-on, .tm-satir--tehlike .tm-satir-ad { color: var(--md-error); }

/* ---------- Bolum basligi ---------- */
.tm-bolum { margin: 8px 0 0; }
.tm-bolum-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 4px 0 var(--tm-kenar); margin-bottom: 4px; }
.tm-bolum-ad { flex: 1; min-width: 0; margin: 0; font-size: calc(1.125rem * var(--tm-olcek)); line-height: 1.25; font-weight: 500; letter-spacing: .02em; color: var(--md-on-surface); }
.tm-bolum-ad--alt { font-size: calc(.75rem * var(--tm-olcek)); line-height: 1.2; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--md-on-surface-variant); }
.tm-bolum-aciklama { margin: -4px var(--tm-kenar) 8px; font-size: calc(.875rem * var(--tm-olcek)); line-height: 1.49; color: var(--md-on-surface-variant); }
.tm-bolum-eylem {
  position: relative; flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  border-radius: var(--md-k-tam); color: var(--md-on-surface); text-decoration: underline; text-underline-offset: 3px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: max(14px, calc(.875rem * var(--tm-olcek))); font-weight: 500; white-space: nowrap;
}
.tm-bolum-eylem::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 48px; transform: translateY(-50%); }
.tm-bolum-eylem:active { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }

/* ---------- Kartlar — card-pricing: beyaz, kose 12, hairline ---------- */
.tm-kart { position: relative; border-radius: var(--md-k-md); background: var(--md-surface-container-lowest); color: var(--md-on-surface); overflow: hidden;
  box-shadow: 0 0 0 1px var(--md-outline-variant); }
.tm-kart--yukseltilmis { box-shadow: var(--md-golge-2); }
.tm-kart--cerceveli { box-shadow: 0 0 0 1px var(--md-outline-variant); }
.tm-kart--dolgulu { background: var(--md-pistachio); color: #000000; box-shadow: none; }
.tm-kart-ic { padding: 16px; }
.tm-kart--tik { cursor: pointer; text-decoration: none; display: block; }
.tm-kart--tik:active { background: color-mix(in srgb, var(--md-on-surface) 4%, var(--md-surface-container-lowest)); }
.tm-yuzey-grup { margin: 0 var(--tm-kenar); border-radius: var(--md-k-lg); background: var(--md-surface-container-lowest); overflow: hidden; box-shadow: 0 0 0 1px var(--md-outline-variant); }

/* ---------- Alt gezinme — sayfa zemininde, ust hairline; secili aloe hap (koyuda shade-70) ---------- */
.tm-gez {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center;
  background: var(--md-surface); box-shadow: 0 -1px 0 var(--md-outline-variant); padding-bottom: env(safe-area-inset-bottom);
}
.tm-gez-ic { display: flex; width: min(640px, 100%); height: 64px; }
.tm-gez a {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--md-on-surface-variant); text-decoration: none; -webkit-tap-highlight-color: transparent;
  font-size: calc(.75rem * var(--tm-olcek)); line-height: 1.2; font-weight: 500; letter-spacing: .02em;
}
.tm-gez-gosterge { position: relative; width: 56px; height: 28px; border-radius: var(--md-k-tam); display: grid; place-items: center; transition: background-color var(--md-hizli); }
.tm-gez-gosterge svg { width: 22px; height: 22px; }
.tm-gez-ad { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.tm-gez a[aria-current="page"] { color: var(--md-on-surface); }
.tm-gez a[aria-current="page"] .tm-gez-gosterge { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.tm-gez-bosluk { height: calc(64px + env(safe-area-inset-bottom)); }

/* ---------- Metin alani — text-input: kose 8, 1px cerceve (shade-50), 48 ---------- */
.tm-alan { position: relative; display: block; margin: 8px 0 16px; }
.tm-alan input, .tm-alan select, .tm-alan textarea {
  display: block; width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid var(--md-outline); border-radius: var(--md-k-sm);
  background: var(--md-surface-container-lowest); color: var(--md-on-surface); font: inherit; font-size: max(16px, calc(1rem * var(--tm-olcek))); line-height: 1.5;
  outline: 0; caret-color: var(--md-on-surface);
}
.tm-alan input:focus, .tm-alan select:focus, .tm-alan textarea:focus { border-color: var(--md-on-surface); box-shadow: inset 0 0 0 1px var(--md-on-surface); }
.tm-alan > span:first-of-type { display: block; margin: 0 0 6px; font-size: calc(.875rem * var(--tm-olcek)); line-height: 1.49; font-weight: 500; color: var(--md-on-surface); }
.tm-alan-yardim { display: block; margin-top: 4px; font-size: calc(.8125rem * var(--tm-olcek)); color: var(--md-on-surface-variant); }
.tm-alan--hata input { border-color: var(--md-error); }
.tm-alan--hata .tm-alan-yardim { color: var(--md-error); }

/* ---------- Anahtar — acikken murekkep iz ---------- */
.tm-anahtar { position: relative; flex: none; appearance: none; -webkit-appearance: none; width: 52px; height: 32px; margin: 8px 0; border-radius: var(--md-k-tam);
  background: var(--md-surface-container-highest); border: 0; cursor: pointer; transition: background-color var(--md-hizli); }
.tm-anahtar::before { content: ""; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--md-surface-container-lowest);
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--md-orta) var(--md-egri-yavaslayan); }
.tm-anahtar::after { content: ""; position: absolute; left: -6px; right: -6px; top: -8px; bottom: -8px; }
.tm-anahtar:checked { background: var(--md-primary); }
.tm-anahtar:checked::before { transform: translateX(20px); background: var(--md-on-primary); }
.tm-anahtar:disabled { opacity: var(--md-disabled); cursor: default; }

/* ---------- Alt pencere — ust kose 20, tutamak 32x4 ---------- */
.tm-perde { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--md-scrim) 40%, transparent); }
.tm-pencere {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; max-height: 92dvh; overflow: auto;
  width: min(640px, 100%); margin: 0 auto;
  background: var(--md-surface-container-lowest); color: var(--md-on-surface); border-radius: var(--md-k-xl) var(--md-k-xl) 0 0; box-shadow: var(--md-golge-3);
  padding: 0 0 max(env(safe-area-inset-bottom), 16px);
}
.tm-pencere-bas { padding: 0 var(--tm-kenar); }
.tm-tutamak { width: 32px; height: 4px; border-radius: var(--md-k-tam); background: var(--md-outline-variant); margin: 12px auto 12px; }
.tm-pencere-bas-satir { min-height: 48px; display: flex; align-items: center; gap: 8px; }
.tm-pencere-ad { flex: 1; min-width: 0; margin: 0; font-size: calc(1.25rem * var(--tm-olcek)); line-height: 1.4; font-weight: 500; letter-spacing: .015em; }
.tm-pencere-govde { padding: 8px var(--tm-kenar) 0; }
.tm-kapat { margin-right: -12px; }

/* ---------- Diyalog — kose 20, Level 4 golge ---------- */
.tm-diyalog {
  position: fixed; left: 50%; top: 50%; z-index: 91; transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto;
  padding: 24px; border-radius: var(--md-k-xl); background: var(--md-surface-container-lowest); color: var(--md-on-surface); box-shadow: var(--md-golge-3);
}
.tm-diyalog-ad { margin: 0 0 8px; font-size: calc(1.25rem * var(--tm-olcek)); line-height: 1.4; font-weight: 500; }
.tm-diyalog-metin { margin: 0; font-size: calc(.875rem * var(--tm-olcek)); line-height: 1.49; color: var(--md-on-surface-variant); }
.tm-diyalog-eylem { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* ---------- Bildirim (snackbar) — ters zemin, kose 12 ---------- */
.tm-bildirim {
  position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 95; transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px)); min-height: 48px; display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 4px 16px; border-radius: var(--md-k-md); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); box-shadow: var(--md-golge-3);
  font-size: calc(.875rem * var(--tm-olcek)); line-height: 1.49; font-weight: 500;
}
.tm-bildirim > span { flex: 1; min-width: 0; padding: 10px 0; }
.tm-bildirim button { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--md-k-tam); background: var(--md-inverse-primary); color: #000000;
  font: inherit; font-weight: 550; cursor: pointer; }

/* ---------- Rozet — pill-tag ---------- */
.tm-rozet { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--md-k-tam); white-space: nowrap;
  font-size: calc(.75rem * var(--tm-olcek)); line-height: 1.2; font-weight: 500; letter-spacing: .02em;
  background: var(--md-surface-container-highest); color: var(--md-on-surface); }
.tm-rozet--bilgi { background: var(--md-surface-container-highest); color: var(--md-on-surface); }
.tm-rozet--basari { background: var(--md-basari-container); color: var(--md-basari); }
.tm-rozet--uyari { background: var(--md-uyari-container); color: var(--md-uyari); }
.tm-rozet--hata { background: var(--md-error-container); color: var(--md-on-error-container); }

/* ---------- Ilerleme ---------- */
.tm-yukleniyor-cizgi { position: relative; height: 3px; overflow: hidden; border-radius: var(--md-k-tam); background: var(--md-surface-container-highest); }
.tm-yukleniyor-cizgi::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: inherit; background: var(--md-on-surface); animation: tm-akis 1.4s var(--md-egri) infinite; }
@keyframes tm-akis { from { left: -40%; } to { left: 100%; } }
.tm-cark { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--md-surface-container-highest); border-top-color: var(--md-on-surface); animation: tm-don 1s linear infinite; }

/* ---------- Iskelet ---------- */
.tm-iskelet { display: block; height: 16px; border-radius: var(--md-k-xs); background: var(--md-surface-container-highest); animation: tm-nabiz 1.3s ease-in-out infinite; }
@keyframes tm-nabiz { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.tm-iskelet-satir { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 8px var(--tm-kenar); }
.tm-iskelet-satir > .tm-iskelet:first-child { width: 40px; height: 40px; border-radius: var(--md-k-tam); flex: none; }
.tm-iskelet-satirlar { flex: 1; display: grid; gap: 8px; }
.tm-iskelet-satirlar > .tm-iskelet:first-child { width: 64%; height: 14px; }
.tm-iskelet-satirlar > .tm-iskelet:last-child { width: 40%; height: 12px; }
@media (prefers-reduced-motion: reduce) {
  .tm-iskelet, .tm-yukleniyor-cizgi::before, .tm-cark { animation: none; }
  .tm-dugme[aria-busy="true"]::after { animation-duration: 2.4s; }
}

/* ---------- Bos durum ---------- */
.tm-durum { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 24px; }
.tm-durum-gorsel { width: 64px; height: 64px; margin-bottom: 16px; border-radius: var(--md-k-tam); display: grid; place-items: center;
  background: var(--md-primary-container); color: var(--md-on-primary-container); }
.tm-durum-gorsel svg { width: 28px; height: 28px; }
.tm-durum-ad { margin: 0; font-size: calc(1.25rem * var(--tm-olcek)); line-height: 1.4; font-weight: 500; letter-spacing: .015em; color: var(--md-on-surface); }
.tm-durum-aciklama { max-width: 36ch; margin: 8px 0 0; font-size: calc(.875rem * var(--tm-olcek)); line-height: 1.49; color: var(--md-on-surface-variant); }
.tm-durum-eylem { margin-top: 24px; }

/* ---------- Yatay raf + kucuk karo ---------- */
.tm-raf { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--tm-kenar) 8px; scroll-padding-inline: var(--tm-kenar); }
.tm-raf::-webkit-scrollbar { display: none; }
.tm-karo { flex: none; width: 88px; color: var(--md-on-surface); text-decoration: none; text-align: center; }
.tm-karo-gorsel { width: 88px; height: 88px; border-radius: var(--md-k-md); background: var(--md-surface-container-high); overflow: hidden; display: grid; place-items: center; }
.tm-karo-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.tm-karo-ad { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 8px;
  font-size: calc(.8125rem * var(--tm-olcek)); line-height: 1.5; font-weight: 500; }