/* İZPA — BİLEŞENLER. Renk/ölçü yok, sadece tokens.css değişkenleri. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--zemin); color:var(--murekkep);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:var(--f3); line-height:1.35; overscroll-behavior:none;
  font-variant-numeric:tabular-nums;
}
#app{max-width:var(--en);margin:0 auto;min-height:100%;display:flex;flex-direction:column}
@media(min-width:900px){#app{max-width:var(--en-genis);box-shadow:0 0 0 1px var(--cizgi)}}

/* üst şerit */
.bar{position:sticky;top:0;z-index:20;background:var(--marka);color:var(--marka-yazi);
  padding:calc(var(--s1) + env(safe-area-inset-top)) var(--s2) var(--s1);
  display:flex;justify-content:space-between;align-items:center;font-size:var(--f4);gap:var(--s1)}
.bar b{font-weight:var(--kalin)}
.sync{display:flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;background:#3DD37F;flex:none}
.dot.off{background:#F0B429}

/* başlık */
.head{padding:var(--s3) var(--s2) var(--s2);display:flex;align-items:center;gap:var(--s2)}
.back{width:var(--dokun);height:var(--dokun);flex:none;border:1px solid var(--cizgi);background:var(--kart);
  border-radius:var(--r);font-size:var(--f2);line-height:1;cursor:pointer;color:var(--murekkep)}
h1{margin:0;font-size:var(--f2);font-weight:var(--cok-kalin);letter-spacing:-.02em}
.sub{margin:4px 0 0;font-size:var(--f4);color:var(--murekkep-2)}

main{flex:1;padding:0 var(--s2) 140px}

/* ana ekran kareleri */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--aralik)}
.tile{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:var(--s2);min-height:118px;display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;text-align:left;font:inherit;color:var(--murekkep);position:relative;box-shadow:var(--golge)}
.tile:active{transform:scale(.985)}
.tile .ico{font-size:var(--f1);line-height:1}
.tile .lbl{font-weight:var(--kalin);font-size:var(--f3)}
.badge{position:absolute;top:10px;right:10px;background:var(--kotu);color:#fff;font-size:var(--f4);
  font-weight:var(--kalin);padding:3px 9px;border-radius:999px}

/* kart ve form */
.card{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:var(--s2);margin-bottom:var(--s2)}
.card h3{margin:0 0 var(--s1);font-size:var(--f4);text-transform:uppercase;letter-spacing:.08em;color:var(--murekkep-2)}
label{display:block;font-size:var(--f4);font-weight:var(--kalin);margin:0 0 var(--s1);text-transform:uppercase;letter-spacing:.06em;color:var(--murekkep-2)}
input,select,textarea{width:100%;font:inherit;min-height:var(--dokun);padding:14px;border:1px solid var(--cizgi);
  border-radius:10px;background:var(--kart);color:var(--murekkep)}
textarea{min-height:96px}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid var(--marka);outline-offset:2px}

/* seçenek butonları */
.opts{display:flex;flex-wrap:wrap;gap:var(--aralik)}
.opt{flex:1 1 calc(50% - var(--aralik));min-height:var(--dokun);border:2px solid var(--cizgi);background:var(--kart);
  border-radius:12px;font:inherit;font-weight:var(--kalin);cursor:pointer;color:var(--murekkep);padding:10px}
.opt[aria-pressed="true"]{border-color:var(--marka);background:var(--marka);color:var(--marka-yazi)}
.opt.wide{flex:1 1 100%}

/* sayaç */
.step{display:flex;align-items:center;gap:var(--aralik);margin-bottom:var(--aralik)}
.step button{width:var(--dokun);height:var(--dokun);flex:none;font-size:var(--f1);font-weight:var(--cok-kalin);
  border:2px solid var(--cizgi);background:var(--kart);border-radius:12px;cursor:pointer;color:var(--murekkep)}
.step input{text-align:center;font-size:var(--f1);font-weight:var(--cok-kalin);height:var(--dokun)}
.quick{display:flex;gap:var(--aralik);flex-wrap:wrap}
.quick button{flex:1 1 calc(25% - var(--aralik));min-height:var(--dokun);border:1px solid var(--cizgi);
  background:var(--kart);border-radius:10px;font:inherit;font-weight:var(--kalin);cursor:pointer;color:var(--murekkep-2)}

/* alt sabit aksiyon */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:var(--s2);
  padding-bottom:calc(var(--s2) + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(233,238,241,0) 0%,var(--zemin) 45%);pointer-events:none}
.foot .in{max-width:var(--en);margin:0 auto;pointer-events:auto}
@media(min-width:900px){.foot .in{max-width:var(--en-genis)}}
.primary{width:100%;min-height:var(--dokun-buyuk);border:0;border-radius:var(--r);background:var(--marka);
  color:var(--marka-yazi);font:inherit;font-size:var(--f3);font-weight:var(--cok-kalin);cursor:pointer}
.primary[disabled]{background:var(--pasif);color:#F2F5F7;cursor:not-allowed}
.hint{text-align:center;font-size:var(--f4);color:var(--murekkep-2);margin:var(--s1) 0 0}

/* satır / rakam */
.row{display:flex;justify-content:space-between;gap:var(--s2);padding:12px 0;border-bottom:1px solid var(--cizgi)}
.row:last-child{border-bottom:0}
.row .k{color:var(--murekkep-2);font-size:var(--f4)}
.row .v{font-weight:var(--cok-kalin);text-align:right;font-size:var(--f3)}
.big{font-size:var(--f1);font-weight:var(--cok-kalin);letter-spacing:-.02em}

/* durum etiketi — her zaman ikon + yazı */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--f4);font-weight:var(--cok-kalin);
  padding:5px 10px;border-radius:999px;border:1px solid;white-space:nowrap}
.t-ok{color:var(--olumlu);border-color:var(--olumlu);background:var(--olumlu-zemin)}
.t-wait{color:var(--bekle);border-color:var(--bekle);background:var(--bekle-zemin)}
.t-bad{color:var(--kotu);border-color:var(--kotu);background:var(--kotu-zemin)}

/* liste satırı */
.item{background:var(--kart);border:1px solid var(--cizgi);border-left:5px solid var(--cizgi);
  border-radius:12px;padding:var(--s2);margin-bottom:12px;cursor:pointer;width:100%;text-align:left;
  font:inherit;color:var(--murekkep);min-height:var(--dokun)}
.item.sel{border-color:var(--marka);border-left-color:var(--marka);background:#F2F7FA}
.item .top{display:flex;justify-content:space-between;align-items:center;gap:var(--s1);margin-bottom:6px}
.item .name{font-weight:var(--cok-kalin);font-size:var(--f3)}
.item .meta{color:var(--murekkep-2);font-size:var(--f4)}

.empty{text-align:center;padding:var(--s4) var(--s2);color:var(--murekkep-2)}
.empty .ico{font-size:var(--f1)}
.empty p{font-size:var(--f3);margin:var(--s1) 0 0}

.warn{border-left:5px solid var(--kotu);background:var(--kotu-zemin);padding:var(--s2);border-radius:12px;
  font-weight:var(--kalin);color:#7C1A15;margin-bottom:var(--s2);font-size:var(--f3)}
.note{border-left:5px solid var(--bekle);background:var(--bekle-zemin);padding:var(--s2);border-radius:12px;
  font-weight:var(--kalin);color:#7A4A05;margin-bottom:var(--s2);font-size:var(--f3)}

/* KAYDEDİLDİ damgası */
#stamp{position:fixed;inset:0;z-index:60;display:none;place-items:center;background:rgba(18,122,61,.94);color:#fff}
#stamp.on{display:grid}
.stampbox{text-align:center;animation:pop .28s cubic-bezier(.2,.9,.3,1.2)}
.stampbox .ring{width:150px;height:150px;margin:0 auto var(--s2);border:7px solid #fff;border-radius:14px;
  display:grid;place-items:center;font-size:64px;transform:rotate(-6deg)}
.stampbox .txt{font-size:var(--f2);font-weight:var(--cok-kalin);letter-spacing:.12em}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.stampbox{animation:none}}

/* 5 saniyelik GERİ AL */
.undo{position:fixed;left:var(--s2);right:var(--s2);bottom:110px;z-index:40;background:var(--murekkep);color:#fff;
  border-radius:12px;padding:14px var(--s2);display:none;justify-content:space-between;align-items:center;
  max-width:608px;margin:0 auto;font-size:var(--f4);gap:var(--s2)}
.undo.on{display:flex}
.undo button{background:none;border:0;color:#7FD3FF;font:inherit;font-weight:var(--cok-kalin);
  cursor:pointer;min-height:44px;font-size:var(--f3)}

/* ————— KARE SIRALAMA (sürükle-bırak, sadece "Sırala" modunda) ————— */
.grid.duzen .tile{ cursor:grab; touch-action:none; border-style:dashed; border-color:var(--marka) }
.grid.duzen .tile:active{ cursor:grabbing }
.tile.tasiniyor{ opacity:.65; transform:scale(1.04); box-shadow:0 8px 24px rgba(16,22,25,.18); border-style:solid }
.tile .tut{ position:absolute; top:10px; left:10px; font-size:var(--f4); color:var(--murekkep-2) }
.duzen-not{ background:var(--bekle-zemin); border-left:5px solid var(--bekle); border-radius:12px;
  padding:var(--s2); margin-bottom:var(--s2); font-weight:var(--kalin); color:#7A4A05; font-size:var(--f3) }