:root {
    --bg: #F6F4F1;
    --surface: #FFFFFF;
    --ink: #1E1C1A;
    --muted: #5F5A55;
    --line: #E4DFD9;
    --line-soft: #F0ECE6;
    --input: #CFC8BF;
    --gold: #8A6A1F;
    --gold-dark: #6B5116;
    --gold-soft: #F5EDDA;
    --gold-tint: #FBF6EA;
    --black: #0B0B0B;
    --danger: #A3261B;
    --danger-soft: #FBE9E7;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

a { color: var(--gold); }
a:hover { color: var(--gold-dark); }

h1 { font-size: 26px; margin: 0; }
h2 { font-size: 18px; margin: 0; }

/* Yerleşim */
.shell { display: flex; flex-wrap: wrap; min-height: 100vh; }
.side {
    flex: 1 1 230px; max-width: 260px;
    background: var(--black); color: #fff;
    padding: 20px 14px; display: flex; flex-direction: column; gap: 16px;
}
.side .brand img { width: 170px; display: block; margin: 0 8px; }
.bar { display: block; }
.side .links { display: flex; flex-direction: column; gap: 2px; }
.side .links a {
    padding: 11px 12px; border-radius: 10px; color: #E9E4DD;
    text-decoration: none; font-weight: 600;
}
.side .links a:hover { background: #1f1f1f; color: #fff; }
.side .links a.active { background: var(--gold); color: #fff; }
.side .me { margin-top: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 0 12px; color: #CFC8BF; font-size: 13px; }
.side .me a, .side .me .linklike { color: #E6C77A; }
.content {
    flex: 999 1 560px; min-width: 0;
    padding: 28px; display: flex; flex-direction: column; gap: 20px;
}
.bare { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }

/* Masaüstünde menü düğmesi yok; .bar yalnızca logoyu taşır. */
.menu-btn { display: none; }

/* Telefon ve tablet: üstte ince çubuk, menü düğmeyle açılır. */
@media (max-width: 1024px) {
    /* Sarmalı esnek düzen satırı içerik genişliğine açıyordu; burada düz blok yeterli. */
    .shell { display: block; }
    .side {
        max-width: none; position: sticky; top: 0; z-index: 10;
        padding: 8px 16px; gap: 0;
    }
    .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .side .brand img { width: 104px; margin: 0; }
    .menu-btn {
        display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
        background: #1f1f1f; color: #fff; border: 1px solid #333; border-radius: 12px;
        font: inherit; font-weight: 600; cursor: pointer;
    }
    .menu-btn span { font-size: 18px; line-height: 1; }
    /* #form gibi bağlantılarda başlık yapışkan çubuğun altında kalmasın. */
    [id] { scroll-margin-top: 84px; }
    .side .links, .side .me { display: none; }
    .side.open { max-height: 100vh; overflow-y: auto; }
    .side.open .links {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 6px; padding: 12px 0 8px;
    }
    .side.open .links a { background: #1a1a1a; padding: 12px 14px; }
    .side.open .links a.active { background: var(--gold); }
    .side.open .me { display: flex; padding: 8px 2px 6px; border-top: 1px solid #222; }
    .content { padding: 20px; gap: 16px; }
}

@media (max-width: 600px) {
    .side.open .links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content { padding: 16px 12px; }
    h1 { font-size: 22px; }
    .card { padding: 14px; border-radius: 14px; }
    .kpi { padding: 12px 14px; }
    .kpi .value { font-size: 20px; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .head > .btn, .head > .actions { width: 100%; }
    .head > .actions > .btn { flex: 1; }
}

/* Telefon ve dikey tablette tablolar kart listesine dönüşür; etiketleri _Layout'taki betik yazar. */
@media (max-width: 900px) {
    .table-wrap { overflow: visible; }
    .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
    .table-wrap thead { display: none; }
    .table-wrap tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
    .table-wrap tr:first-child { padding-top: 0; }
    .table-wrap tr:last-child { border-bottom: 0; padding-bottom: 0; }
    .table-wrap td { display: flex; gap: 12px; padding: 3px 0; border: 0; text-align: right; white-space: normal; }
    .table-wrap td::before { content: attr(data-label); flex: 0 0 38%; text-align: left; color: var(--muted); font-size: 13px; }
    .table-wrap td:not([data-label])::before { content: none; }
    .table-wrap td .v { flex: 1; min-width: 0; }
    .table-wrap td:not([data-label]) .v { text-align: left; }
    .table-wrap td.blank { display: none; }
    .table-wrap td:first-child .v { font-weight: 700; }
    .table-wrap td .row-actions { justify-content: flex-end; padding-top: 4px; }
    .table-wrap tr.total { background: var(--gold-tint); border-radius: 10px; padding: 10px; margin-top: 8px; }
    .table-wrap tr.selected { background: var(--gold-tint); border-radius: 10px; padding: 10px; }
    .table-wrap tr.selected td { background: none; }
    .table-wrap tr.group { padding: 8px 10px; border-radius: 10px; background: var(--bg); border-bottom: 0; }
    .table-wrap tr.group.today { background: var(--gold-soft); }
    .table-wrap tr.group td { background: none; padding: 0; border: 0; }
    .table-wrap td .actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* Tablette kartlar iki sütun. */
@media (min-width: 601px) and (max-width: 900px) {
    .table-wrap tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
    .table-wrap tr, .table-wrap tr:first-child, .table-wrap tr:last-child { padding: 10px 0; border-bottom: 1px solid var(--line); }
    .table-wrap tr.total, .table-wrap tr.group, .table-wrap tr:has(td.empty) { grid-column: 1 / -1; }
    .table-wrap tr.total, .table-wrap tr.selected { padding: 10px; }
}

/* Bileşenler */
.head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.sub { color: var(--muted); font-size: 14px; }
.card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.two { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.two > * { flex: 1 1 340px; min-width: 0; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi .label { font-size: 13px; color: var(--muted); }
.kpi .value { font-size: 24px; font-weight: 700; }
.kpi .note { font-size: 12px; color: var(--muted); }
.kpi.accent { background: var(--gold); border-color: var(--gold); color: #fff; }
.kpi.accent .label, .kpi.accent .note { color: #fff; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--gold);
    background: var(--gold); color: #fff; font: inherit; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--gold-dark); color: #fff; }
.btn.dark { background: var(--ink); border-color: var(--ink); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--input); }
.btn.ghost:hover { background: var(--gold-tint); }
.btn.danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn.block { width: 100%; }
.linklike { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; color: var(--gold); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

form.stack, .stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.row > .field { flex: 1 1 160px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .label { font-size: 13px; font-weight: 600; }
.field .hint { font-size: 12px; color: var(--muted); }
input[type=text], input[type=password], input[type=tel], input[type=search], input[type=date],
input[type=datetime-local], input[type=time], input[type=number], select, textarea {
    min-height: 44px; padding: 8px 12px; border: 1px solid var(--input); border-radius: 10px;
    font: inherit; background: #fff; color: var(--ink); width: 100%;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.field-validation-error, .validation-summary-errors { color: var(--danger); font-size: 13px; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* Tarih filtreleri: telefonda iki tarih yan yana sığsın. */
.filter .row > .field { flex-basis: 130px; }
.day-nav { flex: 2 1 320px; display: flex; gap: 8px; align-items: flex-end; }
.day-nav .field { flex: 1; min-width: 0; }
.day-nav input { min-width: 0; }
.filter .row > .field.wide { flex-basis: 220px; }
.day-nav > .btn { flex: none; min-width: 44px; padding: 0 12px; font-size: 18px; }
.day-nav > .btn:last-child { font-size: 15px; }

/* Seçim düğmeleri (radyo) */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { position: relative; }
.choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choices span {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--input); border-radius: 999px; background: #fff;
    font-weight: 600; font-size: 14px; cursor: pointer;
}
.choices input:checked + span { background: var(--gold); border-color: var(--gold); color: #fff; }
.choices input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.choices.even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices.even span { justify-content: center; border-radius: 12px; width: 100%; }
.choices.even label { display: flex; }

/* Tablolar */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.selected td { background: var(--gold-tint); }
.row-actions { display: flex; gap: 14px; justify-content: flex-end; align-items: center; white-space: nowrap; }
.card.editing { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
tr.total td { font-weight: 700; border-top: 2px solid var(--line); }
.strong { font-weight: 700; }
.gold { color: var(--gold); }
.muted { color: var(--muted); }

.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #ECEAE7; color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--gold-soft); color: var(--gold-dark); }
.pill.wait { background: #F1ECE4; color: #5F4A2E; }
.pill.bad { background: var(--danger-soft); color: var(--danger); }

.flash { padding: 12px 16px; border-radius: 12px; font-weight: 600; }
.flash.ok { background: var(--gold-soft); color: var(--gold-dark); }
.flash.err { background: var(--danger-soft); color: var(--danger); }
.flash.warn { background: #F1ECE4; color: #5F4A2E; }

.list { display: flex; flex-direction: column; gap: 8px; }
.item {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 12px 14px; display: flex; gap: 14px; align-items: center; color: inherit; text-decoration: none;
}
.item .time { font-weight: 700; width: 52px; flex: none; }
.item .body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item .body small { color: var(--muted); font-size: 13px; }

.summary { background: var(--gold-tint); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.summary div { display: flex; justify-content: space-between; gap: 12px; }
.summary .big { font-size: 17px; font-weight: 700; border-top: 1px solid var(--line); padding-top: 8px; }

.login { width: 100%; max-width: 380px; }
.login img { width: 220px; display: block; margin: 0 auto 8px; }
.empty { color: var(--muted); padding: 8px 0; }

/* Görünüm sekmeleri */
.tabs { display: flex; gap: 4px; padding: 4px; background: #ECE8E2; border-radius: 12px; width: fit-content; max-width: 100%; overflow-x: auto; }
.tabs a { padding: 9px 16px; border-radius: 9px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.tabs a.active { background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.12); color: var(--gold-dark); }

/* Haftalık tablo: gün başlık satırları */
tr.group td { background: var(--bg); font-weight: 700; text-transform: capitalize; padding: 8px; border-bottom: 1px solid var(--line); }
tr.group.today td { background: var(--gold-soft); color: var(--gold-dark); }
td .actions { flex-wrap: nowrap; }

/* Haftalık pano: günler sütun, randevular kart */
.board { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.board-col { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; }
.board-col.today { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.board-head { display: flex; flex-direction: column; padding: 10px 12px 8px; border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none; position: relative; text-transform: capitalize; }
.board-head:hover { background: var(--gold-tint); border-radius: 14px 14px 0 0; }
.board-head .muted { font-size: 13px; }
.board-head .count { position: absolute; top: 10px; right: 10px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-dark); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.board-col.today .board-head .count { background: var(--gold); color: #fff; }
.board-items { display: flex; flex-direction: column; gap: 8px; padding: 10px; flex: 1; }
.board-items .empty { font-size: 13px; padding: 4px 2px; }
.board-add { padding: 8px 12px 12px; font-size: 13px; font-weight: 600; text-decoration: none; }
.appt { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; font-size: 14px; }
.appt:hover { background: var(--gold-tint); }
.appt .appt-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 2px; }
.appt .small { font-size: 12px; }
.appt .pill { font-size: 11px; padding: 2px 8px; }
.appt.off { opacity: .6; }
.appt.off .strong:not(.appt-top .strong) { text-decoration: line-through; }
/* Her çalışana sabit renk: randevu kartının kenarı ve çalışan adı bu renkte. */
.emp-0 { --emp: #8A6A1F; --emp-soft: #F5EDDA; }
.emp-1 { --emp: #2F6F6A; --emp-soft: #E2F0EE; }
.emp-2 { --emp: #7A3E6E; --emp-soft: #F3E6F0; }
.emp-3 { --emp: #3E5A8A; --emp-soft: #E5ECF6; }
.emp-4 { --emp: #A3502A; --emp-soft: #F8E8DF; }
.emp-5 { --emp: #5E6B2E; --emp-soft: #EDF0DF; }
.appt[class*="emp-"] { border-left-color: var(--emp); }
.emp-name { display: inline-block; align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-weight: 700; color: var(--emp, var(--ink)); background: var(--emp-soft, var(--line-soft)); white-space: nowrap; }
.appt .emp-name { font-size: 13px; margin: 2px 0; }

/* Telefonda günler alt alta; boş günler kısa kalır. */
@media (max-width: 700px) {
    .board { grid-template-columns: 1fr; overflow: visible; }
    .board-head { flex-direction: row; gap: 8px; align-items: baseline; padding-right: 44px; }
    .tabs { width: 100%; }
    .tabs a { flex: 1; text-align: center; padding: 9px 8px; }
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Günlük özet: gün onayı */
.card.approval { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-left: 4px solid var(--input); }
.card.approval.done { background: var(--gold-tint); border-left-color: var(--gold); }
.card.approval.done strong { color: var(--gold-dark); }

/* İşlem fişi satırları */
.lines { display: flex; flex-direction: column; gap: 8px; }
.lines:not(:has(.line:not([hidden]))) { display: none; }
.line { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: var(--gold-tint); border: 1px solid var(--line); border-radius: 12px; }
.line .line-name { flex: 1; font-weight: 600; min-width: 0; }
.line > input[data-kind] { flex: 0 0 140px; width: 140px; font-weight: 600; }
.line.product select { flex: 1; min-width: 0; }
.line .qty { flex: 0 0 70px; width: 70px; }
.line-remove { flex: none; width: 36px; height: 36px; border: 1px solid var(--input); border-radius: 10px; background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); }
.line-remove:hover { color: var(--danger); border-color: var(--danger); }
@media (max-width: 600px) {
    .line.product { flex-wrap: wrap; }
    .line.product select { flex-basis: 100%; }
    .line.product > input[data-kind] { flex: 1 1 0; width: auto; min-width: 0; }
    .line.product .qty { min-width: 0; }
}

/* Günlük özet: Kalan hesabı */
.card.remain .equation { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin-top: 10px; font-size: 20px; font-weight: 700; }
.card.remain .equation small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.card.remain .equation .op { color: var(--muted); font-weight: 400; }
.card.remain .equation .result { background: var(--gold); color: #fff; padding: 8px 14px; border-radius: 12px; font-size: 24px; }
.card.remain .equation .result small { color: #fff; }
.card.remain .equation .result.neg { background: var(--danger); }

/* WhatsApp bağlantı düğmesi */
.btn.wa { background: #1F7A4D; border-color: #1F7A4D; color: #fff; }
.btn.wa:hover { background: #17603C; color: #fff; }
/* Gönderildi: açık zemin ve onay işareti; randevu değişince yeniden dolu yeşil görünür. */
.btn.wa.sent { background: #E3F1E9; border-color: #1F7A4D; color: #1F7A4D; }
.btn.wa.sent::before { content: "✓ "; }
.wa-mark { color: #1F7A4D; font-weight: 600; }