/* Oyun ekranları (İşler, İş başında, İşletmem): telefon öncelikli. Renkler harita ile aynı. */
:root {
	--ink: #1B2A33;
	--muted: #4A5A63;
	--line: #E2E8EA;
	--ground: #F3F5F2;
	--card: #FFFFFF;
	--blue: #1F5673;
	--blue-dark: #123A4F;
	--blue-soft: #E6EEF1;
	--blue-mid: #8FB3C4;
	--rust: #A8430F;
	--rust-soft: #FBE3D6;
	--rust-ink: #7A3410;
	--amber: #E99A4E;
	--gold-soft: #FDF0DD;
	--gold: #F2B807;
	--green: #2F6B3A;
	--green-soft: #E3F0E1;
}

* { box-sizing: border-box; }

html, body.game {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	-webkit-tap-highlight-color: transparent;
}

body.game { min-height: 100dvh; display: flex; flex-direction: column; }

button, input, select { font-family: inherit; font-size: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
a { color: var(--blue); }

/* Üst çubuk */
.top {
	position: sticky;
	top: 0;
	z-index: 5;
	min-height: 60px;
	padding: 8px 16px;
	padding-top: max(8px, env(safe-area-inset-top));
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--card);
	border-bottom: 1px solid var(--line);
}
.top-back {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	margin-left: -8px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	color: var(--ink);
}
.top-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.top-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top-title { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.money {
	flex-shrink: 0;
	background: var(--gold-soft);
	color: var(--rust-ink);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* İçerik */
.page {
	flex: 1;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 12px 16px 96px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.section-title { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.card {
	background: var(--card);
	border-radius: 14px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 2px solid var(--card);
}
.card.alert { border-color: var(--rust); }
.card.timed { border-color: var(--amber); }
.card.dim { opacity: .82; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-title { font-size: 16px; font-weight: 600; }
.card-sub { font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.empty { padding: 16px; text-align: center; color: var(--muted); background: var(--card); border-radius: 14px; }

.badge { flex-shrink: 0; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; background: var(--blue-soft); color: var(--blue); white-space: nowrap; }
.badge.state { background: #ECE6F5; color: #4B3A6E; }
.badge.mine { background: var(--blue); color: #FFFFFF; }
.badge.warn { background: var(--rust-soft); color: var(--rust-ink); }
.badge.ok { background: var(--green-soft); color: var(--green); }
.badge.amber { background: var(--amber); color: #fff; }

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kv { display: flex; flex-direction: column; min-width: 0; }
.kv span:first-child { font-size: 12px; color: var(--muted); }
.kv span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

.bar { height: 8px; border-radius: 4px; background: var(--blue-soft); overflow: hidden; display: flex; }
.bar > i { display: block; height: 100%; background: var(--blue); }
.bar > i.team { background: var(--blue-mid); }
.bar > i.bad { background: var(--rust); }
.bar.amber > i { background: var(--amber); }

.btn {
	height: 48px;
	padding: 0 16px;
	border-radius: 12px;
	border: 1px solid #B9C4C9;
	background: var(--card);
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	gap: 8px;
}
.btn.primary { border: none; background: var(--blue); color: #FFFFFF; font-weight: 600; }
.btn.urgent { border: none; background: var(--rust); color: #FFFFFF; font-weight: 600; }
.btn.outline { border: 2px solid var(--blue); color: var(--blue); font-weight: 600; }
.btn.small { height: 36px; font-size: 14px; padding: 0 12px; border-radius: 10px; }
.btn.wide { width: 100%; }
.btn:disabled { background: var(--line); color: var(--muted); border-color: var(--line); cursor: default; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > .btn { flex: 1; }
.choices { display: grid; gap: 8px; }

.note { border-radius: 12px; padding: 10px 12px; font-size: 13px; background: var(--blue-soft); color: var(--blue-dark); }
.note.bad { background: var(--rust-soft); color: var(--rust-ink); }
.note.good { background: var(--green-soft); color: var(--green); }

/* Liste satırları (depo, talimat, rapor) */
.lines { display: flex; flex-direction: column; }
.line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.line:first-child { border-top: none; }
.line .num { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

/* Form */
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.field input, .field select {
	height: 44px;
	border-radius: 10px;
	border: 1px solid #B9C4C9;
	padding: 0 10px;
	color: var(--ink);
	background: #FFFFFF;
	font-size: 16px;
}

/* Sayaç */
.timer { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Alt gezinme */
.nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	background: var(--card);
	border-top: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
	height: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	color: var(--muted);
	text-decoration: none;
	font-size: 12px;
	font-weight: 500;
}
.nav a[aria-current="page"] { color: var(--blue); font-weight: 600; }
.nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.toast {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 76px;
	z-index: 30;
	max-width: 520px;
	margin: 0 auto;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--ink);
	color: #FFFFFF;
	font-size: 14px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.toast { transition: none; }
}

/* Haritanın panelinde açıldığında: alt menü haritada */
.embedded .nav { display: none; }
.embedded .page { padding-bottom: 32px; }
.embedded .toast { bottom: 16px; }
.embedded .top { padding-top: 8px; position: static; }
.embedded .top .money { display: none; }
.good-text { color: var(--green); }
.bad-text { color: var(--rust); }

/* Bildirim kartları */
.note-card { border-left: 5px solid var(--blue-mid); gap: 8px; }
.note-card.bad { border-left-color: var(--rust); }
.note-card.good { border-left-color: var(--green); }
.note-card.unread { box-shadow: 0 0 0 2px var(--gold-soft); }
.note-card .btn { align-self: flex-start; }
.note-text { margin: 0; font-size: 15px; }

/* Tokluk göstergesi */
.bar.satiety { height: 12px; border-radius: 6px; }
.bar.satiety > i { background: var(--green); transition: width .6s; }
.bar.satiety.amber > i { background: var(--amber); }
.bar.satiety.bad > i { background: var(--rust); }
@media (prefers-reduced-motion: reduce) { .bar.satiety > i { transition: none; } }

/* Hesap, oyuncular, mesajlar */
.stack { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.seg { margin-bottom: 4px; }
.rank { list-style: none; margin: 0; padding: 0; }
.rank .line { cursor: pointer; }
.rank .line.me { background: var(--gold-soft); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.chat { display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 80%; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--card); font-size: 15px; overflow-wrap: anywhere; white-space: pre-wrap; }
.bubble.mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--blue); color: #FFFFFF; }
.bubble-at { font-size: 11px; opacity: .7; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 76px; background: var(--ground); padding: 6px 0; }
.chat-form textarea { flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid #B9C4C9; padding: 10px; font: inherit; font-size: 16px; resize: vertical; color: var(--ink); background: #FFFFFF; }
.embedded .chat-form { bottom: 0; }

/* Pazar yeri */
.tabs { display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; background: var(--card); border-bottom: 1px solid var(--line); }
.tabs .btn { flex: 1 0 auto; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { border: 1px solid #B9C4C9; border-radius: 999px; padding: 4px 10px; font-size: 13px; background: var(--card); color: var(--ink); }
.tag.link { color: var(--blue); font-weight: 600; cursor: pointer; font-family: inherit; }
.tag.link.on { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.card-titles.right { align-items: flex-end; text-align: right; }
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; }
.book-col { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 10px; }
.book-col.buy { background: var(--green-soft); }
.book-col.sell { background: var(--rust-soft); }
details.more > summary { cursor: pointer; color: var(--blue); font-weight: 600; font-size: 14px; padding: 4px 0; }
details.more[open] > summary { margin-bottom: 8px; }
.money[hidden] { display: none; }

/* Pencere (alttan açılır) */
.modal-back { position: fixed; inset: 0; z-index: 20; background: rgba(27, 42, 51, 0.5); display: flex; align-items: flex-end; justify-content: center; }
.modal { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--card); border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; animation: modal-up .16s ease-out; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.modal-title { margin: 0; font-size: 18px; }
.modal-x { width: 40px; height: 40px; border: none; border-radius: 10px; background: var(--ground); color: var(--ink); font-size: 22px; cursor: pointer; }
.modal-body { display: flex; flex-direction: column; gap: 12px; }
body.has-modal { overflow: hidden; }
@keyframes modal-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 600px) { .modal-back { align-items: center; } .modal { border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { .modal, .mkt-row.up, .mkt-row.down { animation: none; } }

/* Canlı piyasa: tek satırlık tablolar */
.mkt-bar { display: flex; gap: 8px; align-items: center; }
.mkt-bar input { flex: 1; min-width: 0; height: 40px; border: 1px solid #B9C4C9; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; background: var(--card); color: var(--ink); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.live-dot.off::before { background: var(--line); }
.mkt { background: var(--card); border-radius: 14px; overflow: hidden; }
.mkt-head, .mkt-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr 1fr 1fr; gap: 8px; align-items: center; padding: 0 12px; }
.mkt.offers .mkt-head, .mkt.offers .mkt-row { grid-template-columns: 0.8fr 0.95fr minmax(0, 1.8fr) auto; }
.mkt.offers .mkt-row { cursor: default; min-height: 58px; padding-top: 6px; padding-bottom: 6px; }
.mkt.offers .mkt-row:hover { background: none; }
.mkt.offers .mkt-row .btn.small { min-width: 58px; padding: 0 12px; }
.mkt-seller { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mkt-seller b, .mkt-seller span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-seller b { font-weight: 600; }
.mkt-seller span { font-size: 12px; color: var(--muted); }
/* Benim ilanım: tablonun en üstünde, altın rengi zemin ve solda şerit */
.mkt.offers .mkt-row.mine, .mkt.offers .mkt-row.mine:hover { background: var(--gold-soft); box-shadow: inset 4px 0 0 var(--gold); }
.mkt-seller .mine-tag { align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: var(--gold); color: #3B2A00; font-size: 11px; font-weight: 700; }
/* Fiyat özeti: üç renkli kutu */
.mkt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.mkt-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 8px; border-radius: 12px; background: var(--ground); border-top: 3px solid var(--line); }
.mkt-stat-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.mkt-stat-label i { font-style: normal; font-size: 10px; }
.mkt-stat b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.mkt-stat-unit { font-size: 11px; color: var(--muted); }
.mkt-stat.low { background: #EAF5EC; border-top-color: #3E9B5A; } .mkt-stat.low i { color: #2F7A45; }
.mkt-stat.high { background: #FBEDEA; border-top-color: #C9443A; } .mkt-stat.high i { color: #A8322A; }
.mkt-stat.last { background: #E9F0F7; border-top-color: #2F6FB5; } .mkt-stat.last i { color: #2F6FB5; }
.mkt-head { min-height: 34px; font-size: 12px; color: var(--muted); background: var(--ground); position: sticky; top: 0; }
.mkt-row { width: 100%; min-height: 50px; border: none; border-top: 1px solid var(--line); background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.mkt-row:hover { background: var(--blue-soft); }
.mkt-row:focus-visible { outline: 3px solid var(--blue-mid); outline-offset: -3px; }
.mkt-row.mine { background: var(--gold-soft); cursor: default; }
.mkt .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkt-row .n.strong { font-weight: 700; }
.mkt-name { display: flex; flex-direction: column; min-width: 0; }
.mkt-name b, .mkt-name span, .mkt-row .cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-name b { font-weight: 600; }
.mkt-name span { font-size: 12px; color: var(--muted); }
.mkt-row.rel .mkt-name b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--blue); vertical-align: middle; }
.mkt-row.up { animation: flash-up 1.6s ease-out; }
.mkt-row.down { animation: flash-down 1.6s ease-out; }
@keyframes flash-up { from { background: var(--rust-soft); } to { background: transparent; } }
@keyframes flash-down { from { background: var(--green-soft); } to { background: transparent; } }
.up-text { color: var(--rust); }
.down-text { color: var(--green); }
.mkt-more { padding: 12px; text-align: center; font-size: 13px; color: var(--muted); }
.mkt-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mkt-sum .kv { background: var(--card); border-radius: 12px; padding: 8px 10px; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.bill { display: grid; grid-template-columns: 1fr auto; gap: 4px 0; font-size: 14px; background: var(--ground); border-radius: 12px; padding: 10px 12px; }
.bill span:nth-child(even) { padding-left: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.bill .total { font-weight: 700; border-top: 1px solid var(--line); padding-top: 6px; }
.mkt-bar .way { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------- Çizimler ve iş başı sahneleri */
.art { display: inline-flex; flex: none; }
.art svg { display: block; }
.scene { position: relative; margin: 4px -4px 8px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #DCEFF8 0%, #F3F7EC 70%, #E9F1DC 100%); user-select: none; -webkit-user-select: none; }
.scene-art { padding: 6px 6px 44px; }
.scene-art svg { display: block; width: 100%; height: auto; transform-origin: 50% 85%; }
.scene-hint { position: absolute; left: 10px; right: 10px; bottom: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(27, 42, 51, 0.78); color: #FFFFFF; font-size: 13px; font-weight: 600; text-align: center; }
.scene-timer { display: block; font-size: 12px; font-weight: 500; opacity: 0.85; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scene-hint.urgent { background: #C9443A; animation: pulse 0.8s ease-in-out infinite alternate; }
.scene.is-none .scene-art svg { filter: saturate(0.55); opacity: 0.85; }

/* Ürün rozeti: çalışırken ilerleme halkası, hazırken zıplar */
.scene-badge { position: absolute; top: 10px; right: 10px; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #FFFFFF; box-shadow: 0 3px 10px rgba(27, 42, 51, 0.18); }
.scene-badge.ring { background: radial-gradient(closest-side, #FFFFFF 78%, transparent 80% 100%), conic-gradient(#3E9B5A calc(var(--p, 0) * 360deg), #E3E8EC 0); transition: background 1s linear; }
.is-ready .scene-badge { animation: hop 0.6s ease-in-out infinite alternate; box-shadow: 0 0 0 4px #F2B807, 0 3px 10px rgba(27, 42, 51, 0.25); }
.is-idle .scene-badge, .is-step .scene-badge, .is-decide .scene-badge { opacity: 0.9; }

/* Resmin parçaları: çalışırken duman, ışık, dönen kanat, büyüyen ekin, giden araç */
.ba-smoke circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-work .ba-smoke circle, .is-ready .ba-smoke circle, .is-step .ba-smoke circle { animation: smoke 2.4s ease-out infinite; }
.ba-glow { transition: opacity 0.4s; }
.is-step .ba-glow { opacity: 0.25; }
.is-work .ba-glow { animation: baglow 1.1s ease-in-out infinite alternate; }
.is-ready .ba-glow { animation: baglow 0.35s ease-in-out infinite alternate; }
.is-work .ba-spin, .is-step .ba-spin { animation: spin 3s linear infinite; }
.is-ready .ba-spin { animation: spin 1.2s linear infinite; }
.ba-grow { transform-box: fill-box; transform-origin: 50% 100%; }
.is-work .ba-grow { animation: grow 2.2s ease-in-out infinite alternate; }
.is-work .ba-move, .is-step .ba-move { animation: drive 2.6s ease-in-out infinite alternate; }
.ba-bob { transform-box: fill-box; transform-origin: 50% 100%; }
.is-work .ba-bob, .is-step .ba-bob { animation: hop 0.7s ease-in-out infinite alternate; }

/* Düğmeye basılınca: resim zıplar, kıvılcım saçılır */
.scene.kick .scene-art svg { animation: kick 0.45s ease-out; }
.scene-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; }
.scene-burst i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #F2B807; transform: rotate(var(--a)) translateY(0); animation: burst 0.6s ease-out forwards; }
.scene-burst i:nth-child(odd) { background: #FFFFFF; box-shadow: 0 0 0 2px #F2B807; }

/* Bitti: ürün yükselir, onay işareti */
.scene-pop { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.75), transparent 60%); animation: fadeout 2.2s ease-in forwards; }
.scene-pop-chip { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 4px 14px rgba(27, 42, 51, 0.22); font-size: 18px; color: #2F7A45; animation: rise 1.6s cubic-bezier(.2, .8, .3, 1) forwards; }
.scene-check { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #3E9B5A; color: #FFFFFF; font-size: 22px; font-weight: 700; animation: popin 0.5s cubic-bezier(.3, 1.6, .5, 1) both; }
.is-done .scene-art svg { animation: kick 0.5s ease-out; }

/* Fırın (önden çizim): adıma göre parçalar; --p ilerleme (0-1) */
.scene-flat { background: #F4E9D8; }
.scene-flat .scene-art { padding: 0 0 40px; }
.bk-svg g, .bk-svg ellipse.bk-glow { transform-box: fill-box; }
.bk-dough, .bk-cloth, .bk-tray, .bk-in, .bk-peel, .bk-heat, .bk-puff { display: none; }
.bk-knead .bk-dough, .bk-proof .bk-dough, .bk-proof .bk-cloth, .bk-shape .bk-tray, .bk-bake .bk-in, .bk-bake .bk-heat, .bk-out .bk-peel, .bk-knead .bk-puff { display: inline; }
.bk-knead .bk-sack, .bk-proof .bk-sack { opacity: 0.35; }
.bk-shape .bk-bowl { display: none; }
/* Ateş: boştayken köz, pişerken gür */
.bk-fire path { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 0.45s ease-in-out infinite alternate; }
.bk-fire path:nth-child(2n) { animation-duration: 0.6s; animation-delay: -0.2s; }
.bk-svg g.bk-fire { transform-box: view-box; transform-origin: 250px 122px; }
.bk-idle .bk-fire, .bk-knead .bk-fire, .bk-proof .bk-fire, .bk-shape .bk-fire { transform: scale(0.5); }
.bk-glow { opacity: 0.18; }
.bk-bake .bk-glow { animation: baglow 1s ease-in-out infinite alternate; }
.bk-out .bk-glow { opacity: 0.5; }
/* Yoğurma: hamur ezilip toplanır, un uçuşur */
.bk-dough { transform-origin: 50% 100%; }
.bk-knead .bk-dough { animation: knead 0.55s ease-in-out infinite alternate; }
.bk-knead .bk-puff circle { transform-box: fill-box; transform-origin: center; animation: smoke 1.4s ease-out infinite; }
.bk-knead .bk-puff circle:nth-child(2) { animation-delay: 0.45s; }
.bk-knead .bk-puff circle:nth-child(3) { animation-delay: 0.9s; }
/* Mayalanma: hamur bezin altında kabarır */
.bk-proof .bk-dough { transform: scale(calc(1 + var(--p, 0) * 0.35), calc(1 + var(--p, 0) * 1.1)); transition: transform 1s linear; }
.bk-proof .bk-cloth { transform: translateY(calc(var(--p, 0) * -9px)); transition: transform 1s linear; }
/* Şekil: tepside ham ekmekler */
.bk-raw { transform-box: fill-box; transform-origin: 50% 100%; animation: hop 0.8s ease-in-out infinite alternate; }
.bk-raw .bk-brown { opacity: 0; }
/* Pişme: ekmekler yavaş yavaş kızarır, ağızdan sıcak dalgalanır */
.bk-in .bk-brown { opacity: var(--p, 0); transition: opacity 1s linear; }
.bk-heat path { animation: smoke 1.8s ease-out infinite; transform-box: fill-box; }
.bk-smoke circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.bk-bake .bk-smoke circle, .bk-out .bk-smoke circle { animation: smoke 2.4s ease-out infinite; }
.bk-smoke circle:nth-child(2) { animation-delay: 0.8s; }
.bk-smoke circle:nth-child(3) { animation-delay: 1.6s; }
/* Çıkar: kürekte sıcak ekmekler, buhar */
.bk-hot .bk-brown { opacity: 1; }
.bk-out .bk-peel { animation: pull 0.9s ease-in-out infinite alternate; }
.bk-steam path { animation: smoke 1.5s ease-out infinite; transform-box: fill-box; }
.bk-steam path:nth-child(2) { animation-delay: 0.5s; }
.bk-steam path:nth-child(3) { animation-delay: 1s; }
@keyframes flick { from { transform: scale(0.92, 0.85); } to { transform: scale(1.06, 1.12); } }
@keyframes knead { from { transform: scale(1.18, 0.78); } to { transform: scale(0.9, 1.15); } }
@keyframes pull { from { transform: translateX(0); } to { transform: translateX(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.03); } }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 20% { opacity: 0.9; } 100% { opacity: 0; transform: translate(10px, -38px) scale(1.8); } }
@keyframes baglow { from { opacity: 0.12; } to { opacity: 0.62; } }
@keyframes grow { from { transform: scale(0.75); } to { transform: scale(1.1); } }
@keyframes drive { from { transform: translate(-8px, -4px); } to { transform: translate(8px, 4px); } }
@keyframes hop { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes kick { 0% { transform: scale(1); } 35% { transform: scale(1.04, 0.97); } 70% { transform: scale(0.99, 1.02); } 100% { transform: scale(1); } }
@keyframes burst { from { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } to { opacity: 0; transform: rotate(var(--a)) translateY(-56px) scale(0.4); } }
@keyframes rise { 0% { opacity: 0; transform: translateY(30px) scale(0.6); } 30% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 1; transform: translateY(-14px) scale(1); } }
@keyframes popin { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeout { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.scene *, .scene-hint.urgent { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- Sade düzen: satır kutuları, açılır bölümler, çipler */
.tile { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.tile + .tile { border-top: 1px solid var(--line); padding-top: 10px; }
.tile-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tile-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.tile-sub { font-size: 13px; color: var(--muted); }
.tile > .btn { flex: none; }
.tile.dim { opacity: 0.55; }
.list { display: flex; flex-direction: column; gap: 10px; }
.fold { padding: 0; gap: 0; }
.fold > .fold-head { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px; cursor: pointer; }
.fold > .fold-head::-webkit-details-marker { display: none; }
.fold > .fold-head::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; flex: none; }
.fold[open] > .fold-head::after { transform: rotate(-135deg); }
.fold > .fold-head .card-sub { margin-left: auto; }
.fold > :not(summary) { margin: 0 14px; }
.fold > :last-child:not(summary) { margin-bottom: 14px; }
.fold[open] > * + :not(summary) { margin-top: 10px; }
.info { display: inline-flex; flex-direction: column; }
.info-btn { border: none; background: none; color: var(--blue); font-size: 16px; padding: 0 4px; cursor: pointer; line-height: 1; }
.info-text { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips .chip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 16px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.chips .chip.on { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.section-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 2px 6px; }
.section-row .section-title { margin: 0; }
.flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flow-arrow { color: var(--muted); font-weight: 700; }
.flow-item { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); min-width: 52px; text-align: center; }
.flow-item b { color: var(--ink); font-size: 13px; }
/* İşin döngüsü: akış kartın bir ucundan öbürüne, açık zeminli şerit; sığmazsa simgeler küçülür */
.flow.flow-full { flex-wrap: nowrap; justify-content: space-between; gap: 2px; margin: 2px -4px 4px; padding: 10px 6px; border-radius: 14px; background: var(--ground); }
.flow-full .flow-item { flex: 1 1 0; min-width: 0; }
.flow-full .flow-item span:not(.art) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-full .flow-item .art svg { width: min(40px, 11vw); height: auto; }
.flow-full .flow-arrow { flex: none; font-size: 15px; }
.job > summary { list-style: none; cursor: pointer; }
.job > summary::-webkit-details-marker { display: none; }
.job + .job { border-top: 1px solid var(--line); padding-top: 10px; }
.job-more { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 2px 56px; }
.tile.short .tile-sub { color: #B53A30; font-weight: 600; }
.mkt-name.has-art { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.mkt-name.has-art > .art { grid-row: span 2; }
.card-title .info, .tile-mid .info { display: inline; }
.card-title .info-text, .tile-mid .info-text { font-weight: 400; display: block; }
.tile-mid .info-btn { padding: 0; text-align: left; }
.info-text[hidden] { display: none !important; }
.intro { display: flex; flex-direction: column; gap: 6px; }
.intro-btn { align-self: flex-start; border: none; background: none; color: var(--blue); font-size: 13px; font-weight: 600; padding: 4px 2px; cursor: pointer; }
.intro .note[hidden] { display: none; }

/* ---------------------------------------------------------------- Logo ve profil resmi */
.art.logo, .art.avatar { flex: none; }
.art.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art.logo.pic img { border-radius: 27%; }
.art.avatar.pic img { border-radius: 50%; }
.pic-preview { display: flex; justify-content: center; margin: 4px 0 12px; }
.pic-colors { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.pic-color { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.pic-color.on { box-shadow: 0 0 0 3px var(--ink); }
.pic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; max-height: 240px; overflow-y: auto; margin-bottom: 12px; }
.pic-cell { padding: 3px; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; display: flex; justify-content: center; }
.pic-cell.on { border-color: var(--blue); }
.who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-btn { position: relative; padding: 0; border: none; background: none; cursor: pointer; border-radius: 14px; }
.logo-btn:focus-visible { outline: 3px solid var(--blue-mid); outline-offset: 2px; }
.logo-edit { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 4px rgba(27, 42, 51, 0.3); font-size: 12px; line-height: 20px; text-align: center; color: var(--ink); }