:root {
  --zemin: #f3f5f1;
  --yuzey: #ffffff;
  --yuzey-2: #eef1ec;
  --yazi: #111a14;
  --soluk: #5f6b63;
  --cizgi: #e0e6df;
  --vurgu: #0f8a45;
  --vurgu-koyu: #0b6634;
  --vurgu-acik: #e3f4e9;
  --limon: #c8f031;
  --hayir: #d6455d;
  --hayir-acik: #fcebee;
  --takim-a: #ff7a1a;
  --takim-b: #f4f7fb;
  --takim-b-yazi: #1d2b45;
  --golge: 0 1px 2px rgb(10 40 20 / .05), 0 12px 30px -16px rgb(10 40 20 / .25);
  --golge-buyuk: 0 30px 60px -24px rgb(10 50 25 / .4);
  --r0: #0f8a45; --r1: #2b7de9; --r2: #ff7a1a; --r3: #c58a00; --r4: #8b5cf6; --r5: #e2499a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #0b100d;
    --yuzey: #131a16;
    --yuzey-2: #1b241f;
    --yazi: #eef4ef;
    --soluk: #9aa89f;
    --cizgi: #26312a;
    --vurgu: #34c172;
    --vurgu-koyu: #23a35d;
    --vurgu-acik: #15301f;
    --hayir: #ff7b90;
    --hayir-acik: #3a1a21;
    --golge: 0 1px 2px rgb(0 0 0 / .4), 0 12px 30px -16px rgb(0 0 0 / .8);
    --golge-buyuk: 0 30px 60px -24px rgb(0 0 0 / .8);
    --r0: #34c172; --r1: #5ea0ff; --r2: #ff9a4d; --r3: #f0b429; --r4: #a78bfa; --r5: #f472b6;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--yazi);
  font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--vurgu); }
.kap { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 16px; position: relative; }

/* Üst */
.ust { padding: 16px 0 6px; }
.ust .kap { display: flex; align-items: center; justify-content: space-between; }
.logo { font-weight: 900; font-size: 21px; letter-spacing: -.04em; color: var(--yazi); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.logo i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 18%, transparent 19%), conic-gradient(var(--yazi) 0 20%, #fff 0 40%, var(--yazi) 0 60%, #fff 0 80%, var(--yazi) 0); border: 2px solid var(--yazi); }
.ust-bag { font-size: 14px; font-weight: 650; text-decoration: none; color: var(--yazi); padding: 8px 14px; border-radius: 999px; background: var(--yuzey); border: 1px solid var(--cizgi); }
.ust-bag:hover { border-color: var(--vurgu); color: var(--vurgu); }

/* Ortak */
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 22px; box-shadow: var(--golge); padding: 20px; margin-top: 14px; }
.kart.sade { box-shadow: none; background: transparent; }
h1 { font-size: clamp(30px, 7vw, 46px); line-height: 1.05; letter-spacing: -.04em; margin: 0; font-weight: 900; }
h2 { font-size: 18px; letter-spacing: -.015em; margin: 0; font-weight: 800; }
.soluk { color: var(--soluk); }
.kucuk-yazi { font-size: 14px; color: var(--soluk); margin: 8px 0 0; }
.etiket-ust { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); margin: 0 0 10px; }
.kart-baslik { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kart-baslik h2 { flex: 1; }
.ipucu { font-size: 14px; color: var(--soluk); background: var(--yuzey-2); border-radius: 12px; padding: 10px 12px; margin: 12px 0 0; }

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px;
  border-radius: 14px; border: 1px solid transparent; background: var(--yazi); color: var(--zemin); font-weight: 700; text-decoration: none;
  transition: transform .1s, box-shadow .2s, background .2s;
}
.dugme:active { transform: scale(.98); }
.dugme:disabled { opacity: .5; cursor: not-allowed; }
.dugme.vurgu { background: var(--vurgu); color: #fff; box-shadow: 0 10px 24px -12px rgb(15 138 69 / .7); }
.dugme.vurgu:hover { background: var(--vurgu-koyu); }
.dugme.hayalet { background: var(--yuzey); border-color: var(--cizgi); color: var(--yazi); }
.dugme.hayalet:hover { border-color: var(--vurgu); color: var(--vurgu); }
.dugme.metin { background: none; border: 0; color: var(--soluk); padding: 6px 8px; min-height: 36px; font-weight: 650; }
.dugme.metin:hover { color: var(--vurgu); }
.dugme.tehlike { background: var(--hayir); color: #fff; }
.tehlike-yazi { color: var(--hayir) !important; }
.dugme.tam { width: 100%; }
.dugme.kucuk { min-height: 38px; padding: 7px 13px; font-size: 14px; border-radius: 12px; }
.dugme.buyuk { min-height: 56px; font-size: 17px; padding: 14px 28px; border-radius: 16px; }

.alan { display: block; margin-top: 14px; }
.alan > span { display: block; font-size: 14px; font-weight: 650; margin-bottom: 6px; }
.alan em { font-style: normal; font-weight: 400; color: var(--soluk); }
input, textarea, select {
  width: 100%; border: 1px solid var(--cizgi); background: var(--yuzey-2); border-radius: 13px; padding: 12px 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--vurgu); background: var(--yuzey); box-shadow: 0 0 0 4px var(--vurgu-acik); }
.iki { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.kutucuk { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 600; }
.kutucuk input { width: 20px; height: 20px; accent-color: var(--hayir); }

.r0 { --rk: var(--r0); } .r1 { --rk: var(--r1); } .r2 { --rk: var(--r2); } .r3 { --rk: var(--r3); } .r4 { --rk: var(--r4); } .r5 { --rk: var(--r5); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; color: var(--rk, var(--vurgu)); background: color-mix(in srgb, var(--rk, var(--vurgu)) 16%, var(--yuzey)); }
.rozet { display: inline-block; font-size: 12px; font-weight: 750; padding: 3px 10px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.rozet.kesin { background: var(--vurgu); color: #fff; }
.rozet.oneri { background: var(--yuzey-2); color: var(--soluk); }
.rozet.sen { background: var(--vurgu-acik); color: var(--vurgu); }

/* ---------- Ana sayfa ---------- */
.karsilama { text-align: center; padding: 40px 0 10px; }
.rozet-ust { display: inline-block; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--yuzey); border: 1px solid var(--cizgi); margin-bottom: 18px; color: var(--vurgu); }
.vurgu-yazi { color: var(--vurgu); }
.karsilama > p { color: var(--soluk); font-size: 18px; max-width: 480px; margin: 16px auto 26px; }

.saha-onizleme {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 40px auto 0; max-width: 460px; padding: 26px 22px;
  border-radius: 22px; background: repeating-linear-gradient(90deg, #15924b 0 40px, #138544 40px 80px); box-shadow: var(--golge-buyuk); text-align: left; color: #fff;
}
.saha-onizleme .saha-cizgi { position: absolute; inset: 10px; border: 2px solid rgb(255 255 255 / .55); border-radius: 12px; pointer-events: none; }
.saha-onizleme .saha-cizgi::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid rgb(255 255 255 / .55); }
.saha-onizleme .saha-cizgi::after { content: ""; position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; border: 2px solid rgb(255 255 255 / .55); border-radius: 50%; transform: translate(-50%, -50%); }
.oniz-takim { position: relative; z-index: 1; }
.oniz-takim b { display: block; font-size: 16px; }
.oniz-takim span { font-size: 13px; opacity: .85; }
.oniz-takim ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.oniz-takim li { font-size: 13px; font-weight: 650; padding: 5px 10px; border-radius: 10px; }
.oniz-takim.a li { background: var(--takim-a); }
.oniz-takim.b li { background: #fff; color: var(--takim-b-yazi); }

.adimlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0; padding: 0; list-style: none; }
.adimlar li { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px; padding: 16px; font-size: 14px; color: var(--soluk); box-shadow: var(--golge); }
.adim-ikon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-weight: 800; font-size: 14px; margin-bottom: 10px; color: #fff; background: var(--vurgu); }
.adimlar b { display: block; color: var(--yazi); font-size: 15px; margin-bottom: 2px; }
@media (max-width: 560px) { .adimlar { grid-template-columns: 1fr; } .adimlar li { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; } .adim-ikon { grid-row: span 2; margin: 0; } }

.form-alt { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.hata-yazi { color: var(--hayir); font-weight: 650; font-size: 14px; margin: 12px 0 0; }
#hazir h2 { font-size: 24px; margin-bottom: 6px; }
.bag-kutu { display: flex; align-items: center; gap: 8px; background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: 16px; padding: 8px 8px 8px 16px; margin-top: 10px; min-height: 52px; }
.bag-kutu code { flex: 1; min-width: 0; font: 650 15px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paylas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.uyari { background: var(--vurgu-acik); border-radius: 16px; padding: 14px 16px; font-size: 14px; margin-top: 18px; }
.uyari .bag-kutu { background: var(--yuzey); }

/* ---------- Ekip sayfası ---------- */
.baslik-kart {
  position: relative; overflow: hidden; border-radius: 26px; padding: 22px 22px 20px; color: #fff; margin-top: 8px;
  background: radial-gradient(110% 120% at 100% 0%, #23b061 0%, transparent 55%), linear-gradient(150deg, #0b5a30, #0e3d24);
  box-shadow: var(--golge-buyuk);
}
.baslik-kart::after { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; bottom: -110px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .18); pointer-events: none; }
.baslik-kart .etiket-ust { color: var(--limon); }
.meta-satir { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.meta { display: inline-flex; align-items: center; gap: 6px; background: rgb(255 255 255 / .13); border: 1px solid rgb(255 255 255 / .18); padding: 5px 11px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.mac-not { margin: 14px 0 0; background: rgb(0 0 0 / .2); border-radius: 12px; padding: 9px 12px; font-size: 14px; }
.kontenjan { margin-top: 18px; position: relative; z-index: 1; }
.kontenjan-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.kontenjan-ust b { font-size: 26px; letter-spacing: -.03em; }
.cubuk { height: 8px; border-radius: 4px; background: rgb(255 255 255 / .18); margin-top: 6px; overflow: hidden; }
.cubuk i { display: block; height: 100%; border-radius: 4px; background: var(--limon); transition: width .4s; }

.ben-kart select { margin-top: 2px; }
.ben-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.secim { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.secim button { min-height: 54px; border-radius: 15px; border: 1.5px solid var(--cizgi); background: var(--yuzey-2); font-weight: 750; transition: all .15s; }
.secim button:hover { border-color: var(--soluk); }
.secim button[aria-pressed="true"].evet { border-color: transparent; background: var(--vurgu); color: #fff; box-shadow: 0 10px 22px -12px rgb(15 138 69 / .8); }
.secim button[aria-pressed="true"].hayir { border-color: var(--hayir); background: var(--hayir-acik); color: var(--hayir); }

/* Saha */
.saha-kart { padding: 16px; }
.takim-serit { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 14px; background: var(--yuzey-2); font-size: 14px; }
.takim-serit b { flex: 1; }
.takim-serit span { color: var(--soluk); font-weight: 600; }
.forma { width: 16px; height: 16px; border-radius: 5px; flex: none; }
.takim-serit.a .forma { background: var(--takim-a); }
.takim-serit.b .forma { background: var(--takim-b); border: 1.5px solid #9aa6b8; }
.saha {
  position: relative; aspect-ratio: 3 / 4.7; margin: 10px 0; border-radius: 18px; overflow: hidden;
  background: repeating-linear-gradient(180deg, #17994f 0 9.09%, #148a47 9.09% 18.18%);
  box-shadow: inset 0 0 0 3px #0f6e38, inset 0 0 60px rgb(0 0 0 / .18);
}
.saha.iptal { filter: grayscale(.8) brightness(.9); }
.saha-cizgiler { position: absolute; inset: 4%; border: 2px solid rgb(255 255 255 / .7); border-radius: 6px; pointer-events: none; }
.saha-cizgiler i { position: absolute; border: 2px solid rgb(255 255 255 / .7); }
.orta-cizgi { left: -2px; right: -2px; top: 50%; border-width: 2px 0 0 0 !important; }
.orta-yuvarlak { left: 50%; top: 50%; width: 26%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.ceza { left: 25%; right: 25%; height: 13%; }
.ceza.ust { top: -2px; border-top: 0 !important; }
.ceza.alt { bottom: -2px; border-bottom: 0 !important; }
.saha-perde { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 22px; font-weight: 900; background: rgb(0 0 0 / .35); }

.yer {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; padding: 0; width: 76px; z-index: 1; -webkit-tap-highlight-color: transparent;
}
.yer .top {
  position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 17px;
  box-shadow: 0 6px 12px -4px rgb(0 0 0 / .45); transition: transform .12s;
}
.yer:hover .top, .yer:focus-visible .top { transform: scale(1.08); }
.yer .top small { position: absolute; right: -8px; bottom: -4px; background: #0d1a12; color: var(--limon); font-size: 10px; font-weight: 800; border-radius: 7px; padding: 1px 5px; }
.yer.dolu.a .top { background: var(--takim-a); color: #fff; }
.yer.dolu.b .top { background: var(--takim-b); color: var(--takim-b-yazi); }
.yer.ben .top { outline: 3px solid var(--limon); outline-offset: 2px; }
.yer-ad { font-size: 12px; font-weight: 750; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .6); max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yer.bos .top { background: rgb(255 255 255 / .12); border: 2px dashed rgb(255 255 255 / .75); color: #fff; box-shadow: none; font-size: 22px; font-weight: 500; }
.yer.bos .yer-ad { opacity: .85; font-size: 11px; }
button.yer.bos:hover .top { background: rgb(255 255 255 / .28); }
span.yer.bos .top { font-size: 11px; opacity: .5; }
@media (max-width: 420px) {
  .yer { width: 62px; }
  .yer .top { width: 38px; height: 38px; font-size: 15px; }
  .yer-ad { font-size: 11px; max-width: 62px; }
}
.denge { text-align: center; margin: 8px 0 0; }
.saha-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.cip-satir { margin-top: 14px; }
.cip-baslik { font-size: 13px; font-weight: 750; color: var(--soluk); }
.cipler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cip { border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 650; }
.cip:hover { border-color: var(--vurgu); color: var(--vurgu); }
.cip.yedek { background: var(--vurgu-acik); border-color: transparent; }
.cip.gelmeyen { color: var(--soluk); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--hayir) 60%, transparent); }
.cip.ben { outline: 2px solid var(--vurgu); }

/* Oylama ve maçın oyuncusu */
.oylama-kart { border: 1.5px solid color-mix(in srgb, var(--vurgu) 40%, var(--cizgi)); }
.oy-liste { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 6px; }
.oy-liste li { display: grid; grid-template-columns: 36px 1fr 84px; align-items: center; gap: 10px; }
.oy-liste li > span { font-weight: 650; }
.oy-liste select { padding: 8px 10px; text-align: center; }
.mvp-kart { background: linear-gradient(140deg, color-mix(in srgb, var(--limon) 30%, var(--yuzey)), var(--yuzey) 60%); }
.mvp-ust { display: flex; gap: 14px; align-items: center; }
.mvp-ust .etiket-ust { margin: 0 0 2px; }
.mvp-ust h2 { font-size: 24px; }
.mvp-ust .kucuk-yazi { margin: 2px 0 0; }
.mvp-yildiz { font-size: 40px; line-height: 1; }
.podyum { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: s; }
.podyum li { display: flex; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--yuzey-2); font-size: 14px; counter-increment: s; }
.podyum li::before { content: counter(s) "."; font-weight: 800; color: var(--soluk); }
.podyum li span { flex: 1; font-weight: 650; }

/* Oyuncular */
.oyuncu-liste { list-style: none; padding: 0; margin: 0; }
.oyuncu-liste li + li { border-top: 1px solid var(--cizgi); }
.oyuncu-liste button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 2px; background: none; border: 0; text-align: left; }
.oyuncu-liste button:hover .oyuncu-ad { color: var(--vurgu); }
.oyuncu-ad { flex: 1; min-width: 0; font-weight: 700; }
.oyuncu-ad small { display: block; font-weight: 500; color: var(--soluk); font-size: 13px; }
.puan-kutu { min-width: 44px; text-align: center; font-weight: 900; font-size: 18px; padding: 5px 8px; border-radius: 11px; background: var(--vurgu-acik); color: var(--vurgu); }

.gecmis { border-top: 1px solid var(--cizgi); padding: 10px 0; }
.gecmis:first-of-type { border-top: 0; }
.gecmis summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; font-size: 15px; }
.gecmis summary span { color: var(--soluk); font-size: 14px; }
.gecmis-takimlar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; font-size: 14px; }
.gecmis-takimlar p { margin: 2px 0 0; color: var(--soluk); }

.yonetim-kart details { border-top: 1px solid var(--cizgi); margin-top: 14px; padding-top: 12px; }
.yonetim-kart summary { cursor: pointer; font-weight: 700; }
.yonetim-form .dugme { margin-top: 14px; }

/* Pencere */
.pencere { border: 0; border-radius: 22px; padding: 22px; width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 24px); background: var(--yuzey); color: var(--yazi); box-shadow: 0 30px 70px -14px rgb(5 30 15 / .55); }
.pencere::backdrop { background: rgb(5 20 10 / .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pencere h2 { margin-bottom: 8px; font-size: 20px; }
.pencere-alt { margin: 0 0 12px; font-size: 15px; }
.pencere-dugmeler { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pencere-ek { display: grid; gap: 8px; margin-top: 16px; }
.oyuncu-detay { display: flex; gap: 16px; align-items: flex-start; }
.oyuncu-detay p { margin: 0 0 4px; }
.buyuk-puan { min-width: 76px; text-align: center; font-size: 34px; font-weight: 900; line-height: 1; padding: 12px 8px; border-radius: 16px; background: var(--vurgu-acik); color: var(--vurgu); }
.buyuk-puan small { display: block; font-size: 11px; font-weight: 700; margin-top: 4px; }
.mevki-etiket { display: inline-block; font-size: 13px; font-weight: 750; padding: 3px 10px; border-radius: 999px; background: var(--vurgu); color: #fff; margin: 0 6px 6px 0; }
.mevki-etiket.ikinci { background: var(--yuzey-2); color: var(--yazi); }

.puan-izgara { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.puan-izgara button { aspect-ratio: 1; min-height: 32px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--yuzey-2); font-weight: 800; font-size: 14px; padding: 0; }
.puan-izgara button[aria-pressed="true"] { background: var(--vurgu); color: #fff; border-color: transparent; }
@media (max-width: 400px) { .puan-izgara { grid-template-columns: repeat(5, 1fr); } }
.puan-aciklama { font-weight: 600; color: var(--vurgu); }
.mevki-secim { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mevki-secim button { min-height: 44px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--yuzey-2); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.mevki-secim button[aria-pressed="true"] { background: var(--vurgu); color: #fff; border-color: transparent; }
.mevki-secim small { font-size: 11px; background: rgb(255 255 255 / .25); padding: 1px 6px; border-radius: 6px; }
.pencere input[list] { margin-top: 2px; }

.bulunamadi { text-align: center; padding: 80px 0; }
.bulunamadi p { margin: 14px 0 24px; }
.alt { text-align: center; padding: 40px 16px 50px; color: var(--soluk); font-size: 13px; }
.alt a { color: inherit; }

.bildirim {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); opacity: 0; z-index: 60;
  background: var(--yazi); color: var(--zemin); padding: 11px 18px; border-radius: 14px; font-weight: 650; font-size: 14px;
  transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100% - 32px); box-shadow: var(--golge-buyuk);
}
.bildirim.gor { opacity: 1; transform: translate(-50%, 0); }
.bildirim.hata { background: var(--hayir); color: #fff; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }