/* Tuval Stüdyo — Hesap defteri (Damla ↔ Göktuğ). Yalnız bu ekrana ait; style.css değişkenlerini kullanır.
   Grafik renkleri dataviz doğrulayıcısından geçti (5 Eki 2026): altın = maliyet/kalan borç, mavi = ödeme;
   koyu yüzey #0a0c0f ve aydınlık #fff, iki temada da renk körlüğü ΔE ≥ 25.
   ⚠️ Altın + yeşil protanopide ΔE 3,6 ile KALDI (iki renk aynı görünüyor) → ödeme için yeşil KULLANMA.
   Yazı hiçbir zaman veri rengini giymez: tutarlar ana mürekkepte, tür yanındaki renkli işaretle ayrılır. */

.df-alan{position:absolute;inset:0;z-index:9;background:var(--bg-1);overflow:hidden;display:flex;flex-direction:column;
  --df-altin:#b8853a; --df-mavi:#3987e5; --df-gri:#66707f;
  --df-izgara:rgba(255,255,255,.06); --df-kart:var(--bg); --df-yuzey:var(--bg);
  --df-mavi-iz:rgba(57,135,229,.16);
  --ease-out-guclu:cubic-bezier(.23,1,.32,1)}
:root[data-tema="acik"] .df-alan{--df-altin:#a9761f; --df-mavi:#2a78d6; --df-gri:#8b94a2;
  --df-izgara:rgba(16,20,28,.08); --df-kart:#fff; --df-yuzey:#fff; --df-mavi-iz:rgba(42,120,214,.14);
  background:var(--bg)}

.df-kaydir{flex:1;overflow:auto;container-type:inline-size;container-name:df}
.df{max-width:1320px;margin:0 auto;padding:18px 22px 40px;display:grid;gap:14px;transition:opacity .2s ease}
.df.yenileniyor .df-kart{opacity:.97}
.df.giris .df-kademe{animation:df-gir .42s var(--ease-out-guclu) backwards}
.df.giris .df-kademe:nth-child(2){animation-delay:40ms} .df.giris .df-kademe:nth-child(3){animation-delay:80ms}
.df.giris .df-kademe:nth-child(4){animation-delay:120ms} .df.giris .df-izgara .df-kademe{animation-delay:160ms}
@keyframes df-gir{from{opacity:0;transform:translateY(8px)}}

/* ------------------------------------------------------------ üst çubuk */
.df-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.df-baslik{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0;flex-wrap:wrap}
.df-baslik h2{margin:0;font-size:19px;letter-spacing:-.02em}
.df-guvenlik{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;
  font-weight:600;color:var(--tx-2);background:var(--bg-2);border:1px solid var(--line);white-space:nowrap}
.df-guvenlik svg{width:13px;height:13px;color:var(--gold)}
.df-bar-sag{display:flex;gap:6px;flex-wrap:wrap}
/* .btn-mini style.css'te .btn-primary'den sonra geldiği için altını eziyor; bu ekranda geri ver */
.df-alan .btn-primary.btn-mini{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--uzeri);border-color:transparent}

.df-not{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:var(--r);font-size:12.5px;
  background:var(--gold-dim);border:1px solid var(--gold-brd);color:var(--tx);margin-bottom:8px}
.df-not:last-child{margin-bottom:0}
.df-not>svg{flex:0 0 auto;width:17px;height:17px;color:var(--gold);margin-top:1px}
.df-not.bilgi{background:var(--bg-2);border-color:var(--line)}
.df-not.bilgi>svg{color:var(--tx-3)}
.df-not.hata{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.35)}
.df-not.hata>svg{color:var(--red)}
#dfNotlar:empty{display:none}

/* ------------------------------------------------------------ kartlar */
.df-kart{background:var(--df-kart);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px;min-width:0}
.df-kart-bas{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.df-kart-bas h3{margin:0;font-size:13.5px;font-weight:650;letter-spacing:-.01em;margin-right:auto}
.df-kart-bas .hint{margin:0}
.df-etiket{font-size:12px;color:var(--tx-2);font-weight:500;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.df-etiket svg{width:14px;height:14px;color:var(--tx-3)}

/* kahraman: kalan borç + ödenen metresi + küçük kartlar */
.df-kahraman{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.df-yon{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600;
  color:var(--tx-2);background:var(--bg-2);border:1px solid var(--line)}
.df-yon svg{width:11px;height:11px;stroke-width:2.2;color:var(--tx-3)}
/* Tek kahraman rakam: aynı sans, orantılı rakamlar (tabular değil) */
.df-kalan{font-size:52px;font-weight:700;letter-spacing:-.035em;line-height:1.08;margin-top:8px;color:var(--tx);white-space:nowrap}
.df-kalan-alt{margin-top:4px;font-size:12.5px;color:var(--tx-3)}
.df-metre-ust{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--tx-3);margin:16px 0 6px;flex-wrap:wrap}
.df-metre-ust b{color:var(--tx-2);font-weight:650}
/* metre: dolu kısım ödeme mavisi, boş iz aynı rengin açık adımı */
.df-metre{height:8px;border-radius:99px;background:var(--df-mavi-iz);overflow:hidden}
.df-metre i{display:block;height:100%;border-radius:99px;background:var(--df-mavi);transform-origin:left;
  transition:transform .7s var(--ease-out-guclu)}
.df-kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.df-kpi-k{padding:12px 14px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line);min-width:0}
.df-deger{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.df-alt{font-size:11.5px;color:var(--tx-3);margin-top:3px}

/* ------------------------------------------------------------ grafik */
.df-anahtar{display:flex;gap:14px;font-size:11.5px;color:var(--tx-2)}
.df-anahtar span{display:inline-flex;align-items:center;gap:6px}
.df-anahtar .cizgi{width:14px;height:2px;border-radius:2px;background:var(--df-altin)}
.df-anahtar .nokta{width:9px;height:9px;border-radius:50%;background:var(--df-mavi);box-shadow:0 0 0 2px var(--df-yuzey)}
.df-grafik{position:relative;height:230px;outline:none;border-radius:10px;touch-action:pan-y}
.df-grafik:focus-visible{box-shadow:0 0 0 2px var(--gold-brd)}
.df-grafik-bos{position:absolute;inset:0;display:grid;place-items:center;color:var(--tx-3);font-size:12.5px}
/* ⚠️ style.css'teki genel svg{width:20px;height:20px;stroke:currentColor} kuralı grafiği 20 px'e sıkıştırıyor
   ve yazılara kontur çiziyordu → burada açıkça geri alınır */
.df-grafik svg.df-svg{display:block;overflow:visible;width:100%;height:100%;fill:none;stroke:none;stroke-width:1}
.df-svg text{stroke:none}
.df-izgara-c{stroke:var(--df-izgara);stroke-width:1;shape-rendering:crispEdges}
.df-izgara-c.sifir{stroke:var(--line-2)}
.df-eksen-y{fill:var(--tx-3);font-size:10.5px;text-anchor:end;font-variant-numeric:tabular-nums}
.df-eksen-x{fill:var(--tx-3);font-size:10.5px;text-anchor:middle}
.df-dolgu{fill:var(--df-altin);opacity:.1}
.df-cizgi{fill:none;stroke:var(--df-altin);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.df-odeme-n{fill:var(--df-mavi);stroke:var(--df-yuzey);stroke-width:2}
.df-imlec{stroke:var(--line-2);stroke-width:1;shape-rendering:crispEdges}
.df-imlec-n{fill:var(--df-altin);stroke:var(--df-yuzey);stroke-width:2;pointer-events:none}
.df-imlec-n.odeme{fill:var(--df-mavi)}
.df-svg.ciz .df-cizgi,.df-svg.ciz .df-dolgu{animation:df-sil .9s var(--ease-out-guclu) .1s backwards}
.df-svg.ciz .df-odeme-n{animation:df-belir .3s ease .7s backwards}
@keyframes df-sil{from{clip-path:inset(0 100% 0 0)}}
@keyframes df-belir{from{opacity:0}}

.df-ipucu{position:fixed;z-index:60;pointer-events:none;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:10px;padding:8px 11px;box-shadow:var(--sh);font-size:12px;min-width:190px;max-width:300px;
  opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s var(--ease-out-guclu)}
.df-ipucu.on{opacity:1;transform:none}
.df-ipucu-t{color:var(--tx-3);font-size:11px;margin-bottom:4px}
.df-ipucu-s{display:flex;align-items:center;gap:10px;justify-content:space-between;line-height:1.7}
.df-ipucu-s span{color:var(--tx-2);display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.df-ipucu-s span::before{content:"";flex:0 0 auto;width:10px;height:2px;border-radius:2px;background:var(--anahtar,transparent)}
.df-ipucu-s b{font-variant-numeric:tabular-nums;color:var(--tx);white-space:nowrap}
.df-ipucu-s.ana{--anahtar:var(--df-altin)}
.df-ipucu-s.ana b{font-size:13px}
.df-ipucu-s.altin{--anahtar:var(--df-altin)} .df-ipucu-s.mavi{--anahtar:var(--df-mavi)} .df-ipucu-s.gri{--anahtar:var(--df-gri)}
.df-ipucu-s:not(.ana){font-size:11.5px}
.df-ipucu-s.ana+.df-ipucu-s{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}

/* ------------------------------------------------------------ hareketler */
.df-izgara{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.df-yan{display:grid;gap:14px;min-width:0}
.df-suzgec{flex:0 0 auto}
.df-suzgec button{padding:0 12px}
.df-tablo-bas,.df-sat-ust{display:grid;grid-template-columns:76px minmax(0,1fr) 124px 124px 96px;gap:12px;align-items:center}
.df-tablo-bas{padding:0 10px 8px;font-size:11px;font-weight:600;color:var(--tx-3);border-bottom:1px solid var(--line)}
.df-tablo-bas .sag{text-align:right}
.df-satirlar{display:grid}
.df-sat{border-bottom:1px solid var(--line)}
.df-sat:last-child{border-bottom:0}
.df-sat-ust{width:100%;padding:10px;text-align:left;border-radius:10px;transition:background-color .15s ease}
button.df-sat-ust{cursor:pointer}
@media (hover:hover) and (pointer:fine){ .df-sat-ust:hover{background:var(--bg-2)} }
.df-sat-ust:focus-visible{outline:2px solid var(--gold-brd);outline-offset:-2px}
.df-sat-gun{display:flex;flex-direction:column;line-height:1.25}
.df-sat-gun b{font-size:13px;font-weight:650;white-space:nowrap}
.df-sat-gun small{font-size:10.5px;color:var(--tx-3)}
.df-sat-ad{display:flex;flex-direction:column;gap:3px;min-width:0}
.df-tur{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.df-tur svg{width:15px;height:15px;color:var(--tx-3)}
.df-key{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--df-gri)}
.df-key.altin{background:var(--df-altin)} .df-key.mavi{background:var(--df-mavi)}
.df-sat-not{font-size:12px;color:var(--tx-2);overflow-wrap:anywhere}
.df-sat-kim{font-size:11px;color:var(--tx-3)}
.df-kur-aralik{font-size:11px;color:var(--tx-3);font-variant-numeric:tabular-nums;margin-left:2px}
.df-sat-tutar,.df-sat-bakiye{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.df-sat-tutar{font-weight:650;font-size:13.5px}
.df-sat-bakiye{font-size:12.5px;color:var(--tx-2)}
.df-sat-is{display:flex;justify-content:flex-end;align-items:center;gap:2px}
.df-sat-is .icon-btn{width:28px;height:28px}
.df-sat-is .icon-btn svg{width:15px;height:15px}
.df-ok{display:grid;place-items:center;width:28px;height:28px;color:var(--tx-3);transition:transform .2s var(--ease-out-guclu)}
.df-ok svg{width:15px;height:15px}
.df-sat.acik .df-ok{transform:rotate(180deg)}
.df-aldim{height:26px;padding:0 9px;background:var(--gold-dim);border-color:var(--gold-brd);color:var(--gold-2);margin-right:4px}
.df-aldim:hover{filter:brightness(1.08)}
.df-sat.onaysiz>.df-sat-ust{box-shadow:inset 2px 0 0 var(--gold-brd)}
.df-sat.yeni>.df-sat-ust{animation:df-parla 1.6s ease-out}
@keyframes df-parla{0%{background:var(--gold-dim)}100%{background:transparent}}

.df-rozet{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;height:20px;padding:0 8px;border-radius:999px;
  font-size:11px;font-weight:600;color:var(--tx-2);background:var(--bg-2);border:1px solid var(--line);white-space:nowrap}
.df-rozet svg{width:12px;height:12px;stroke-width:2.2}
.df-rozet.bekliyor{color:var(--gold-2);background:var(--gold-dim);border-color:var(--gold-brd)}
.df-rozet.onayli{color:var(--kar)}
.df-rozet.bilgi{height:18px;font-size:10.5px;vertical-align:1px}

/* gün içindeki siparişler */
.df-sat-ic{padding:2px 10px 12px 98px;display:grid;gap:2px}
.df-sip{display:grid;grid-template-columns:104px minmax(0,1fr) 72px 150px 96px 30px;gap:10px;align-items:center;
  padding:6px 8px;border-radius:8px;font-size:12px;background:var(--bg-2)}
.df-sip-no{font-variant-numeric:tabular-nums;color:var(--tx-2)}
.df-sip-ad{display:flex;flex-direction:column;min-width:0}
.df-sip-ad,.df-sip-ad small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.df-sip-ad small,.df-sip-kur small{font-size:10.5px;color:var(--tx-3)}
.df-sip-usd,.df-sip-tl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.df-sip-tl{font-weight:600}
.df-sip-kur{font-variant-numeric:tabular-nums;color:var(--tx-2);white-space:nowrap}
.df-sip-kur small{margin-left:4px}
.df-sip .icon-btn{width:26px;height:26px}
.df-sip .icon-btn svg{width:14px;height:14px}
.df-bos{padding:28px 10px;text-align:center;color:var(--tx-3);font-size:12.5px}
.df-bos b{color:var(--tx-2)}

/* ------------------------------------------------------------ yan kartlar */
.df-aylar{width:100%;border-collapse:collapse;font-size:12px}
.df-aylar th{font-size:11px;font-weight:600;color:var(--tx-3);text-align:right;padding:0 0 6px}
.df-aylar th:first-child,.df-aylar td:first-child{text-align:left}
.df-aylar td{padding:7px 0;border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.df-aylar td:first-child{color:var(--tx-2);font-variant-numeric:normal}
.df-aylar td+td,.df-aylar th+th{padding-left:10px}
.df-gunluk,.df-erisim,.df-disarida{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.df-gunluk li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;align-items:start;font-size:12px}
.df-gunluk li span{display:block;color:var(--tx);overflow-wrap:anywhere}
.df-gunluk li small{display:block;font-size:10.5px;color:var(--tx-3);margin-top:1px}
.df-gunluk.uzun{max-height:60vh;overflow-y:auto;padding-right:4px}
.df-avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;
  background:var(--bg-3);color:var(--tx-2);border:1px solid var(--line)}
.df-avatar.sistem{background:transparent;color:var(--tx-3);border-style:dashed}
.df-erisim li{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:8px;font-size:12px;color:var(--tx-2)}
.df-erisim li svg{width:14px;height:14px;margin-top:2px;color:var(--tx-3)}
.df-erisim li small{grid-column:2;font-size:10.5px;color:var(--tx-3)}
.df-erisim li.kotu svg,.df-erisim li.kotu span{color:var(--red)}
.df-disarida li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.df-disarida li small{display:block;font-size:10.5px;color:var(--tx-3)}

/* ------------------------------------------------------------ kilit */
.df-ortala{min-height:calc(100vh - var(--top-h) - 80px);display:grid;place-items:center;padding:24px 0}
.df-kilit-kart{width:min(400px,100%);background:var(--df-kart);border:1px solid var(--line);border-radius:var(--r-l);
  padding:30px 26px 24px;text-align:center;box-shadow:var(--sh);transition:opacity .22s ease,transform .22s var(--ease-out-guclu)}
.df-kilit-kart.aciliyor{opacity:0;transform:translateY(-10px) scale(.98)}
.df-kilit-kart.salla{animation:df-salla .36s ease}
@keyframes df-salla{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.df-kilit-simge{width:56px;height:56px;margin:0 auto 16px;border-radius:16px;display:grid;place-items:center;color:var(--gold);
  background:linear-gradient(150deg,var(--bg-3),var(--bg-1));border:1px solid var(--gold-brd)}
.df-kilit-simge svg{width:26px;height:26px}
.df-kilit-simge.hata{color:var(--red);border-color:rgba(248,113,113,.4)}
.df-kilit-kart h2{margin:0 0 8px;font-size:19px;letter-spacing:-.02em}
.df-kilit-kart p{margin:0 0 18px;color:var(--tx-2);font-size:13px;line-height:1.55}
.df-kilit-kart p b{color:var(--tx)}
.df-kilit-bilgi{margin:-6px 0 14px;padding:8px 10px;border-radius:9px;font-size:12px;background:var(--gold-dim);border:1px solid var(--gold-brd)}
.df-parola{height:44px;font-size:14px;margin-bottom:10px;text-align:center}
.df-kilit-hata{min-height:18px;margin-top:10px;color:var(--red);font-size:12.5px}
.df-kilit-not{display:flex;gap:8px;align-items:flex-start;text-align:left;margin-top:10px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--tx-3);line-height:1.5}
.df-kilit-not svg{flex:0 0 auto;width:15px;height:15px;color:var(--gold);margin-top:1px}
.df-kilit-not b{color:var(--tx-2)}
.df-hata-kart .df-teknik{font-size:11.5px;color:var(--tx-3);padding:8px 10px;border-radius:8px;background:var(--bg-2);overflow-wrap:anywhere}

/* iskelet: veri gelene kadar yerini tutar */
.df-iskelet{border-radius:var(--r-l);background:linear-gradient(90deg,var(--bg-2) 0%,var(--bg-3) 50%,var(--bg-2) 100%);background-size:200% 100%;
  animation:df-iskelet 1.3s ease-in-out infinite}
@keyframes df-iskelet{from{background-position:100% 0}to{background-position:-100% 0}}

/* ------------------------------------------------------------ pencereler */
.df-tur-sec{margin-bottom:6px}
.df-tur-aciklama{margin:0 0 14px}
.df-yon-sec{margin-bottom:14px}
.df-alan-et{display:block;font-size:11.5px;color:var(--tx-2);margin:0 0 6px}
.df-alan-et small{color:var(--tx-3)}
.df-tutar-kutu{display:flex;align-items:center;gap:8px;height:58px;padding:0 16px;border-radius:12px;background:var(--bg-2);
  border:1px solid var(--line-2);transition:border-color .15s ease}
.df-tutar-kutu:focus-within{border-color:var(--gold)}
.df-tutar-kutu span{font-size:15px;font-weight:600;color:var(--tx-3)}
.df-tutar{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;font-size:28px;font-weight:700;letter-spacing:-.02em}
.df-tutar-kutu.kucuk{height:46px}
.df-tutar-kutu.kucuk .df-tutar{font-size:20px}
.df-tutar-yazi{min-height:18px;margin:6px 2px 12px;font-size:12px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.df-tutar-yazi.hata{color:var(--red)}
.df-satir2{gap:10px}
.df-onizleme{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding:10px 12px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--line);font-size:12.5px;color:var(--tx-2)}
.df-onizleme span{margin-right:auto}
.df-onizleme b{font-variant-numeric:tabular-nums;color:var(--tx)}
.df-onizleme b.sonra{color:var(--gold-2)}
.df-onizleme svg{width:14px;height:14px;color:var(--tx-3)}
.df-sil-ozet{margin:0 0 10px;font-size:14px;line-height:1.6}
.df-sil-ozet span{font-size:12.5px;color:var(--tx-2)}
.df-sip-ozet{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.df-sip-ozet span{font-size:12px;color:var(--tx-3)}
.df-dokum{margin:0 0 16px;padding:10px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);display:grid;gap:4px}
.df-dokum div{display:flex;justify-content:space-between;font-size:12.5px}
.df-dokum dt{color:var(--tx-2)} .df-dokum dd{margin:0;font-variant-numeric:tabular-nums}
.df-dokum dt small{color:var(--tx-3)}
.df-dokum div{gap:12px}
.df-dokum dd{text-align:right}
.df-dokum div.toplam{padding-top:4px;border-top:1px solid var(--line);font-weight:650}
.df-haric{margin-top:14px;cursor:pointer}
.df-haric span:first-child{display:flex;flex-direction:column}
.df-haric small{font-size:11px;color:var(--tx-3)}
.df-haric .sw:focus-visible{outline:2px solid var(--gold-brd);outline-offset:2px}

/* ------------------------------------------------------------ sol panel */
.df-panel-ozet{padding:14px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line)}
.df-panel-deger{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:4px;white-space:nowrap}
.df-panel-adim{margin:0;padding-left:18px;display:grid;gap:8px;font-size:12px;color:var(--tx-2);line-height:1.5}
.df-panel-adim b{color:var(--tx)}
.df-panel-kilit{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line);
  font-size:12.5px;color:var(--tx-2)}
.df-panel-kilit svg{flex:0 0 auto;width:18px;height:18px;color:var(--gold)}
.df-panel-kilit p{margin:0}

/* ------------------------------------------------------------ geniş ekran */
@container df (min-width:820px){
  .df-kahraman{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center}
}
@container df (min-width:1080px){
  .df-izgara{grid-template-columns:minmax(0,1.85fr) minmax(300px,1fr)}
}
@container df (max-width:1079px) and (min-width:760px){
  .df-yan{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ------------------------------------------------------------ dar ekran (telefon) */
@container df (max-width:759px){
  .df{padding:14px 12px 90px}
  .df-bar-sag{width:100%}
  .df-bar-sag .btn{flex:1}
  .df-bar-sag .btn-primary{flex:2.4}
  .df-bar-sag .btn-primary span{display:inline}
  .df-bar-sag .btn:not(.btn-primary) span{display:none}
  .df-kalan{font-size:40px}
  .df-deger{font-size:19px}
  .df-tablo-bas{display:none}
  .df-sat-ust{grid-template-columns:48px minmax(0,1fr) auto;row-gap:2px;column-gap:10px;padding:10px 6px}
  .df-sat-ust>.df-sat-gun{grid-row:1/3}
  .df-sat-ust>.df-sat-ad{grid-row:1/3}
  .df-sat-ust>.df-sat-tutar{grid-column:3;grid-row:1}
  .df-sat-ust>.df-sat-bakiye{grid-column:3;grid-row:2;font-size:11px;color:var(--tx-3)}
  .df-sat-ust>.df-sat-bakiye::before{content:"kalan "}
  .df-sat-ust>.df-sat-is{grid-column:2/-1;grid-row:3;justify-content:flex-start;margin-top:4px}
  button.df-sat-ust>.df-sat-is{display:none}
  .df-sat-ic{padding:2px 4px 12px}
  .df-sip{grid-template-columns:minmax(0,1fr) auto 30px;row-gap:2px}
  .df-sip-no{grid-column:1;font-size:11px}
  .df-sip-ad{grid-column:1}
  .df-sip-usd{display:none}
  .df-sip-kur{grid-column:1;font-size:11px}
  .df-sip-tl{grid-column:2;grid-row:1/4}
  .df-sip .icon-btn{grid-column:3;grid-row:1/4}
  .df-anahtar{width:100%}
}

/* ------------------------------------------------------------ ray: düğme sayısı arttı
   Hesap eklenince masaüstünde 13 düğme oldu; kısa ekranda (laptop) alttakiler kesilmesin. */
@media (min-width:901px){
  .rail{overflow-y:auto;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
}
@media (min-width:901px) and (max-height:860px){
  .rail{gap:1px;padding:6px 0}
  .rail-btn,.rail-git{padding:6px 0 5px;gap:3px}
}

/* hareket azaltma: yer değiştiren her şey durur, yalnız saydamlık kalır */
@media (prefers-reduced-motion:reduce){
  .df.giris .df-kademe{animation:df-sade .2s ease backwards}
  @keyframes df-sade{from{opacity:0}}
  .df-metre i,.df-ok,.df-kilit-kart{transition:none}
  .df-svg.ciz .df-cizgi,.df-svg.ciz .df-dolgu,.df-svg.ciz .df-odeme-n{animation:none}
  .df-kilit-kart.salla{animation:none}
  .df-sat.yeni>.df-sat-ust{animation:none;background:var(--gold-dim)}
  .df-iskelet{animation:none}
  .df-ipucu{transition:none}
}