/* ================================================================ Tema */
:root {
  --zemin: #f4f5fa; --kart: #ffffff; --kart-2: #f8f9fc; --yazi: #12141a; --soluk: #6b7183; --cok-soluk: #a3a8b8;
  --cizgi: rgba(18, 20, 26, .08); --cizgi-2: rgba(18, 20, 26, .14);
  --golge: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
  --golge-2: 0 2px 4px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .12);
  --vurgu: #f26a1b; --vurgu-2: #ff9a3c; --vurgu-z: rgba(242, 106, 27, .1);
  --tz: #c6e600; --tz-2: #a3c400; --tz-yazi: #1a1d0a;
  --yesil: #12a150; --yesil-z: rgba(18, 161, 80, .1);
  --kirmizi: #e5383b; --kirmizi-z: rgba(229, 56, 59, .1);
  --sari: #d97706; --sari-z: rgba(217, 119, 6, .1);
  --mavi: #3b6cf6; --mavi-z: rgba(59, 108, 246, .1);
  --mor: #8b5cf6; --mor-z: rgba(139, 92, 246, .1);
  --ust: rgba(255, 255, 255, .72);
  --leke-1: #ffb37a; --leke-2: #c6e600; --leke-3: #9db5ff; --leke-op: .35;
  --r: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zemin: #0b0d12; --kart: #141821; --kart-2: #1a1f2a; --yazi: #eef0f6; --soluk: #9097aa; --cok-soluk: #5d6477;
    --cizgi: rgba(255, 255, 255, .07); --cizgi-2: rgba(255, 255, 255, .12);
    --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --golge-2: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .45);
    --vurgu-z: rgba(242, 106, 27, .16); --yesil: #2fd479; --yesil-z: rgba(47, 212, 121, .12);
    --kirmizi: #ff5c5f; --kirmizi-z: rgba(255, 92, 95, .13); --sari: #fbbf24; --sari-z: rgba(251, 191, 36, .12);
    --mavi: #7c9cff; --mavi-z: rgba(124, 156, 255, .14); --mor: #a78bfa; --mor-z: rgba(167, 139, 250, .14);
    --ust: rgba(11, 13, 18, .7); --leke-op: .16;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --zemin: #0b0d12; --kart: #141821; --kart-2: #1a1f2a; --yazi: #eef0f6; --soluk: #9097aa; --cok-soluk: #5d6477;
  --cizgi: rgba(255, 255, 255, .07); --cizgi-2: rgba(255, 255, 255, .12);
  --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --golge-2: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .45);
  --vurgu-z: rgba(242, 106, 27, .16); --yesil: #2fd479; --yesil-z: rgba(47, 212, 121, .12);
  --kirmizi: #ff5c5f; --kirmizi-z: rgba(255, 92, 95, .13); --sari: #fbbf24; --sari-z: rgba(251, 191, 36, .12);
  --mavi: #7c9cff; --mavi-z: rgba(124, 156, 255, .14); --mor: #a78bfa; --mor-z: rgba(167, 139, 250, .14);
  --ust: rgba(11, 13, 18, .7); --leke-op: .16;
  color-scheme: dark;
}

/* ================================================================ Temel */
* { box-sizing: border-box; }
html { font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100vh; background: var(--zemin); color: var(--yazi); transition: background .4s, color .4s; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sayi { font-variant-numeric: tabular-nums; }
.soluk { color: var(--soluk); }
code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--kart-2); }

/* Arkada yavaşça dolaşan renk lekeleri */
.arka { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.arka i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(90px); opacity: var(--leke-op); }
.arka i:nth-child(1) { background: var(--leke-1); top: -18vmax; left: -10vmax; animation: suzul1 28s ease-in-out infinite alternate; }
.arka i:nth-child(2) { background: var(--leke-2); top: 30vh; right: -20vmax; animation: suzul2 34s ease-in-out infinite alternate; opacity: calc(var(--leke-op) * .6); }
.arka i:nth-child(3) { background: var(--leke-3); bottom: -24vmax; left: 30vw; animation: suzul3 40s ease-in-out infinite alternate; }
@keyframes suzul1 { to { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes suzul2 { to { transform: translate(-16vw, -10vh) scale(.9); } }
@keyframes suzul3 { to { transform: translate(-20vw, -16vh) scale(1.1); } }

/* ================================================================ Üst bar */
.ust { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px max(20px, calc((100vw - 1180px) / 2)); background: var(--ust); backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--cizgi); }
.marka { display: flex; align-items: center; gap: 12px; }
.logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--vurgu-2), var(--vurgu)); box-shadow: 0 6px 18px rgba(242, 106, 27, .35); }
.logo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.marka-ad { font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.marka-alt { font-size: 12px; color: var(--soluk); }
.ust-sag { display: flex; align-items: center; gap: 6px; }

.canli { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; margin-right: 6px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--yesil); background: var(--yesil-z); transition: color .3s, background .3s; }
.canli i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; position: relative; }
.canli i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; animation: nabiz 2s ease-out infinite; }
.canli.mesgul { color: var(--mavi); background: var(--mavi-z); }
.canli.hata { color: var(--kirmizi); background: var(--kirmizi-z); }
@keyframes nabiz { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }

.ikon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid transparent; background: transparent;
  color: var(--soluk); cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.ikon-btn:hover { background: var(--kart); color: var(--yazi); border-color: var(--cizgi); }
.ikon-btn:active { transform: scale(.92); }
.ikon-btn.donuyor svg, svg.donuyor { animation: don .8s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

main { max-width: 1180px; margin: 0 auto; padding: 20px 20px 80px; }

/* ================================================================ Uyarılar */
.uyari { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; margin-bottom: 10px; border-radius: 12px; font-size: 13px;
  background: var(--sari-z); color: var(--sari); animation: asagiGir .4s ease both; }
.uyari.demo { background: var(--mavi-z); color: var(--mavi); }
.uyari.hata { background: var(--kirmizi-z); color: var(--kirmizi); }
.uyari svg { margin-top: 1px; }

/* ================================================================ Özet kutuları */
.ozet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 4px 0 22px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 16px 18px; border-radius: var(--r); background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--golge);
  animation: yukariGir .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms); transition: transform .25s, box-shadow .25s, border-color .25s; }
button.tile { cursor: pointer; }
button.tile:hover { transform: translateY(-3px); box-shadow: var(--golge-2); }
.tile-ikon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 8px; }
.tile-ikon.turuncu { color: var(--vurgu); background: var(--vurgu-z); }
.tile-ikon.kirmizi { color: var(--kirmizi); background: var(--kirmizi-z); }
.tile-ikon.yesil { color: var(--yesil); background: var(--yesil-z); }
.tile-ikon.mor { color: var(--mor); background: var(--mor-z); }
.tile-e { font-size: 12.5px; color: var(--soluk); font-weight: 500; }
.tile-d { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile-a { font-size: 12px; color: var(--soluk); position: relative; z-index: 1; }
.tile.alarm { border-color: color-mix(in srgb, var(--kirmizi) 40%, transparent); }
.tile.alarm .tile-d { color: var(--kirmizi); }
.tile.alarm::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--kirmizi); opacity: 0; animation: alarm 2.4s ease-in-out infinite; }
@keyframes alarm { 50% { opacity: .5; } }
.arti { color: var(--yesil); } .eksi { color: var(--kirmizi); }
.spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46px; color: var(--mor); opacity: .9; }
.spark .hat { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: ciz 1.6s .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.spark .alan { opacity: 0; animation: belir .8s 1.2s forwards; }
@keyframes ciz { to { stroke-dashoffset: 0; } }
@keyframes belir { to { opacity: 1; } }
.grafikli { padding-bottom: 40px; }

/* ================================================================ Araç çubuğu, sekmeler */
.arac { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.sekmeler { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--kart-2); border: 1px solid var(--cizgi);
  overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.sekmeler::-webkit-scrollbar { display: none; }
.sekme-isaret { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); border-radius: 10px; background: var(--kart); box-shadow: var(--golge);
  transition: transform .4s cubic-bezier(.3, 1.3, .5, 1), width .4s cubic-bezier(.3, 1.3, .5, 1); }
.sekme { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--soluk); white-space: nowrap; transition: color .25s; }
.sekme:hover { color: var(--yazi); }
.sekme.aktif { color: var(--yazi); }
.sekme .n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11.5px;
  background: var(--cizgi); color: var(--soluk); transition: background .25s, color .25s, transform .3s; }
.sekme.aktif .n { background: linear-gradient(135deg, var(--vurgu-2), var(--vurgu)); color: #fff; }
.sekme .n.zipla { animation: zipla .5s; }
@keyframes zipla { 40% { transform: scale(1.35); } }

.ara { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 14px;
  background: var(--kart); border: 1px solid var(--cizgi); color: var(--soluk); transition: border-color .2s, box-shadow .2s; }
.ara:focus-within { border-color: var(--vurgu); box-shadow: 0 0 0 4px var(--vurgu-z); }
.ara input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--yazi); height: 100%; }
.ara kbd { font: 600 11px/1 Inter, system-ui; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--cizgi-2); color: var(--cok-soluk); }

/* ================================================================ Kart */
.kart { position: relative; margin-bottom: 14px; border-radius: var(--r); background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--golge);
  transition: box-shadow .3s, border-color .3s, transform .3s, opacity .3s; }
.kart:hover { box-shadow: var(--golge-2); border-color: var(--cizgi-2); }
.kart.giris { animation: yukariGir .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.kart.sonuk { opacity: .62; }
.kart.sonuk:hover { opacity: 1; }
.kart.yeni-gelen { border-color: var(--vurgu); animation: yukariGir .55s cubic-bezier(.2, .8, .2, 1) both, parilti 2.2s ease-in-out .6s infinite; }
@keyframes parilti { 0%, 100% { box-shadow: var(--golge), 0 0 0 0 rgba(242, 106, 27, .0); } 50% { box-shadow: var(--golge-2), 0 0 0 6px rgba(242, 106, 27, .18); } }
@keyframes yukariGir { from { opacity: 0; transform: translateY(14px) scale(.985); } }
/* Yenilemede yerinde güncellenen kart: giriş animasyonları tekrar oynamasın */
.kart.sabit .marj i, .kart.sabit .iz-hat i, .kart.sabit .iz-adim b, .kart.sabit .akis span { animation: none; }
@keyframes asagiGir { from { opacity: 0; transform: translateY(-8px); } }

.kart-ust { display: grid; grid-template-columns: 1fr 230px; }
.urunler { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; min-width: 0; }
.urun { display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; align-items: center; }
.gorsel { width: 60px; height: 78px; border-radius: 12px; overflow: hidden; background: var(--kart-2); position: relative; }
.gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.kart:hover .gorsel img { transform: scale(1.08); }
.gorsel .adet { position: absolute; right: 4px; bottom: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, .65); color: #fff; backdrop-filter: blur(4px); }
.urun-ad { font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.urun-alt { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

.para { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 16px 20px;
  border-left: 1px dashed var(--cizgi-2); }
.para .e { font-size: 12px; color: var(--soluk); }
.para .kar { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.para .ince { font-size: 12px; color: var(--soluk); }
.marj { height: 6px; border-radius: 999px; background: var(--cizgi); overflow: hidden; margin: 8px 0 6px; }
.marj i { display: block; height: 100%; width: calc(var(--m) * 100%); border-radius: inherit; transform-origin: left;
  background: linear-gradient(90deg, var(--yesil), color-mix(in srgb, var(--yesil) 60%, #a3e635)); animation: dol 1s .25s cubic-bezier(.2, .8, .2, 1) both; }
.marj.negatif i { background: var(--kirmizi); }
@keyframes dol { from { transform: scaleX(0); } }

/* Etiketler */
.cip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  white-space: nowrap; text-decoration: none; background: var(--kart-2); color: var(--soluk); }
.cip svg.i { width: 13px; height: 13px; }
.cip.ok { color: var(--yesil); background: var(--yesil-z); }
.cip.hata { color: var(--kirmizi); background: var(--kirmizi-z); }
.cip.uyari { color: var(--sari); background: var(--sari-z); }
.cip.mavi { color: var(--mavi); background: var(--mavi-z); }
.cip.renk { color: var(--yazi); background: var(--kart-2); border: 1px solid var(--cizgi); }
.cip.yeni { color: #fff; background: linear-gradient(90deg, var(--vurgu), var(--vurgu-2), var(--vurgu)); background-size: 200% 100%; animation: kayanIsik 2s linear infinite; }
.cip.acil { animation: acil 1.4s ease-in-out infinite; }
@keyframes kayanIsik { to { background-position: -200% 0; } }
@keyframes acil { 50% { box-shadow: 0 0 0 4px var(--kirmizi-z); } }
a.cip:hover { filter: brightness(1.08); }

/* Düğmeler */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px;
  border-radius: 11px; border: 0; cursor: pointer; font-weight: 700; font-size: 13px; white-space: nowrap; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--vurgu-2), var(--vurgu)); box-shadow: 0 4px 14px rgba(242, 106, 27, .3);
  transition: transform .15s, box-shadow .2s, filter .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(242, 106, 27, .38); }
.btn:active { transform: translateY(0) scale(.97); }
.btn:disabled { opacity: .65; cursor: wait; transform: none; }
.btn svg.i { width: 16px; height: 16px; }
.btn.ikincil { color: var(--yazi); background: var(--kart-2); border: 1px solid var(--cizgi); box-shadow: none; }
.btn.ikincil:hover { background: var(--kart); border-color: var(--cizgi-2); box-shadow: var(--golge); }
.btn.kucuk { height: 30px; padding: 0 11px; border-radius: 9px; font-size: 12.5px; }
.btn.tz { color: var(--tz-yazi); background: linear-gradient(135deg, #d8f53a, var(--tz)); box-shadow: 0 4px 14px rgba(163, 196, 0, .3); }
.btn.tz:hover { box-shadow: 0 8px 22px rgba(163, 196, 0, .4); }
.btn.tz::after, .btn:not(.ikincil)::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transition: none; }
.btn:not(.ikincil):hover::after { left: 130%; transition: left .7s ease; }
.btn .ok-ikon { transition: transform .25s; }
.btn:hover .ok-ikon { transform: translate(2px, -2px); }

/* ================================================================ Aşama izleri */
.izler { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--cizgi); }
.iz { padding: 12px 18px 10px; min-width: 0; }
.iz + .iz { border-left: 1px solid var(--cizgi); }
.iz-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--cok-soluk); min-height: 24px; }
.iz-bas .cip { text-transform: none; letter-spacing: 0; }
.iz-yol { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.iz-hat { position: absolute; left: 12.5%; right: 12.5%; top: 6px; height: 3px; border-radius: 3px; background: var(--cizgi-2); overflow: hidden; }
.iz-hat i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--oran)); border-radius: inherit;
  background: linear-gradient(90deg, var(--iz-renk-2, var(--vurgu-2)), var(--iz-renk, var(--vurgu))); animation: dolIz 1s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dolIz { from { transform: scaleX(0); } }
.iz[data-tur="tz"] { --iz-renk: var(--tz-2); --iz-renk-2: #d8f53a; }
.iz.bitti-hepsi { --iz-renk: var(--yesil); --iz-renk-2: color-mix(in srgb, var(--yesil) 60%, #a3e635); }
.iz.sorun { --iz-renk: var(--kirmizi); --iz-renk-2: var(--kirmizi); }
.iz.iz-bos .iz-hat { background: repeating-linear-gradient(90deg, var(--cizgi-2) 0 6px, transparent 6px 11px); }
.iz-adim { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cok-soluk); text-align: center; }
.iz-adim b { position: relative; z-index: 1; width: 15px; height: 15px; border-radius: 50%; background: var(--kart); border: 3px solid var(--cizgi-2);
  transition: background .3s, border-color .3s; animation: noktaGir .4s both; animation-delay: calc(.25s + var(--k) * .18s); }
.iz-adim.bitti b { background: var(--iz-renk, var(--vurgu)); border-color: var(--iz-renk, var(--vurgu)); }
.iz-adim.bitti { color: var(--soluk); }
.iz-adim.simdi { color: var(--yazi); font-weight: 700; }
.iz-adim.simdi b { border-color: var(--iz-renk, var(--vurgu)); background: var(--kart); }
.iz-adim.simdi b::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--iz-renk, var(--vurgu)); animation: nabiz 1.8s ease-out infinite; }
.iz.bitti-hepsi .iz-adim.simdi b { background: var(--iz-renk); }
.iz.bitti-hepsi .iz-adim.simdi b::after { display: none; }
.iz.sorun .iz-adim b { border-color: var(--cizgi-2); }
@keyframes noktaGir { from { transform: scale(0); } 70% { transform: scale(1.25); } }
.adaylar { display: flex; gap: 6px; flex-wrap: wrap; }

/* ================================================================ Kart altı */
.kart-alt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--cizgi);
  background: var(--kart-2); border-radius: 0 0 var(--r) var(--r); font-size: 13px; }
.kart.acik .kart-alt { border-radius: 0; }
.kisi { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--soluk); flex-wrap: wrap; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 11.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 75% 62%), hsl(calc(var(--h) + 40) 70% 48%)); }
.kisi b { color: var(--yazi); font-weight: 600; }
.ayrac { width: 3px; height: 3px; border-radius: 50%; background: var(--cok-soluk); }
.no-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; cursor: pointer;
  color: var(--yazi); font-weight: 700; font-variant-numeric: tabular-nums; transition: background .2s; }
.no-btn svg.i { width: 13px; height: 13px; opacity: 0; transition: opacity .2s; color: var(--soluk); }
.no-btn:hover { background: var(--cizgi); }
.no-btn:hover svg.i { opacity: 1; }
.detay-btn svg.i { transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.kart.acik .detay-btn svg.i { transform: rotate(180deg); }

/* ================================================================ Detay (yumuşak açılır) */
.detay-sar { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1); }
.kart.acik .detay-sar { grid-template-rows: 1fr; }
.detay-ic { overflow: hidden; min-height: 0; }
.detay { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; padding: 18px; border-top: 1px solid var(--cizgi);
  opacity: 0; transform: translateY(-6px); transition: opacity .35s .05s, transform .35s .05s; }
.kart.acik .detay { opacity: 1; transform: none; }
.detay h4 { margin: 0 0 10px; font-size: 11.5px; color: var(--cok-soluk); text-transform: uppercase; letter-spacing: .06em; }
.detay h4:not(:first-child) { margin-top: 18px; }

.akis { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--cizgi); margin-bottom: 10px; }
.akis span { height: 100%; flex: 0 0 auto; width: calc(var(--w) * 100%); transform-origin: left; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.kart.acik .akis span { animation: dol .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--s) * 90ms + .15s); }
.akis .k-kom { background: var(--mavi); } .akis .k-mal { background: var(--sari); } .akis .k-kar { background: var(--yesil); } .akis .k-krg { background: var(--mor); }
.akis-ac { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--soluk); margin-bottom: 12px; }
.akis-ac i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 5px; }

.dokum { width: 100%; border-collapse: collapse; font-size: 13px; }
.dokum td { padding: 6px 0; border-bottom: 1px dashed var(--cizgi-2); vertical-align: top; }
.dokum td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.dokum tr.toplam td { border-bottom: 0; padding-top: 10px; font-size: 15px; font-weight: 800; }
.dokum .alt { color: var(--cok-soluk); font-size: 11.5px; }

.zaman { list-style: none; margin: 0; padding: 0; }
.zaman li { position: relative; padding: 0 0 10px 20px; font-size: 13px; }
.zaman li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--vurgu); }
.zaman li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 1px; background: var(--cizgi-2); }
.eslestir { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.eslestir input { height: 32px; width: 160px; padding: 0 10px; border: 1px solid var(--cizgi-2); border-radius: 9px; background: var(--kart); outline: 0; transition: border-color .2s, box-shadow .2s; }
.eslestir input:focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-z); }
.link-btn { border: 0; background: none; padding: 4px; color: var(--mavi); cursor: pointer; font-weight: 600; font-size: 12.5px; }
.link-btn.kirmizi { color: var(--kirmizi); }

/* ================================================================ Boş / iskelet */
.bos { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 20px; text-align: center; color: var(--soluk);
  border-radius: var(--r); background: var(--kart); border: 1px dashed var(--cizgi-2); animation: yukariGir .5s both; }
.bos .bos-ikon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: var(--yesil); background: var(--yesil-z); animation: yuzer 3s ease-in-out infinite; }
.bos .bos-ikon svg { width: 26px; height: 26px; }
.bos b { color: var(--yazi); font-size: 15px; }
@keyframes yuzer { 50% { transform: translateY(-6px); } }
.iskelet { height: 168px; margin-bottom: 14px; border-radius: var(--r); background: var(--kart); border: 1px solid var(--cizgi); position: relative; overflow: hidden; }
.iskelet::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cizgi-2) 60%, transparent), transparent); animation: parla 1.3s infinite; }
@keyframes parla { to { transform: translateX(100%); } }

/* ================================================================ Toast */
.toastlar { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; max-width: 380px; padding: 12px 16px; border-radius: 14px;
  background: var(--kart); color: var(--yazi); border: 1px solid var(--cizgi-2); box-shadow: var(--golge-2); font-weight: 500; cursor: pointer;
  animation: toastGir .45s cubic-bezier(.3, 1.3, .5, 1) both; }
.toast.cik { animation: toastCik .3s ease forwards; }
.toast > svg.i { color: var(--yesil); }
.toast.hata > svg.i { color: var(--kirmizi); }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--yesil); transform-origin: left; animation: sure var(--sure) linear forwards; }
.toast.hata::after { background: var(--kirmizi); }
@keyframes toastGir { from { opacity: 0; transform: translateY(20px) scale(.95); } }
@keyframes toastCik { to { opacity: 0; transform: translateX(30px); } }
@keyframes sure { to { transform: scaleX(0); } }

/* ================================================================ Ayarlar */
dialog { border: 0; border-radius: 20px; padding: 0; width: min(640px, calc(100vw - 32px)); background: var(--kart); color: var(--yazi); box-shadow: var(--golge-2); }
dialog[open] { animation: dlgGir .35s cubic-bezier(.3, 1.2, .5, 1); }
dialog::backdrop { background: rgba(8, 10, 15, .45); backdrop-filter: blur(6px); animation: belir .3s both; }
@keyframes dlgGir { from { opacity: 0; transform: translateY(16px) scale(.96); } }
#ayarForm { padding: 20px 22px; max-height: calc(100vh - 60px); overflow: auto; }
.dlg-bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dlg-bas h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
fieldset { border: 1px solid var(--cizgi); border-radius: 14px; margin: 0 0 12px; padding: 12px 16px; background: var(--kart-2); }
legend { font-weight: 700; padding: 0 6px; }
fieldset label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0; font-size: 13.5px; }
fieldset input:not([type=checkbox]) { height: 36px; width: 280px; max-width: 60%; padding: 0 10px; border: 1px solid var(--cizgi-2); border-radius: 10px;
  background: var(--kart); outline: 0; transition: border-color .2s, box-shadow .2s; }
fieldset input:not([type=checkbox]):focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-z); }
.izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.izgara label { flex-direction: column; align-items: stretch; gap: 4px; font-size: 12.5px; color: var(--soluk); }
.izgara input { width: 100% !important; max-width: none !important; color: var(--yazi); }
label.kutu { justify-content: flex-start; cursor: pointer; }
label.kutu input { position: absolute; opacity: 0; pointer-events: none; }
.anahtar { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; background: var(--cizgi-2); transition: background .25s; }
.anahtar::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
label.kutu input:checked + .anahtar { background: var(--vurgu); }
label.kutu input:checked + .anahtar::after { transform: translateX(16px); }
label.kutu input:focus-visible + .anahtar { box-shadow: 0 0 0 3px var(--vurgu-z); }
.not { margin: 2px 0 8px; color: var(--soluk); font-size: 12.5px; }
.dlg-alt { display: flex; justify-content: flex-end; gap: 8px; }

/* ================================================================ Duyarlı */
@media (max-width: 900px) {
  .ozet { grid-template-columns: 1fr 1fr; }
  .kart-ust { grid-template-columns: 1fr; }
  .para { border-left: 0; border-top: 1px dashed var(--cizgi-2); }
  .izler { grid-template-columns: 1fr; }
  .iz + .iz { border-left: 0; border-top: 1px solid var(--cizgi); }
  .detay { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  main { padding: 14px 12px 60px; }
  .ust { padding: 10px 12px; }
  .canli span { display: none; }
  .ozet { gap: 10px; }
  .tile-d { font-size: 21px; }
  .urun { grid-template-columns: 52px 1fr; }
  .urun > .btn, .urun > .soluk { grid-column: 1 / -1; justify-self: stretch; }
  .izgara { grid-template-columns: 1fr; }
  fieldset input:not([type=checkbox]) { width: 100%; max-width: 55%; }
}

/* ================================================================ Dönem şeridi (ciro → net kâr) */
#b-siparis .ozet { margin-bottom: 14px; }
.serit { display: flex; margin: 0 0 22px; border-radius: var(--r); background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--golge);
  overflow-x: auto; scrollbar-width: none; animation: yukariGir .6s .3s cubic-bezier(.2, .8, .2, 1) both; }
.serit::-webkit-scrollbar { display: none; }
.serit-k { position: relative; flex: 1 0 auto; min-width: 128px; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; cursor: help;
  animation: yukariGir .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.35s + var(--i) * 60ms); transition: background .2s; }
.serit-k:hover { background: var(--kart-2); }
.serit-k + .serit-k::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--cizgi-2); }
.serit-e { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--soluk); white-space: nowrap; }
.serit-e i { font-style: normal; font-weight: 800; color: var(--kirmizi); }
.serit-k b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.serit-k.ciro b { font-size: 19px; }
.serit-k.ciro { background: linear-gradient(135deg, var(--vurgu-z), transparent 80%); border-radius: var(--r) 0 0 var(--r); }
.serit-k.net { background: linear-gradient(225deg, var(--yesil-z), transparent 80%); border-radius: 0 var(--r) var(--r) 0; }
.serit-k.net b { font-size: 19px; }

/* ================================================================ Bölümler (Siparişler / İadeler / Sorular / Finans) */
:root { --g-hak: #3b6cf6; --g-rek: #e0600f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-hak: #5b7ff0; --g-rek: #e2701a; } }
:root[data-theme="dark"] { --g-hak: #5b7ff0; --g-rek: #e2701a; }

.bolum-nav { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--kart-2); border: 1px solid var(--cizgi); }
.bolum-isaret { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); border-radius: 10px;
  background: linear-gradient(135deg, var(--vurgu-2), var(--vurgu)); box-shadow: 0 4px 14px rgba(242, 106, 27, .32);
  transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), width .45s cubic-bezier(.3, 1.3, .5, 1); }
.bolum-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--soluk); white-space: nowrap; transition: color .3s; }
.bolum-btn:hover { color: var(--yazi); }
.bolum-btn.aktif { color: #fff; }
.bolum-btn > span:first-child { display: grid; }
.bolum-btn svg.i { width: 16px; height: 16px; }
.bolum-btn.aktif svg.i { animation: ikonZipla .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ikonZipla { 40% { transform: scale(1.25) rotate(-8deg); } }
.rozet { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: none; place-items: center; font-size: 11px; font-weight: 800;
  background: var(--cizgi-2); color: var(--yazi); font-variant-numeric: tabular-nums; }
.rozet:not(:empty) { display: inline-grid; }
.rozet.alarm { background: var(--kirmizi); color: #fff; box-shadow: 0 0 0 0 var(--kirmizi-z); animation: rozetNabiz 2s ease-out infinite; }
.bolum-btn.aktif .rozet { background: rgba(255, 255, 255, .28); color: #fff; animation: none; }
.rozet.zipla { animation: zipla .5s; }
@keyframes rozetNabiz { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kirmizi) 45%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }

.bolum.gir { animation: bolumGir .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bolumGir { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }
.bolum.sabit .tile, .bolum.sabit .giris, .bolum.sabit .cubuk i, .bolum.sabit .g-b i, .bolum.sabit .urun-sira li, .bolum.sabit .odeme-liste li { animation: none !important; }

.panel { padding: 16px 18px; margin-bottom: 14px; border-radius: var(--r); background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--golge);
  animation: yukariGir .55s cubic-bezier(.2, .8, .2, 1) both; min-width: 0; }
.panel h3, .bolum-baslik { margin: 0 0 12px; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.bolum-baslik { margin: 0; font-size: 15px; }
.ara-baslik { margin: 22px 0 12px; color: var(--soluk); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.iki-sutun { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.iki-sutun > .panel { margin-bottom: 14px; }
.kucuk-yazi { font-size: 12px; }
.sag { margin-left: auto; }
.ince-not { display: block; margin: 10px 0 0; font-size: 12px; color: var(--cok-soluk); line-height: 1.45; }
.sekmeler.mini .sekme.aktif { background: var(--kart); box-shadow: var(--golge); }
.sekmeler.mini .sekme.aktif .n { background: linear-gradient(135deg, var(--vurgu-2), var(--vurgu)); color: #fff; }
.tile.iskelet-tile { min-height: 118px; }
.tile.iskelet-tile::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cizgi-2) 60%, transparent), transparent); animation: parla 1.3s infinite; }
.bos .bos-ikon.kirmizi { color: var(--kirmizi); background: var(--kirmizi-z); }
.tile-a b { font-weight: 700; }
.kucuk-cip { height: 20px; padding: 0 7px; font-size: 11px; margin-left: 6px; vertical-align: 1px; text-transform: none; letter-spacing: 0; }
.dokum tr.hakedis td { font-weight: 800; color: var(--g-hak); border-bottom-style: solid; }
.hakedis-not { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--yesil) !important; font-weight: 600; }
.hakedis-not svg.i { width: 13px; height: 13px; }

/* Yatay çubuklar (iade sebepleri) */
.cubuklar { display: flex; flex-direction: column; gap: 10px; }
.cubuk { display: grid; grid-template-columns: minmax(110px, 38%) 1fr 28px; gap: 10px; align-items: center; font-size: 13px; }
.cubuk-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soluk); }
.cubuk-yol { height: 10px; border-radius: 999px; background: var(--cizgi); overflow: hidden; }
.cubuk-yol i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 0 4px 4px 0; transform-origin: left;
  background: linear-gradient(90deg, var(--vurgu-2), var(--vurgu)); animation: dol .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 80ms + .2s); }
.cubuk b { text-align: right; font-variant-numeric: tabular-nums; }

.urun-sira { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.urun-sira li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; animation: yukariGir .5s both; animation-delay: calc(var(--i) * 70ms + .1s); }
.urun-sira-ad { min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.urun-sira-ad .urun-ad { -webkit-line-clamp: 1; font-size: 13px; }
.urun-sira b { font-size: 18px; font-weight: 800; }
.gorsel.mini { width: 40px; height: 52px; border-radius: 9px; flex: none; }

/* İade kartı */
.iade-ust { display: grid; grid-template-columns: 1fr 250px; }
.iade-kalemler { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.iade-kalem { display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: start; }
.sebep { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--sari); }
.sebep svg.i { width: 15px; height: 15px; }
.musteri-not { position: relative; margin: 8px 0 0; padding: 8px 12px; border-radius: 4px 12px 12px 12px; background: var(--kart-2);
  border: 1px solid var(--cizgi); font-size: 13px; color: var(--yazi); font-style: italic; }
.iade-islem { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 16px 20px; border-left: 1px dashed var(--cizgi-2); }
.iade-islem .ince-not { margin: 0; }
.iade-kart.bekliyor { border-color: color-mix(in srgb, var(--kirmizi) 35%, transparent); }
.iade-kart.bekliyor::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--kirmizi); }
.btn.emin { background: linear-gradient(135deg, #ff7a7c, var(--kirmizi)); box-shadow: 0 4px 14px rgba(229, 56, 59, .35); animation: titre .4s; }
@keyframes titre { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.kisi a { color: var(--mavi); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.kisi a svg.i { width: 13px; height: 13px; }

/* Soru kartı */
.soru-kart { padding: 16px 18px; }
.soru-kart.bekliyor { border-color: color-mix(in srgb, var(--kirmizi) 35%, transparent); }
.soru-bas { display: flex; align-items: center; gap: 12px; }
.soru-bas .urun-ad { -webkit-line-clamp: 1; font-size: 13.5px; }
.soru-bas .urun-ad a { text-decoration: none; }
.soru-bas .urun-ad a:hover { text-decoration: underline; }
.soru-metin { position: relative; margin: 12px 0 0 52px; padding: 10px 14px; border-radius: 4px 14px 14px 14px; background: var(--kart-2);
  border: 1px solid var(--cizgi); font-size: 14px; font-weight: 500; white-space: pre-wrap; }
.cevap-balon { margin: 8px 0 0 auto; max-width: calc(100% - 52px); padding: 10px 14px; border-radius: 14px 4px 14px 14px; font-size: 13.5px;
  background: var(--mavi-z); border: 1px solid color-mix(in srgb, var(--mavi) 25%, transparent); }
.cevap-balon > div:first-child { white-space: pre-wrap; }
.cevap-balon.red { background: var(--kirmizi-z); border-color: color-mix(in srgb, var(--kirmizi) 25%, transparent); }
.cevap-balon .kucuk-yazi { margin-top: 4px; white-space: normal; }
.cevap-alan { margin: 12px 0 0 52px; }
.hazir { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.hazir-btn { border: 1px dashed var(--cizgi-2); cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.hazir-btn:hover { color: var(--vurgu); background: var(--vurgu-z); border-color: var(--vurgu); }
.hazir-btn:active { transform: scale(.95); }
.cevap-alan textarea { display: block; width: 100%; min-height: 84px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cizgi-2);
  background: var(--kart); color: var(--yazi); font: inherit; resize: vertical; outline: 0; transition: border-color .2s, box-shadow .2s; }
.cevap-alan textarea:focus { border-color: var(--vurgu); box-shadow: 0 0 0 4px var(--vurgu-z); }
.cevap-alt { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.sayac { font-size: 12px; color: var(--cok-soluk); font-variant-numeric: tabular-nums; transition: color .2s; }
.sayac.eksik { color: var(--kirmizi); }

/* Qwen taslak */
.qwen-btn { background: linear-gradient(135deg, #8b5cf6, #6366f1 55%, #3b82f6); box-shadow: 0 4px 14px rgba(99, 102, 241, .35); height: 26px; padding: 0 11px; font-size: 12px; }
.qwen-btn:hover { box-shadow: 0 8px 22px rgba(99, 102, 241, .45); }
.qwen-btn svg.i { width: 14px; height: 14px; }
.cevap-alan { position: relative; }
.cevap-alan.yaziyor textarea { color: transparent; pointer-events: none;
  background: linear-gradient(100deg, var(--kart) 20%, color-mix(in srgb, #8b5cf6 14%, var(--kart)) 40%, color-mix(in srgb, #3b82f6 14%, var(--kart)) 60%, var(--kart) 80%);
  background-size: 300% 100%; animation: qwenParla 1.2s linear infinite; border-color: color-mix(in srgb, #8b5cf6 50%, transparent); }
@keyframes qwenParla { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.cevap-alan textarea.akiyor { border-color: #8b5cf6; box-shadow: 0 0 0 4px color-mix(in srgb, #8b5cf6 18%, transparent); }
.taslak-bilgi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; padding: 7px 10px; border-radius: 10px; font-size: 12px;
  color: var(--soluk); background: color-mix(in srgb, #8b5cf6 8%, transparent); border: 1px solid color-mix(in srgb, #8b5cf6 22%, transparent); animation: asagiGir .35s both; }
.taslak-bilgi > svg.i { width: 14px; height: 14px; color: #8b5cf6; }
.taslak-bilgi b { color: var(--yazi); }
.taslak-bilgi span { display: inline-flex; align-items: center; gap: 3px; }
.taslak-bilgi span svg.i { width: 12px; height: 12px; }
.taslak-bilgi .var { color: var(--yesil); } .taslak-bilgi .yok { color: var(--sari); }
.taslak-bilgi em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--sari); }

/* Finans: ödeme ve hareket listeleri */
.odeme-liste, .hareket-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.odeme-liste li, .hareket-liste li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--cizgi-2); }
.odeme-liste li:last-child, .hareket-liste li:last-child { border-bottom: 0; }
.odeme-liste li { animation: yukariGir .5s both; animation-delay: calc(var(--i) * 60ms + .1s); }
.odeme-liste b.sayi { font-size: 15px; }
.takvim-cip { width: 44px; height: 46px; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  background: var(--vurgu-z); color: var(--vurgu); }
.takvim-cip b { font-size: 17px; font-weight: 800; }
.takvim-cip span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.odeme-ad, .hareket-ad { min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.odeme-ad b::first-letter { text-transform: uppercase; }
.hareket-ad .kucuk-yazi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hareket-ikon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--kart-2); color: var(--soluk); }
.hareket-ikon svg.i { width: 16px; height: 16px; }
.hareket-ikon.kirmizi { color: var(--g-rek); background: color-mix(in srgb, var(--g-rek) 12%, transparent); }
.hareket-ikon.yesil { color: var(--yesil); background: var(--yesil-z); }
.hareket-liste b.sayi, .odeme-liste b.sayi { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Finans: günlük gruplu sütun grafiği (tek eksen) */
.g-lejant { display: flex; gap: 16px; font-size: 12.5px; color: var(--soluk); margin-bottom: 10px; }
.g-lejant span, .g-ipucu span { display: inline-flex; align-items: center; gap: 6px; }
.g-lejant i, .g-ipucu i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
i.g-hak { background: var(--g-hak); } i.g-rek { background: var(--g-rek); }
.grafik { position: relative; height: 230px; padding: 0 0 22px 52px; }
.g-eksen { position: absolute; left: 0; top: 0; bottom: 22px; width: 46px; }
.g-eksen span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--cok-soluk); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-alan { position: relative; height: 100%; display: flex; }
.g-cizgi { position: absolute; left: 0; right: 0; height: 1px; background: var(--cizgi); pointer-events: none; }
.g-cizgi.sifir { background: var(--cizgi-2); }
.g-gun { position: relative; flex: 1; min-width: 0; height: 100%; outline: 0; cursor: default; border-radius: 6px; }
.g-gun::before { content: ""; position: absolute; inset: 0 1px; border-radius: 6px; background: var(--cizgi); opacity: 0; transition: opacity .2s; }
.g-gun:hover::before, .g-gun:focus-visible::before { opacity: .7; }
.g-cift { position: absolute; inset: 0; display: flex; justify-content: center; gap: 2px; }
.g-b { position: relative; width: min(12px, 34%); height: 100%; }
.g-b i { position: absolute; left: 0; right: 0; border-radius: 4px 4px 0 0; transform-origin: bottom; animation: sutunBuyu .8s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--k) * 22ms + .15s); }
.g-b i.neg { border-radius: 0 0 4px 4px; transform-origin: top; }
.g-b.g-hak i { background: var(--g-hak); } .g-b.g-rek i { background: var(--g-rek); }
@keyframes sutunBuyu { from { transform: scaleY(0); } }
.g-x { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: 11px; color: var(--cok-soluk); }
.g-ipucu { position: absolute; z-index: 5; bottom: calc(100% - 30px); left: 50%; transform: translate(-50%, 6px); min-width: 170px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 5px; border-radius: 12px; background: var(--kart); border: 1px solid var(--cizgi-2); box-shadow: var(--golge-2);
  font-size: 12.5px; color: var(--soluk); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; white-space: nowrap; }
.g-ipucu > b { color: var(--yazi); }
.g-ipucu span b { margin-left: auto; padding-left: 14px; color: var(--yazi); font-variant-numeric: tabular-nums; }
.g-ipucu.sol { left: 0; transform: translate(0, 6px); } .g-ipucu.sag { left: auto; right: 0; transform: translate(0, 6px); }
.g-gun:hover .g-ipucu, .g-gun:focus-visible .g-ipucu { opacity: 1; transform: translate(-50%, 0); }
.g-gun:hover .g-ipucu.sol, .g-gun:focus-visible .g-ipucu.sol, .g-gun:hover .g-ipucu.sag, .g-gun:focus-visible .g-ipucu.sag { transform: none; }

/* Finans: nakit tahmini */
.nakit-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.nakit-bas h3 { margin-bottom: 2px; font-size: 16px; }
.nakit-bas p { margin: 0; }
.nakit-ilk { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.nakit-ilk b { font-size: 14px; }
.nakit-ilk .arti { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.akis-serit { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 10px; margin-bottom: 18px; }
.akis-k { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--kart-2); border: 1px solid var(--cizgi);
  animation: yukariGir .5s cubic-bezier(.2, .8, .2, 1) both; }
.akis-k:nth-child(3) { animation-delay: .12s; } .akis-k:nth-child(5) { animation-delay: .24s; }
.akis-k span { font-size: 12px; font-weight: 600; color: var(--soluk); }
.akis-k b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.akis-k small { font-size: 11.5px; color: var(--cok-soluk); }
.akis-k.cikan { background: linear-gradient(135deg, var(--kirmizi-z), transparent 85%); }
.akis-k.giren { background: linear-gradient(135deg, color-mix(in srgb, var(--g-hak) 12%, transparent), transparent 85%); }
.akis-k.kalan { background: linear-gradient(135deg, var(--yesil-z), transparent 85%); border-color: color-mix(in srgb, var(--yesil) 35%, transparent); }
.akis-k.eksi-k { background: linear-gradient(135deg, var(--kirmizi-z), transparent 85%); border-color: color-mix(in srgb, var(--kirmizi) 35%, transparent); }
.akis-ok { display: grid; place-items: center; color: var(--cok-soluk); font-size: 22px; font-weight: 800; }
.akis-ok svg.i { transform: rotate(45deg); animation: okKay 1.6s ease-in-out infinite; }
@keyframes okKay { 50% { transform: rotate(45deg) translate(2px, -2px); } }

/* Haftalık yığılmış sütun: kesin dolu, tahmini taralı (renk + doku ile ayrışır) */
i.g-tah { background: repeating-linear-gradient(135deg, var(--g-hak) 0 2px, color-mix(in srgb, var(--g-hak) 30%, transparent) 2px 5px); }
.hafta-grafik { height: 250px; padding-bottom: 26px; }
.hafta-grafik .g-eksen { bottom: 26px; }
.hafta-grafik .g-x { bottom: -24px; font-size: 11.5px; white-space: nowrap; }
.yigin { position: absolute; left: 50%; bottom: 0; top: 0; width: min(56px, 60%); transform: translateX(-50%); }
.yigin i { position: absolute; left: 0; right: 0; transform-origin: bottom; animation: sutunBuyu .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k) * 90ms + .2s); }
.yigin .y-kes { background: var(--g-hak); border-radius: 0 0 2px 2px; }
.yigin .y-tah { border-radius: 4px 4px 0 0; animation-delay: calc(var(--k) * 90ms + .45s);
  background: repeating-linear-gradient(135deg, var(--g-hak) 0 3px, color-mix(in srgb, var(--g-hak) 28%, transparent) 3px 8px);
  box-shadow: inset 0 0 0 1.5px var(--g-hak); }
.yigin .y-kes:only-of-type, .yigin .y-kes:last-child:first-of-type { border-radius: 4px 4px 0 0; }
.yigin .y-tah + .y-kes { margin-top: 0; }
.yigin .y-tah { margin-bottom: 2px; }
.y-etiket { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--yazi); white-space: nowrap;
  font-variant-numeric: tabular-nums; animation: belir .5s both; animation-delay: calc(var(--k) * 90ms + .8s); opacity: 0; }
.bolum.sabit .yigin i, .bolum.sabit .y-etiket, .bolum.sabit .akis-k { animation: none !important; opacity: 1; }

@media (max-width: 900px) {
  .akis-serit { grid-template-columns: 1fr; }
  .akis-ok { transform: rotate(90deg); height: 18px; }
}

@media (max-width: 1080px) {
  .ust { flex-wrap: wrap; }
  .bolum-nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .bolum-btn { flex: 1; justify-content: center; }
}
@media (max-width: 900px) {
  .iki-sutun { grid-template-columns: 1fr; }
  .iade-ust { grid-template-columns: 1fr; }
  .iade-islem { border-left: 0; border-top: 1px dashed var(--cizgi-2); }
}
@media (max-width: 560px) {
  .bolum-btn { padding: 0 8px; gap: 5px; }
  .bolum-btn .bolum-ad { font-size: 12px; }
  .soru-metin, .cevap-alan { margin-left: 0; }
  .cevap-balon { max-width: 100%; }
  .grafik { padding-left: 40px; height: 200px; }
  .g-eksen { width: 36px; }
  .cubuk { grid-template-columns: 1fr 28px; }
  .cubuk-yol { grid-column: 1 / -1; grid-row: 2; }
}

/* Hareketi azalt */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .arka { display: none; }
}

/* ---------------------------------------------------------------- Buybox */
.bb-tarama { display: flex; flex-direction: column; gap: 10px; }
.bb-tarama-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.bb-tarama-ust > svg.i { width: 18px; height: 18px; color: var(--yesil); flex: none; }
.bb-tarama.calisiyor .bb-tarama-ust > svg.i { color: var(--mavi); }
.bb-tarama .uyari, .bb-tarama .ince-not { margin: 0; }
.bb-cubuk { height: 8px; border-radius: 999px; background: var(--kart-2); border: 1px solid var(--cizgi); overflow: hidden; }
.bb-cubuk i { display: block; height: 100%; border-radius: inherit; transition: width .6s cubic-bezier(.2, .8, .2, 1);
  background: linear-gradient(90deg, var(--mavi), var(--mor), var(--mavi)); background-size: 200% 100%; animation: kayanIsik 2s linear infinite; }
.bb-arac .ara { max-width: 640px; }
.bb-kart { padding: 14px 16px; }
.bb-kart.kayip { border-color: color-mix(in srgb, var(--kirmizi) 45%, transparent); }
.bb-kart.kayip::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--kirmizi); }
.bb-kart.rakipli::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sari); }
.bb-ust { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; margin-bottom: 10px; }
.bb-ust .urun-ad a { color: inherit; text-decoration: none; }
.bb-ust .urun-ad a:hover { color: var(--vurgu); }
.bb-tablo-sar { overflow-x: auto; }
.bb-tablo { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.bb-tablo th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--cok-soluk); padding: 6px 10px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.bb-tablo td { padding: 7px 10px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.bb-tablo tr:last-child td { border-bottom: 0; }
.bb-tablo tr.sakin td { color: var(--soluk); }
.bb-tablo tr.kayip td { background: var(--kirmizi-z); }
.bb-tablo tr.kayip td:first-child { border-radius: 8px 0 0 8px; } .bb-tablo tr.kayip td:last-child { border-radius: 0 8px 8px 0; }
.bb-sira { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 7px; font-weight: 800; font-size: 12px;
  color: var(--yesil); background: var(--yesil-z); }
.bb-sira.kotu { color: var(--kirmizi); background: var(--kirmizi-z); }
.bb-bilgi summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; list-style: none; }
.bb-bilgi summary::-webkit-details-marker { display: none; }
.bb-bilgi summary svg.i { width: 16px; height: 16px; color: var(--mavi); }
.bb-bilgi p { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--soluk); }
@media (max-width: 560px) {
  .bb-ust { grid-template-columns: 40px 1fr; }
  .bb-ust .cip { grid-column: 1 / -1; justify-self: start; }
}

/* ---------------------------------------------------------------- Sipariş doğruluk kontrolü */
.iz-cipler { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.kontrol-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kontrol-liste li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.kontrol-liste li svg.i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.kontrol-liste li.k-hata { color: var(--kirmizi); background: var(--kirmizi-z); }
.kontrol-liste li.k-uyari { color: color-mix(in srgb, var(--sari) 70%, var(--yazi)); background: var(--sari-z); }
.kontrol-liste li span { color: var(--yazi); }
.kontrol-ok { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--yesil); }
.kontrol-ok svg.i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.kontrol-ok span { color: var(--yazi); }
.kontrol-kart { padding: 14px 16px; }
.kontrol-kart.k-hata { border-color: color-mix(in srgb, var(--kirmizi) 45%, transparent); }
.kontrol-kart::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sari); }
.kontrol-kart.k-hata::before { background: var(--kirmizi); }
.kontrol-kart .kart-alt { margin-top: 12px; padding: 10px 0 0; }
.kontrol-ust { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; margin-bottom: 10px; }
.kontrol-ust .urun-ad { -webkit-line-clamp: 3; font-size: 13.5px; }
@media (max-width: 560px) { .kontrol-ust { grid-template-columns: 40px 1fr; } .kontrol-ust > .cip { grid-column: 1 / -1; justify-self: start; } }
.sahipsiz-aday { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.hareket-ad .sahipsiz-aday { white-space: normal; }
.dis-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-top: 8px; padding: 10px; border-radius: 12px;
  background: var(--kart-2); border: 1px solid var(--cizgi); white-space: normal; }
.dis-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--soluk); }
.dis-form input { height: 32px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--cizgi-2); background: var(--kart); color: var(--yazi); font: inherit; font-size: 13px; }
.dis-form input:focus { outline: 0; border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-z); }
.dis-form .genis { grid-column: span 1; }
.dis-btn { grid-column: 1 / -1; display: flex; gap: 8px; }
.hareket-ad > .soluk.kucuk-yazi + .soluk.kucuk-yazi { white-space: normal; }
@media (max-width: 560px) { .dis-form { grid-template-columns: 1fr; } }