/* ==========================================================================
   app.css — Zaman Çizelgesi
   ========================================================================== */

/* ------------------------------------------------------------- değişkenler */
:root {
  --bg:        #ffffff;
  --bg-sunk:   #f6f7f9;
  --bg-raise:  #ffffff;
  --line:      #dfe2e6;
  --line-soft: #eceef1;
  --ink:       #1f2328;
  --ink-dim:   #5c6470;
  --ink-faint: #8b939f;
  --accent:    #1a73e8;
  --accent-ink:#ffffff;
  --danger:    #d93025;
  --shadow:    0 1px 2px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.18);
  --today:     #e8f0fe;
  --hour-h:    46px;
  --gutter-w:  58px;
  --side-w:    288px;
  --r:         8px;
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #16191d;
    --bg-sunk:   #101216;
    --bg-raise:  #1d2126;
    --line:      #2e343b;
    --line-soft: #23282e;
    --ink:       #e6e9ed;
    --ink-dim:   #9aa3ae;
    --ink-faint: #6b7480;
    --accent:    #7cabf7;
    --accent-ink:#0d1117;
    --danger:    #f28b82;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.5);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
    --today:     #1b2735;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:        #16191d;
  --bg-sunk:   #101216;
  --bg-raise:  #1d2126;
  --line:      #2e343b;
  --line-soft: #23282e;
  --ink:       #e6e9ed;
  --ink-dim:   #9aa3ae;
  --ink-faint: #6b7480;
  --accent:    #7cabf7;
  --accent-ink:#0d1117;
  --danger:    #f28b82;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
  --today:     #1b2735;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ temel */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}
/* iOS'ta 100vh URL çubuğunu saymaz → altta 60-90 px kesilir. dvh bunu çözer;
   -webkit-fill-available eski iOS için yedek. */
body { min-height: -webkit-fill-available; }
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h2, h3, h4 { margin: 0; font-weight: 600; }

button, input, select, textarea { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 6px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ---------------------------------------------------------------- üst bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex: none;
}

.brand { display: flex; align-items: center; gap: 9px; }

.brand-mark {
  width: 20px; height: 20px; border-radius: 5px;
  background: linear-gradient(140deg, #1a73e8, #7030A0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.brand-name { font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }

.tabs { display: flex; gap: 2px; }

.tab {
  padding: 6px 14px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font-weight: 550;
}
.tab:hover { background: var(--bg-sunk); color: var(--ink); }
.tab.is-active { background: var(--accent); color: var(--accent-ink); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.backup-badge {
  border: 1px solid var(--line);
  background: var(--bg-raise);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  color: var(--ink-dim);
  font-size: 12.5px;
  white-space: nowrap;
}
.backup-badge:hover { border-color: var(--accent); color: var(--ink); }
.backup-badge.warn { border-color: #e0a800; background: rgba(224,168,0,.13); color: #a97a00; }
.backup-badge.bad  { border-color: var(--danger); background: rgba(217,48,37,.13); color: var(--danger); }

/* ---------------------------------------------------------------- düğmeler */
.btn {
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--ink);
  border-radius: var(--r);
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-sunk); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.07); background: var(--accent); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.btn-sm { padding: 3px 9px; font-size: 12.5px; }
.btn:disabled, .icon-btn:disabled { opacity: .35; cursor: default; }

.icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 17px; line-height: 1;
}
.icon-btn:hover:not(:disabled) { background: var(--bg-sunk); color: var(--ink); }

.nav-group { display: flex; }
.spacer { flex: 1; }

.chk { display: flex; align-items: center; gap: 6px; color: var(--ink-dim); cursor: pointer; white-space: nowrap; }
.chk input { accent-color: var(--accent); }

input[type=text], input[type=date], input[type=time], input[type=number], select, textarea {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 6px;
  padding: 5px 8px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* ---------------------------------------------------------------- paneller */
.panel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.panel.is-active { display: flex; }

/* =========================================================================
   TAKVİM
   ========================================================================= */
.cal-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.cal-title { font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
.cal-sub { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }

.cal-layout { display: flex; flex: 1; min-height: 0; }

.cal-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* --- gün başlıkları */
.cal-head {
  display: flex;
  /* scrollbar payı — sütunlar hizada kalsın. Sabit 11 px yalnız masaüstünde
     doğru; mobilde overlay scrollbar 0 px olduğu için calendar.js ölçüp
     --sb-w'yi yazıyor. */
  padding-right: var(--sb-w, 11px);
  border-bottom: 1px solid var(--line);
  flex: none;
  background: var(--bg);
}
.cal-head .hgutter { width: var(--gutter-w); flex: none; }
.cal-head .hday {
  flex: 1 1 0; min-width: 0;
  padding: 6px 4px 8px;
  text-align: center;
  border-left: 1px solid var(--line-soft);
}
.cal-head .hday .dow {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.cal-head .hday .dnum {
  font-size: 22px; font-weight: 400; line-height: 1.25;
  width: 36px; height: 36px; margin: 1px auto 0;
  display: grid; place-items: center; border-radius: 50%;
}
.cal-head .hday.today .dow { color: var(--accent); }
.cal-head .hday.today .dnum { background: var(--accent); color: var(--accent-ink); font-weight: 500; }
.cal-head .hday .dsum {
  font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}

/* --- kaydırılabilir gövde */
.cal-scroll { flex: 1; overflow-y: scroll; overflow-x: hidden; }
.cal-body { display: flex; position: relative; }

.cal-gutter { width: var(--gutter-w); flex: none; position: relative; }
.cal-gutter .hlab {
  height: var(--hour-h);
  position: relative;
  text-align: right;
  padding-right: 8px;
}
.cal-gutter .hlab span {
  position: absolute; right: 8px; top: -7px;
  font-size: 10.5px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* position: relative — snap rehber çizgileri ve sürükleme etiketi buraya
   mutlak konumlanıyor. Çocuklar zaten flex:1 1 0 olduğu için düzeni etkilemez. */
.cal-days { flex: 1; display: flex; min-width: 0; position: relative; }

.cal-col {
  flex: 1 1 0; min-width: 0;
  position: relative;
  border-left: 1px solid var(--line-soft);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--line-soft) 0, var(--line-soft) 1px,
    transparent 1px, transparent var(--hour-h)
  );
}
.cal-col.today { background-color: var(--today); }
.cal-col.weekend { background-color: color-mix(in srgb, var(--bg-sunk) 55%, transparent); }
.cal-col.today.weekend { background-color: var(--today); }

/* --- şu an çizgisi */
.nowline {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px solid #ea4335; z-index: 6; pointer-events: none;
}
.nowline::before {
  content: ''; position: absolute; left: -5px; top: -5px;
  width: 10px; height: 10px; border-radius: 50%; background: #ea4335;
}

/* --- etkinlik blokları */
.ev {
  position: absolute;
  border-radius: 5px;
  padding: 2px 5px 2px 6px;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  font-size: 11.5px;
  line-height: 1.25;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  user-select: none;
  z-index: 2;
  /* 15 dk'lık blok 9,5 px kalıyordu — tıklanamayacak kadar ince.
     Yalan yalnız ALT kenarda: `top` her zaman doğru, yani başlangıç saati
     kaymıyor ve blokların sıralaması bozulmuyor. calendar.js MIN_H_RATIO
     ile aynı katsayı. */
  min-height: calc(var(--hour-h) * 0.24);
}
.ev.is-sel { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 7; }
.ev.is-ghost { opacity: .55; pointer-events: none; z-index: 8; }
.ev .ev-t {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev .ev-time { opacity: .82; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.ev.short { padding-top: 0; display: flex; gap: 5px; align-items: baseline; }
.ev.short .ev-t { flex: 0 1 auto; }
.ev.short .ev-time { flex: none; }
.ev.uncounted { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); opacity: .88; }

/* Tutamaklar artık TIKLAMA HEDEFİ DEĞİL, yalnızca görsel ipucu.
   Mod seçimi calendar.js'teki pickMode() ile bloğa göre piksel ofsetinden
   yapılıyor; sabit 7 px'lik iki tutamak küçük blokların tamamını kaplayıp
   'move' modunu imkânsız kılıyordu. */
.ev-grip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  pointer-events: none;
}
.ev-grip.top { top: 0; bottom: auto; }

/* İnce çubuk — yalnız gerçekten boyutlandırılabilen bloklarda, yalnız fareyle */
@media (hover: hover) and (pointer: fine) {
  .ev { cursor: grab; }
  .ev:hover { filter: brightness(1.08); z-index: 5; }
  .ev.can-resize:hover .ev-grip::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,.65);
  }
  .ev.can-resize:hover .ev-grip.top::after { top: 2px; }
  .ev.can-resize:hover .ev-grip:not(.top)::after { bottom: 2px; }
  /* basmadan önce hangi moda gireceğini göster */
  .ev.hot-top, .ev.hot-bot { cursor: ns-resize; }
  .ev.hot-top .ev-grip.top::after,
  .ev.hot-bot .ev-grip:not(.top)::after { background: #fff; height: 4px; width: 28px; }
}

/* Sürükleme boyunca imleç tüm sayfada sabit kalsın */
html.is-dragging, html.is-dragging * { cursor: grabbing !important; }
html.is-resizing, html.is-resizing * { cursor: ns-resize !important; }

/* --- sürükleme: hayalet + proxy
   Sürüklerken veri değişmiyor; kaynak blok yerinde soluk kalıyor ve tek bir
   proxy düğüm hareket ediyor. Proxy snap edilmiş konumu gösterdiği için
   15 dk'lık ayrık sıçramalar yapar — kısa geçiş bunu "yerine oturma"ya
   çevirir, istenen "smooth" his buradan gelir. */
.ev-proxy {
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.45);
  transition: top .07s cubic-bezier(.2,.7,.3,1), height .07s cubic-bezier(.2,.7,.3,1);
}
html.is-dragging .ev-proxy { transform: scale(1.015); }

.snapline {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--accent);
  z-index: 9; pointer-events: none; opacity: .8;
}

.drag-tip {
  position: absolute; z-index: 11; pointer-events: none;
  background: var(--ink); color: var(--bg);
  font-size: 11px; font-variant-numeric: tabular-nums;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  box-shadow: var(--shadow);
}

/* sürüklenen saatin gutter'daki karşılığı */
.cal-gutter .hlab.hi span { color: var(--accent); font-weight: 700; }

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

/* =========================================================== DOKUNMATİK
   `touch-action` tarayıcı tarafından jestin BAŞINDA değerlendirilir; uzun
   basma dolduktan sonra CSS'i değiştirmek çalışmaz. Bu yüzden burada dikey
   kaydırmaya izin veriyoruz (pan-y) ve sürükleme başlayınca calendar.js'teki
   passive olmayan touchmove dinleyicisi kaydırmayı iptal ediyor.            */
.cal-scroll { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cal-days { touch-action: pan-y; }

/* Bloklarda jesti TAMAMEN biz yönetiyoruz.
   `pan-y` bırakıldığında şu oluyordu: 350 ms'lik uzun basma boyunca parmak
   birkaç piksel kayıyor, bu kayma bizim eşiğimizin altında olduğu için adayı
   iptal etmiyoruz — ama tarayıcı o sırada kaydırmayı başlatmış oluyor. Uzun
   basma dolup proxy göründüğü anda `pointercancel` geliyor ve sürükleme
   siliniyor. (Gerçek cihazda: "kesikli çizgiler bir an çıkıp kayboluyor".)
   Eşiği büyütmek işe yaramaz — tarayıcıya daha çok kayma izni vermek demek.
   `none` diyip kaydırmayı calendar.js'te elle yürütüyoruz. */
.ev { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; }
body { touch-action: manipulation; }        /* 300 ms çift-dokunma gecikmesi gitsin */

/* --- seçili blokta boyutlandırma topuzları
   Bloğun İÇİNE konamıyorlar (.ev overflow:hidden onları kırpardı); kolona
   kardeş olarak ekleniyorlar. Kutu boyutları calendar.js'te ölçülerek
   veriliyor — ortada garanti bir "taşı" bandı kalmalı.
   `touch-action: none` şart: olmadan tarayıcı topuzu kaydırma sanıp
   pointercancel atıyor ve boyutlandırma hiç başlamıyor. */
.ev-h {
  position: absolute;
  z-index: 12;
  display: grid; place-items: center;
  touch-action: none;
}
.ev-h::before {
  content: '';
  width: min(100%, 13px); height: 13px;
  border-radius: 50%;
  background: var(--bg-raise);
  border: 2px solid var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.ev-h.top { cursor: ns-resize; }
.ev-h.bot { cursor: ns-resize; }

@media (pointer: coarse) {
  .ev-h::before { width: min(100%, 26px); height: 26px; border-width: 3px; }

  /* dokunulabilir kontroller en az 40 px */
  .icon-btn { width: 40px; height: 40px; }
  .tab { padding: 10px 16px; }
  .btn { padding: 9px 15px; }
  .btn-sm { padding: 6px 11px; }
  .catpick-opt { padding: 10px 12px; }
  .chk { padding: 4px 0; }
}

/* --- sürükleyerek oluşturma önizlemesi */
.draft {
  position: absolute; z-index: 9;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 78%, transparent);
  color: #fff; font-size: 11.5px; padding: 2px 6px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}

/* --- yan panel */
.cal-side {
  width: var(--side-w); flex: none;
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 14px;
  background: var(--bg-sunk);
}

.band-card {
  border-radius: 10px;
  padding: 11px 13px;
  margin-bottom: 9px;
  box-shadow: inset 0 0 0 1px rgba(128,128,128,.22);
}
.band-card .bc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.band-card .bc-name { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.band-card .bc-role { font-size: 10.5px; opacity: .7; }
.band-card .bc-val { font-size: 27px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.band-card .bc-band { font-size: 11px; opacity: .78; }

.side-h {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); margin: 16px 0 7px;
}

.side-row {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 0; font-size: 12.5px;
}
.side-row .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.side-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-row .vl { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.side-row.sub .nm { padding-left: 16px; color: var(--ink-dim); }

.side-bar { height: 8px; border-radius: 4px; overflow: hidden; display: flex; margin: 8px 0 4px; background: var(--line-soft); }
.side-bar i { display: block; height: 100%; }

.side-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 10px; line-height: 1.5; }

/* =========================================================================
   POPUP / MODAL
   ========================================================================= */
.pop {
  position: fixed; z-index: 60;
  width: 332px;
  max-height: calc(100vh - 72px);      /* kısa pencerede Kaydet kaybolmasın */
  overflow-y: auto;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 14px;
}
.pop[hidden] { display: none; }
.pop .pop-x { position: absolute; top: 7px; right: 7px; }
.pop label { display: block; font-size: 11.5px; color: var(--ink-dim); margin: 10px 0 3px; }
.pop input[type=text], .pop select, .pop textarea { width: 100%; }
.pop .row { display: flex; gap: 8px; align-items: center; }
.pop .row > * { min-width: 0; }
.pop .pop-actions { display: flex; gap: 8px; margin-top: 15px; align-items: center; }
.pop .pop-title { width: 100%; font-size: 15px; font-weight: 600; padding: 6px 8px; }

.catpick { position: relative; }
.catpick-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 5;
  max-height: 244px; overflow-y: auto;
  background: var(--bg-raise);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow);
}
.catpick-list[hidden] { display: none; }
.catpick-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer; font-size: 13px;
}
.catpick-opt:hover, .catpick-opt.on { background: var(--bg-sunk); }
.catpick-opt .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.catpick-opt .dm { color: var(--ink-faint); font-size: 11px; margin-left: auto; }
.catpick-group {
  padding: 7px 10px 3px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}

.modal-back {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,.42);
  display: grid; place-items: center;
  padding: 24px;
}
.modal-back[hidden] { display: none; }
.modal {
  background: var(--bg-raise);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  max-width: 880px; width: 100%;
  max-height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.modal-head h3 { font-size: 16px; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot {
  padding: 13px 20px; border-top: 1px solid var(--line);
  display: flex; gap: 9px; align-items: center;
}

/* ---------------------------------------------------------------- bildirim */
.toast-wrap {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  background: #2b3038; color: #fff;
  padding: 9px 16px; border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 13px; display: flex; gap: 12px; align-items: center;
  pointer-events: auto;
  animation: toastin .16s ease;
}
.toast button { background: none; border: 0; color: #8ab4f8; cursor: pointer; font-weight: 600; }
.toast.err { background: var(--danger); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- dropzone */
.dropzone {
  position: fixed; inset: 0; z-index: 95;
  background: color-mix(in srgb, var(--accent) 16%, rgba(0,0,0,.4));
  display: grid; place-items: center;
  font-size: 19px; color: #fff;
}
.dropzone[hidden] { display: none; }
.dropzone > div {
  border: 3px dashed rgba(255,255,255,.85); border-radius: 18px;
  padding: 46px 74px; background: rgba(0,0,0,.35);
}

/* =========================================================================
   ANALİZ
   ========================================================================= */
.an-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-bottom: 1px solid var(--line); flex: none;
  flex-wrap: wrap;
}
.an-title { font-size: 16px; white-space: nowrap; }

.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg-btn {
  border: 0; background: transparent; color: var(--ink-dim);
  padding: 5px 13px; cursor: pointer; font-size: 13px;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn:hover { background: var(--bg-sunk); }
.seg-btn.is-active { background: var(--accent); color: var(--accent-ink); }

.an-range { display: flex; align-items: center; gap: 6px; color: var(--ink-faint); }
.an-range[hidden] { display: none; }

.an-body { flex: 1; overflow-y: auto; padding: 18px 16px 60px; }

.an-grid {
  display: grid;
  /* min(330px, 100%) olmadan 360 px'lik telefonda yatay taşma oluyordu */
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 14px;
  align-items: start;
  max-width: 1480px;
  margin: 0 auto;
}
.an-grid .wide { grid-column: 1 / -1; }

.card {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 16px 16px;
}
.card > h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 12px;
}
.card .card-hint { font-size: 11.5px; color: var(--ink-faint); margin-top: 10px; line-height: 1.5; }

/* --- bant rozetleri */
.badges { display: flex; gap: 11px; flex-wrap: wrap; }
.badge {
  flex: 1 1 190px;
  border-radius: 12px; padding: 13px 16px;
  box-shadow: inset 0 0 0 1px rgba(128,128,128,.22);
}
.badge .b-name { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .92; }
.badge .b-val { font-size: 33px; font-weight: 650; line-height: 1.12; font-variant-numeric: tabular-nums; }
.badge .b-band { font-size: 11.5px; opacity: .8; }

/* --- tablolar */
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th {
  text-align: left; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
  padding: 0 8px 7px; border-bottom: 1px solid var(--line);
}
table.t th.num, table.t td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.t td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.sub td:first-child { padding-left: 26px; color: var(--ink-dim); }
table.t tr.tot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; padding-top: 8px; }
table.t tr.grand td { font-weight: 700; font-size: 15px; }
table.t td .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: baseline; }
table.t .mini-bar { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; min-width: 40px; }
table.t .mini-bar i { display: block; height: 100%; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

/* ==========================================================================
   RESPONSIVE
   Kırılma noktaları: 1180 / 900 / 700 / 480 / 380.
   `--hour-h` ve görünen gün sayısı calendar.js'te ayardan/ekrandan geliyor;
   burada yalnız YERLEŞİM var.
   ========================================================================== */

/* --- gün şeridi (dar ekranda ızgaranın üstünde) */
.cal-strip {
  display: flex; gap: 4px; flex: none;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.cal-strip::-webkit-scrollbar { display: none; }
.cal-strip[hidden] { display: none; }
.strip-day {
  flex: 1 1 0; min-width: 42px;
  display: grid; place-items: center; gap: 1px;
  padding: 5px 2px;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--ink-dim); cursor: pointer;
}
.strip-day .sd-dow { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.strip-day .sd-num { font-size: 15px; font-weight: 600; }
.strip-day.today { color: var(--accent); }
.strip-day.is-on { background: var(--bg-sunk); border-color: var(--line); color: var(--ink); }
.strip-day.is-on.today { background: var(--today); border-color: var(--accent); }

/* --- yan panel çekmecesi */
.cal-side-back { display: none; }

@media (max-width: 1179px) { :root { --side-w: 240px; --gutter-w: 54px; } }

@media (max-width: 899px) {
  :root { --gutter-w: 50px; }
  .cal-side {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
    width: min(320px, 86vw);
    transform: translateX(100%);
    /* kapalıyken yatay kaydırma üretmesin ve tıklanmasın */
    visibility: hidden; pointer-events: none;
    transition: transform .18s cubic-bezier(.2,.7,.3,1), visibility 0s linear .18s;
    background: var(--bg-raise);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  html.side-open .cal-side {
    transform: none; visibility: visible; pointer-events: auto;
    transition: transform .18s cubic-bezier(.2,.7,.3,1);
  }
  html.side-open .cal-side-back {
    display: block; position: fixed; inset: 0; z-index: 79;
    background: rgba(0,0,0,.35);
  }
}
@media (min-width: 900px) { #calSideBtn { display: none; } }

/* --- araç çubuğu daralınca */
@media (max-width: 899px) {
  .cal-toolbar { flex-wrap: wrap; row-gap: 6px; }
}
@media (max-width: 699px) {
  :root { --gutter-w: 46px; }
  #calCopyWeek, .cal-sub { display: none; }
  .cal-title { font-size: 15px; }
  .an-body { padding: 12px 10px 80px; }
}
/* Üst bar dar ekranda sığmıyordu (390 px'te 65 px taşma). Marka adı gider,
   yedek rozeti noktaya iner, sekmeler daralır. */
@media (max-width: 559px) {
  .topbar { gap: 8px; }
  .brand-name { display: none; }
  .tabs { min-width: 0; }
  .tab { padding: 9px 11px; font-size: 13px; }
  .topbar-right { gap: 4px; }
  .backup-badge {
    padding: 4px 8px; font-size: 0; line-height: 0;
    width: 30px; height: 30px; display: grid; place-items: center;
  }
  .backup-badge::before { content: '⭳'; font-size: 15px; line-height: 1; }
}

@media (max-width: 479px) {
  :root { --gutter-w: 40px; }
  .cal-toolbar { padding: 6px 10px; gap: 6px; }
}
@media (max-width: 379px) {
  :root { --gutter-w: 36px; }
  #calUndo, #calRedo { display: none; }
}

/* --- güvenli alan (çentik) */
.topbar {
  padding-top: env(safe-area-inset-top);
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  height: calc(52px + env(safe-area-inset-top));
}
.toast-wrap { bottom: calc(22px + env(safe-area-inset-bottom)) !important; }

/* --- etkinlik düzenleyici: dar ekranda alt sayfa */
@media (max-width: 559px) {
  .pop {
    left: 0 !important; right: 0 !important; bottom: 0; top: auto !important;
    width: auto;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .modal-back { padding: 10px; }
  .modal { max-height: 92dvh; }
}

.kpis { display: flex; gap: 20px; flex-wrap: wrap; }
.kpi .k-v { font-size: 23px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi .k-l { font-size: 11.5px; color: var(--ink-faint); }

.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 11px; font-size: 12px; }
.legend span { display: flex; align-items: center; gap: 6px; color: var(--ink-dim); }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: block; }

.empty { color: var(--ink-faint); text-align: center; padding: 46px 20px; }

svg.chart { display: block; width: 100%; overflow: visible; }
svg .ax { stroke: var(--line); stroke-width: 1; }
svg .axlab { fill: var(--ink-faint); font-size: 10.5px; }
svg .glab { fill: var(--ink); font-size: 11px; }
svg .grid { stroke: var(--line-soft); stroke-width: 1; }

/* =========================================================================
   AYARLAR
   ========================================================================= */
.set-body { flex: 1; overflow-y: auto; padding: 20px 16px 70px; }
.set-wrap { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

.set-sec { background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 18px; }
.set-sec > h3 { font-size: 15px; margin-bottom: 4px; }
.set-sec > p.d { color: var(--ink-dim); font-size: 12.5px; margin: 0 0 14px; line-height: 1.5; }

.set-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; flex-wrap: wrap; }
.set-row + .set-row { border-top: 1px solid var(--line-soft); }
.set-row .lbl { flex: 1; min-width: 160px; }
.set-row .lbl small { display: block; color: var(--ink-faint); font-size: 11.5px; }

.cat-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.cat-row input[type=color] {
  width: 30px; height: 26px; padding: 0; border: 1px solid var(--line);
  border-radius: 5px; background: none; cursor: pointer;
}
.cat-row .cname { flex: 1; min-width: 120px; }
.cat-row .badge-k {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-sunk); color: var(--ink-faint); border: 1px solid var(--line);
}

.band-strip { display: flex; border-radius: 7px; overflow: hidden; margin: 6px 0 3px; }
.band-strip i {
  flex: 1; height: 26px; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; font-style: normal;
}

.warn-box {
  border: 1px solid color-mix(in srgb, #e0a800 45%, var(--line));
  background: rgba(224,168,0,.10);
  border-radius: 9px; padding: 11px 13px; font-size: 12.5px; line-height: 1.55;
}

/* ------------------------------------------------------- içe aktarma ekranı */
.imp-sum { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }
.imp-list { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.imp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px; border-bottom: 1px solid var(--line-soft);
}
.imp-row:last-child { border-bottom: 0; }
.imp-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-row .h { color: var(--ink-dim); font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.imp-row select { max-width: 260px; }
.imp-row.done { background: color-mix(in srgb, #0b8043 9%, transparent); }

/* --- düzenleyicide Etkinlik / Görev anahtarı */
.pop-mode {
  display: flex; gap: 2px; margin: 2px 30px 8px 0;
  background: var(--bg-sunk); border-radius: 999px; padding: 2px;
}
.pop-mode-btn {
  flex: 1 1 0; border: 0; border-radius: 999px;
  padding: 5px 10px; font-size: 12.5px; font-weight: 550;
  background: transparent; color: var(--ink-dim); cursor: pointer;
}
.pop-mode-btn.is-on { background: var(--bg-raise); color: var(--ink); box-shadow: var(--shadow); }
@media (pointer: coarse) { .pop-mode-btn { padding: 9px 12px; } }

/* =========================================================== GÖREVLER
   Saatli görev çipleri packDay'e girmiyor; ayrı bir katmanda duruyorlar,
   yani etkinliklerin yan yana kolon paylaşımını hiç etkilemiyorlar. */

.cal-allday {
  display: flex; flex: none;
  padding-right: var(--sb-w, 11px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  max-height: 84px; overflow-y: auto;
}
.cal-allday[hidden] { display: none; }
.cal-allday .ad-gutter {
  width: var(--gutter-w); flex: none;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); padding: 6px 6px 0 0; text-align: right;
}
.cal-allday .ad-day {
  flex: 1 1 0; min-width: 0;
  border-left: 1px solid var(--line-soft);
  padding: 3px 3px 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.ad-more {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-dim); font-size: 10.5px; text-align: left; padding: 1px 4px;
}
.ad-more:hover { color: var(--accent); text-decoration: underline; }

/* --- çip */
.tchip {
  display: flex; align-items: center; gap: 5px;
  min-width: 0; padding: 2px 5px;
  border-radius: 5px;
  border-left: 3px solid var(--tc, var(--ink-faint));
  background: var(--bg-sunk);
  font-size: 11.5px; line-height: 1.3;
  cursor: pointer; user-select: none;
}
.tchip:hover { background: color-mix(in srgb, var(--accent) 10%, var(--bg-sunk)); }
.tchip .tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchip .ttime { margin-left: auto; color: var(--ink-faint); font-size: 10.5px;
                font-variant-numeric: tabular-nums; }
.tchip.is-done .tname { text-decoration: line-through; opacity: .55; }
.tchip.is-late { border-left-color: var(--danger); }
.tchip.is-late .tname { color: var(--danger); }

.tchk {
  flex: none; width: 14px; height: 14px; padding: 0;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink-faint); border-radius: 4px;
  background: transparent; color: var(--accent-ink);
  font-size: 10px; line-height: 1; cursor: pointer;
}
.tchip.is-done .tchk { background: var(--accent); border-color: var(--accent); }
@media (pointer: coarse) {
  .tchk { width: 20px; height: 20px; font-size: 13px; }
  .tchip { padding: 5px 6px; font-size: 12.5px; }
}

/* --- ızgaradaki saatli görevler */
.tlayer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.tchip.tgrid {
  position: absolute; left: 2px; right: 5px;
  pointer-events: auto;
  height: 20px;
  background: color-mix(in srgb, var(--bg-raise) 88%, transparent);
  border: 1px dashed var(--line);
  border-left: 3px solid var(--tc, var(--ink-faint));
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
@media (pointer: coarse) { .tchip.tgrid { height: 26px; } }

/* --- yan panelde görevler */
.side-tasks { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.side-tasks .tchip { background: transparent; }
.side-tasks .tchip:hover { background: var(--bg-sunk); }

/* --- hatırlatma durum noktası */
.ndot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 9px; background: var(--ink-faint);
}
.ndot.off    { background: var(--ink-faint); }
.ndot.inapp  { background: #e0a800; }
.ndot.ask    { background: #e0a800; }
.ndot.web    { background: #00B050; }
.ndot.native { background: #00B050; }

/* --- hatırlatma satırları */
.rem-box { display: flex; flex-direction: column; gap: 4px; }
.rem-row { display: flex; gap: 4px; align-items: center; }
.rem-row select { flex: 1; }

/* Görev çipleri de bloklarla aynı jest yönetiminde: kaydırmayı biz yapıyoruz */
.tchip { touch-action: none; }
/* Tüm gün şeridi kendi içinde kaydırmaya çalışıp takvimi kilitlemesin */
.cal-allday { overscroll-behavior: contain; }

/* --- görünüm seçici (1 / 3 / hafta) */
.seg-sm .seg-btn { padding: 5px 9px; font-size: 12.5px; }
@media (pointer: coarse) { .seg-sm .seg-btn { padding: 9px 11px; } }
@media (max-width: 479px) {
  .seg-sm .seg-btn { padding: 8px 7px; font-size: 11.5px; }
  #calView { order: 10; }
}

/* --- senkron rozeti */
.sync-badge {
  border: 1px solid var(--line);
  background: var(--bg-raise);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  color: var(--ink-dim);
  font-size: 12.5px;
  white-space: nowrap;
}
.sync-badge:hover { border-color: var(--accent); color: var(--ink); }
.sync-badge.guncel { border-color: color-mix(in srgb, #00B050 45%, var(--line)); }
.sync-badge.gonderiliyor { border-color: var(--accent); color: var(--accent); }
.sync-badge.bekliyor { border-color: #e0a800; color: #a97a00; }
.sync-badge.cevrimdisi { opacity: .7; }
.sync-badge.hata { border-color: var(--danger); color: var(--danger); }
@media (max-width: 559px) { .sync-badge { padding: 4px 8px; font-size: 11.5px; } }

.giris-form label { display: block; font-size: 11.5px; color: var(--ink-dim); margin: 10px 0 3px; }