:root { --blue: #5db8df; --blue-dark: #2998c7; --blue-pale: #e8f7fd; --ink: #27364a; --muted: #728096; --line: #e5ebf2; --surface: #ffffff; --page: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.eyebrow { margin: 0 0 8px; color: var(--blue-dark); font-size: .72rem; font-weight: 800; letter-spacing: .13em; }

/* Giris ve kayit */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 32px; background: linear-gradient(135deg, #eaf8fd, #f7fbfe 48%, #d9f2fc); }
.auth-layout { width: min(1100px, 100%); min-height: 640px; display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; border: 1px solid rgba(41, 152, 199, .15); border-radius: 26px; background: var(--surface); box-shadow: 0 24px 70px rgba(39, 90, 117, .15); }
.auth-brand { padding: clamp(42px, 7vw, 80px); display: flex; flex-direction: column; justify-content: center; color: #fff; background: linear-gradient(155deg, #79cae8, #3dadd8 60%, #2593c2); }
.brand-mark { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 64px; border: 2px solid rgba(255, 255, 255, .72); border-radius: 16px; font-weight: 800; letter-spacing: -.06em; }
.auth-brand .eyebrow { color: #e9f9ff; }.auth-brand h1 { margin: 0 0 20px; font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.03; letter-spacing: -.06em; }.auth-brand > p:last-child { max-width: 360px; margin: 0; color: #edfaff; font-size: 1.04rem; line-height: 1.7; }
.auth-panel { padding: clamp(40px, 6vw, 76px); }.auth-heading h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.045em; }.auth-heading > p:last-child { margin: 12px 0 32px; color: var(--muted); line-height: 1.55; }
.auth-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }.auth-form + .auth-form { padding-left: 28px; border-left: 1px solid var(--line); }.auth-form h3, .profile-form h3 { margin: 0 0 20px; font-size: 1.1rem; }.auth-form label, .profile-form label { display: block; margin: 15px 0 7px; color: #536278; font-size: .87rem; font-weight: 700; }
input { width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid #d7e1ea; border-radius: 9px; outline: none; color: var(--ink); font: inherit; background: #fbfdff; transition: border-color .18s, box-shadow .18s; } input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(93, 184, 223, .18); }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 11px 17px; border: 0; border-radius: 9px; color: #fff; background: var(--blue-dark); box-shadow: 0 7px 17px rgba(41, 152, 199, .2); font: inherit; font-size: .87rem; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .18s, background .18s; }.primary-button:hover { background: #1e86b2; transform: translateY(-1px); }.auth-form .primary-button { width: 100%; margin-top: 22px; }.form-status { min-height: 20px; margin: 20px 0 0; color: #c14e4e; font-size: .88rem; font-weight: 600; }.form-status.success { color: #278758; }

/* Uygulama kabugu */
.app-body { min-height: 100vh; background: var(--page); }.sidebar { position: fixed; z-index: 2; inset: 0 auto 0 0; width: 246px; display: flex; flex-direction: column; padding: 28px 16px 20px; color: #eafbff; background: linear-gradient(180deg, #6bc2e2, #3daed9 58%, #299bc9); }.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 32px; color: #fff; font-size: 1.05rem; font-weight: 800; letter-spacing: -.035em; text-decoration: none; }.sidebar-brand span { width: 31px; height: 31px; display: grid; place-items: center; border: 1.5px solid #fff; border-radius: 9px; font-size: .75rem; }.primary-nav { display: grid; gap: 5px; }.nav-link { display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 10px; color: #effbff; font-size: .93rem; font-weight: 650; text-decoration: none; transition: background .18s; }.nav-link:hover, .nav-link.active { background: rgba(255, 255, 255, .22); }.nav-icon { width: 21px; display: inline-grid; place-items: center; color: #fff; font-size: 1.2rem; font-weight: 500; }.sidebar-bottom { display: grid; gap: 5px; margin-top: auto; }.app-main { min-height: 100vh; margin-left: 246px; padding: 0 clamp(26px, 4vw, 72px) 60px; }.topbar { min-height: 122px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.topbar h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.05em; }.top-profile { display: flex; align-items: center; gap: 9px; color: #4d5d72; font-size: .87rem; font-weight: 750; text-decoration: none; }.profile-initial, .profile-photo-placeholder { display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #9bdbef, #3daed9); font-weight: 800; }.profile-initial { width: 32px; height: 32px; border-radius: 50%; font-size: .78rem; }
.dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 34px 0 24px; padding: clamp(25px, 4vw, 43px); border-radius: 18px; color: #fff; background: linear-gradient(115deg, #65c0e2, #40add8); box-shadow: 0 15px 32px rgba(52, 164, 209, .17); }.dashboard-hero .eyebrow { color: #e8fbff; }.dashboard-hero h2 { margin: 0 0 9px; font-size: clamp(1.45rem, 2.8vw, 2.15rem); letter-spacing: -.045em; }.dashboard-hero p:last-of-type { margin: 0; color: #effcff; }.dashboard-hero .primary-button { flex: none; color: var(--blue-dark); background: #fff; box-shadow: none; }.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.stat-card, .content-card { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 8px 24px rgba(43, 74, 96, .035); }.stat-card { padding: 22px; }.stat-card span, .stat-card small { display: block; color: var(--muted); font-size: .83rem; }.stat-card strong { display: block; margin: 9px 0 6px; font-size: 2rem; letter-spacing: -.05em; }.empty-state { min-height: 270px; display: grid; place-content: center; justify-items: center; padding: 32px; margin-top: 25px; text-align: center; }.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 14px; color: var(--blue-dark); background: var(--blue-pale); font-size: 1.6rem; }.empty-state h2 { margin: 0 0 7px; font-size: 1.15rem; }.empty-state p { max-width: 420px; margin: 0; color: var(--muted); line-height: 1.6; }.empty-state a { margin-top: 17px; color: var(--blue-dark); font-size: .88rem; font-weight: 800; text-decoration: none; }

/* Liste, ayarlar ve profil */
.page-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 30px 0 22px; }.search-field { width: min(380px, 100%); display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; color: #9eabbb; background: #fff; }.search-field input { min-height: 43px; padding: 0; border: 0; box-shadow: none; background: transparent; }.inventory-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }.folder-panel { align-self: start; padding: 19px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.folder-panel h2 { margin: 0 9px 12px; font-size: .88rem; }.folder-link { display: block; padding: 10px 9px; border-radius: 7px; color: #647389; font-size: .86rem; text-decoration: none; }.folder-link:hover, .folder-link.active { color: var(--blue-dark); background: var(--blue-pale); font-weight: 750; }.inventory-layout .empty-state { min-height: 340px; margin: 0; }.settings-card, .action-card, .profile-card { max-width: 850px; margin-top: 32px; padding: clamp(24px, 4vw, 38px); }.settings-card h2, .action-card h2 { margin: 0 0 8px; font-size: 1.25rem; }.settings-card > p, .action-card > p { margin: 0; color: var(--muted); }.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }.setting-row strong, .setting-row small { display: block; }.setting-row small { margin-top: 4px; color: var(--muted); }.toggle-button { width: 47px; height: 26px; padding: 3px; border: 0; border-radius: 30px; background: var(--blue); cursor: pointer; }.toggle-button span { display: block; width: 20px; height: 20px; margin-left: auto; border-radius: 50%; background: #fff; }.add-delete-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 25px; }.add-delete-button { min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border: 1px solid #dce7ef; border-radius: 10px; color: #3f5066; background: #fff; font: inherit; font-weight: 750; text-align: left; cursor: pointer; }.add-delete-button:hover { border-color: var(--blue); color: var(--blue-dark); background: var(--blue-pale); }.add-delete-button span { font-size: 1.4rem; font-weight: 400; }.profile-page { max-width: 850px; }.profile-card { margin-top: 32px; }.profile-summary { display: flex; align-items: center; gap: 19px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }.profile-photo-placeholder { width: 72px; height: 72px; flex: none; border-radius: 18px; font-size: 1.55rem; }.profile-summary h2 { margin: 0 0 5px; font-size: 1.35rem; }.profile-summary p:last-child { margin: 0; color: var(--muted); font-size: .9rem; }.profile-form { max-width: 490px; margin-top: 28px; }.profile-form + .profile-form { padding-top: 27px; border-top: 1px solid var(--line); }.profile-form .primary-button { margin-top: 22px; }
@media (max-width: 860px) { .sidebar { width: 72px; padding: 20px 10px; }.sidebar-brand { justify-content: center; padding: 0 0 28px; font-size: 0; }.sidebar-brand span { width: 35px; height: 35px; font-size: .8rem; }.nav-link { justify-content: center; padding: 13px 8px; font-size: 0; }.nav-icon { width: auto; font-size: 1.3rem; }.app-main { margin-left: 72px; }.auth-layout { grid-template-columns: 1fr; }.auth-brand { min-height: 280px; }.brand-mark { margin-bottom: 30px; } }
@media (max-width: 600px) { .auth-body { padding: 0; }.auth-layout { border-radius: 0; }.auth-brand, .auth-panel { padding: 36px 24px; }.auth-forms { grid-template-columns: 1fr; }.auth-form + .auth-form { padding: 24px 0 0; border-top: 1px solid var(--line); border-left: 0; }.app-main { margin-left: 0; padding: 0 18px 40px; }.sidebar { position: static; width: auto; min-height: auto; display: block; padding: 14px 18px; }.sidebar-brand { justify-content: flex-start; padding: 0 0 12px; font-size: 1rem; }.sidebar-brand span { width: 28px; height: 28px; }.primary-nav, .sidebar-bottom { display: flex; overflow-x: auto; }.sidebar-bottom { margin: 6px 0 0; }.nav-link { flex: none; padding: 8px 10px; font-size: .75rem; }.nav-icon { display: none; }.topbar { min-height: 95px; }.top-profile span:last-child { display: none; }.dashboard-hero, .page-actions { align-items: stretch; flex-direction: column; }.stat-grid, .add-delete-grid, .inventory-layout { grid-template-columns: 1fr; }.folder-panel { display: flex; gap: 6px; overflow-x: auto; }.folder-panel h2 { display: none; }.folder-link { flex: none; }.profile-summary { align-items: flex-start; }.setting-row { align-items: flex-start; }.settings-card, .action-card, .profile-card { padding: 23px; } }
/* Mobil acilir yan menu */
.menu-toggle, .menu-overlay { display: none; }

@media (max-width: 600px) {
    .app-main { margin-left: 0; }
    .sidebar { position: fixed; z-index: 10; width: min(280px, 82vw); min-height: 100vh; display: flex; padding: 24px 16px; transform: translateX(-105%); box-shadow: none; transition: transform .24s ease, box-shadow .24s ease; }
    .menu-open .sidebar { transform: translateX(0); box-shadow: 12px 0 32px rgba(26, 79, 104, .24); }
    .menu-toggle { position: absolute; z-index: 3; top: 29px; left: 18px; width: 38px; height: 38px; display: grid; align-content: center; gap: 5px; padding: 9px; border: 0; border-radius: 9px; background: var(--blue-pale); cursor: pointer; }
    .menu-toggle span { width: 20px; height: 2px; border-radius: 2px; background: var(--blue-dark); }
    .menu-overlay { position: fixed; z-index: 9; inset: 0; border: 0; opacity: 0; pointer-events: none; background: rgba(25, 52, 69, .38); transition: opacity .24s ease; }
    .menu-open .menu-overlay { opacity: 1; pointer-events: auto; }
    .sidebar-brand { justify-content: flex-start; padding: 0 0 20px; font-size: 1rem; }
    .sidebar-brand span { width: 28px; height: 28px; }
    .primary-nav, .sidebar-bottom { display: grid; overflow: visible; }
    .sidebar-bottom { margin-top: auto; }
    .nav-link { justify-content: flex-start; padding: 12px; font-size: .9rem; }
    .nav-icon { display: inline-grid; }
    .topbar { padding-left: 52px; }
}
/* Ekle / Sil islemleri */
.management-card, .operation-panel { max-width: 900px; margin-top: 32px; padding: clamp(22px, 4vw, 36px); }
.management-heading { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.management-heading h2, .operation-panel h2 { margin: 0 0 7px; font-size: 1.25rem; }
.management-heading p { margin: 0; color: var(--muted); font-size: .9rem; }
.management-badge { align-self: flex-start; padding: 7px 10px; border-radius: 99px; color: var(--blue-dark); background: var(--blue-pale); font-size: .75rem; font-weight: 800; }
.management-rows { display: grid; }
.management-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 14px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.management-row:last-child { border-bottom: 0; }.row-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--blue-dark); background: var(--blue-pale); font-size: 1.2rem; }.management-row strong, .management-row small { display: block; }.management-row small { margin-top: 3px; color: var(--muted); font-size: .8rem; }.row-actions { display: flex; gap: 8px; }.row-action { min-width: 86px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 12px; border: 1px solid #cfe1eb; border-radius: 9px; color: #40546b; background: #fff; font: inherit; font-weight: 800; cursor: pointer; }.row-action b { font-size: 1.5rem; font-weight: 400; line-height: .6; }.row-action.add:hover { color: var(--blue-dark); border-color: var(--blue); background: var(--blue-pale); }.row-action:disabled { opacity: .42; cursor: not-allowed; }.operation-panel { padding-bottom: 31px; }.operation-form { display: grid; max-width: 560px; }.operation-form label { margin: 18px 0 7px; color: #536278; font-size: .87rem; font-weight: 750; }.operation-form select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #d7e1ea; border-radius: 9px; color: var(--ink); background: #fbfdff; font: inherit; }.operation-form .primary-button { justify-self: start; margin-top: 24px; }.image-choices { display: flex; flex-wrap: wrap; gap: 9px; }.file-choice, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 13px; border: 1px solid #cfe1eb; border-radius: 8px; color: #46617b; background: #fff; font: inherit; font-size: .84rem; font-weight: 750; cursor: pointer; }.file-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.unit-preview { width: min(100%, 400px); max-height: 260px; margin-top: 14px; border-radius: 10px; object-fit: contain; background: var(--page); }.drawing-help { margin: 15px 0 9px; color: var(--muted); font-size: .84rem; }.area-canvas-wrap { position: relative; width: min(100%, 650px); margin-top: 12px; overflow: hidden; border: 1px solid #d7e1ea; border-radius: 11px; background: #edf3f6; line-height: 0; }.area-canvas-wrap img { width: 100%; height: auto; display: block; }.area-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }.area-list { display: grid; gap: 7px; width: min(100%, 650px); margin-top: 13px; }.area-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #496176; background: var(--blue-pale); font-size: .84rem; }.area-list-item button { border: 0; color: #aa4d4d; background: transparent; font: inherit; font-weight: 800; cursor: pointer; }.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }.panel-actions button { margin: 0; }.operation-panel[hidden] { display: none; }
@media (max-width: 600px) { .management-card, .operation-panel { padding: 21px; }.management-heading { align-items: flex-start; }.management-row { grid-template-columns: 34px 1fr; }.row-actions { grid-column: 1 / -1; }.row-action { flex: 1; }.management-row small { line-height: 1.35; }.panel-actions > * { flex: 1; }.operation-form .primary-button { width: 100%; } }
/* Mobil alt gezinme ve hesap kısayolları */
@media (max-width: 600px) {
    .menu-toggle, .menu-overlay { display: none !important; }
    .sidebar { position: fixed; z-index: 10; inset: auto 0 0; width: 100%; min-height: 0; display: block; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); transform: none; box-shadow: 0 -6px 20px rgba(26, 79, 104, .14); }
    .menu-open .sidebar { transform: none; box-shadow: 0 -6px 20px rgba(26, 79, 104, .14); }
    .sidebar-brand, .sidebar-bottom .nav-link:not(.logout-button) { display: none; }
    .primary-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
    .primary-nav .nav-link { flex: initial; flex-direction: column; justify-content: center; gap: 3px; min-height: 51px; padding: 5px 2px; border-radius: 8px; font-size: .62rem; text-align: center; white-space: nowrap; }
    .primary-nav .nav-icon { display: inline-grid; width: auto; font-size: 1rem; }
    .sidebar-bottom { display: contents; }
    .sidebar-bottom .logout-button { position: fixed; z-index: 12; top: 12px; right: 14px; display: inline-flex; width: auto; min-height: 34px; padding: 8px 10px; color: var(--blue-dark); background: var(--blue-pale); font-size: .78rem; }
    .sidebar-bottom .logout-button .nav-icon { display: none; }
    .app-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .topbar { min-height: 112px; padding: 58px 0 16px; align-items: flex-end; }
    .top-profile { position: fixed; z-index: 12; top: 12px; left: 14px; min-height: 34px; padding: 5px 9px 5px 5px; border-radius: 9px; color: var(--blue-dark); background: var(--blue-pale); }
    .top-profile span:last-child { display: inline; max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Envanter hiyerarşisi */
.hierarchy-panel { padding: 18px 14px; }
.inventory-tree { display: grid; gap: 6px; }.tree-branch { display: grid; gap: 4px; }.tree-children { display: grid; gap: 3px; margin-left: 13px; padding-left: 12px; border-left: 1px solid #d9e7ef; }.tree-item { display: flex; align-items: center; gap: 8px; padding: 8px 7px; border-radius: 7px; color: #52667d; font-size: .84rem; }.tree-icon { width: 18px; color: var(--blue-dark); text-align: center; }.room-item { color: #3a5069; font-weight: 800; background: var(--blue-pale); }.unit-item { font-weight: 700; }.area-item { color: #718198; font-size: .8rem; }.tree-empty, .tree-loading { margin: 9px 7px; color: var(--muted); font-size: .83rem; line-height: 1.5; }
@media (max-width: 600px) { .hierarchy-panel { display: block; overflow: visible; }.inventory-tree { max-height: 300px; overflow-y: auto; }.tree-children { margin-left: 11px; }.tree-item { white-space: normal; }.folder-panel h2 { display: block; } }
/* Tıklanabilir envanter ağacı ve birim önizlemesi */
.tree-item { width: 100%; border: 0; text-align: left; background: transparent; cursor: pointer; }.tree-item::after { margin-left: auto; color: #92a3b4; font-size: .7rem; content: ''; }.room-item::after, .unit-item::after { content: '›'; font-size: 1rem; transition: transform .18s; }.room-item[aria-expanded="true"]::after, .unit-item[aria-expanded="true"]::after { transform: rotate(90deg); }.tree-item.selected { color: var(--blue-dark); background: #dff4fc; }.tree-children[hidden] { display: none; }.inventory-preview { min-height: 340px; padding: clamp(24px, 4vw, 38px); }.inventory-preview > h2 { margin: 0 0 6px; font-size: 1.25rem; }.preview-description { margin: 0 0 20px; color: var(--muted); font-size: .88rem; }.inventory-image-wrap { position: relative; width: min(100%, 700px); overflow: hidden; border-radius: 12px; background: var(--page); line-height: 0; }.inventory-image-wrap img { width: 100%; display: block; }.selected-area-boundary { position: absolute; box-sizing: border-box; border: 3px solid var(--blue-dark); background: rgba(93, 184, 223, .16); line-height: normal; pointer-events: none; }.selected-area-boundary span { position: absolute; top: -27px; left: -3px; max-width: calc(100% + 6px); overflow: hidden; padding: 5px 7px; border-radius: 6px 6px 6px 0; color: #fff; background: var(--blue-dark); font-size: .78rem; font-weight: 800; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .inventory-preview { min-height: 280px; padding: 22px; }.selected-area-boundary { border-width: 2px; }.selected-area-boundary span { top: 0; left: 0; border-radius: 0 0 6px 0; } }
/* Ekle sayfası butonları ve Genel Bakış kaldırıldıktan sonraki navigasyon */
.panel-actions { width: min(100%, 560px); }
.panel-actions > button { flex: 1 1 0; min-width: 0; }
.panel-actions > button { min-height: 44px; }
.panel-actions .primary-button { margin: 0; justify-self: auto; }
/* Oda seçildiğinde birim kartları */
.unit-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(100%, 900px); }.unit-photo-card { min-height: 180px; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; text-align: left; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 5px 16px rgba(43, 74, 96, .05); transition: transform .18s, border-color .18s; }.unit-photo-card:hover { border-color: var(--blue); transform: translateY(-2px); }.unit-photo-card img { width: 100%; height: 130px; display: block; object-fit: cover; background: var(--page); }.unit-photo-card span { display: block; padding: 12px; font-size: .86rem; }
.room-item::after { content: ''; }
.unit-preview-title { display: flex; align-items: center; gap: 10px; }.unit-preview-title h2 { margin: 0; }.unit-back-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #cfe1eb; border-radius: 8px; color: var(--blue-dark); background: var(--blue-pale); font: inherit; font-size: 1.2rem; cursor: pointer; }.unit-back-button:hover { border-color: var(--blue); background: #dff4fc; }
/* Kart tabanlı oda, birim ve bölge seçimi */
.card-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.selection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 720px); margin-top: 8px; }.selection-card { min-height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 9px; border: 1px solid #d7e1ea; border-radius: 10px; color: #51657d; background: #fff; font: inherit; font-size: .82rem; font-weight: 750; text-align: center; cursor: pointer; }.selection-card:hover, .selection-card.selected { border-color: var(--blue); color: var(--blue-dark); background: var(--blue-pale); }.selection-card-image { min-height: 130px; flex-direction: column; justify-content: flex-start; padding: 0; }.selection-card-image img { width: 100%; height: 92px; display: block; object-fit: cover; background: var(--page); }.selection-card-image span { display: block; padding: 9px; }.selection-empty { grid-column: 1 / -1; margin: 4px 0; color: var(--muted); font-size: .83rem; }.operation-form .selection-grid + label { margin-top: 18px; }
@media (max-width: 600px) { .selection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.selection-card { min-height: 58px; padding: 7px; font-size: .74rem; }.selection-card-image { min-height: 112px; }.selection-card-image img { height: 76px; } }
@media (max-width: 700px) { .unit-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .unit-card-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .primary-nav { grid-template-columns: repeat(3, 1fr); } }
.selected-area-boundary { padding: 0; cursor: pointer; pointer-events: auto; }
.selected-area-boundary:hover, .selected-area-boundary.selected { z-index: 1; border-color: #087ba7; background: rgba(8, 123, 167, .28); }
.selected-area-boundary span { pointer-events: none; }
.area-items-section { width: min(100%, 900px); margin-top: 26px; }
.area-items-section h3 { margin: 0 0 12px; font-size: 1rem; }
.inventory-item-card { min-height: 180px; overflow: hidden; padding: 0 0 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 5px 16px rgba(43, 74, 96, .05); }
.inventory-item-card img { width: 100%; height: 130px; display: block; margin-bottom: 12px; object-fit: cover; background: var(--page); }
.inventory-item-card strong, .inventory-item-card span { display: block; padding: 0 12px; }
.inventory-item-card strong { font-size: .86rem; }
.inventory-item-card span { margin-top: 5px; color: var(--muted); font-size: .8rem; }
@media (max-width: 600px) { .app-body { overflow-x: hidden; }.app-main, .operation-panel, .operation-form, .selection-grid { min-width: 0; }.sidebar { max-width: 100vw; } }
@media (max-width: 600px) {
    :root { --mobile-nav-clearance: calc(108px + env(safe-area-inset-bottom)); }
    html, body, .app-body { width: 100%; max-width: 100%; overflow-x: clip; }
    .sidebar { right: auto; bottom: 0; left: 0; width: 100vw; max-width: none; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
    .app-main { width: 100%; margin: 0; padding-right: 18px; padding-bottom: var(--mobile-nav-clearance); padding-left: 18px; }
    .management-card, .operation-panel { width: 100%; margin-right: auto; margin-left: auto; }
    .operation-form { width: 100%; }
    .operation-panel, #operation-status { scroll-margin-bottom: var(--mobile-nav-clearance); }
    input, textarea, select { font-size: 16px; }
    .add-page { min-width: 100vw; }
    .add-page .app-main { min-width: 100vw; max-width: 100vw; }
    .add-page .management-card, .add-page .operation-panel { max-width: calc(100vw - 36px); }
    .add-page .operation-form, .add-page .selection-grid, .add-page .area-canvas-wrap, .add-page .area-list, .add-page input { max-width: 100%; }
}
.camera-fallback { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.image-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; width: min(100%, 400px); }
.image-choices .file-choice { width: 100%; height: 52px; min-width: 0; min-height: 52px; max-height: 52px; padding: 8px; }
.operation-form .image-choices .file-choice { margin: 0; }
.camera-capture-dialog { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(17, 38, 54, .65); }
.camera-capture-dialog[hidden] { display: none; }
.camera-capture-card { width: min(100%, 680px); overflow: hidden; border-radius: 15px; background: #fff; box-shadow: 0 20px 52px rgba(12, 31, 47, .3); }
.camera-capture-card video { width: 100%; max-height: min(70vh, 520px); display: block; object-fit: contain; background: #172734; }
.camera-capture-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px; }
.camera-capture-actions .primary-button { margin: 0; }
.quick-manager { width: min(100%, 720px); margin-top: 12px; padding: 14px; border: 1px solid #d7e1ea; border-radius: 10px; background: #fbfdff; }
.quick-manager-heading strong, .quick-manager-heading small { display: block; }.quick-manager-heading strong { color: #40546b; font-size: .88rem; }.quick-manager-heading small { margin-top: 3px; color: var(--muted); font-size: .78rem; }
.quick-manager-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }.quick-manager-actions input { flex: 1 1 180px; min-width: 0; }.quick-manager-actions button { margin: 0; }.danger-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 13px; border: 1px solid #edcaca; border-radius: 8px; color: #a54848; background: #fff; font: inherit; font-size: .84rem; font-weight: 750; cursor: pointer; }.danger-button:disabled { opacity: .5; cursor: not-allowed; }
.selection-card-image { min-height: 0; align-items: stretch; }.selection-card-image img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; }.selection-card-image span { min-height: 40px; display: -webkit-box; overflow: hidden; padding: 9px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.inventory-item-card { min-height: 0; display: flex; flex-direction: column; padding-bottom: 14px; }.inventory-item-card img { aspect-ratio: 1 / 1; height: auto; margin-bottom: 12px; object-fit: cover; }.inventory-item-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.inventory-item-details { display: grid; gap: 4px; margin-top: 8px; }.inventory-item-card .inventory-item-details span { margin: 0; color: #61748a; font-size: .76rem; line-height: 1.3; overflow-wrap: anywhere; }
.unit-photo-card { min-height: 0; }.unit-photo-card img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; }.unit-photo-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-search { display: flex; flex: 1; gap: 10px; }.inventory-search .search-field { flex: 1; }.inventory-search .primary-button { flex: none; margin: 0; }.inventory-search-results { margin: 0 0 20px; padding: clamp(20px, 3vw, 28px); }.inventory-search-results h2 { margin: 0 0 16px; font-size: 1.15rem; }
.tree-item-row { display: flex; align-items: center; gap: 3px; }.tree-item-row .tree-item { flex: 1; min-width: 0; }.tree-row-actions { display: flex; gap: 2px; }.inventory-action { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid #cfe1eb; border-radius: 7px; color: #45647a; background: #fff; font: inherit; font-weight: 800; line-height: 1; cursor: pointer; }.inventory-action:hover { border-color: var(--blue); color: var(--blue-dark); background: var(--blue-pale); }.inventory-action:last-child { color: #a54848; }.inventory-item-card, .unit-photo-card { position: relative; }.inventory-card-actions { position: absolute; z-index: 3; top: 8px; right: 8px; display: flex; gap: 4px; }.inventory-card-actions .inventory-action { box-shadow: 0 2px 7px rgba(19, 44, 61, .2); }
.edit-card { max-width: 780px; margin-top: 28px; padding: clamp(22px, 4vw, 34px); }.edit-back { display: inline-block; margin-bottom: 20px; color: var(--blue-dark); font-size: .88rem; font-weight: 800; text-decoration: none; }.edit-card h2 { margin: 0 0 8px; font-size: 1.25rem; }.edit-area-details { display: grid; grid-template-columns: 130px 1fr; gap: 10px 16px; margin: 22px 0 0; }.edit-area-details dt { color: var(--muted); font-weight: 750; }.edit-area-details dd { margin: 0; color: var(--ink); }
.bulk-card { max-width: 920px; margin-top: 26px; padding: clamp(20px, 3vw, 30px); }.bulk-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }.bulk-heading h2, .bulk-editor h2 { margin: 0 0 6px; font-size: 1.2rem; }.bulk-heading p, .bulk-editor > p { margin: 0; color: var(--muted); font-size: .86rem; }.bulk-tools { display: flex; gap: 10px; margin-top: 20px; }.bulk-tools .search-field { flex: 1; }.bulk-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }.bulk-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid #d7e1ea; border-radius: 10px; background: #fff; cursor: pointer; }.bulk-item:has(input:checked) { border-color: var(--blue); background: var(--blue-pale); }.bulk-item input { width: 18px; height: 18px; flex: none; accent-color: var(--blue-dark); }.bulk-item-text { min-width: 0; }.bulk-item strong, .bulk-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.bulk-item strong { color: #40546b; font-size: .86rem; }.bulk-item small { margin-top: 3px; color: var(--muted); font-size: .75rem; }.bulk-editor .operation-form { max-width: 680px; }.bulk-editor .primary-button { min-width: 220px; }
@media (max-width: 600px) { .primary-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }.primary-nav .nav-link { min-width: 0; padding: 8px 3px; font-size: .64rem; text-align: center; }.primary-nav .nav-icon { display: block; margin: 0 auto 3px; font-size: 1rem; }.bulk-card { margin-top: 18px; padding: 20px; }.bulk-items { grid-template-columns: 1fr; }.bulk-tools { flex-direction: column; }.bulk-tools .secondary-button { width: 100%; }.bulk-heading { align-items: flex-start; }.bulk-heading .management-badge { flex: none; }.bulk-editor .primary-button { width: 100%; } }
@media (max-width: 600px) { .inventory-search { width: 100%; }.inventory-search .search-field { width: auto; }.inventory-search .primary-button { min-width: 68px; padding-right: 12px; padding-left: 12px; }.inventory-search-results { margin-bottom: 16px; } }
@media (max-width: 600px) { .inventory-action { width: 25px; height: 25px; }.tree-row-actions { gap: 1px; } }