/* Birr Home — renkler logo kitinden (brand/BIRR-HOME-LOGO.md). Palet × görünüm = 6 tema.
   --bg: logonun resmi zemini (açılış/giriş). --page/--surface: uygulama yüzeyleri, aynı paletten türetilir. */
:root{
  --light-bg:#F7E3D3; --light-ink:#3B2620; --light-dot:#E8693A;
  --dark-bg:#6A3829;  --dark-ink:#FFFFFF; --dark-dot:#FFB48C;
  --font-ui:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:16px;
}
[data-palette="adacayi"]{--light-bg:#DFEADB;--light-ink:#22332A;--light-dot:#4F9466;--dark-bg:#2E4A3C;--dark-dot:#A9E5B4}
[data-palette="lavanta"]{--light-bg:#EAE2F3;--light-ink:#2B2340;--light-dot:#8E6CD0;--dark-bg:#463766;--dark-dot:#D5C2FF}

[data-mode="light"]{
  --bg:var(--light-bg); --ink:var(--light-ink); --dot:var(--light-dot); --glow-on:0;
  --page:color-mix(in srgb,var(--light-bg) 45%,#fff);
  --surface:#fff;
  --surface-2:color-mix(in srgb,var(--light-bg) 55%,#fff);
  --muted:color-mix(in srgb,var(--light-ink) 62%,#fff);
  --line:color-mix(in srgb,var(--light-ink) 12%,transparent);
  --accent:var(--light-dot); --on-accent:#fff;
  --btn:var(--light-ink); --on-btn:#fff;
  --danger:#B4332B; --danger-soft:#F6DEDB;
  --shadow:0 1px 2px rgba(40,20,10,.06),0 6px 22px rgba(40,20,10,.07);
  color-scheme:light;
}
[data-mode="dark"]{
  --bg:var(--dark-bg); --ink:var(--dark-ink); --dot:var(--dark-dot); --glow-on:1;
  --page:color-mix(in srgb,var(--dark-bg) 45%,#000);
  --surface:color-mix(in srgb,var(--dark-bg) 72%,#000);
  --surface-2:var(--dark-bg);
  --muted:color-mix(in srgb,#fff 66%,var(--dark-bg));
  --line:rgba(255,255,255,.12);
  --accent:var(--dark-dot); --on-accent:var(--dark-bg);
  --btn:var(--dark-dot); --on-btn:var(--dark-bg);
  --danger:#FF9A8F; --danger-soft:rgba(255,120,110,.16);
  --shadow:0 1px 2px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--page);color:var(--ink);font:16px/1.45 var(--font-ui);-webkit-tap-highlight-color:transparent;transition:background .3s,color .3s}
body.on-stage{background:var(--bg);overflow:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- Açılış + giriş sahnesi ---------- */
.stage{position:fixed;inset:0;z-index:40;background:var(--bg);display:grid;place-items:center;overflow:hidden;
  padding:env(safe-area-inset-top,0px) 16px env(safe-area-inset-bottom,0px);transition:opacity .45s,background .3s}
.stage.gone{opacity:0;pointer-events:none}
.stage-inner{display:grid;justify-items:center;gap:28px;width:100%}
#logo{width:min(64vw,360px);height:auto;overflow:visible;display:block}
.ink{fill:var(--ink)} .dot{fill:var(--dot)}
.bgfill{fill:var(--bg);transition:fill .3s}
.glow{mix-blend-mode:overlay;opacity:0}
#glowGrad stop{stop-color:var(--dot)}
.login{display:grid;justify-items:center;gap:14px;max-width:340px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.login.show{opacity:1;transform:none}
.login p{margin:0}
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;border:0;
  background:var(--ink);color:var(--bg);font-weight:600;font-size:1rem;width:100%}
.gbtn svg{width:20px;height:20px;background:#fff;border-radius:50%;padding:2px}
.login .err{color:var(--ink);background:color-mix(in srgb,var(--ink) 10%,transparent);border-radius:12px;padding:10px 12px;font-size:.9rem}
.login small{opacity:.7;font-size:.82rem}

/* ---------- Uygulama ---------- */
.app{max-width:560px;margin:0 auto;padding-inline:16px;padding-block:0 140px}
header.top{position:sticky;top:0;z-index:5;background:var(--page);display:flex;align-items:center;gap:10px;
  padding-top:calc(env(safe-area-inset-top,0px) + 12px);padding-bottom:10px}
.homename{flex:1;min-width:0;border:0;background:none;padding:0;text-align:left;font-weight:600;font-size:1.35rem;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:500;font-size:.92rem}
.me .chev{width:16px;height:16px;opacity:.6}
.undo{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:500;font-size:.88rem}
.undo svg{width:16px;height:16px}

.av{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.02em}
.av.lg{width:36px;height:36px;font-size:.85rem}

h2.view{font-weight:600;font-size:1.1rem;margin:4px 0 10px;display:flex;align-items:center;gap:10px}
h2.view .count{font-size:.85rem;color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
h2.view .sp{flex:1}

form.add{display:flex;gap:8px;margin-bottom:10px}
form.add .field{flex:1;min-width:0;position:relative;display:flex}
form.add input{flex:1;min-width:0;height:52px;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:0 14px}
form.add input::placeholder{color:var(--muted)}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 25%,transparent)}}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.chips .lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);width:100%}
.chip{border:0;background:var(--surface-2);border-radius:999px;padding:6px 12px;font-size:.9rem}

ul.list{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
ul.list li{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 6px;border-top:1px solid var(--line);min-height:58px;transition:background 1.2s}
ul.list li:first-child{border-top:0}
ul.list li.fresh{background:color-mix(in srgb,var(--accent) 18%,transparent);transition:none}
.tick{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;padding:0}
.tick span{width:24px;height:24px;border-radius:7px;border:2px solid var(--muted);display:grid;place-items:center;transition:background .15s,border-color .15s}
.tick svg{width:16px;height:16px;opacity:0;color:var(--on-accent)}
li.done .tick span{background:var(--accent);border-color:var(--accent)}
li.done .tick svg{opacity:1}
.txt{flex:1;min-width:0;overflow-wrap:anywhere;border:0;background:none;padding:6px 0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.qty{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:1px}
li.done .qty{opacity:.6}
.trip li .qty{margin-left:0}
.sel{flex:1;min-width:0;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--surface);padding:0 10px;font:inherit;color:inherit}
.txt .t{background-image:linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;background-position:0 58%;background-size:0 2px;transition:background-size .25s}
li.done .txt .t{background-size:100% 2px;color:var(--muted);background-image:linear-gradient(var(--muted),var(--muted))}
.txt .meta{display:block;font-size:.75rem;color:var(--muted);margin-top:1px}
.del{flex:none;width:44px;height:44px;border-radius:12px;border:0;background:none;color:var(--muted);display:grid;place-items:center}
.del:hover{background:var(--danger-soft);color:var(--danger)}
.del svg{width:19px;height:19px}
.section-lbl{display:flex;align-items:center;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 4px 6px}
.section-lbl .sp{flex:1}

.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);padding:20px 18px;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-weight:600;font-size:1.05rem;margin-bottom:4px}
.banner{display:flex;align-items:center;gap:12px;background:var(--surface-2);border-radius:14px;padding:12px 12px 12px 14px;margin:0 0 12px}
.banner span{flex:1;min-width:0}
.notice{background:var(--danger-soft);border-radius:12px;padding:10px 14px;margin:0 0 12px;font-size:.92rem}

.linkbtn{border:0;background:none;color:var(--ink);font-weight:500;padding:8px 6px;display:inline-flex;gap:6px;align-items:center;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;font-size:.95rem}
.linkbtn svg{width:16px;height:16px}
.btn{min-height:48px;padding:0 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-weight:600}
.btn.primary{background:var(--btn);color:var(--on-btn);border-color:transparent}
.btn.ghost{border:0;background:none;color:var(--muted);font-weight:500}
.btn.danger{color:var(--danger)}
.btn.sm{min-height:38px;padding:0 14px;border-radius:11px;font-size:.92rem}

.finishbar{position:fixed;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:6;pointer-events:none}
.finishbar .in{max-width:560px;margin:0 auto;padding:0 16px 10px;display:flex;justify-content:flex-end}
.finish{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px;border-radius:999px;border:0;
  background:var(--btn);color:var(--on-btn);font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.finish .n{font-variant-numeric:tabular-nums;font-weight:400;opacity:.8}
.finish:disabled{background:var(--surface-2);color:var(--muted);box-shadow:0 4px 14px rgba(0,0,0,.12)}

nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:7;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs .in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;height:66px}
nav.tabs button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:.78rem;font-weight:500;position:relative}
nav.tabs svg{width:24px;height:24px}
nav.tabs button[aria-current="page"]{color:var(--ink);font-weight:600}
nav.tabs button[aria-current="page"]::after{content:"";position:absolute;top:0;left:50%;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--accent);transform:translateX(-50%)}
nav.tabs .badge{position:absolute;top:8px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:.7rem;display:grid;place-items:center;padding:0 5px;font-variant-numeric:tabular-nums}

.trip{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 14px 10px;margin-bottom:12px}
.trip .hd{display:flex;align-items:center;gap:10px}
.trip .when{flex:1;min-width:0}
.trip .when b{display:block;font-weight:600}
.trip .when small{color:var(--muted);font-variant-numeric:tabular-nums}
.trip ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px}
.trip li{display:flex;gap:8px;align-items:center}
.trip li svg{width:16px;height:16px;flex:none}
.trip li.ok svg{color:var(--accent)}
.trip li.left{color:var(--muted)}
.trip li .tag{margin-left:auto;font-size:.72rem;border-radius:999px;padding:2px 8px;background:var(--surface-2);color:var(--muted);white-space:nowrap}

/* ---------- Sayfa altı paneller ---------- */
.back{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.4);display:grid;align-items:end;justify-items:center}
@media (min-width:640px){.back.center{align-items:center;padding:16px}}
.sheet{width:100%;max-width:520px;max-height:88vh;overflow:auto;background:var(--page);color:var(--ink);border-radius:22px 22px 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.25);display:grid;gap:18px}
@media (min-width:640px){.back.center .sheet{border-radius:22px}}
.sheet h3{margin:0;font-weight:600;font-size:1.2rem}
.sheet p{margin:0;color:var(--muted)}
.group{display:grid;gap:8px}
.group > .gl{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.card{background:var(--surface);border-radius:14px;padding:4px 12px}
.row{display:flex;align-items:center;gap:10px;min-height:52px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .grow{flex:1;min-width:0}
.row .grow small{display:block;color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt{min-height:56px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;font-size:.92rem}
.opt[aria-pressed="true"]{border-color:var(--ink);font-weight:600}
.pal{display:flex;gap:4px}
.pal i{width:16px;height:16px;border-radius:4px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.inline{display:flex;gap:8px}
.inline input{flex:1;min-width:0;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--surface);padding:0 12px}
.switch{position:relative;width:48px;height:28px;flex:none}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .2s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch input:checked + span{background:var(--accent)}
.switch input:checked + span::after{transform:translateX(20px)}
.switch input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.sum{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sum div{background:var(--surface);border-radius:12px;padding:10px 12px}
.sum b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums}
.sum span{font-size:.8rem;color:var(--muted)}
.acts{display:grid;gap:8px}
.sheet ul.plain{margin:0;padding-left:18px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(136px + env(safe-area-inset-bottom,0px));z-index:60;
  background:var(--ink);color:var(--page);border-radius:14px;padding:10px 10px 10px 16px;display:flex;align-items:center;gap:12px;
  width:max-content;max-width:calc(100% - 32px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast span{min-width:0;overflow-wrap:anywhere}
.toast button{border:0;background:var(--accent);color:var(--on-accent);border-radius:10px;padding:8px 12px;font-weight:600;flex:none}
.toast.plain{padding-right:16px}

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

/* Alınacak yer filtresi */
.placebar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 10px}
.pf{min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:36px;padding:0 6px;white-space:nowrap;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-weight:500;font-size:.92rem}
.pf[aria-pressed="true"]{background:var(--btn);color:var(--on-btn);border-color:transparent}
.pf .n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:color-mix(in srgb,currentColor 16%,transparent);font-size:.72rem;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.group-h{display:flex;align-items:center;gap:10px;margin:18px 4px 8px;width:calc(100% - 8px);border:0;background:none;padding:4px 0;font:inherit;cursor:pointer;text-align:left}
.group-h:first-of-type{margin-top:6px}
.group-h .gname{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.group-h .gline{flex:1;height:1px;background:var(--accent);opacity:.55}
.group-h .gcount{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
/* Ekleme kutusu kaydırırken başlığın altında sabit kalır */
form.add{position:sticky;top:var(--hdr,64px);z-index:4;background:var(--page);margin-inline:-16px;padding:6px 16px 8px;margin-bottom:4px}
/* Ekleme alanı: boşta büyük mikrofon · yazarken küçük mikrofon + Ekle · konuşurken büyük mikrofon (nabız) */
form.add .mic{position:absolute;right:6px;top:6px;width:40px;height:40px;border-radius:11px;border:0;background:transparent;color:var(--muted);display:none;place-items:center}
form.add .mic svg{width:20px;height:20px}
form.add .ekle{display:none;height:52px;padding:0 18px;border-radius:14px;border:0;background:var(--btn);color:var(--on-btn);font-weight:600}
form.add .bigmic{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--btn);color:var(--on-btn);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.15);transition:transform .1s}
form.add .bigmic:active{transform:scale(.94)}
form.add .bigmic svg{width:24px;height:24px}
form.add.listening .bigmic{background:var(--accent);color:var(--on-accent);animation:pulse 1.2s ease-in-out infinite}
form.add.typing .mic{display:grid}
form.add.typing input{padding-right:50px}
form.add.typing .ekle{display:block}
form.add.typing .bigmic{display:none}