/* OBA Office ortak tasarim dili: token'lar, tip olcegi, dugme, girdi, cip, kart, tost, odak.
   Ofis ekrani, /yonetim, ortak sayfasi (/p) ve sally.obalabs.app ayni dosyayi yukler.
   Gunduz kagidi, aksam komuru; koyu tema acigin tersi degil, ayri ayarlandi. Renk tek
   basina anlam tasimaz. Sayfaya ozel kurallar sayfanin kendi <style> blogunda kalir. */
:root {
  color-scheme: light dark;
  --bg:          light-dark(oklch(0.968 0.008 85),  oklch(0.185 0.012 60));
  --surface:     light-dark(oklch(0.994 0.003 85),  oklch(0.225 0.013 60));
  --surface-2:   light-dark(oklch(0.948 0.009 85),  oklch(0.262 0.014 60));
  --surface-3:   light-dark(oklch(0.918 0.011 85),  oklch(0.305 0.015 60));
  --ink:         light-dark(oklch(0.235 0.012 65),  oklch(0.93 0.012 85));
  --ink-2:       light-dark(oklch(0.44 0.012 65),   oklch(0.78 0.012 80));
  --ink-3:       light-dark(oklch(0.52 0.012 65),   oklch(0.69 0.012 80));
  --line:        light-dark(oklch(0.895 0.008 80),  oklch(0.315 0.012 60));
  --line-strong: light-dark(oklch(0.62 0.01 75),    oklch(0.53 0.012 70));
  --accent:      light-dark(oklch(0.46 0.105 232),  oklch(0.8 0.085 222));
  --primary:     light-dark(oklch(0.27 0.014 65),   oklch(0.84 0.115 80));
  --primary-2:   light-dark(oklch(0.34 0.014 65),   oklch(0.885 0.105 82));
  --on-primary:  light-dark(oklch(0.985 0.004 85),  oklch(0.2 0.02 60));
  --selected:    light-dark(oklch(0.27 0.014 65),   oklch(0.93 0.012 85));
  --warn:        light-dark(oklch(0.47 0.11 60),    oklch(0.84 0.11 78));
  --bubble:      light-dark(oklch(0.997 0.002 85),  oklch(0.945 0.022 85));
  --bubble-ink:  oklch(0.22 0.012 65);
  --bubble-ink-2:oklch(0.43 0.012 65);
  --bubble-line: oklch(0.24 0.012 65);
  --shadow:      light-dark(oklch(0.3 0.03 65 / 0.14), oklch(0 0 0 / 0.5));
  --scrim:       light-dark(oklch(0.22 0.01 65 / 0.42), oklch(0.06 0.01 60 / 0.62));
  --oguz-msg:    light-dark(oklch(0.27 0.014 65),   oklch(0.34 0.02 70));
  --on-oguz-msg: light-dark(oklch(0.985 0.004 85),  oklch(0.95 0.01 85));
  --kisa-bg:     light-dark(oklch(0.948 0.026 85),  oklch(0.245 0.022 70));
  --kisa-line:   light-dark(oklch(0.86 0.04 82),    oklch(0.36 0.03 70));
  --portre-bg:   light-dark(oklch(0.9 0.035 75),    oklch(0.3 0.025 65));
  --code-bg:     light-dark(oklch(0.94 0.008 85),   oklch(0.255 0.012 60));
  --sec:         light-dark(oklch(0.88 0.06 85),    oklch(0.4 0.05 75));
  --link: var(--accent);
  --focus: var(--accent);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-xs: 0.8125rem;  /* 13 */
  --t-sm: 0.875rem;   /* 14 */
  --t-md: 1rem;       /* 16 */
  --t-lg: 1.125rem;   /* 18 */
  --t-xl: 1.375rem;   /* 22 */
  --t-2xl: 1.75rem;   /* 28 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
}
:root[data-tema="acik"] { color-scheme: light; }
:root[data-tema="koyu"] { color-scheme: dark; }

/* Taban */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; font-synthesis-weight: none; }
::selection { background: var(--sec); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gizli { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num { font-variant-numeric: tabular-nums; }
.atla { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--primary); color: var(--on-primary); font-weight: 600; text-decoration: none; }
.atla:focus-visible { top: 10px; }

/* Dugmeler */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--ink); font-size: var(--t-md); font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: background-color 150ms ease, transform 120ms var(--ease-out), opacity 150ms ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.dugme:active { transform: scale(0.97); }
.dugme:disabled { opacity: 0.5; cursor: default; transform: none; }
.dugme.birincil { border-color: transparent; background: var(--primary); color: var(--on-primary); }
.dugme.sade { border-color: transparent; background: transparent; color: var(--ink-2); }
.dugme.kucuk { min-height: 36px; padding: 0 12px; font-size: var(--t-sm); border-radius: 10px; }
.dugme .kbd { margin-left: 2px; padding: 0 6px; border-radius: 6px; background: var(--surface-3); color: var(--ink-2); font: 600 var(--t-xs)/1.6 var(--mono); }
.dugme.birincil .kbd { background: oklch(from var(--on-primary) l c h / 0.16); color: var(--on-primary); }
@media (hover: hover) and (pointer: fine) {
  .dugme:hover:not(:disabled) { background: var(--surface-3); }
  .dugme.birincil:hover:not(:disabled) { background: var(--primary-2); }
  .dugme.sade:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
}
.ikon-dugme { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); transition: background-color 150ms ease, transform 120ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.ikon-dugme svg { width: 20px; height: 20px; }
.ikon-dugme:active { transform: scale(0.95); }
.ikon-dugme:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .ikon-dugme:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); } }

/* Girdiler */
.girdi, .not-alani, select.girdi { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: var(--t-md); line-height: 1.45; }
textarea.girdi, .not-alani { resize: vertical; min-height: 64px; }
.girdi::placeholder, .not-alani::placeholder { color: var(--ink-3); }
.girdi:focus-visible, .not-alani:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
select.girdi { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23777' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.etiket { display: block; margin-bottom: 6px; font-size: var(--t-sm); font-weight: 600; }
.etiket span { color: var(--ink-3); font-weight: 400; }
.ust-etiket { color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hata { margin-top: 8px; color: var(--ink); font-size: var(--t-sm); font-weight: 600; }
.hata:empty { display: none; }

/* Cip (durum yaziyla; cerceve sekli de anlam tasir), kart yuzeyi, sayi rozeti, proje etiketi */
.cip { display: inline-block; padding: 2px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.cip.vurgu { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.cip.bekliyor { box-shadow: none; border: 1.5px dashed var(--line-strong); }
.cip.bitti::before { content: "✓ "; }
.cip.iptal { text-decoration: line-through; color: var(--ink-3); }
.yuzey { border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sayi-rozet { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 0.45em; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.proje-etiket { color: var(--ink-2); font: 500 var(--t-xs)/1.5 var(--mono); }

/* Tost: alt orta, sarar, kenardan tasmaz */
.tost { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(640px, calc(100vw - 32px)); padding: 10px 8px 10px 16px; border-radius: 14px; background: var(--primary); color: var(--on-primary); box-shadow: 0 14px 34px -12px var(--shadow); font-size: var(--t-sm); font-weight: 600; line-height: 1.35; opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity 160ms ease-out, transform 160ms var(--ease-out); }
.tost.acik { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; transition-duration: 220ms; }
.tost .metin { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tost button { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: oklch(from var(--on-primary) l c h / 0.14); color: var(--on-primary); font-weight: 700; font-size: var(--t-sm); }

/* Giris ve 404 karti: ortada, 360 px, piksel kapi. Telefonda tam genislik. */
.giris-sayfa { display: grid; place-items: center; min-height: 100dvh; padding: 16px; }
.giris-kart { width: min(380px, 100%); padding: 28px 24px 24px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.giris-kart .kapi { display: block; width: 36px; height: 44px; margin-bottom: 16px; }
.giris-kart .tur { margin-bottom: 4px; }
.giris-kart h1 { margin: 0; font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
.giris-kart .aciklama { margin: 6px 0 20px; color: var(--ink-2); font-size: var(--t-md); line-height: 1.5; text-wrap: pretty; }
.giris-kart label { display: block; margin-bottom: 8px; color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; }
.giris-kart select { width: 100%; min-height: 48px; margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg); color: var(--ink); font-size: var(--t-md); }
.giris-kart input[type="password"] { width: 100%; min-height: 56px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg); color: var(--ink); font: 600 1.375rem/1 var(--mono); letter-spacing: 0.3em; text-align: center; }
.giris-kart input:focus-visible, .giris-kart select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.giris-kart button[type="submit"] { width: 100%; min-height: 52px; margin-top: 14px; border: 0; border-radius: 14px; background: var(--primary); color: var(--on-primary); font: 650 var(--t-md)/1 var(--sans); transition: transform 140ms var(--ease-out); }
.giris-kart button[type="submit"]:active { transform: scale(0.97); }
.giris-kart .hata { margin: 14px 0 0; font-size: var(--t-md); }
.giris-kart .hata::before { content: "⚠️ "; }
.giris-kart .dipnot { margin: 18px 0 0; color: var(--ink-3); font-size: var(--t-xs); line-height: 1.5; }
.giris-kart .dipnot a { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .dugme, .ikon-dugme, .tost, .giris-kart button[type="submit"] { transition: none; }
  .dugme:active, .ikon-dugme:active, .giris-kart button[type="submit"]:active { transform: none; }
  .tost { transform: translate(-50%, 0); }
}
@media (prefers-contrast: more) { :root { --line: var(--line-strong); --ink-2: var(--ink); --ink-3: var(--ink); } }