/* CatPlanner web.css — TASLAK (web turu, 2026-10-09). The desktop / tablet shell and the breakpoints.
   Loaded by the web boards (wNN-web) AFTER wire.css; the approved phone boards do not load it.
   The root `.web` is a container, so a frame of any width picks its own layout (375 / 768 / 1366):
   base = the phone language (app bar, bottom tab bar, horizontal cards), ≥768 = rail, ≥1200 = sidebar + 12-column content.
   Desktop breakpoint 1200, not 1366 (2026-10-15): at exactly 1366 a 1366 screen with a scrollbar (≈1351 wide) and every 1280 laptop fell back to the tablet rail. The 1366 boards stay as the sample desktop width.
   Same part, different placement: `.nav` IS the TabBar (it becomes the rail / sidebar), `.topbar` IS the AppBar,
   the page's primary action is the same button in the top bar (phone: the FAB), the context card (W48) keeps its place.
   Variant classes on `.web` come from the board's Tweaks (data-props) and carry the open A/B decisions:
   s-rail | s-tab (D1, 768 shell) · c-side | c-top (D2, context card at 1366) · f-head | f-float (D3, primary action)
   · m-page | m-dialog (D4, form pages) · k-2 | k-1 (D5, short sections side by side at 1366). Defaults = the recommended A. */

/* ---------- base (<768): phone language in a fluid page ---------- */
/* NOTE: a container query cannot style the container itself, so the row / column switch lives on the children: the nav and the main are flex items of a wrapping row (base: both 100% wide, nav last; ≥768: nav 72 px beside the main). */
.web { container-type:inline-size; container-name:web; width:100%; min-height:100vh; box-sizing:border-box; position:relative; background:var(--surface); display:flex; flex-wrap:wrap; align-items:stretch; font:13px/1.3 -apple-system, "Segoe UI", system-ui, sans-serif; color:var(--ink); }
.web .main { flex:1 1 100%; display:flex; flex-direction:column; min-width:0; }
/* Top bar = AppBar (64, title 20/600, avatar 32 right; back arrow on secondary pages, a.bk 44 px hit area) */
.topbar { height:64px; display:flex; align-items:center; gap:12px; padding:0 20px; flex:none; }
.topbar .title { font-size:24px; font-weight:700; letter-spacing:-0.01em; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar .avatar { width:32px; height:32px; border-radius:50%; background:var(--box); flex:none; }
.topbar .back { width:10px; height:10px; border-left:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:rotate(45deg); margin-right:4px; }
.topbar a.bk { padding:17px; margin:-17px; }
.topbar .act { display:none; } /* the page action lives in the FAB on the phone */
.topbar .act .btn { display:inline-flex; }
/* Content: 16 px under the bar (AppBar rule), 20 px gutters */
.content { flex:1; width:100%; box-sizing:border-box; padding:16px 20px 24px; }
.content.has-fab { padding-bottom:96px; }
.content > :first-child, .body > :first-child { margin-top:0; }
.ctx { display:block; }
/* Nav = TabBar (72, 4 items, active ink) */
.nav { order:9; flex:0 0 100%; width:100%; height:72px; box-sizing:border-box; border-top:1px solid var(--line); background:var(--surface); display:flex; justify-content:space-around; align-items:flex-start; padding-top:10px; flex:none; position:sticky; bottom:0; }
.nav .logo { display:none; }
.nav .item { display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--mid); text-decoration:none; font-size:10px; }
.nav .item .ic { width:22px; height:22px; border-radius:50%; background:var(--box); flex:none; }
.nav .item.on { color:var(--ink); font-weight:600; }
.nav .item.on .ic { background:var(--ink); }
/* FAB on a scrolling page: fixed to the viewport, same geometry as wire.css */
.web .fab { position:fixed; right:20px; bottom:96px; }
/* Cards list (Evler): stacked full-width cards on the phone, a grid from 768 */
.cards { display:flex; flex-direction:column; }
/* Form page: the fields column; the form bar sits at the bottom of the page like the phone strip */
.form { max-width:none; }
.content .formbar { margin:16px -20px -24px; position:sticky; bottom:0; background:var(--surface); }
/* Two short sections that may sit side by side at 1366 (D5); stacked below */
.two { display:block; }

/* ---------- ≥768: rail + top bar + content grid ---------- */
@container web (min-width: 768px) {
  .web .main { flex:1 1 0%; }
  .web .nav { order:0; flex:0 0 72px; width:72px; height:auto; min-height:100vh; border-top:0; border-right:1px solid var(--line); flex-direction:column; justify-content:flex-start; align-items:stretch; padding:0; position:sticky; top:0; bottom:auto; align-self:flex-start; }
  .web .nav .logo { display:flex; align-items:center; justify-content:center; height:56px; box-sizing:border-box; border-bottom:1px solid var(--line); gap:10px; font-weight:600; font-size:14px; }
  .web .nav .logo .mark { width:24px; height:24px; border-radius:6px; background:var(--ink); flex:none; }
  .web .nav .logo .word { display:none; }
  .web .nav .item { height:64px; justify-content:center; gap:4px; }
  /* D1-B: the phone tab bar stays at 768 — the page is a column again (these repeat the base values; specificity .web.s-tab beats .web) */
  .web.s-tab .main { flex:1 1 100%; }
  .web.s-tab .nav { order:9; flex:0 0 100%; width:100%; height:72px; min-height:0; border-top:1px solid var(--line); border-right:0; flex-direction:row; justify-content:space-around; align-items:flex-start; padding:10px 0 0; position:sticky; top:auto; bottom:0; align-self:auto; }
  .web.s-tab .nav .logo { display:none; }
  .web.s-tab .nav .item { height:auto; justify-content:flex-start; gap:6px; }
  .topbar { height:56px; padding:0 24px; border-bottom:1px solid var(--line); }
  .topbar .act { display:flex; gap:8px; }
  .content { padding:24px 24px 32px; max-width:1184px; }
  .content.has-fab { padding-bottom:32px; }
  /* D3: primary action — A in the top bar (default), B the FAB stays (bottom right, no tab bar under it) */
  .web.f-head .fab { display:none; }
  .web.f-float .topbar .act { display:none; }
  .web.f-float .fab { right:32px; bottom:32px; }
  .web.f-float .content.has-fab { padding-bottom:96px; }
  .web .band { margin-left:0; margin-right:0; }
  /* horizontal cards → grid, the same card fills its cell */
  .web .hscroll { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; overflow:visible; margin:0 0 16px; padding:0; }
  .web .hscroll .home, .web .cards .home { width:100%; }
  .web .cards { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
  .web .cards .home.full { margin:0; }
  /* pet tiles: as many 96 px tiles as fit */
  .web .cgrid { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:24px 16px; }
  /* page tabs: everything fits, so no arrows, no fade, no scroll; left-aligned under the title */
  .web .tabscroll { margin:0 0 16px; }
  .web .tabscroll .arr { display:none; }
  .web .tabscroll .track { overflow:visible; }
  .web .tabscroll .track::after { display:none; }
  .web .tabscroll .track.end { justify-content:flex-start; }
  .web .seg { justify-content:flex-start; }
  /* D4-A: form page — fields in a 560 px column, Kaydet right-aligned under them (the w11 .btnrow.save language); the phone strip is gone */
  .form { max-width:560px; }
  .content .formbar { position:static; margin:0; max-width:560px; height:auto; border-top:0; padding:16px 0 0; display:flex; justify-content:flex-end; background:transparent; }
  .content .formbar .btn { display:inline-flex; width:auto; height:32px; border-radius:16px; padding:0 14px; font-size:12px; font-weight:400; }
  /* D4-B: form as a window over the dimmed app */
  .web.m-dialog { background:var(--box2); }
  .web.m-dialog .nav { opacity:.45; }
  .web.m-dialog .main { flex:none; width:480px; max-width:calc(100% - 48px); margin:80px auto; align-self:flex-start; background:var(--surface); border-radius:16px; box-shadow:0 12px 32px rgba(0,0,0,.18); overflow:hidden; }
  .web.m-dialog .topbar { padding:0 24px; }
  .web.m-dialog .topbar .avatar { display:none; }
  .web.m-dialog .content { padding:16px 24px 24px; }
  .web.m-dialog .form, .web.m-dialog .content .formbar { max-width:none; }
  .web.m-dialog .content .formbar { border-top:1px solid var(--line); margin:24px -24px -24px; padding:16px 24px; }
}

/* ---------- ≥1200 (2026-10-15, was 1366): sidebar 240 + content ≤1120 on 12 columns / 24 gutters ---------- */
@container web (min-width: 1200px) {
  .web .main, .web.s-tab .main { flex:1 1 0%; }
  .web .nav, .web.s-tab .nav { order:0; flex:0 0 240px; width:240px; height:auto; min-height:100vh; border-top:0; border-right:1px solid var(--line); flex-direction:column; justify-content:flex-start; align-items:stretch; padding:0; position:sticky; top:0; bottom:auto; align-self:flex-start; }
  .web .nav .logo, .web.s-tab .nav .logo { display:flex; align-items:center; justify-content:flex-start; height:56px; box-sizing:border-box; padding:0 24px; border-bottom:1px solid var(--line); gap:10px; font-weight:600; font-size:14px; }
  .web .nav .logo .mark { width:24px; height:24px; border-radius:6px; background:var(--ink); flex:none; }
  .web .nav .logo .word { display:block; }
  .web .nav .item, .web.s-tab .nav .item { flex-direction:row; height:44px; justify-content:flex-start; gap:12px; padding:0 24px; font-size:13px; }
  .web .nav .item:first-of-type { margin-top:8px; }
  .topbar { padding:0 32px; }
  .content { padding:24px 32px 32px; }
  .web .hscroll { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .web .cards { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  /* D2-A: the context card (W48) in the right column (4 / 12), stays while the page scrolls; D2-B (c-top) keeps it full width above. Only pages that carry a card (.content.has-ctx) split. */
  .web.c-side .content.has-ctx { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:24px; align-items:start; }
  .web.c-side .body { grid-column:1 / 9; grid-row:1; min-width:0; }
  .web.c-side .ctx { grid-column:9 / -1; grid-row:1; position:sticky; top:80px; }
  .web.c-side .ctx .home.full { margin:0; }
  /* D5-A: two short sections side by side (7 / 5), the band between them goes */
  .web.k-2 .two { display:grid; grid-template-columns:7fr 5fr; column-gap:24px; align-items:start; }
  .web.k-2 .two > .band { display:none; }
  .web.k-2 .two > div > h2:first-child { margin-top:24px; }
}

/* ---------- web turu 2 (TASLAK, 2026-10-13): w36–w53 ve W87 hâlleri ---------- */
/* Gün gezgini (DayNav) üst çubuğun altında, içerik boşluğuyla hizalı */
@container web (min-width: 768px) { .web .daynav2 { padding:0 24px; } }
@container web (min-width: 1200px) { .web .daynav2 { padding:0 32px; } }
/* Alt sayfacık (Sheet: onay, tamamlama, malzeme durumu) ≥768'de aynı parça ortada pencere: 440 px, köşe 16, tutamaç yok; perde bütün kabuğu örter (telefonda alttan açılır) */
.web .scrim { z-index:5; }
.web .sheet { z-index:6; }
@container web (min-width: 768px) {
  .web .sheet { left:50%; right:auto; bottom:auto; top:120px; width:440px; box-sizing:border-box; transform:translateX(-50%); border-radius:16px; padding:24px; box-shadow:0 12px 32px rgba(0,0,0,.18); }
  .web .sheet .grip { display:none; }
}
/* Oturum dışı sayfalar .web.auth (Giriş, Kayıt, Şifre sıfırla, Davet kabul): menü ve avatar yok; ≥768'de içerik ortada 440 px sütun, form çubuğu alanların altında tam genişlik geniş düğme */
@container web (min-width: 768px) {
  .web.auth .topbar { border-bottom:0; justify-content:center; }
  .web.auth .topbar .title { flex:none; }
  .web.auth .content { max-width:440px; margin:0 auto; padding-top:32px; }
  .web.auth .form, .web.auth .content .formbar { max-width:none; }
  .web.auth .content .formbar .btn { width:100%; height:48px; border-radius:24px; font-size:15px; font-weight:600; justify-content:center; }
}