/* bites -- masa rezervasyon.
   Renkler :root'ta belirteç olarak duruyor, koyu tema hepsini yeniden
   tanımlıyor. Çalışan rengi HEX değil TON (hue) olarak saklanıyor: tek bir
   sayıdan iki temanın da çip arka planı, yazısı ve kenarı türetiliyor. */
:root{
  color-scheme:light dark;
  --kagit:#f6f6f7;  --yuzey:#fff;     --yuzey2:#fafafa;
  --yazi:#18181b;   --soluk:#71717a;  --cizgi:#e4e4e7;
  --vurgu:#2563eb;  --vurgu-yazi:#fff;
  --bugun:#eff6ff;  --hafta-sonu:#fcfcfd;
  --golge:0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.18);
  --cip-s:70%; --cip-l:93%;  --cip-ys:62%; --cip-yl:30%;  --cip-ks:58%; --cip-kl:82%;
  --r:10px; --ad-gen:116px; --gun-gen:minmax(94px,1fr);
}
@media (prefers-color-scheme:dark){
  :root{
    --kagit:#101013; --yuzey:#1a1a1f;  --yuzey2:#16161a;
    --yazi:#f4f4f5;  --soluk:#a1a1aa;  --cizgi:#2e2e35;
    --bugun:#17233c; --hafta-sonu:#15151a;
    --golge:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.7);
    --cip-s:42%; --cip-l:24%;  --cip-ys:72%; --cip-yl:80%;  --cip-ks:34%; --cip-kl:38%;
  }
}
/* Ton tablosu: iyi ayrışan 12 ton. Çalışanın renk indeksi bunlardan birini seçer. */
.t0{--h:212} .t1{--h:345} .t2{--h:152} .t3{--h:32}  .t4{--h:268} .t5{--h:8}
.t6{--h:188} .t7{--h:88}  .t8{--h:312} .t9{--h:48}  .t10{--h:172} .t11{--h:232}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--kagit); color:var(--yazi);
  font:15px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2{margin:0}

/* ----------------------------------------------------------------- başlık */
.ust{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px max(16px,env(safe-area-inset-left)) 11px max(16px,env(safe-area-inset-right));
  background:color-mix(in oklab,var(--kagit) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--cizgi);
}
.marka{display:flex; flex-direction:column; min-width:0}
.marka h1{font-size:18px; letter-spacing:-.015em}
.alt{font-size:12.5px; color:var(--soluk)}
.gezin{display:flex; align-items:center; gap:4px; margin-inline:auto}
.sag{display:flex; align-items:center; gap:8px}

.dz,.ikon{
  border:1px solid var(--cizgi); background:var(--yuzey);
  border-radius:var(--r); padding:7px 12px; font-size:13.5px; font-weight:500;
}
.ikon{width:34px; padding:7px 0; font-size:17px; line-height:1}
.dz:hover,.ikon:hover{border-color:color-mix(in oklab,var(--yazi) 26%,transparent)}
.birincil{
  border:0; background:var(--vurgu); color:var(--vurgu-yazi);
  border-radius:var(--r); padding:9px 14px; font-size:13.5px; font-weight:600;
}
.birincil:disabled{opacity:.45; cursor:default}

.segment{
  display:flex; background:var(--yuzey2); border:1px solid var(--cizgi);
  border-radius:var(--r); padding:2px; gap:2px;
}
.segment.tam{width:100%; margin-block:4px 14px}
.segment button{
  border:0; background:transparent; border-radius:8px; padding:6px 13px;
  font-size:13px; font-weight:500; color:var(--soluk); flex:1;
}
.segment button[aria-selected="true"]{
  background:var(--yuzey); color:var(--yazi); box-shadow:0 1px 2px rgba(0,0,0,.07);
}

/* ------------------------------------------------------------------ ızgara */
main{padding:16px max(16px,env(safe-area-inset-left)) 40px max(16px,env(safe-area-inset-right))}
/* Telefonda 7 kolon sığmıyor; yatay kaydırma + yapışkan masa kolonu. */
.sarmal{overflow:auto; border:1px solid var(--cizgi); border-radius:14px;
        background:var(--yuzey); box-shadow:var(--golge)}
.izgara{display:grid; grid-template-columns:var(--ad-gen) repeat(7,var(--gun-gen));
        min-width:max-content}

.bas{
  position:sticky; top:0; z-index:12;
  padding:9px 10px; background:var(--yuzey2);
  border-bottom:1px solid var(--cizgi); font-size:12px;
}
.bas.kose{left:0; z-index:14; border-right:1px solid var(--cizgi)}
.bas .g-ad{font-weight:600; font-size:12.5px}
.bas .g-tarih{color:var(--soluk); font-size:11.5px}
.bas.bugun{background:var(--bugun)}
.bas.bugun .g-ad{color:var(--vurgu)}

.masa-ad{
  position:sticky; left:0; z-index:10;
  display:flex; align-items:center; gap:6px;
  padding:0 10px; min-height:46px;
  background:var(--yuzey); border-right:1px solid var(--cizgi);
  border-top:1px solid var(--cizgi);
  font-size:13px; font-weight:550;
}
.masa-ad .say{margin-left:auto; font-size:11px; color:var(--soluk); font-weight:400}

.hucre{
  border-top:1px solid var(--cizgi); border-left:1px solid var(--cizgi);
  padding:5px; min-height:46px; background:transparent;
  display:flex; align-items:stretch; text-align:left; width:100%;
}
.hucre.hs{background:var(--hafta-sonu)}
.hucre.bg{background:var(--bugun)}
.hucre:hover{background:color-mix(in oklab,var(--vurgu) 7%,transparent)}
.hucre:focus-visible{outline:2px solid var(--vurgu); outline-offset:-2px}

/* Boş hücre: ekranı noktalı çerçeveyle doldurmamak için "+" yalnızca
   imleç üzerindeyken ya da klavye odağındayken görünüyor. */
.bosluk{
  flex:1; display:grid; place-items:center; border-radius:8px;
  color:transparent; font-size:17px; line-height:1;
}
.hucre:hover .bosluk,.hucre:focus-visible .bosluk{
  color:color-mix(in oklab,var(--vurgu) 60%,transparent);
  background:color-mix(in oklab,var(--vurgu) 6%,transparent);
}

.cip{
  flex:1; display:flex; align-items:center; gap:5px; min-width:0;
  padding:5px 7px; border-radius:8px;
  background:hsl(var(--h) var(--cip-s) var(--cip-l));
  color:hsl(var(--h) var(--cip-ys) var(--cip-yl));
  border:1px solid hsl(var(--h) var(--cip-ks) var(--cip-kl));
  font-size:12.5px; font-weight:600;
}
.cip .ad{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cip .nokta{width:6px; height:6px; border-radius:50%; flex:none;
            background:currentColor; opacity:.8}

/* -------------------------------------------------------------- gün görünümü */
.gun-gor{display:grid; gap:14px}
.gun-serit{display:flex; gap:6px; overflow-x:auto; padding-bottom:2px}
.gun-serit button{
  border:1px solid var(--cizgi); background:var(--yuzey); border-radius:12px;
  padding:7px 11px; display:grid; gap:1px; justify-items:center; flex:none; min-width:58px;
}
.gun-serit button .g-ad{font-size:11.5px; color:var(--soluk)}
.gun-serit button .g-no{font-size:16px; font-weight:650}
.gun-serit button[aria-selected="true"]{
  background:var(--vurgu); border-color:var(--vurgu); color:var(--vurgu-yazi);
}
.gun-serit button[aria-selected="true"] .g-ad{color:color-mix(in oklab,#fff 80%,transparent)}
.gun-serit button.bugun:not([aria-selected="true"]){border-color:var(--vurgu)}

.gun-liste{display:grid; gap:8px}
.gun-satir{
  display:flex; align-items:center; gap:10px; width:100%;
  background:var(--yuzey); border:1px solid var(--cizgi); border-radius:12px;
  padding:11px 13px; text-align:left; box-shadow:var(--golge);
}
.gun-satir .m-ad{font-size:14px; font-weight:600; flex:none; min-width:84px}
.gun-satir .cip{flex:0 1 auto}
.gun-satir .serbest{font-size:13px; color:var(--soluk)}
.gun-satir .ok{margin-left:auto; color:var(--soluk); font-size:17px}

/* ------------------------------------------------------------------ kutular */
.kutu{
  border:0; border-radius:16px; padding:20px; width:min(400px,calc(100vw - 32px));
  background:var(--yuzey); color:var(--yazi); box-shadow:var(--golge);
}
.kutu::backdrop{background:rgba(0,0,0,.42); backdrop-filter:blur(2px)}
.kutu h2{font-size:16.5px}
.kapat-form{float:right; margin:-6px -6px 0 0}
.kapat{border:0; background:transparent; color:var(--soluk); font-size:22px;
       line-height:1; padding:4px 8px; border-radius:8px}
.kapat:hover{background:var(--yuzey2); color:var(--yazi)}

.kutu input[type=search],.kutu input:not([type]),.hizli input{
  width:100%; padding:9px 11px; border-radius:var(--r);
  border:1px solid var(--cizgi); background:var(--yuzey2);
}
.kutu input:focus-visible,.hizli input:focus-visible{
  outline:2px solid color-mix(in oklab,var(--vurgu) 55%,transparent); outline-offset:-1px;
}
#ara{margin:12px 0 8px}

.mevcut{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  padding:9px 11px; border-radius:var(--r); background:var(--yuzey2);
  border:1px solid var(--cizgi); font-size:13px;
}
.mevcut .kaldir{margin-left:auto; border:1px solid var(--cizgi);
  background:var(--yuzey); border-radius:8px; padding:5px 10px; font-size:12.5px}
.mevcut .kaldir:hover{border-color:hsl(8 60% 60%); color:hsl(8 65% 48%)}

.liste{display:grid; gap:4px; max-height:44vh; overflow:auto; margin-bottom:12px}
.liste .sec{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  border:1px solid transparent; background:transparent; border-radius:var(--r);
  padding:8px 10px; font-size:13.5px;
}
.liste .sec:hover,.liste .sec:focus-visible{background:var(--yuzey2); border-color:var(--cizgi)}
.liste .sec .nokta{width:9px; height:9px; border-radius:50%; flex:none;
  background:hsl(var(--h) 60% 55%)}
.liste .sec .nerede{margin-left:auto; font-size:11.5px; color:var(--soluk)}
.liste .sec[disabled]{opacity:.45; cursor:default}
.liste .yok{padding:14px 10px; font-size:13px; color:var(--soluk); text-align:center}

.hizli{display:flex; gap:7px; align-items:center;
       border-top:1px solid var(--cizgi); padding-top:12px; margin-top:4px}
.hizli input{flex:1}
.hizli .birincil{flex:none}

.yonet-liste{display:grid; gap:5px; max-height:46vh; overflow:auto}
.yonet-satir{display:flex; align-items:center; gap:7px}
.yonet-satir input{flex:1}
.yonet-satir .sil{
  border:1px solid var(--cizgi); background:var(--yuzey); border-radius:9px;
  padding:7px 10px; font-size:13px; color:var(--soluk); flex:none;
}
.yonet-satir .sil:hover{border-color:hsl(8 60% 60%); color:hsl(8 65% 48%);
  background:hsl(8 70% 97%)}
@media (prefers-color-scheme:dark){
  .yonet-satir .sil:hover{background:hsl(8 40% 18%); color:hsl(8 70% 72%)}
}
.yonet-satir .nokta{width:10px; height:10px; border-radius:50%; flex:none;
  background:hsl(var(--h) 60% 55%)}

.bos{text-align:center; color:var(--soluk); font-size:14px; padding:36px 16px}

/* ------------------------------------------------------- tekrar anahtarı */
.tekrar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  border-top:1px solid var(--cizgi); padding-top:12px; margin-top:4px;
  font-size:13px; cursor:pointer;
}
.tekrar input[type=checkbox]{width:16px; height:16px; accent-color:var(--vurgu);
  margin:0; flex:none; cursor:pointer}
.tekrar-yazi{color:var(--soluk)}
.tekrar b{color:var(--yazi); font-weight:600}
/* Hafta sayısı yalnızca anahtar açıkken anlamlı; kapalıyken soluk duruyor ki
   neyi etkilediği belli olsun. */
#tekrarSayi{
  margin-left:auto; padding:5px 8px; border-radius:8px; font-size:12.5px;
  border:1px solid var(--cizgi); background:var(--yuzey2); color:inherit;
}
.tekrar:has(input:not(:checked)) #tekrarSayi{opacity:.45}
.tekrar:has(input:checked) .tekrar-yazi{color:var(--yazi)}

/* ------------------------------------------------------------------ oturum */
.oturum{
  margin:16px 0 0; padding-top:12px; border-top:1px solid var(--cizgi);
  font-size:12.5px; color:var(--soluk);
}
.bag{border:0; background:transparent; color:var(--vurgu); font:inherit;
     padding:0; text-decoration:underline}
.hata{margin:10px 0 0; font-size:13px; color:hsl(8 65% 48%); min-height:1.3em}
@media (prefers-color-scheme:dark){.hata{color:hsl(8 70% 70%)}}

/* ----------------------------------------------------------------- geçmiş */
.kutu.genis{width:min(540px,calc(100vw - 32px))}
.gecmis-liste{
  display:grid; gap:1px; max-height:60vh; overflow:auto; margin-top:12px;
  border:1px solid var(--cizgi); border-radius:var(--r); background:var(--cizgi);
}
.g-satir{
  display:grid; grid-template-columns:auto 1fr; gap:3px 11px;
  padding:9px 11px; background:var(--yuzey); font-size:13px;
}
.g-zaman{
  color:var(--soluk); font-size:11.5px; white-space:nowrap;
  font-variant-numeric:tabular-nums; padding-top:1px;
}
.g-cumle{min-width:0}
.g-cumle b{font-weight:600}
/* Eylem rengi: ekleme yeşil, kaldırma kırmızı, taşıma mavi -- listeyi
   okumadan taramak için. */
.g-satir[data-tip="ekle"]    .g-nokta{background:hsl(152 55% 45%)}
.g-satir[data-tip="kaldir"]  .g-nokta{background:hsl(8 60% 55%)}
.g-satir[data-tip="tasi"]    .g-nokta{background:hsl(212 60% 55%)}
.g-satir[data-tip="duzen"]   .g-nokta{background:hsl(48 70% 48%)}
.g-nokta{width:7px; height:7px; border-radius:50%; display:inline-block;
         margin-right:6px; vertical-align:1px; background:var(--soluk)}
.g-detay{grid-column:2; color:var(--soluk); font-size:11.5px}
.g-liste-bos{padding:28px 12px; text-align:center; color:var(--soluk);
             font-size:13px; background:var(--yuzey)}

/* --------------------------------------------------------------- bildirim */
.bildirim{
  position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px); z-index:60;
  background:var(--yazi); color:var(--kagit);
  padding:9px 15px; border-radius:999px; font-size:13px; font-weight:500;
  box-shadow:var(--golge); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  max-width:calc(100vw - 32px);
}
.bildirim.gor{opacity:1; transform:translate(-50%,0)}

@media (max-width:560px){
  :root{--ad-gen:82px; --gun-gen:minmax(78px,1fr)}
  .ust{gap:10px}
  .gezin{order:3; margin-inline:0; width:100%}
  .gezin #bugun{flex:1}
  .sag{margin-left:auto}
  /* Telefonda kutu alt sayfa gibi açılsın: başparmak oraya ulaşıyor. */
  .kutu{width:100vw; max-width:100vw; margin:0; position:fixed;
        bottom:0; left:0; top:auto; border-radius:18px 18px 0 0;
        padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){ .bildirim{transition:none} }