:root {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-strong: #e7f0ef;
    --text: #17211f;
    --muted: #667370;
    --line: #d9e2df;
    --primary: #116466;
    --primary-dark: #0b4c4d;
    --accent: #c88a32;
    --danger: #b34040;
    --shadow: 0 12px 30px rgba(17, 100, 102, 0.13);
    --contact-name-weight: 530;
}

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--line);
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--muted);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.app-shell {
    min-height: 100vh;
    padding-bottom: 82px;
}

.is-guest .app-shell,
.is-authenticated .auth-shell {
    display: none;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
}

.auth-panel {
    width: min(520px, 100%);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 18px;
}

.auth-brand h1,
.auth-brand p {
    margin: 0;
}

.auth-brand h1 {
    font-size: 26px;
}

.auth-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-title-icon {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(17, 100, 102, 0.22);
    border-radius: 8px;
    background: var(--surface-strong);
    color: var(--primary);
}

.auth-title-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.auth-brand p {
    margin-top: 8px;
    color: var(--muted);
}

.auth-switch {
    margin-top: 4px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.auth-switch a {
    color: var(--primary-dark);
    font-weight: 700;
    text-decoration: underline;
}

.auth-form {
    display: none;
    gap: 10px;
    margin-top: 16px;
}

.auth-form.is-active {
    display: grid;
}

.auth-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.required-mark {
    color: var(--danger);
    font-weight: 800;
}

.field-label {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.field-label .required-mark {
    margin-left: 3px;
}

.auth-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    padding: 12px 13px;
    outline: none;
}

.phone-source {
    display: none;
}

.phone-composite {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
}

.phone-composite[hidden] {
    display: none;
}

.phone-composite input {
    width: 100%;
}

.phone-country {
    text-align: center;
    font-weight: 800;
}

.form-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.form-icon-field {
    position: relative;
}

.form-field-icon {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: var(--primary-dark);
}

.form-field-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.form-icon-field > .form-field-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
}

.form-icon-field > input,
.form-icon-field > textarea {
    padding-left: 42px;
}

.address-row .form-icon-field > .form-field-icon {
    top: 21px;
    transform: none;
}

.date-icon-field {
    position: relative;
}

.date-placeholder-text {
    position: absolute;
    inset: 1px;
    left: 42px;
    z-index: 1;
    display: flex;
    align-items: center;
    background: var(--surface);
    color: var(--muted);
    border-radius: 8px;
    cursor: pointer;
}

.date-placeholder-text[hidden] {
    display: none;
}

.contact-phone-field > .form-field-label {
    position: absolute;
}

.contact-phone-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 38px;
    gap: 8px;
    align-items: stretch;
}

.contact-phone-row.website-field-row,
.extra-phone-row.website-field-row {
    grid-template-columns: minmax(0, 1fr) 38px;
}

.website-field-row > .form-icon-field {
    min-width: 0;
}

.website-field-row .form-icon-field > .form-field-icon {
    z-index: 2;
}

.contact-phone-row > .form-field-icon,
.extra-phone-row > .form-field-icon {
    align-self: center;
    justify-self: center;
}

.phone-add-button {
    display: grid;
    width: 38px;
    min-height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
    color: var(--primary-dark);
    text-decoration: none;
}

.phone-add-button:disabled,
.phone-remove-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.phone-add-button svg,
.phone-remove-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.extra-phone-list {
    display: grid;
    gap: 8px;
}

.extra-phone-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 38px;
    gap: 8px;
    align-items: stretch;
}

.extra-phone-row[hidden] {
    display: none;
}

.phone-remove-button {
    display: grid;
    width: 38px;
    min-height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff6f5;
    color: var(--danger);
}

.password-field {
    position: relative;
    display: block;
}

.password-field input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 2;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--primary-dark);
}

.password-toggle:hover,
.password-toggle.is-visible {
    background: var(--surface-strong);
}

.password-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.password-toggle::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-38deg);
}

.password-toggle.is-visible::after {
    display: none;
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.auth-form .remember-option {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 9px;
    color: var(--text);
    cursor: pointer;
}

.auth-form .remember-option input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}

.forgot-button {
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.forgot-form {
    display: none;
    gap: 10px;
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    padding: 12px;
}

.forgot-form.is-open {
    display: grid;
}

.forgot-step {
    display: grid;
    gap: 10px;
}

/* Formdaki etiketler display:grid aldigi icin hidden ozniteligi ayrica uygulanir. */
.forgot-form [hidden] {
    display: none;
}

.forgot-verify-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.forgot-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.forgot-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    padding: 12px 13px;
    outline: none;
}

.auth-message {
    min-height: 20px;
    margin: 10px 0 0;
    color: var(--danger);
    font-size: 13px;
    font-weight: 700;
}

.auth-message:not(:empty) {
    border: 1px solid rgba(179, 64, 64, 0.28);
    border-radius: 8px;
    background: #fff7f7;
    padding: 10px 12px;
}

.auth-message[data-type="success"] {
    border-color: rgba(17, 100, 102, 0.25);
    background: var(--surface-strong);
    color: var(--primary-dark);
}

.top-actions {
    display: flex;
    gap: 8px;
}

.brand-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-home {
    display: grid;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
    text-decoration: none;
}

.brand-home:hover h1,
.brand-home:focus-visible h1 {
    color: var(--primary);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 18px 14px;
    background: rgba(245, 247, 246, 0.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.topbar h1,
.section-head h2 {
    margin: 0;
    letter-spacing: 0;
}

.topbar h1 {
    font-size: 24px;
}

.menu-toggle {
    flex: 0 0 42px;
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 28;
    background: rgba(23, 33, 31, 0.34);
}

.side-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 29;
    width: min(320px, 86vw);
    transform: translateX(-100%);
    background: var(--surface);
    box-shadow: 16px 0 34px rgba(23, 33, 31, 0.18);
    padding: 18px;
    transition: transform 180ms ease;
}

.side-drawer.is-open {
    transform: translateX(0);
}

.side-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.side-drawer-head h2 {
    margin: 0;
    font-size: 24px;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.icon-button {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--primary);
    font-weight: 800;
}

.icon-button[hidden] {
    display: none;
}

.icon-button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.favorite-header-button.is-favorite {
    border-color: rgba(202, 138, 4, 0.45);
    background: #fef3c7;
    color: #b45309;
}

.favorite-header-button.is-favorite svg {
    fill: currentColor;
}

.notification-button {
    color: var(--primary-dark);
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    min-width: 19px;
    height: 19px;
    place-items: center;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.notification-badge[hidden] {
    display: none;
}

.main-content {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 16px;
}

.summary-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.summary-band article,
.account-grid article,
.vehicle-row,
.timeline article,
.person-row,
.menu-list button,
.settings-list article,
.notification-list article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.notification-list article[data-notification-approval="incoming"] {
    cursor: pointer;
}

.summary-band article {
    min-height: 78px;
    padding: 13px;
}

.summary-band span,
.account-grid span,
.timeline span,
.vehicle-row span,
.person-main small {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.summary-band strong,
.account-grid strong {
    display: block;
    margin-top: 8px;
    font-size: 18px;
}

.screen {
    display: none;
}

.screen.is-active {
    display: block;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.section-head h2 {
    font-size: 22px;
}

/* Gorev listesi basligi: geri butonu + baslik hep sola yaslı dursun (PC'de zaten
   geri butonu gizli oldugu icin baslik tek basina sola yaslanıyordu; mobilde
   space-between yuzunden basligi sag kenara itiyordu). */
#screen-todo-tasks .section-head {
    justify-content: flex-start;
}

.primary-button,
.secondary-button {
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    padding: 0 14px;
    font-weight: 700;
}

.primary-button {
    background: var(--primary);
    color: #fff;
}

.secondary-button {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--primary);
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.search-box input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Kisi sahiplik filtresi (Tumu / Sadece benim / paylasan kisi) */
.contact-owner-filter {
    display: grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary-dark);
    cursor: pointer;
}

.contact-owner-filter svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-owner-filter.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.person-main small.shared-owner-badge {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
}

.favorite-contacts {
    margin-bottom: 12px;
}

#profile-pin-slot {
    margin-bottom: 12px;
}

.favorite-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.favorite-head h3,
.letter-heading,
.date-heading {
    margin: 0;
    color: var(--primary-dark);
    font-size: 14px;
}

.favorite-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.favorite-grid::-webkit-scrollbar {
    display: none;
}

.favorite-arrows {
    display: none;
    gap: 6px;
}

.favorite-arrows button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--primary-dark);
}

.favorite-arrows svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.favorite-card,
.favorite-empty {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.favorite-card {
    flex: 0 0 136px;
    scroll-snap-align: start;
}

.favorite-card button {
    display: grid;
    width: 100%;
    min-height: 108px;
    align-content: center;
    justify-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    padding: 12px;
    color: var(--text);
    text-align: center;
}

.favorite-card strong,
.favorite-card small {
    display: block;
}

.favorite-card strong {
    font-weight: var(--contact-name-weight);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.favorite-card small {
    white-space: nowrap;
}

.favorite-card small,
.favorite-empty {
    color: var(--muted);
    font-size: 13px;
}

.favorite-empty {
    flex: 1 0 100%;
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px;
}

.contact-sort {
    display: flex;
    gap: 8px;
    margin: 8px 0 12px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.contact-sort button {
    min-height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--primary-dark);
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.contact-sort button.is-active {
    border-color: rgba(17, 100, 102, 0.22);
    background: var(--surface-strong);
    color: var(--primary-dark);
}

.contacts-import-button {
    margin: 0 0 12px;
    width: 100%;
}

.contact-tag-filters {
    display: contents;
}

.contact-tag-filters[hidden] {
    display: none;
}

button.tag-add-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    min-height: 38px;
    border: 1px solid rgba(200, 138, 50, 0.35);
    border-radius: 999px;
    background: rgba(200, 138, 50, 0.08);
    color: var(--accent);
}

.tag-quick-add-input {
    flex: 0 0 auto;
    width: 140px;
    min-height: 38px;
    border: 1px solid rgba(200, 138, 50, 0.35);
    border-radius: 999px;
    background: rgba(200, 138, 50, 0.08);
    padding: 0 14px;
    font-size: 13px;
    color: var(--accent);
}

.tag-quick-add-input[hidden] {
    display: none;
}

.tag-add-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.tag-filter-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

button.tag-filter-label {
    min-height: 32px;
    border: 1px solid rgba(200, 138, 50, 0.35);
    border-radius: 8px;
    background: rgba(200, 138, 50, 0.08);
    color: var(--accent);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
}

button.tag-filter-label.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.tag-context-menu {
    position: fixed;
    z-index: 1200;
    padding: 6px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow);
    border: 1px solid rgba(17, 100, 102, 0.1);
    display: flex;
    flex-direction: row;
    gap: 4px;
    animation: tag-context-menu-in 0.12s ease-out;
}

@keyframes tag-context-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tag-context-menu-item {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--accent);
    min-height: 0;
}

.tag-context-menu-item svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tag-context-menu-item:hover,
.tag-context-menu-item:focus-visible {
    background: var(--surface-strong);
}

.tag-context-menu-item.danger {
    color: #c0392b;
}

.action-menu {
    position: fixed;
    z-index: 1200;
    min-width: 180px;
    max-width: 260px;
    padding: 6px 0;
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    animation: tag-context-menu-in 0.12s ease-out;
}

.action-menu.action-menu--compact {
    min-width: 0;
    width: max-content;
}

.action-menu-header {
    margin: 0;
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.action-menu-divider {
    height: 1px;
    margin: 6px 0;
    background: var(--line);
}

.action-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-align: left;
}

.action-menu-item:hover,
.action-menu-item:focus-visible {
    background: var(--surface-strong);
}

.action-menu-item.danger {
    color: var(--danger);
}

.action-menu-item-check {
    flex: 0 0 14px;
    font-size: 12px;
    color: var(--primary);
}

.action-menu-submenu-trigger {
    justify-content: space-between;
}

.action-menu-submenu-arrow {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--muted);
    font-size: 16px;
}

.action-menu-submenu {
    min-width: 160px;
}


.action-menu-icon-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px 4px;
}

.action-menu-icon-button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--primary);
    min-height: 0;
}

.action-menu-icon-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.action-menu-icon-button:hover,
.action-menu-icon-button:focus-visible {
    background: var(--surface-strong);
}

.action-menu-icon-button.danger {
    color: var(--danger);
}

.action-menu-icon-button.is-active {
    color: #b45309;
}

.action-menu-icon-button.is-active svg {
    fill: currentColor;
}

.contact-tag-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-tag-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.contact-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(200, 138, 50, 0.35);
    border-radius: 999px;
    background: rgba(200, 138, 50, 0.08);
    color: var(--accent);
    padding: 4px 6px 4px 12px;
    font-size: 13px;
    font-weight: 600;
}

.contact-tag-chip button {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--accent);
}

.contact-tag-chip button svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.contact-tag-add-row {
    display: flex;
    gap: 8px;
}

.contact-tag-add-row input {
    flex: 1;
}

.contact-view-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.contact-view-tags .contact-tag-chip {
    background: rgba(200, 138, 50, 0.08);
}

.public-profile-shell {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 18px 16px 28px;
}

.public-contact-view-shell {
    display: block;
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 16px 14px 28px;
}

.is-public-profile .contact-view-toolbar-actions,
.is-public-profile [data-contact-view-share] {
    display: none !important;
}

.public-profile-top {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 12px;
}

.secondary-link {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--primary);
    padding: 0 14px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.share-wrap {
    position: relative;
}

.search-box input,
.form-grid input,
.form-grid textarea,
.form-grid select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-weight: 400;
    padding: 12px 13px;
    outline: none;
}

.list,
.timeline,
.menu-list,
.drawer-menu-list,
.settings-list,
.notification-list,
.form-grid {
    display: grid;
    gap: 10px;
}

.drawer-menu-list {
    margin-top: 14px;
    gap: 2px;
}

.person-row {
    position: relative;
    overflow: hidden;
}

.contact-group {
    display: grid;
    gap: 8px;
}

/* Etiket filtresinde kisisi kalmayan harf grubu (baslik dahil) gizlenir. */
.contact-group[hidden] {
    display: none;
}

.contact-filter-empty {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--muted);
    font-size: 13px;
    padding: 12px;
}

.letter-heading,
.date-heading {
    padding: 2px 2px 0;
}

.person-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    background: var(--surface);
    transition: transform 160ms ease;
    touch-action: pan-y;
}

.person-main {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 12px;
    border: 0;
    background: transparent;
    padding: 12px;
    text-align: left;
}

.person-main > span:last-child {
    min-width: 0;
}

.person-main strong {
    display: block;
    font-weight: var(--contact-name-weight);
    line-height: 1.2;
}

.person-main small {
    white-space: nowrap;
}

.header-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px 10px 0;
}

.header-actions button {
    display: grid;
    width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    color: var(--primary-dark);
}

.favorite-swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 56px;
    background: var(--surface-strong);
}

.favorite-toggle {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border: 0;
    background: var(--accent);
    color: #fff;
}

.favorite-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 2;
}

.favorite-toggle.is-favorite {
    background: var(--danger);
    color: #fff;
}

.favorite-toggle.is-favorite svg {
    fill: currentColor;
}

.avatar {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-strong);
    color: var(--primary-dark);
    font-weight: 800;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quick-actions {
    position: relative;
    z-index: 2;
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    border-top: 1px solid var(--line);
    padding: 10px 12px 12px;
    background: #f8fbfa;
    transition: transform 160ms ease;
    touch-action: pan-y;
}

.person-row.is-swiped .person-header,
.person-row.is-swiped .quick-actions {
    transform: translateX(-112px);
}

.person-row.is-favorite-swiped .person-header,
.person-row.is-favorite-swiped .quick-actions {
    transform: translateX(56px);
}

/* Kaydirma dugmeleri satir kaydirilmamisken kenardan tasip ince bir serit gostermesin. */
.person-row:not(.is-favorite-swiped) .favorite-swipe-action,
.person-row:not(.is-swiped) > .swipe-actions {
    visibility: hidden;
}

/* Paylasilan kisi: duzenle/sil izni yoksa sola kaydirma yok; tek izin varsa tek buton genisliginde. */
.shared-contact-row.is-swiped:has(.swipe-actions:empty) .person-header {
    transform: none;
}

.shared-contact-row .swipe-actions:empty {
    display: none;
}

.shared-contact-row .swipe-actions:has(> button:only-child) {
    grid-template-columns: 56px;
    width: 56px;
}

.shared-contact-row.is-swiped:has(.swipe-actions > button:only-child) .person-header {
    transform: translateX(-56px);
}

.person-row.is-open .quick-actions {
    display: grid;
}

.quick-actions button {
    display: grid;
    min-height: 46px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    color: var(--primary-dark);
}

.swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 56px);
    width: 112px;
    background: var(--surface-strong);
}

.swipe-actions button {
    display: grid;
    place-items: center;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    background: var(--primary);
    color: #fff;
}

.quick-actions button.danger-action,
.swipe-actions button.danger-action {
    color: var(--danger);
}

.swipe-actions button.danger-action {
    background: var(--danger);
    color: #fff;
}

.quick-actions svg,
.header-actions svg,
.swipe-actions svg,
.address-action-button svg,
.detail-actions svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.detail-topline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.detail-topline-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 24px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-actions {
    display: flex;
    gap: 8px;
}

.detail-actions .danger-action {
    color: var(--danger);
}

.detail-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 14px;
    margin-bottom: 12px;
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 16px;
    margin-bottom: 12px;
}

.profile-hero h1,
.profile-hero h2,
.profile-hero p {
    margin: 0;
}

.profile-hero p:last-child {
    margin-top: 6px;
    color: var(--muted);
}

.profile-avatar {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
}

.profile-photo-upload {
    display: block;
    cursor: pointer;
}

.profile-photo-upload input,
.photo-picker input[type="file"] {
    display: none;
}

.profile-section {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 14px;
    margin-bottom: 12px;
}

.profile-section h2,
.profile-section h3 {
    margin: 0;
}

.profile-section > h2 {
    margin-bottom: 12px;
}

.profile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.profile-info-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
}

.profile-info-list article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 68px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    padding: 12px;
}

.profile-info-list article.has-edit {
    grid-template-columns: 36px minmax(0, 1fr) 42px;
}

.profile-info-action {
    cursor: pointer;
}

.profile-info-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: var(--primary-dark);
    background: var(--surface-strong);
}

.profile-info-list .profile-info-icon {
    color: var(--primary-dark);
}

.profile-info-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-info-content {
    min-width: 0;
}

.profile-info-edit {
    width: 38px;
    height: 38px;
    min-height: 38px;
    justify-self: end;
}

.profile-contact-manager {
    display: grid;
    gap: 10px;
}

.profile-contact-manager[hidden] {
    display: none;
}

.profile-contact-manager-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: end;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    padding: 10px;
}

.profile-contact-manager-row label {
    min-width: 0;
}

.profile-contact-manager-row select,
.profile-contact-manager-row input {
    min-height: 44px;
    width: 100%;
}

.profile-contact-manager-delete {
    width: 40px;
    height: 44px;
    min-height: 44px;
}

.modal-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.danger-icon {
    color: #b42318;
}

.danger-icon:not(:disabled):hover {
    border-color: #f3b5ae;
    background: #fff1f0;
}

.profile-info-empty {
    margin: 0;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    padding: 12px;
}

.profile-info-list span,
.profile-info-list strong {
    display: block;
}

.profile-info-list .profile-info-icon,
.profile-info-list .profile-info-content {
    display: grid;
}

.profile-info-list span {
    color: var(--muted);
    font-size: 13px;
}

.profile-info-list strong {
    margin-top: 6px;
}

.detail-hero h2,
.detail-hero p {
    margin: 0;
}

.detail-status {
    margin-top: 5px;
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
}

.detail-avatar {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
}

.detail-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.detail-metrics article,
.history-list article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 12px;
}

.detail-metrics article {
    min-width: 0;
    min-height: 54px;
    padding: 10px 10px;
}

.detail-metrics article.is-positive-balance,
.detail-metrics article.is-positive-metric {
    border-color: #b7dfc6;
    background: #edf8f1;
}

.detail-metrics article.is-negative-balance,
.detail-metrics article.is-negative-metric {
    border-color: #efc4c4;
    background: #fff0f0;
}

.detail-metrics span,
.history-list span,
.history-list small {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.detail-metrics span {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-metrics strong,
.history-list strong,
.history-list b {
    display: block;
    margin-top: 5px;
}

.detail-metrics strong {
    margin-top: 3px;
    font-size: 15px;
    line-height: 1.15;
    white-space: nowrap;
}

.history-list {
    display: grid;
    gap: 8px;
}

.history-list article {
    display: grid;
    gap: 5px;
}

.history-list article.history-row {
    position: relative;
    display: block;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.history-card-content {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 4px;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 8px 10px;
    touch-action: pan-y;
    transition: transform 160ms ease;
}

/* Paylasilan kiside baskasinin girdigi islem: duzenle/sil yok, kaydirilmaz. */
.history-row.is-readonly.is-swiped .history-card-content {
    transform: none;
}

.history-row.is-swiped .history-card-content {
    transform: translateX(-112px);
}

.history-swipe-actions {
    border-radius: 8px;
    overflow: hidden;
}

.history-list time {
    color: var(--muted);
    font-size: 11px;
}

.history-item-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.history-item-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.history-item-main strong,
.history-item-main b {
    margin-top: 0;
}

.history-item-main strong {
    font-size: 15px;
    line-height: 1.15;
}

.history-item-main p {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-item-main b {
    font-size: 15px;
    text-align: right;
    white-space: nowrap;
}

.history-item-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.history-item-footer p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
}

.history-status-group {
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    word-break: keep-all;
}

.history-status-label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: nowrap;
}

.history-status {
    display: inline-flex;
    width: auto;
    min-width: max-content;
    height: auto;
    align-items: center;
    justify-content: flex-end;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #7b8686;
    cursor: pointer;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    padding: 0;
    text-align: right;
    white-space: nowrap;
    word-break: keep-all;
}

.history-status:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.history-status.is-pending {
    color: #c58b00;
}

.history-status.is-approved {
    color: #18884d;
}

.history-status.is-rejected {
    color: #c33d45;
}

@media (max-width: 420px) {
    .history-status-label {
        max-width: 86px;
    }
}

.site-dialog-body p {
    white-space: pre-line;
}

.type-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border: 0;
    padding: 0;
}

.type-picker legend {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.type-picker button {
    display: grid;
    gap: 2px;
    place-items: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    color: var(--primary-dark);
    font-weight: 700;
    text-align: center;
}

.type-picker button small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.transaction-subtype-options {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}

.transaction-subtype-options[hidden] {
    display: none;
}

.transaction-subtype-options button {
    min-height: 28px;
    flex: 0 0 auto;
    min-width: 72px;
    place-items: center;
    padding: 0 9px;
    font-size: 12px;
}

.form-grid[data-mode="transaction"] .profile-custom-fields-editor {
    display: none;
}

.transaction-attachment-field {
    display: grid;
    gap: 8px;
}

.transaction-attachment-field > span,
.transaction-attachment-field small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.transaction-attachment-field small {
    font-weight: 600;
}

.transaction-attachment-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: 42px;
    grid-auto-flow: column;
    gap: 8px;
    align-items: center;
}

.transaction-attachment-button {
    display: inline-grid;
    min-height: 42px;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-align: center;
}

.transaction-camera-button,
.transaction-attachment-clear {
    min-height: 42px;
}

.transaction-attachment-button svg,
.transaction-camera-button svg,
.transaction-attachment-clear svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.history-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.history-attachment-link {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
    color: var(--primary-dark);
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.history-attachment-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.type-picker button.is-selected {
    border-color: var(--primary);
    background: var(--surface-strong);
}

.timeline article,
.vehicle-row {
    padding: 14px;
}

.timeline time {
    display: inline-flex;
    margin-bottom: 8px;
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--primary-dark);
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 700;
}

.timeline strong,
.vehicle-row strong {
    display: block;
    margin-bottom: 5px;
}

.vehicle-row {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.vehicle-record-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px 14px;
    cursor: pointer;
}

.vehicle-record-row-main {
    display: grid;
    gap: 3px;
}

.vehicle-record-type-chip {
    display: inline-block;
    width: fit-content;
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(17, 100, 102, 0.1);
    color: var(--primary-dark);
}

.vehicle-record-row small {
    color: var(--muted);
    font-size: 12px;
}

.vehicle-detail-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    padding: 14px;
    margin-bottom: 16px;
}

.vehicle-detail-card .photo-preview {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    font-size: 20px;
}

.vehicle-detail-info {
    display: grid;
    gap: 4px;
}

.vehicle-detail-info strong {
    font-size: 18px;
}

.vehicle-detail-info small {
    color: var(--muted);
    white-space: pre-line;
}

.vehicle-photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vehicle-photo-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.vehicle-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vehicle-photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 26, 24, 0.6);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.vehicle-photo-add-button {
    width: fit-content;
    cursor: pointer;
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text);
    cursor: pointer;
}

.checkbox-field input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}

.task-detail-notes-field .vehicle-commercial-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.task-detail-notes-field .vehicle-commercial-options .checkbox-field {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.task-detail-notes-field .vehicle-commercial-options .checkbox-field input[type="radio"] {
    flex: 0 0 auto;
    width: 18px;
    min-height: 0;
    height: 18px;
    padding: 0;
    border: 0;
}

.task-detail-notes-field .vehicle-commercial-options .checkbox-field span {
    font-weight: 600;
}

.field-hint {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.field-hint[hidden] {
    display: none;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.account-grid article {
    min-height: 100px;
    padding: 14px;
}

.menu-list button,
.drawer-menu-list button {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 14px;
    text-align: left;
}

.drawer-menu-list button {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-weight: 700;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.drawer-menu-list button:hover,
.drawer-menu-list button:active,
.drawer-menu-list button.is-active {
    background: var(--surface-strong);
    color: var(--primary-dark);
}

.drawer-menu-list svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.settings-list article {
    padding: 13px;
}

.settings-account-card {
    cursor: pointer;
}

.settings-import-card .contacts-import-button {
    margin-top: 10px;
    width: 100%;
}

.settings-tab-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.settings-tab-row button {
    flex: 1;
}

.settings-list span:not(.team-invite-input-row):not(.phone-composite):not(.mobile-caller-icon),
.settings-list small {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.settings-list strong {
    display: block;
    margin-top: 5px;
}

.settings-list small {
    margin-top: 4px;
}

.settings-username-card label {
    display: grid;
    gap: 8px;
}

.settings-username-card input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    padding: 0 12px;
    color: var(--text);
    font: inherit;
}

.phone-composite.is-disabled {
    opacity: 0.72;
}

.phone-composite.is-disabled input {
    background: var(--surface-strong);
    color: var(--muted);
    cursor: not-allowed;
}

.settings-username-card small[data-status="ok"] {
    color: var(--primary-dark);
}

.settings-username-card small[data-status="error"] {
    color: #b3261e;
}

.account-settings-form {
    display: grid;
    gap: 12px;
}

.settings-layout {
    display: grid;
    gap: 12px;
}

.settings-nav,
.settings-panels {
    display: grid;
    align-content: start;
    min-width: 0;
}

.settings-panels {
    gap: 10px;
}

.settings-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

.settings-panel-head h3 {
    margin: 0;
    font-size: 18px;
}

.settings-panel[hidden] {
    display: none;
}

.settings-logout-row,
.settings-logout-row svg {
    color: #b3261e;
}

.settings-layout[data-settings-step="list"] .settings-panels,
.settings-layout[data-settings-step="panel"] .settings-nav {
    display: none;
}

@media (min-width: 760px) {
    .settings-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }

    .settings-layout[data-settings-step] .settings-nav,
    .settings-layout[data-settings-step] .settings-panels {
        display: grid;
    }

    .settings-nav {
        position: sticky;
        top: 0;
    }

    .settings-back {
        display: none;
    }
}

.account-settings-form article {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 13px;
}

.account-business-fields[hidden] {
    display: none;
}

.account-settings-form article > span,
.account-field span,
.account-settings-form small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.required-mark {
    color: #b3261e;
    font: inherit;
}

.account-field {
    display: grid;
    gap: 8px;
}

.account-field input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    color: var(--text);
    padding: 0 12px;
    outline: none;
}

.account-field input[readonly] {
    background: var(--surface-strong);
    color: var(--muted);
    cursor: not-allowed;
}

.account-username-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px 42px;
    gap: 6px;
    align-items: center;
}

.account-username-state {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.account-username-state[data-state="ok"] {
    color: #167a3a;
}

.account-username-state[data-state="error"] {
    color: #b3261e;
}

.account-username-edit {
    display: grid;
    width: 42px;
    min-height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    color: var(--primary-dark);
}

.account-username-edit svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.segmented-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.segmented-control label {
    position: relative;
}

.segmented-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented-control span {
    display: grid;
    min-height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    color: var(--muted);
    font-weight: 700;
}

.segmented-control input:checked + span {
    border-color: rgba(17, 100, 102, 0.45);
    background: var(--surface-strong);
    color: var(--primary-dark);
}

.account-settings-message {
    min-height: 18px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.account-settings-message[data-status="ok"],
.account-settings-form small[data-status="ok"] {
    color: var(--primary-dark);
}

.account-settings-message[data-status="error"],
.account-settings-form small[data-status="error"] {
    color: #b3261e;
}

.verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    border-radius: 999px;
    background: #e7f6ec;
    color: #167a3a;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    vertical-align: middle;
}

.verify-badge[hidden] {
    display: none;
}

.verify-badge svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.topbar:has(> .phone-verify-banner:not([hidden])) {
    flex-wrap: wrap;
    row-gap: 8px;
}

.phone-verify-banner {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #f2d39b;
    border-radius: 8px;
    background: #fff8e9;
    color: #7a5312;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 8px 6px 12px;
}

.phone-verify-banner .secondary-button {
    min-height: 32px;
    padding: 0 12px;
}

.phone-verify-banner[hidden] {
    display: none;
}

.password-change-form {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.password-change-message {
    min-height: 18px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.password-change-message.is-ok {
    color: var(--primary-dark);
}

.password-change-message.is-error {
    color: #b3261e;
}

.mobile-caller-card {
    display: grid;
    gap: 12px;
}

.mobile-caller-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.mobile-caller-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-strong);
    color: var(--primary-dark);
}

.mobile-caller-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.mobile-caller-switch {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 24px;
    align-items: center;
}

.mobile-caller-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mobile-caller-switch span {
    display: block;
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #d9e4e2;
    transition: background 0.18s ease;
}

.mobile-caller-switch span::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
    transition: transform 0.18s ease;
}

.mobile-caller-switch input:checked + span {
    background: var(--primary);
}

.mobile-caller-switch input:checked + span::after {
    transform: translateX(18px);
}

.mobile-caller-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.mobile-caller-code-row strong {
    color: var(--primary-dark);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
}

.mobile-caller-copy-button {
    display: grid;
    width: 42px;
    height: 42px;
    min-height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--primary-dark);
}

.mobile-caller-copy-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.danger-text {
    color: var(--danger);
}

.notification-list article {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px;
}

.notification-section {
    display: grid;
    gap: 10px;
}

.notification-section + .notification-section {
    margin-top: 18px;
}

.notification-section h3 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 15px;
}

.notification-section-list {
    display: grid;
    gap: 10px;
}

.notification-list strong,
.notification-list small {
    display: block;
}

.notification-list small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.notification-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 8px;
    background: var(--surface-strong);
    color: var(--primary-dark);
}

.notification-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.approval-status-icon.is-approved,
.notification-status.is-approved {
    color: #18794e;
}

.approval-status-icon.is-pending,
.notification-status.is-pending {
    color: #946200;
}

.approval-status-icon.is-rejected,
.approval-status-icon.is-disputed,
.notification-status.is-rejected,
.notification-status.is-disputed {
    color: var(--danger);
}

.notification-status {
    width: fit-content;
    border-radius: 999px;
    background: var(--surface-strong);
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 700;
}

.notification-body {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 8px;
}

.notification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.notification-team-request {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 8px;
}

.notification-team-actions {
    grid-column: 2;
    display: flex;
    gap: 8px;
}

.team-invite-form {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.team-invite-field {
    display: grid;
    gap: 6px;
}

.team-invite-input-row {
    display: flex;
    gap: 8px;
}

.team-invite-input-row .phone-composite {
    flex: 1;
    min-width: 0;
}

.team-invite-input-row input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    height: 42px;
    background: var(--surface);
}

.team-invite-hint {
    color: var(--muted);
}

.team-invite-hint.is-error {
    color: var(--danger);
}

.team-section {
    margin-bottom: 18px;
}

.team-section h3 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--primary-dark);
}

.team-list {
    display: grid;
    gap: 8px;
}

.team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--surface);
}

.team-row-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.team-row-info strong {
    font-size: 14px;
}

.team-row-info small {
    color: var(--muted);
}

.team-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.shared-owner-picker {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
}

.shared-owner-picker select {
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    background: var(--surface);
}

[data-shared-contact-add] {
    margin-bottom: 12px;
}

.share-modal-target {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 12px;
}

.share-scope-picker {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.share-scope-option,
.share-permission-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-tag-picker {
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.share-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.share-tag-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.share-permission-picker {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.team-row-share {
    display: grid;
    gap: 8px;
    align-items: start;
}

.share-permission-picker-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.share-permission-picker-inline .share-permission-option {
    font-size: 13px;
    color: var(--muted);
}

/* Liste/defter/bolum paylasim pencereleri: iceriginin cogu tek bir kisa satir,
 * o yuzden genel modal genisligi yerine dar ve sikistirilmis bir kart kullanilir. */
#todo-share-modal .modal-panel,
#notebook-share-modal .modal-panel,
#section-share-modal .modal-panel {
    width: min(400px, 100%);
}

#todo-share-modal .modal-panel > .section-head,
#notebook-share-modal .modal-panel > .section-head,
#section-share-modal .modal-panel > .section-head {
    padding: 14px 16px 10px;
}

#todo-share-modal .share-modal-target,
#notebook-share-modal .share-modal-target,
#section-share-modal .share-modal-target,
#todo-share-modal .team-list,
#notebook-share-modal .team-list,
#section-share-modal .team-list {
    padding: 0 16px;
}

#todo-share-modal .share-modal-target,
#notebook-share-modal .share-modal-target,
#section-share-modal .share-modal-target {
    padding-top: 12px;
    margin-bottom: 10px;
    font-size: 12px;
}

#todo-share-modal .team-list,
#notebook-share-modal .team-list,
#section-share-modal .team-list {
    padding-bottom: 16px;
    gap: 6px;
}

#todo-share-modal .team-row,
#notebook-share-modal .team-row,
#section-share-modal .team-row {
    padding: 8px 10px;
}

/* ---- Notlar ---- */

.notes-browser {
    display: none;
    gap: 8px;
}

.notes-browser[hidden] {
    display: none;
}

.is-notes-context [data-notes-desktop-picker-bar] {
    display: flex;
}

.notes-desktop-tree {
    display: flex;
    position: relative;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.notes-desktop-tree[data-mobile-step] {
    height: auto;
}

.notes-desktop-tree[data-mobile-step] .notes-desktop-columns {
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: var(--surface);
    min-height: 0;
}

/* Mobil: defter secici + liste masaustundeki gibi tek beyaz panel, satirlar arasinda cizgi. */
@media (max-width: 759px) {
    .is-notes-context [data-notes-desktop-picker-bar] {
        margin-bottom: 0;
        border-radius: 8px 8px 0 0;
    }

    .notes-desktop-tree[data-mobile-step] .notes-desktop-col-body {
        padding: 0;
        gap: 0;
    }

    /* Beyaz panel alt menuye kadar uzansin: alt pay menu yuksekligine (~58px + guvenli alan) indirilir,
       panel yuksekligi = ekran - ust bar ve defter secici (~131px) - alt pay - 8px bosluk. */
    .is-notes-context .app-shell {
        padding-bottom: calc(57px + max(8px, env(safe-area-inset-bottom)));
    }

    .is-notes-context .main-content {
        padding-bottom: 8px;
    }

    /* Notlar listesi: panel ust bara ve alt menuye tam yaslanir. */
    .is-notes-context .main-content:has(> #screen-notes.is-active),
    .is-notes-context .main-content:has(> #screen-note-page.is-active) {
        padding-top: 0;
        padding-bottom: 0;
    }

    .is-notes-context .main-content:has(> #screen-notes.is-active) [data-notes-desktop-picker-bar],
    .is-notes-context .main-content:has(> #screen-note-page.is-active) [data-notes-desktop-picker-bar] {
        border-top: 0;
        border-radius: 0;
    }

    /* Not sayfasi: liste gibi tek beyaz panel, bloklar arasinda cizgi. */
    .is-notes-context #screen-note-page.is-active {
        box-sizing: border-box;
        min-height: calc(100dvh - var(--notes-mobile-panel-top, 116px) - 57px - max(8px, env(safe-area-inset-bottom)));
        padding: 0 12px 12px;
        border: 1px solid var(--line);
        border-top: 0;
        background: var(--surface);
    }

    .is-notes-context #screen-note-page .note-page-editor {
        gap: 0;
    }

    /* Baslik satiri Bolumler/Sayfalar sutun basligiyla ayni olcude (8px 10px, 28px geri dugmesi). */
    .is-notes-context #screen-note-page .note-page-title-row {
        gap: 6px;
        margin: 0 -12px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--line);
    }

    .is-notes-context #screen-note-page .note-page-back {
        width: 28px;
        height: 28px;
        min-height: 0;
        margin: -4px 0 -4px -4px;
        border-radius: 8px;
    }

    .is-notes-context #screen-note-page .note-page-back svg {
        width: 16px;
        height: 16px;
    }

    .is-notes-context #screen-note-page .note-page-title-input {
        height: 20px;
        border: 0;
        border-radius: 0;
        padding: 0;
        font-size: 14px;
    }

    .is-notes-context #screen-note-page .note-page-meta {
        padding: 8px 0;
    }

    .is-notes-context #screen-note-page .note-block {
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
        padding: 12px 0;
    }

    .is-notes-context #screen-note-page .note-page-add-row {
        padding-top: 12px;
        border-top: 1px solid var(--line);
    }

    .notes-desktop-tree[data-mobile-step] .notes-desktop-columns {
        border-bottom: 0;
        border-radius: 0;
        min-height: calc(100dvh - var(--notes-mobile-panel-top, 116px) - 57px - max(8px, env(safe-area-inset-bottom)));
    }

    .notes-desktop-tree[data-mobile-step] .notes-desktop-col-body > .todo-sidebar-row,
    .notes-desktop-tree[data-mobile-step] .notes-desktop-col-body > * > .todo-sidebar-row {
        min-height: 44px;
        border-radius: 0;
        border-bottom: 1px solid var(--line);
        padding: 0 12px;
    }

    .notes-desktop-tree[data-mobile-step] .notes-desktop-col-body > :last-child .todo-sidebar-row,
    .notes-desktop-tree[data-mobile-step] .notes-desktop-col-body > .todo-sidebar-row:last-child {
        border-bottom: 0;
    }
}

.notes-desktop-tree[data-mobile-step] .notes-desktop-col,
.notes-desktop-tree[data-mobile-step] .notes-desktop-columns .notes-desktop-col:first-child {
    overflow: visible;
    flex: 1 1 100%;
    min-width: 0;
}

.notes-desktop-tree[data-mobile-step] .notes-desktop-col-body {
    overflow: visible;
}

.notes-desktop-tree[data-mobile-step] .notes-desktop-col-resizer,
.notes-desktop-tree[data-mobile-step] .notes-panel-resizer {
    display: none;
}

.notes-desktop-tree[data-mobile-step="sections"] .notes-desktop-columns .notes-desktop-col:last-child {
    display: none;
}

.notes-desktop-tree[data-mobile-step="pages"] .notes-desktop-columns .notes-desktop-col:first-child {
    display: none;
}

.notes-desktop-tree[data-mobile-step] .notes-tree-row-add {
    flex: 0 0 22px;
    width: 22px;
    opacity: 1;
}

.notes-desktop-columns {
    display: flex;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
}

.notes-desktop-col {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notes-desktop-columns .notes-desktop-col:first-child {
    flex: 0 0 var(--notes-sections-col-width, 50%);
}

.notes-desktop-columns .notes-desktop-col:last-child {
    flex: 1;
}

.notes-desktop-col-resizer {
    flex: 0 0 6px;
    position: relative;
    cursor: col-resize;
    touch-action: none;
}

.notes-desktop-col-resizer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--line);
    transform: translateX(-50%);
}

.notes-desktop-col-resizer:hover::after,
.notes-desktop-col-resizer.is-dragging::after {
    width: 3px;
    background: var(--primary);
}

/* Tutamac tamamen agacin icinde durur; disari tasip yatay kaydirma cubugu olusturmasin.
   Sutun ayirici cizgiyi sayfa panelinin sol kenarligi ciziyor. */
.notes-panel-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 10px;
    cursor: col-resize;
    touch-action: none;
    z-index: 5;
}

.notes-panel-resizer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: transparent;
}

.notes-panel-resizer:hover::after,
.notes-panel-resizer.is-dragging::after {
    width: 3px;
    background: var(--primary);
}

/* Mobilde ust baslik satiri yok; geri dugmesi Sayfalar sutun basliginda. */
.is-authenticated #screen-notes > .section-head {
    display: none;
}

.notes-desktop-col-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.notes-col-back {
    display: none;
    width: 28px;
    height: 28px;
    margin: -4px 0 -4px -4px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--primary-dark);
    cursor: pointer;
}

.notes-col-back svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.notes-desktop-tree[data-mobile-step="pages"] .notes-col-back {
    display: grid;
}

.notes-desktop-col-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.notes-desktop-col-add {
    border: 0;
    background: none;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    padding: 2px 4px;
}

.notes-desktop-col-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
    display: grid;
    gap: 2px;
    align-content: start;
}

.notes-notebook-picker {
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
}

.notes-sync-status {
    flex: 0 0 auto;
    margin-left: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    transition: color 0.15s ease;
}

.notes-sync-status svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notes-sync-status.is-saving {
    color: var(--muted);
    animation: notes-sync-spin 0.8s linear infinite;
}

@keyframes notes-sync-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.notes-notebook-badge {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notes-notebook-select-wrap {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.notes-notebook-select-trigger {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    border: 0;
    padding: 4px 22px 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    background: transparent;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notes-notebook-picker {
    justify-content: flex-start;
}

.notes-notebook-select-chevron {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: transform 0.15s ease;
}

.notes-notebook-select-chevron.is-open {
    transform: translateY(-50%) rotate(180deg);
}

.notes-notebook-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: -34px;
    z-index: 20;
    width: max-content;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 32px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 6px;
}

.notes-notebook-dropdown[hidden] {
    display: none;
}

.notes-notebook-dropdown-list {
    display: grid;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
}

.notes-notebook-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: 8px 10px;
    background: none;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: var(--primary);
}

.notes-notebook-dropdown-item:hover,
.notes-notebook-dropdown-item.is-active {
    background: var(--surface-strong);
}

.notes-notebook-dropdown-item-badge {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notes-notebook-dropdown-item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notes-notebook-dropdown-add {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--line);
    margin-top: 4px;
    padding: 9px 10px 4px;
    background: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}

.notes-notebook-dropdown-add svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.notes-row-open {
    flex: 1;
    min-width: 0;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-page-editor {
    display: grid;
    gap: 12px;
}

.note-page-editor[hidden] {
    display: none;
}

/* Ust baslik satiri kaldirildi; geri dugmesi sayfa basligi alaninin solunda (masaustunde gizli). */
.is-authenticated #screen-note-page > .section-head {
    display: none;
}

.note-page-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.note-page-back {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
}

.has-desktop-notes-panel .note-page-back {
    display: none;
}

.note-page-download-pdf {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
}

.note-print-area {
    display: none;
}

@media print {
    body * {
        visibility: hidden;
    }

    .note-print-area,
    .note-print-area * {
        visibility: visible;
    }

    .note-print-area {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 24px;
    }

    .note-print-area h1 {
        margin: 0 0 4px;
        font-size: 22px;
    }

    .note-print-area .note-print-meta {
        margin: 0 0 20px;
        color: #666;
        font-size: 12px;
    }

    .note-print-area img {
        max-width: 100%;
        height: auto;
        margin: 0 0 16px;
        page-break-inside: avoid;
    }

    .note-print-area .note-print-block-text {
        margin: 0 0 12px;
        font-size: 14px;
        line-height: 1.5;
    }
}

.note-page-title-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    height: 44px;
    font-size: 16px;
    font-weight: 700;
    background: var(--surface);
}

.note-page-meta {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
}

.note-page-add-row {
    display: flex;
    gap: 8px;
}

.note-page-add-button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.note-page-add-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.note-page-add-button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.text-block-panel {
    grid-template-rows: auto minmax(0, 1fr);
    width: min(560px, 100%);
    padding: 0;
}

.text-block-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
}

.text-block-toolbar-divider {
    width: 1px;
    height: 18px;
    background: var(--line);
    margin: 0 2px;
}

.text-block-size-picker {
    position: relative;
}

.text-block-size-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: grid;
    gap: 2px;
    width: max-content;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 6px;
}

.text-block-size-dropdown[hidden] {
    display: none;
}

.text-block-size-dropdown button {
    border: 0;
    border-radius: 6px;
    background: none;
    padding: 6px 14px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.text-block-size-dropdown button:hover {
    background: var(--surface-strong);
}

.drawing-size-dropdown {
    display: flex;
    align-items: center;
    width: max-content;
}

.drawing-size-dropdown .drawing-size-option {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.drawing-size-dropdown .drawing-size-option span {
    display: block;
    border-radius: 50%;
    background: var(--text);
}

.drawing-size-dropdown .drawing-size-option.is-active {
    background: var(--surface-strong);
    box-shadow: 0 0 0 2px var(--primary);
}

.drawing-size-dropdown .drawing-size-option.is-active span {
    background: var(--primary);
}

.note-page-toolbar.text-block-toolbar-compact button.text-block-color-trigger {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--line);
    padding: 0;
}

.text-block-color-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: flex;
    gap: 6px;
    width: max-content;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 8px;
}

.text-block-color-dropdown[hidden] {
    display: none;
}

.note-page-toolbar.text-block-toolbar-compact .text-block-color-dropdown button.drawing-color-swatch {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
}

.text-block-head-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.text-block-head-actions .icon-button {
    border: 0;
    background: transparent;
}

.text-block-head-actions [data-text-block-delete],
.text-block-head-actions [data-drawing-delete] {
    color: var(--danger);
}

.text-block-toolbar-compact {
    margin: 0;
    padding: 0;
    border: 0;
}

.note-page-toolbar.text-block-toolbar-compact button {
    min-width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.note-page-toolbar.text-block-toolbar-compact button[hidden] {
    display: none;
}

.note-page-toolbar.text-block-toolbar-compact button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.note-page-toolbar.text-block-toolbar-compact button:hover {
    background: var(--surface-strong);
    color: var(--text);
}

.text-block-editable {
    padding: 16px;
    min-height: 300px;
    max-height: 55vh;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.6;
    outline: none;
}

.drawing-panel {
    grid-template-rows: auto minmax(0, 1fr);
    width: min(560px, 100%);
    padding: 0;
}

.note-page-toolbar.text-block-toolbar-compact button.drawing-tool-button {
    color: var(--muted);
}

.note-page-toolbar.text-block-toolbar-compact button.drawing-tool-button.is-active {
    color: var(--primary);
    background: var(--surface-strong);
}

.drawing-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    box-shadow: 0 0 0 1px var(--line);
}

.drawing-color-swatch.is-active {
    border-color: var(--surface);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}

.drawing-color-custom {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--line);
    display: block;
    cursor: pointer;
}

.drawing-color-custom input[type="color"] {
    width: 30px;
    height: 30px;
    margin: -4px;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.drawing-canvas {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    max-height: 65vh;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

/* Cizim penceresi: masaustunde ekrani neredeyse doldurur, mobilde tam ekran (asagidaki media). */
#note-drawing-modal .drawing-panel {
    width: min(1200px, 100%);
    height: 100%;
    max-height: none;
}

/* Araclar kendi icinde satir kaydirir; kapat/sil hep sag ustte kalir, ayri satir kaplamaz. */
#note-drawing-modal .text-block-head {
    flex-wrap: nowrap;
    align-items: flex-start;
}

#note-drawing-modal .note-page-toolbar {
    flex: 1;
    min-width: 0;
}

.drawing-shape-dropdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    width: 136px;
}

/* Bu dropdown .text-block-size-dropdown sinifini da tasidigindan metin menu
   ogeleri icin tanimli genis (6px 14px) dolgu miras aliniyor; 30px'lik ikon
   kutusunda ikona neredeyse hic yer kalmiyordu. Ikon butonlari icin dar dolguya
   donduruyoruz. */
.drawing-shape-dropdown button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

/* Aktif arac, fircha boyutu secicisindeki gibi halka + zemin ile belirgin olsun. */
.drawing-shape-dropdown button.is-active {
    background: var(--surface-strong);
    box-shadow: 0 0 0 2px var(--primary);
    color: var(--primary);
}

/* Cizim alani sinirsiz: sahnenin tamami cizilebilir, tuval sahneyi tam kaplar. */
.drawing-stage {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    touch-action: none;
}

.drawing-stage .drawing-canvas {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 0;
    max-height: none;
}

.drawing-stage[data-tool="hand"] .drawing-canvas {
    cursor: grab;
}

.drawing-zoom-controls {
    position: absolute;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow);
    padding: 4px;
}

.drawing-zoom-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

.drawing-zoom-controls button:hover {
    background: var(--surface-strong);
}

.drawing-zoom-controls .drawing-zoom-level {
    min-width: 54px;
}

.drawing-zoom-controls svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Metin ve fotograf panelleri mobilde alttan degil ekranin ortasinda acilir. */
#note-text-modal,
#note-gallery-modal {
    align-items: center;
}

@media (max-width: 759px) {
    #note-drawing-modal {
        align-items: stretch;
        padding: 0;
    }

    #note-drawing-modal .drawing-panel {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    #note-drawing-modal .text-block-head {
        padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
    }
}

.gallery-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.gallery-panel .drawing-canvas {
    cursor: default;
}

.gallery-canvas-wrap {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.gallery-canvas-wrap .drawing-canvas {
    min-height: 0;
}

.gallery-crop-frame {
    position: absolute;
    border: 2px solid #2f6feb;
    box-shadow: 0 0 0 9999px rgba(17, 24, 23, 0.45);
    cursor: move;
    touch-action: none;
}

.gallery-crop-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: -9px;
    border-radius: 50%;
    background: #2f6feb;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    touch-action: none;
}

.gallery-crop-handle[data-crop-handle="nw"] {
    top: 0;
    left: 0;
    cursor: nwse-resize;
}

.gallery-crop-handle[data-crop-handle="ne"] {
    top: 0;
    right: 0;
    margin-right: -9px;
    cursor: nesw-resize;
}

.gallery-crop-handle[data-crop-handle="sw"] {
    bottom: 0;
    left: 0;
    margin-bottom: -9px;
    cursor: nesw-resize;
}

.gallery-crop-handle[data-crop-handle="se"] {
    bottom: 0;
    right: 0;
    margin-bottom: -9px;
    margin-right: -9px;
    cursor: nwse-resize;
}

.gallery-crop-confirm {
    color: var(--primary) !important;
}

.gallery-thumb-strip {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    overflow-x: auto;
    border-top: 1px solid var(--line);
}

.gallery-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: var(--surface-strong);
}

.gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumb.is-active {
    border-color: var(--primary);
}

.note-page-toolbar {
    display: none;
    gap: 6px;
    flex-wrap: wrap;
}

.note-page-toolbar.is-visible {
    display: flex;
}

.note-page-toolbar button {
    min-width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.note-page-toolbar button:hover {
    border-color: rgba(17, 100, 102, 0.3);
    color: var(--primary-dark);
}

.note-page-blocks {
    display: grid;
    gap: 10px;
}

.note-block {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    padding: 12px;
}

.note-block-editable {
    min-height: 60px;
    outline: none;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.note-block-editable:empty::before {
    content: 'Düzenlemek için tıkla';
    color: var(--muted);
}

.note-block-image img {
    display: block;
    width: 100%;
    border-radius: 6px;
}

.note-block-image img.is-editable-drawing {
    cursor: pointer;
}

.note-block-image img.is-sized-drawing {
    max-width: 100%;
    height: auto;
}

.note-block-gallery-stack {
    display: flex;
    justify-content: center;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 8px 0 14px;
}

.gallery-stack {
    position: relative;
    width: 160px;
    height: 160px;
}

.gallery-stack-card {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    border: 1px solid var(--line);
    background-color: var(--surface-strong);
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 6px rgba(17, 24, 23, 0.12);
}

.gallery-stack-card-back2 {
    transform: rotate(-6deg) translate(4px, 3px);
    z-index: 1;
}

.gallery-stack-card-back1 {
    transform: rotate(4deg) translate(-3px, 4px);
    z-index: 2;
}

.gallery-stack-card-front {
    z-index: 3;
}

.gallery-stack-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 4;
    background: rgba(17, 24, 23, 0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
}

.note-block-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-strong);
    color: var(--danger);
    opacity: 0.85;
}

/* ---- Todo / Takvim ---- */

.todo-sidebar-list {
    display: grid;
    gap: 2px;
}

.todo-sidebar-divider {
    height: 1px;
    background: var(--line);
    margin: 12px 0;
}

.todo-sidebar-row[hidden] {
    display: none;
}

.todo-sidebar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    background: none;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-align: left;
}

.todo-sidebar-row svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--muted);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.todo-sidebar-row-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.todo-sidebar-row.is-active {
    background: var(--surface-strong);
    color: var(--primary-dark);
}

.todo-sidebar-row.is-active svg {
    color: var(--primary-dark);
}

.todo-sidebar-count {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--muted);
}

.todo-sidebar-list-row {
    position: relative;
}

.todo-sidebar-shared-icon {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 13px;
}

.todo-sidebar-row-nested {
    padding-left: 24px;
}

.notes-tree-row-add {
    flex: 0 0 0;
    width: 0;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--muted);
    opacity: 0;
    overflow: hidden;
    transition: flex-basis 0.12s ease, width 0.12s ease, opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.notes-tree-row-add svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.todo-sidebar-row:hover .notes-tree-row-add {
    flex: 0 0 22px;
    width: 22px;
    opacity: 1;
}

.notes-tree-row-add:hover {
    color: var(--primary);
    background: var(--surface-strong);
}

.notes-tree-row-editing {
    background: var(--surface-strong);
}

.notes-tree-row-input {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    outline: none;
}

.todo-sidebar-group {
    display: grid;
    gap: 2px;
}

.todo-sidebar-group-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

.todo-sidebar-group-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
}

.todo-sidebar-group-title-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.todo-sidebar-group-chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--muted);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.15s ease;
}

.todo-sidebar-group-chevron.is-collapsed {
    transform: rotate(-90deg);
}

.todo-sidebar-group-add {
    flex: 0 0 auto;
}

#screen-planner.is-active {
    display: flex;
    flex-direction: column;
}

.todo-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid var(--line);
    margin-top: auto;
    padding-top: 10px;
    position: sticky;
    bottom: 0;
    background: var(--surface);
    z-index: 2;
}

@media (max-width: 759px) {
    .todo-sidebar-footer {
        bottom: calc(78px + env(safe-area-inset-bottom));
    }

    /* Liste kisaysa bile "+ Yeni liste" en altta dursun diye panel PC'deki gibi
       kullanilabilir alanin tamamini kaplar (topbar ve alt menu cikarilarak). */
    #screen-planner.is-active {
        box-sizing: border-box;
        min-height: calc(100dvh - 89px - 79px - env(safe-area-inset-bottom, 0px));
    }
}

.todo-sidebar-add-list {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    border: 0;
    background: none;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    text-align: left;
}

.todo-sidebar-plus {
    font-size: 16px;
    line-height: 1;
}

.todo-sidebar-footer [data-todo-add-group] {
    border: 0;
    background: none;
}

.todo-sidebar-footer [data-todo-add-group] svg {
    stroke-width: 1.4;
}

.todo-quick-add {
    margin-bottom: 16px;
}

.todo-quick-add-input-row {
    position: relative;
}

.todo-quick-add input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 40px 0 12px;
    background: var(--surface);
    font-size: 14px;
}

.todo-quick-add input:focus {
    border-color: var(--primary);
    outline: none;
}

.todo-quick-add-panel {
    position: relative;
    margin-top: 8px;
    display: grid;
    gap: 8px;
}

.todo-quick-add-panel[hidden] {
    display: none;
}

.todo-quick-add-panel .task-field-reveal {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 5;
    width: max-content;
    max-width: calc(100vw - 32px);
    box-shadow: var(--shadow);
}

.has-desktop-planner-panel #screen-todo-tasks .todo-quick-add {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg);
    padding-bottom: 4px;
}

.todo-quick-add-submit {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    border: 0;
    background: none;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo-quick-add-submit svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.todo-group-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: 0;
    background: none;
    padding: 0;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.todo-group-heading-text {
    flex: 0 0 auto;
}

.todo-group-heading-count {
    color: var(--muted);
    font-weight: 600;
    text-transform: none;
}

.todo-group-chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.15s ease;
}

.todo-group-chevron.is-collapsed {
    transform: rotate(-90deg);
}

.todo-groups {
    display: grid;
    gap: 16px;
}

.todo-task-list {
    display: grid;
    gap: 6px;
}

.todo-task-list[hidden] {
    display: none;
}

.todo-task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--surface);
}

.todo-task-row.is-done .todo-task-title {
    text-decoration: line-through;
    color: var(--muted);
}

.todo-task-checkbox {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--primary);
}

.todo-task-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
}

.todo-task-title {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.todo-task-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    font-size: 11px;
    color: var(--muted);
}

.todo-priority-chip {
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
}

.todo-task-meta-favorite {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: #b45309;
}

.todo-task-meta-favorite svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
    stroke: currentColor;
}

.todo-priority-chip.is-priority-low {
    background: rgba(17, 100, 102, 0.12);
    color: var(--primary-dark);
}

.todo-priority-chip.is-priority-medium {
    background: rgba(200, 138, 50, 0.16);
    color: var(--accent);
}

.todo-priority-chip.is-priority-high {
    background: rgba(179, 64, 64, 0.12);
    color: var(--danger);
}

.todo-stage-chip {
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(17, 100, 102, 0.1);
    color: var(--primary-dark);
    white-space: nowrap;
}

.todo-task-delete {
    flex: 0 0 auto;
    border: 0;
    background: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
}

/* ---- Görev detayı ---- */

#task-detail-modal .task-detail-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.task-detail-head h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}

.task-detail-head-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.task-detail-head-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
}

.task-detail-head-icon:hover {
    background: var(--surface-strong);
}

.task-detail-head-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}

.task-detail-delete-link {
    justify-self: start;
    border: 0;
    background: none;
    padding: 0;
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
}

.task-detail-delete-link:hover {
    text-decoration: underline;
}

.task-detail-body {
    display: grid;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 16px;
}

.task-detail-title-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.task-detail-done-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    flex: 0 0 auto;
    accent-color: var(--primary);
}

.task-detail-title-input {
    flex: 1;
    min-width: 0;
    resize: none;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 600;
    padding: 4px 6px;
    background: transparent;
    color: var(--text);
}

.task-detail-title-input:hover {
    border-color: var(--line);
}

.task-detail-title-input:focus {
    border-color: var(--primary);
    outline: none;
}

.task-detail-title-input.is-done {
    color: var(--muted);
    text-decoration: line-through;
}

.task-favorite-toggle {
    color: var(--muted);
}

.task-favorite-toggle.is-active {
    color: #b45309;
}

.task-favorite-toggle svg {
    stroke: currentColor;
}

.task-favorite-toggle.is-active svg {
    fill: currentColor;
}

.task-field-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.task-field-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    padding: 0 12px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.task-field-pill svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.task-field-pill.is-active {
    border-color: var(--primary);
    background: var(--surface);
    color: var(--primary-dark);
}

.task-field-pill.is-open {
    border-color: var(--primary);
}

.task-field-reveal {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
    padding: 10px;
}

.task-detail-fields-wrap {
    position: relative;
}

#task-detail-modal .task-field-reveal {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 5;
    width: max-content;
    max-width: calc(100vw - 32px);
    box-shadow: var(--shadow);
}

.todo-quick-add-panel .task-field-pill {
    height: 27px;
    padding: 0 9px;
    font-size: 11px;
}

.todo-quick-add-panel .task-field-pill svg {
    width: 12px;
    height: 12px;
}

.todo-quick-add-panel .task-field-reveal {
    padding: 6px;
}

.mini-calendar {
    display: grid;
    gap: 4px;
    width: 196px;
}

.mini-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mini-calendar-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
}

.mini-calendar-nav {
    display: flex;
    gap: 1px;
}

.mini-calendar-nav button {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    border-radius: 5px;
    color: var(--muted);
}

.mini-calendar-nav button:hover {
    background: var(--surface-strong);
}

.mini-calendar-nav svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mini-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 9px;
    color: var(--muted);
}

.mini-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.mini-calendar-day {
    height: 20px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: none;
    font-size: 10px;
    color: var(--text);
}

.mini-calendar-day:hover {
    background: var(--surface-strong);
}

.mini-calendar-day.is-muted {
    color: var(--muted);
    opacity: 0.55;
}

.mini-calendar-day.is-today {
    border-color: var(--primary);
}

.mini-calendar-day.is-selected {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.mini-calendar-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

.mini-calendar-footer button {
    border: 0;
    background: none;
    font-size: 10px;
    font-weight: 700;
    color: var(--primary-dark);
}

.mini-datetime-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mini-time-columns {
    display: flex;
    gap: 8px;
    padding-left: 10px;
    border-left: 1px solid var(--line);
}

.mini-time-col {
    width: 44px;
    max-height: 190px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scrollbar-width: none;
}

.mini-time-col::-webkit-scrollbar {
    display: none;
}

.mini-time-item {
    flex: 0 0 auto;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.mini-time-item:hover {
    background: var(--surface-strong);
}

.mini-time-item.is-selected {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}

.mini-option-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 130px;
}

.mini-option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    text-align: left;
    font-size: 12px;
    color: var(--text);
}

.mini-option-item svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mini-option-item:hover {
    background: var(--surface-strong);
}

.mini-option-item.is-selected {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}

.mini-option-item[data-priority-value="low"] {
    color: #16a34a;
}

.mini-option-item[data-priority-value="medium"] {
    color: #b58900;
}

.mini-option-item[data-priority-value="high"] {
    color: var(--danger);
}

.mini-option-item[data-priority-value="low"].is-selected {
    background: #16a34a;
    color: #fff;
}

.mini-option-item[data-priority-value="medium"].is-selected {
    background: #b58900;
    color: #fff;
}

.mini-option-item[data-priority-value="high"].is-selected {
    background: var(--danger);
    color: #fff;
}

.task-detail-notes-field {
    display: grid;
    gap: 4px;
}

.task-stage-field {
    display: grid;
    gap: 4px;
}

.task-stage-field .field-label {
    font-size: 12px;
    color: var(--muted);
}

.task-stage-track {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.task-stage-chip {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--muted);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.task-stage-chip.is-active {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
    color: #fff;
}

.task-stage-add {
    flex: 0 0 auto;
    border: 1px dashed var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.task-detail-notes-field .field-label {
    font-size: 12px;
    color: var(--muted);
}

.task-detail-notes-field textarea,
.task-detail-notes-field select,
.task-detail-notes-field input[type="date"],
.task-contact-input-wrap input {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 12px;
    background: var(--surface);
    font-size: 14px;
    resize: vertical;
}

.task-detail-inline-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.task-list-select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 12px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    text-align: left;
}

.task-list-select-button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.task-contact-picker,
.task-contact-input-wrap {
    position: relative;
}

.task-contact-input-wrap input {
    width: 100%;
    min-height: 38px;
    padding-right: 64px;
    color: var(--text);
}

.task-contact-clear,
.task-contact-open {
    position: absolute;
    top: 50%;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
}

.task-contact-clear {
    right: 6px;
}

.task-contact-open {
    right: 32px;
}

.task-contact-open svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.task-contact-clear[hidden],
.task-contact-open[hidden] {
    display: none;
}

.task-contact-clear:hover,
.task-contact-open:hover {
    background: var(--line);
    color: var(--text);
}

.task-contact-options {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 20;
    display: grid;
    max-height: 220px;
    margin-top: 4px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(23, 33, 31, 0.12);
}

.task-contact-options[hidden] {
    display: none;
}

.task-contact-option {
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.task-contact-option:hover,
.task-contact-option.is-active {
    background: #eef5f3;
}

.task-contact-option.is-selected {
    color: var(--primary-dark);
    font-weight: 700;
}

.task-contact-empty {
    padding: 8px 12px;
    color: var(--muted);
    font-size: 13px;
}

.todo-task-meta-contact {
    color: var(--primary-dark);
    font-weight: 700;
}

/* Kisi detayi: kisiye bagli gorevler */
.contact-links[hidden] {
    display: none;
}

.contact-links .section-head {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.contact-links-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.contact-links-actions .secondary-button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.contact-task-list {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
}

.contact-task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 10px 12px;
    cursor: pointer;
}

.contact-task-row input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
}

.contact-task-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.contact-task-row.is-done .contact-task-title {
    color: var(--muted);
    text-decoration: line-through;
}

.contact-task-due {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
}

.task-attachments {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-attachments-row {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    padding: 2px;
}

.task-attachment-chip {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-strong);
}

.task-attachment-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.task-attachment-file-icon {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
}

.task-attachment-remove {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    font-size: 10px;
    line-height: 1;
    display: grid;
    place-items: center;
}

.task-attachments-add {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: none;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.task-attachments-add svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.task-subtask-list {
    display: grid;
}

.task-subtask-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 2px;
}

.task-subtask-row:last-child {
    border-bottom: 0;
}

.task-subtask-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--primary);
}

.task-subtask-title-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    color: var(--text);
}

.task-subtask-title-input.is-done {
    color: var(--muted);
    text-decoration: line-through;
}

.task-subtask-delete {
    flex: 0 0 auto;
    border: 0;
    background: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
}

.task-subtask-add-row {
    position: relative;
    display: flex;
}

.task-subtask-add-row input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 36px 0 10px;
    background: var(--surface);
    font-size: 14px;
}

.task-subtask-add-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 38px;
    border: 0;
    background: none;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-subtask-add-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.notification-actions button {
    min-height: 34px;
    border-radius: 8px;
    padding: 0 12px;
}

.bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 8;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
}

.bottom-nav button {
    display: flex;
    flex-direction: column;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.bottom-nav svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.bottom-nav button.is-active {
    background: var(--surface-strong);
    color: var(--primary-dark);
}

.desktop-nav-extra {
    display: none;
}

.fab-button {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 9;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(17, 100, 102, 0.18);
    border-radius: 16px;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 12px 24px rgba(17, 100, 102, 0.28);
}

.fab-button.is-hidden {
    display: none;
}

.fab-button svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.transaction-fab-button {
    right: max(18px, env(safe-area-inset-right));
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    background: rgba(13, 26, 24, 0.42);
    padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
    overflow: hidden;
}

body:has(.modal.is-open) {
    overflow: hidden;
}

/* .bottom-nav'daki backdrop-filter kendi bilesim (compositing) katmanini olusturuyor;
 * bu katman bazi tarayicilarda modal acildiktan sonra dogru sirada yeniden olusturulmuyor
 * ve modal karartmasinin sidebar'i kapsamiyormus gibi gorunmesine yol aciyor. Modal acikken
 * sidebar zaten karanlik/opak modalin tamamen arkasinda kaldigindan, katmani tamamen
 * kaldirmak (display:none) hem sorunu kesin cozuyor hem de gorsel bir kayip yaratmiyor.
 */
@media (max-width: 759px) {
    body:has(.modal.is-open):not(.has-desktop-contact-panel):not(:has(#todo-share-modal.is-open)):not(:has(#notebook-share-modal.is-open)):not(:has(#section-share-modal.is-open)) .bottom-nav {
        display: none;
    }
}

/* Masaustunde yan menu modal acikken de gorunur kalir (karartmanin altinda); backdrop-filter katmani kaldirilarak
 * eski cizim hatasi onlenir ve menu tiklanamaz olur. */
@media (min-width: 760px) {
    body:has(.modal.is-open) .bottom-nav {
        backdrop-filter: none;
        pointer-events: none;
    }
}

.map-modal {
    z-index: 32;
}

.site-dialog-modal {
    z-index: 44;
}

.message-options-modal {
    z-index: 43;
}

.site-dialog-panel {
    width: min(340px, 100%);
    box-shadow: var(--shadow);
}

.site-dialog-body {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.site-dialog-body h2 {
    margin: 0;
    font-size: 17px;
}

.site-dialog-body p {
    margin: 0;
    color: var(--muted);
    white-space: pre-line;
}

.site-dialog-body textarea {
    width: 100%;
    min-height: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
    color: var(--text);
    padding: 10px 12px;
    resize: none;
}

.site-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.message-options-panel {
    width: min(420px, 100%);
    box-shadow: var(--shadow);
}

.message-options-body {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.message-options-body p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.message-options-list {
    display: grid;
    gap: 8px;
}

.message-options-list button {
    display: grid;
    min-height: 48px;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--primary-dark);
    padding: 0 12px;
    text-align: left;
    font-weight: 700;
}

.message-options-list svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.modal.is-open {
    display: flex;
}

#entry-modal[data-mode="contact"],
#entry-modal[data-mode="contact-edit"],
#entry-modal[data-mode="summary"],
#entry-modal:has(.form-grid[data-mode="contact"]),
#entry-modal:has(.form-grid[data-mode="contact-edit"]),
#entry-modal:has(.form-grid[data-mode="summary"]) {
    inset: 78px 0 0;
    align-items: flex-start;
    background: var(--bg);
    padding: 8px 16px 0;
    overflow-y: auto;
}

.modal-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(520px, 100%);
    max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: 0 auto;
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
}

#entry-modal[data-mode="contact"] .modal-panel,
#entry-modal[data-mode="contact-edit"] .modal-panel,
#entry-modal[data-mode="summary"] .modal-panel,
#entry-modal:has(.form-grid[data-mode="contact"]) .modal-panel,
#entry-modal:has(.form-grid[data-mode="contact-edit"]) .modal-panel,
#entry-modal:has(.form-grid[data-mode="summary"]) .modal-panel {
    width: min(740px, 100%);
    max-height: none;
    box-shadow: none;
}

.modal-panel > .section-head {
    margin-bottom: 0;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

#entry-modal[data-mode="contact"] .modal-panel > .section-head,
#entry-modal[data-mode="contact-edit"] .modal-panel > .section-head,
#entry-modal[data-mode="summary"] .modal-panel > .section-head,
#entry-modal:has(.form-grid[data-mode="contact"]) .modal-panel > .section-head,
#entry-modal:has(.form-grid[data-mode="contact-edit"]) .modal-panel > .section-head,
#entry-modal:has(.form-grid[data-mode="summary"]) .modal-panel > .section-head {
    padding: 8px 16px;
}

#entry-modal[data-mode="contact"] .modal-panel .form-grid,
#entry-modal[data-mode="contact-edit"] .modal-panel .form-grid,
#entry-modal[data-mode="summary"] .modal-panel .form-grid,
#entry-modal:has(.form-grid[data-mode="contact"]) .modal-panel .form-grid,
#entry-modal:has(.form-grid[data-mode="contact-edit"]) .modal-panel .form-grid,
#entry-modal:has(.form-grid[data-mode="summary"]) .modal-panel .form-grid {
    padding-top: 8px;
}

.modal-back-button {
    display: none;
}

#entry-modal[data-mode="contact"] .modal-panel > .section-head,
#entry-modal[data-mode="contact-edit"] .modal-panel > .section-head,
#entry-modal[data-mode="summary"] .modal-panel > .section-head,
#entry-modal:has(.form-grid[data-mode="contact"]) .modal-panel > .section-head,
#entry-modal:has(.form-grid[data-mode="contact-edit"]) .modal-panel > .section-head,
#entry-modal:has(.form-grid[data-mode="summary"]) .modal-panel > .section-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-bottom: 0;
    background: transparent;
}

#entry-modal[data-mode="contact"] .modal-back-button,
#entry-modal[data-mode="contact-edit"] .modal-back-button,
#entry-modal[data-mode="summary"] .modal-back-button,
#entry-modal:has(.form-grid[data-mode="contact"]) .modal-back-button,
#entry-modal:has(.form-grid[data-mode="contact-edit"]) .modal-back-button,
#entry-modal:has(.form-grid[data-mode="summary"]) .modal-back-button {
    display: inline-grid;
}

#entry-modal[data-mode="contact"] .modal-panel > .section-head > [aria-label="Kapat"],
#entry-modal[data-mode="contact-edit"] .modal-panel > .section-head > [aria-label="Kapat"],
#entry-modal[data-mode="summary"] .modal-panel > .section-head > [aria-label="Kapat"],
#entry-modal:has(.form-grid[data-mode="contact"]) .modal-panel > .section-head > [aria-label="Kapat"],
#entry-modal:has(.form-grid[data-mode="contact-edit"]) .modal-panel > .section-head > [aria-label="Kapat"],
#entry-modal:has(.form-grid[data-mode="summary"]) .modal-panel > .section-head > [aria-label="Kapat"] {
    display: none;
}

#entry-modal[data-mode="contact"] .modal-title-actions,
#entry-modal[data-mode="contact-edit"] .modal-title-actions,
#entry-modal[data-mode="summary"] .modal-title-actions,
#entry-modal:has(.form-grid[data-mode="contact"]) .modal-title-actions,
#entry-modal:has(.form-grid[data-mode="contact-edit"]) .modal-title-actions,
#entry-modal:has(.form-grid[data-mode="summary"]) .modal-title-actions {
    grid-column: 3;
}

#entry-modal[data-mode="summary"] #modal-title,
#entry-modal:has(.form-grid[data-mode="summary"]) #modal-title {
    visibility: hidden;
}

.modal-title-actions {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

#entry-modal[data-mode="summary"] .modal-title-actions,
#entry-modal:has(.form-grid[data-mode="summary"]) .modal-title-actions {
    display: flex;
}

.modal-panel .form-grid {
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 16px;
}

.map-panel {
    width: min(720px, 100%);
}

.map-body {
    display: grid;
    gap: 10px;
    min-height: 0;
    padding: 14px 16px 16px;
}

.map-canvas {
    min-height: 340px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
}

.map-status {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.map-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.form-grid label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.form-grid .form-icon-field > input,
.form-grid .form-icon-field > textarea {
    padding-left: 42px;
}

.form-grid .form-icon-field > .phone-composite {
    grid-template-columns: 82px minmax(0, 1fr);
    padding-left: 0;
}

.form-grid .form-icon-field:has(.phone-composite) {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}

.form-grid .form-icon-field:has(.phone-composite) > .form-field-icon {
    position: static;
    align-self: center;
    justify-self: center;
    transform: none;
}

.form-grid .form-icon-field:has(.phone-composite) > .form-field-label {
    position: absolute;
}

.photo-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-fields .photo-picker {
    display: none;
}

.photo-preview {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
}

.file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-fields,
.generic-fields,
.transaction-fields,
.summary-fields {
    display: grid;
    gap: 10px;
}

.contact-form-section {
    display: grid;
    gap: 10px;
}

.contact-form-section h3 {
    margin: 4px 0 0;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 700;
}

.contact-edit-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    padding: 14px;
}

.contact-edit-hero .avatar {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    font-size: 22px;
}

.contact-edit-hero span:not(.avatar) {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.contact-edit-hero strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 22px;
    font-weight: 530;
}

.contact-edit-hero small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}

.form-grid[data-mode="contact"] .generic-fields,
.form-grid[data-mode="contact"] .transaction-fields,
.form-grid[data-mode="contact"] .summary-fields,
.form-grid[data-mode="contact-edit"] .generic-fields,
.form-grid[data-mode="contact-edit"] .transaction-fields,
.form-grid[data-mode="contact-edit"] .summary-fields,
.form-grid[data-mode="transaction"] .contact-fields,
.form-grid[data-mode="transaction"] .generic-fields,
.form-grid[data-mode="transaction"] .summary-fields,
.form-grid[data-mode="summary"] .contact-fields,
.form-grid[data-mode="summary"] .generic-fields,
.form-grid[data-mode="summary"] .transaction-fields,
.form-grid[data-mode="generic"] .contact-fields {
    display: none;
}

.form-grid[data-mode="generic"] .transaction-fields,
.form-grid[data-mode="generic"] .summary-fields {
    display: none;
}

.form-grid[data-mode="summary"] > .primary-button {
    display: none;
}

.form-grid:not([data-kind="planner"]) .plan-schedule-field {
    display: none;
}

.address-row {
    --address-edit-height: 70px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 0;
    align-items: stretch;
}

.address-row label {
    grid-row: 1 / span 2;
    min-width: 0;
}

.address-row textarea {
    height: var(--address-edit-height);
    min-height: var(--address-edit-height);
    max-height: var(--address-edit-height);
    resize: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.address-action-button {
    display: grid;
    width: 38px;
    height: calc(var(--address-edit-height) / 2);
    min-height: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0;
    background: #fbfdfc;
    color: var(--primary-dark);
    font-weight: 700;
}

.location-button.address-action-button {
    grid-column: 2;
}

.address-search-button.address-action-button {
    grid-column: 2;
    grid-row: 1;
    border-top-right-radius: 8px;
}

.location-button.address-action-button {
    grid-row: 2;
    border-top: 0;
    border-bottom-right-radius: 8px;
}

.address-action-button svg {
    width: 18px;
    height: 18px;
}

.address-action-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.location-result {
    display: block;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    padding: 11px 12px;
}

.location-result[hidden] {
    display: none;
}

.location-result span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.location-result a {
    color: var(--text);
    font-weight: 400;
    text-decoration: none;
    word-break: break-word;
}

.location-result small {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
}

.location-result small:empty {
    display: none;
}

.location-result-action {
    display: inline-grid;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
    color: var(--primary-dark);
}

.location-result-action svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.location-result-action:disabled,
.location-result-action.is-disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.location-result-break {
    display: block;
    content: "";
    margin-top: 6px;
}

.summary-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    padding: 12px;
    color: inherit;
    text-decoration: none;
}

.contact-view-info-list .summary-card {
    cursor: pointer;
}

.contact-view-info-list .summary-card:hover {
    border-color: rgba(17, 100, 102, 0.28);
    background: #f7fbfa;
}

.summary-card[hidden],
.view-address-location-row[hidden],
.view-address-row[hidden],
.view-location-result[hidden],
.view-location-line[hidden],
.location-result-action[hidden] {
    display: none;
}

.summary-card span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.summary-card strong {
    display: block;
    margin-top: 5px;
    font-weight: 400;
}

.summary-card .social-value {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.social-value-icon {
    display: inline-grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    color: var(--primary-dark);
}

.social-value-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.contact-view-info-list .summary-card > span {
    display: none;
}

.contact-view-info-list .summary-card strong {
    margin-top: 0;
}

.summary-card.has-profile-share-toggle {
    position: relative;
    padding-right: 62px;
}

.custom-field-list {
    display: grid;
    gap: 10px;
}

.custom-field-card {
    position: relative;
}

.custom-field-card .custom-field-label {
    display: block;
    margin: 0 0 5px 28px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.contact-view-info-list .custom-field-card > .custom-field-label {
    display: block;
}

.custom-field-card .social-value {
    padding-right: 42px;
}

.custom-field-card.bank-account-card {
    min-height: 96px;
    padding-right: 62px;
}

.custom-field-card.bank-account-card .social-value {
    padding-right: 0;
}

.custom-field-card [data-social-value-text] {
    white-space: pre-line;
}

.bank-account-card .profile-share-toggle {
    top: 12px;
    transform: none;
}

.bank-account-copy-button {
    position: absolute;
    right: 12px;
    top: 52px;
    z-index: 3;
    display: grid;
    width: 40px;
    height: 36px;
    min-height: 36px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
}

.bank-account-copy-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.custom-field-remove {
    position: absolute;
    right: 10px;
    top: 50%;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--danger);
    transform: translateY(-50%);
}

.custom-field-remove svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.custom-field-add-form {
    position: relative;
    display: grid;
    grid-template-columns: minmax(104px, 128px) minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: stretch;
    overflow: visible;
}

.custom-field-add-form.is-iban {
    grid-template-columns: minmax(92px, 116px) minmax(0, 1fr) 42px;
}

.custom-field-add-form[hidden] {
    display: none;
}

.bank-account-editor {
    display: grid;
    gap: 10px;
}

.bank-account-editor[hidden] {
    display: none;
}

.bank-account-add-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.bank-account-row {
    display: grid;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(8, 81, 79, 0.1);
}

.bank-account-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.bank-account-iban-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
    align-items: stretch;
}

.bank-account-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.bank-account-iban-row > .form-icon-field {
    min-width: 0;
}

.bank-account-iban-row .form-icon-field > .form-field-icon {
    z-index: 2;
}

.bank-account-row .phone-remove-button {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
}

.custom-field-add-form select,
.custom-field-add-form input,
.bank-account-add-form input {
    position: relative;
    z-index: 1;
    min-height: 42px;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    padding: 0 12px;
}

.custom-field-add-form select {
    z-index: 2;
    cursor: pointer;
    pointer-events: auto;
}

.custom-field-add-button {
    display: grid;
    position: relative;
    z-index: 1;
    width: 42px;
    min-width: 42px;
    padding: 0;
    place-items: center;
}

.custom-field-add-button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.profile-share-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 40px;
    height: 36px;
    min-height: 36px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    color: var(--text-muted);
    transform: translateY(-50%);
    cursor: pointer;
}

.profile-share-toggle.is-off {
    background: #fff;
    color: var(--text-muted);
    opacity: 0.68;
}

.profile-share-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.profile-share-toggle svg circle {
    fill: currentColor;
    stroke: none;
}

.contact-view-info-list .summary-card > .profile-share-toggle {
    display: grid;
}

.contact-view-info-list .address-location-card.has-profile-share-toggle {
    padding-right: 0;
}

.contact-view-info-list .address-location-card.has-profile-share-toggle .profile-share-toggle {
    position: static;
    width: 34px;
    height: 24px;
    min-height: 24px;
    border-left: 0;
    border-radius: 0;
    background: #fbfdfc;
    transform: none;
}

.social-value [data-social-value-text] {
    min-width: 0;
    color: var(--text);
    font-size: inherit;
    font-weight: 400;
    word-break: break-word;
}

.contact-view-extra-phones {
    display: grid;
    gap: 10px;
}

.contact-view-extra-phones .extra-phone-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 8px;
    align-items: center;
}

.contact-view-extra-phones a {
    color: inherit;
    text-decoration: none;
}

.extra-phone-action-row + .extra-phone-action-row {
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.extra-phone-call-link {
    min-width: 0;
}

.contact-view-extra-phones .extra-phone-call-link {
    display: flex;
    grid-column: 1;
    margin-top: 0;
}

.extra-phone-whatsapp-link {
    margin-left: 0;
}

.contact-view-extra-phones .extra-phone-whatsapp-link {
    display: inline-grid;
    grid-column: 2;
    justify-self: end;
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    margin-top: 0;
    margin-left: 0;
    border-radius: 0;
}

.contact-view-extra-phones .extra-phone-whatsapp-link svg {
    width: 22px;
    height: 22px;
}

.address-location-card {
    display: grid;
    gap: 8px;
}

.contact-view-info-list .address-location-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.contact-view-info-list .address-location-card:hover {
    border-color: transparent;
    background: transparent;
}

.view-address-row {
    --address-action-gap: 6px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
    align-items: stretch;
}

[data-contact-view-address-row] {
    --address-action-gap: 0;
    --address-view-height: 78px;
    gap: 0;
}

.view-address-actions {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--address-action-gap);
}

.address-location-card.has-profile-share-toggle [data-contact-view-address-row] {
    grid-template-columns: minmax(0, 1fr) 34px;
}

.address-location-card.has-profile-share-toggle .view-address-actions {
    grid-template-rows: 27px 24px 27px;
}

.view-address-box {
    min-height: 70px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px 13px;
}

[data-contact-view-address-row] .view-address-box {
    height: var(--address-view-height);
    min-height: var(--address-view-height);
    max-height: var(--address-view-height);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    overflow: hidden;
}

[data-contact-view-address-row] .view-address-actions {
    height: var(--address-view-height);
}

.view-address-box strong {
    margin-top: 0;
    line-height: 1.35;
    word-break: break-word;
}

.view-location-result {
    display: block;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    padding: 11px 12px;
}

.view-location-line {
    display: block;
    min-width: 0;
}

.view-location-line span,
.view-location-line small {
    min-width: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    word-break: break-word;
}

.view-location-line span {
    font-size: 16px;
}

.view-location-line + .view-location-line {
    margin-top: 6px;
}

.view-location-line .social-value {
    display: inline;
}

.view-location-line [data-social-value-text] {
    display: inline;
    color: inherit;
    font-size: inherit;
}

.view-location-line .social-value-icon {
    display: none;
}

.view-location-line .location-result-action,
.view-address-row .location-result-action {
    flex: 0 0 auto;
}

.view-address-row .location-result-action {
    width: 38px;
    height: 100%;
    min-height: 0;
    margin-left: 0;
}

.address-location-card.has-profile-share-toggle .view-address-row .location-result-action {
    width: 34px;
}

[data-contact-view-address-row] .location-result-action {
    margin-top: 0;
    border-left: 0;
    border-radius: 0;
    background: #fbfdfc;
}

[data-contact-view-address-row] .location-result-action:first-child {
    border-top-right-radius: 8px;
}

[data-contact-view-address-row] .location-result-action:last-child {
    border-bottom-right-radius: 8px;
}

.address-location-card.has-profile-share-toggle [data-contact-view-address-row] .location-result-action {
    height: 100%;
}

.address-location-card.has-profile-share-toggle [data-contact-view-address-row] .profile-share-toggle svg {
    width: 19px;
    height: 19px;
}

.view-address-location-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 8px;
    align-items: center;
}

.view-address-location-row strong,
.view-address-location-row a,
.view-address-location-row > span,
.view-address-location-row small {
    min-width: 0;
}

.view-address-location-row strong,
.view-address-location-row a,
.view-address-location-row > span {
    margin-top: 0;
}

.view-address-location-row small {
    color: var(--text);
    font-weight: 400;
    line-height: 1.35;
}

.view-address-location-row .location-result-action {
    position: static;
    width: 34px;
    height: 34px;
    min-height: 34px;
}

.view-address-location-row .location-result-action svg {
    width: 16px;
    height: 16px;
}

.contact-view-head {
    display: grid;
    justify-items: center;
    text-align: center;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 0 12px 14px;
}

.contact-view-main {
    min-width: 0;
    width: 100%;
}

.contact-view-head span:not(.avatar),
.contact-view-head small {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.form-grid[data-mode="summary"] .contact-view-main > span {
    display: none;
}

.contact-view-head strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: clamp(28px, 6vw, 40px);
    line-height: 1.04;
    font-weight: 530;
}

.contact-view-head .avatar {
    width: min(150px, 36vw);
    height: min(150px, 36vw);
    flex-basis: min(150px, 36vw);
    font-size: 36px;
    background: var(--surface-strong);
}

.contact-view-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.contact-view-actions .icon-button {
    width: 100%;
    height: 44px;
    min-height: 44px;
    border-radius: 8px;
    background: var(--surface-strong);
}

.contact-view-page {
    display: grid;
    gap: 12px;
    padding-bottom: 24px;
}

.contact-view-toolbar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    align-self: stretch;
    margin-bottom: -4px;
}

.contact-view-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-view-profile {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 6px;
    border-radius: 8px;
    background: var(--surface);
    padding: 10px 16px 14px;
}

.contact-view-tags-row {
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.contact-view-profile > strong {
    color: var(--text);
    font-size: clamp(26px, 5.4vw, 36px);
    line-height: 1.04;
    font-weight: 530;
}

.contact-view-company-heading {
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
}

.contact-view-profile > small {
    color: var(--muted);
    font-size: 13px;
}

.contact-view-avatar {
    width: min(126px, 31vw);
    height: min(126px, 31vw);
    flex-basis: min(126px, 31vw);
    font-size: 32px;
    background: var(--surface-strong);
    margin-top: -4px;
}

.contact-view-avatar.is-profile-photo-picker {
    cursor: pointer;
}

.contact-view-info-list {
    display: grid;
    gap: 10px;
}

.contact-view-info-section {
    display: grid;
    gap: 8px;
}

.contact-view-info-section[hidden] {
    display: none;
}

.contact-view-danger-section {
    display: grid;
    margin-top: 2px;
}

.contact-view-danger-section[hidden] {
    display: none;
}

.contact-view-delete-bottom {
    width: 100%;
    justify-content: center;
    border-color: rgba(190, 18, 60, 0.28);
    background: #fff;
}

.incoming-profile-card {
    display: grid;
    gap: 12px;
    cursor: pointer;
}

.contact-view-info-list .incoming-profile-card:hover {
    border-color: rgba(17, 100, 102, 0.35);
    background: var(--surface-strong);
}

.incoming-profile-card:focus-visible {
    outline: 2px solid #0a84ff;
    outline-offset: 2px;
}

.incoming-profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.incoming-profile-summary {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.incoming-profile-modal .modal-panel {
    grid-template-rows: auto auto minmax(0, 1fr);
    max-width: 560px;
}

.incoming-profile-modal-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    padding: 12px;
}

.incoming-profile-modal-head strong {
    display: block;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
}

.incoming-profile-modal-head small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
}

.incoming-profile-avatar {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    font-size: 15px;
}

.incoming-profile-head strong {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
}

.incoming-profile-head small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
}

.incoming-profile-list {
    display: grid;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 16px;
}

.incoming-profile-group {
    display: grid;
    gap: 8px;
}

.incoming-profile-group h3 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 700;
}

.incoming-profile-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 76px;
    gap: 10px;
    align-items: center;
    min-height: 62px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    padding: 10px;
    font-size: 13px;
}

.incoming-profile-item-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: var(--primary-dark);
    background: var(--surface-strong);
}

.incoming-profile-item-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.incoming-profile-item-content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.incoming-profile-item-content span {
    display: block;
    color: var(--muted);
}

.incoming-profile-item-content strong {
    margin: 0;
    color: var(--text);
    font-weight: 500;
    word-break: break-word;
}

.incoming-profile-add {
    width: 76px;
    min-height: 38px;
    padding: 0 10px;
}

.incoming-profile-head-action {
    justify-self: end;
}

.incoming-profile-add:disabled {
    opacity: 0.75;
    cursor: default;
}

.contact-view-info-section h3 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 700;
}

.profile-view-page {
    display: grid;
    gap: 12px;
    padding-bottom: 24px;
}

.profile-self-card {
    margin-top: 0;
    padding-top: 10px;
}

.profile-self-card .profile-photo-upload {
    cursor: pointer;
    margin-top: -2px;
}

.profile-self-card .eyebrow {
    margin: 0;
}

.profile-self-card .contact-view-avatar {
    width: min(132px, 32vw);
    height: min(132px, 32vw);
    flex-basis: min(132px, 32vw);
}

.profile-self-card > strong,
.profile-self-card [data-profile-name] {
    font-size: clamp(32px, 7vw, 42px);
}

.profile-name-row {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.profile-name-row [data-profile-name] {
    min-width: 0;
    color: var(--text);
    line-height: 1.04;
    font-weight: 530;
    overflow-wrap: anywhere;
}

.profile-name-edit {
    width: 34px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 34px;
}

.profile-name-edit svg {
    width: 17px;
    height: 17px;
}

.profile-section-compact {
    box-shadow: none;
}

.profile-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.profile-section-head .icon-button {
    width: 42px;
    height: 42px;
    min-height: 42px;
}

.profile-edit-modal .modal-panel {
    width: min(520px, 100%);
}

.profile-contact-form {
    padding: 16px;
}

.profile-main-form {
    padding: 16px;
}

.profile-contact-editor {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: end;
    gap: 10px;
}

#profile-contact-modal[data-mode="manage"] [data-profile-contact-delete],
.profile-contact-form[data-mode="manage"] .profile-contact-editor {
    display: none;
}

.profile-contact-form[data-mode="manage"] .profile-contact-manager {
    display: grid;
}

.profile-contact-form[data-mode="single"] .profile-contact-manager {
    display: none;
}

.profile-contact-editor label {
    min-width: 0;
}

.profile-contact-editor select,
.profile-contact-editor input {
    min-height: 46px;
    width: 100%;
}

.profile-contact-type-wrap {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.profile-contact-type-icon {
    display: inline-grid;
    width: 38px;
    height: 46px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--primary-dark);
    background: var(--surface-strong);
}

.profile-contact-type-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-button.is-disabled,
.icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.summary-card a {
    display: inline-flex;
    margin-top: 5px;
    color: var(--primary-dark);
    font-weight: 400;
}

@media (min-width: 760px) {
    :root {
        --desktop-nav-width: 180px;
        --desktop-content-offset: calc(var(--desktop-nav-width) + 24px);
    }

    .favorite-arrows {
        display: flex;
    }

    body.is-authenticated {
        overflow: hidden;
    }

    .is-authenticated .app-shell {
        display: grid;
        grid-template-columns: var(--desktop-nav-width) minmax(0, 0.95fr) minmax(0, 1.35fr);
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: 8px;
        height: 100vh;
        min-height: 100vh;
        padding: 0 8px 0 0;
        overflow: hidden;
    }

    .is-authenticated .topbar {
        grid-column: 1 / -1;
        margin: 0 -8px 0 0;
        padding: 8px 18px 7px;
        min-height: 58px;
    }

    .is-authenticated .topbar h1 {
        font-size: 21px;
        line-height: 1.05;
    }

    .is-authenticated .topbar .eyebrow {
        font-size: 10px;
        line-height: 1.1;
        margin-bottom: 2px;
    }

    .is-authenticated .menu-toggle {
        display: none;
    }

    .is-authenticated .drawer-overlay {
        display: none;
    }

    .is-authenticated .side-drawer {
        display: none;
    }

    .is-authenticated .bottom-nav {
        position: static;
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        height: 100%;
        align-content: start;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: var(--shadow);
        padding: 10px;
    }

    .is-authenticated .bottom-nav button,
    .is-authenticated .desktop-nav-extra button {
        display: grid;
        min-height: 38px;
        grid-template-columns: 26px minmax(0, 1fr);
        align-items: center;
        gap: 6px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--muted);
        justify-content: start;
        text-align: left;
        padding: 0 12px;
        font-size: 13px;
        font-weight: 700;
    }

    .is-authenticated .bottom-nav svg,
    .is-authenticated .desktop-nav-extra svg {
        width: 19px;
        height: 19px;
        justify-self: center;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
    }

    .is-authenticated .desktop-nav-extra {
        display: grid;
        gap: 2px;
        margin-top: 4px;
        border-top: 1px solid rgba(217, 226, 223, 0.72);
        padding-top: 4px;
    }

    .is-authenticated .main-content {
        display: grid;
        grid-column: 2 / 4;
        grid-row: 2;
        width: 100%;
        height: 100%;
        min-width: 0;
        padding: 10px 0 0;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: start;
        gap: 8px;
        overflow: hidden;
    }

    .has-desktop-planner-panel .main-content {
        grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
        gap: 8px;
    }

    .has-desktop-notes-panel .main-content {
        grid-template-columns: minmax(220px, var(--notes-tree-width, 320px)) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 0;
        padding-top: 0;
    }

    .has-desktop-notes-panel [data-notes-desktop-picker-bar] {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 0;
        border-radius: 8px 8px 0 0;
    }

    .has-desktop-notes-panel .notes-desktop-columns {
        border-top: 0;
        border-radius: 0 0 8px 8px;
    }

    .has-desktop-notes-panel #screen-note-page {
        border-radius: 0 0 8px 0;
    }

    .is-authenticated .fab-button {
        bottom: calc(62px + env(safe-area-inset-bottom));
    }

    .is-authenticated #screen-contacts {
        grid-column: 1 / -1;
        min-width: 0;
        max-height: 100%;
        overflow-y: auto;
        padding-right: 2px;
        scrollbar-gutter: stable;
    }

    .has-desktop-contact-panel #screen-contacts {
        grid-column: auto;
        padding-bottom: 92px;
    }

    .is-authenticated #screen-planner {
        grid-column: 1 / -1;
        align-self: stretch;
        min-width: 0;
        height: 100%;
        overflow-y: auto;
        padding-right: 2px;
        scrollbar-gutter: stable;
    }

    .has-desktop-planner-panel #screen-planner {
        grid-column: auto;
    }

    .has-desktop-planner-panel #screen-todo-tasks {
        align-self: stretch;
        min-width: 0;
        height: 100%;
        overflow-y: auto;
        padding-right: 2px;
        scrollbar-gutter: stable;
    }

    .has-desktop-planner-panel #screen-todo-tasks [data-target="planner"] {
        display: none;
    }

    /* Notlar sayfasi gibi: iki sutun tek beyaz kart, arada ince cizgi. */
    .has-desktop-planner-panel .main-content {
        gap: 0;
        padding-top: 0;
    }

    .has-desktop-planner-panel #screen-planner {
        border: 1px solid var(--line);
        border-radius: 8px 0 0 8px;
        background: var(--surface);
        padding: 10px;
    }

    .has-desktop-planner-panel #screen-todo-tasks {
        border: 1px solid var(--line);
        border-left: 0;
        border-radius: 0 8px 8px 0;
        background: var(--surface);
        padding: 12px 16px;
    }

    .is-authenticated #screen-notes {
        grid-column: 1 / -1;
        align-self: stretch;
        min-width: 0;
        height: 100%;
        overflow-y: auto;
        padding-right: 2px;
        scrollbar-gutter: stable;
    }

    .is-authenticated #screen-notes .notes-browser {
        display: none;
    }

    .is-authenticated #screen-notes .notes-desktop-tree {
        display: flex;
    }

    .is-authenticated #screen-notes > .section-head {
        display: none;
    }

    .has-desktop-notes-panel #screen-notes {
        grid-column: auto;
        grid-row: 2;
        overflow-y: hidden;
        padding-right: 0;
        scrollbar-gutter: auto;
    }

    .has-desktop-notes-panel #screen-note-page {
        grid-row: 2;
        align-self: stretch;
        min-width: 0;
        height: 100%;
        overflow-y: auto;
        border-left: 1px solid var(--line);
        background: var(--surface);
        padding: 12px 12px 12px 16px;
        scrollbar-gutter: stable;
    }

    .has-desktop-notes-panel #screen-note-page > .section-head {
        display: none;
    }

    .has-desktop-notes-panel .note-page-title-input {
        border: 0;
        border-radius: 0;
        padding: 0;
        height: auto;
        font-size: 24px;
        font-weight: 400;
        background: transparent;
    }

    .has-desktop-notes-panel .note-page-title-input:focus {
        outline: none;
    }

    .has-desktop-notes-panel .note-page-meta {
        margin-top: 4px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--line);
    }

    .has-desktop-notes-panel .note-block-remove {
        top: auto;
        bottom: 6px;
    }

    .is-authenticated .screen.is-active:not(#screen-contacts):not(#screen-contact-view):not(#screen-contact-detail):not(#screen-planner):not(#screen-todo-tasks):not(#screen-notes):not(#screen-note-page) {
        grid-column: 1 / -1;
        min-width: 0;
        max-height: 100%;
        overflow-y: auto;
        scrollbar-gutter: stable;
    }

    .has-desktop-contact-panel #screen-contact-view,
    .has-desktop-contact-panel #screen-contact-detail {
        min-width: 0;
        max-height: 100%;
        overflow-y: auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: var(--shadow);
        padding: 12px;
        scrollbar-gutter: stable;
    }

    .is-authenticated .fab-button {
        right: calc(18px + env(safe-area-inset-right));
    }

    .has-desktop-contact-panel .fab-button {
        right: var(--contact-fab-right, calc((100vw - var(--desktop-content-offset)) * 0.587 + 30px));
        bottom: calc(22px + env(safe-area-inset-bottom));
    }

    .has-desktop-contact-panel .transaction-fab-button {
        right: max(18px, env(safe-area-inset-right));
    }

    .is-authenticated:not(.has-desktop-contact-panel) .fab-button {
        right: var(--contact-fab-right, calc(30px + env(safe-area-inset-right)));
        bottom: calc(22px + env(safe-area-inset-bottom));
    }

    .has-desktop-contact-panel #entry-modal[data-mode="contact"],
    .has-desktop-contact-panel #entry-modal[data-mode="contact-edit"],
    .has-desktop-contact-panel #entry-modal:has(.form-grid[data-mode="contact"]),
    .has-desktop-contact-panel #entry-modal:has(.form-grid[data-mode="contact-edit"]) {
        inset: 58px 8px 0 calc(var(--desktop-nav-width) + 8px + ((100vw - var(--desktop-content-offset)) * 0.413) + 8px);
        width: auto;
        background: transparent;
        padding: 0;
        overflow: hidden;
    }

    .has-desktop-contact-panel #entry-modal[data-mode="contact"] .modal-panel,
    .has-desktop-contact-panel #entry-modal[data-mode="contact-edit"] .modal-panel,
    .has-desktop-contact-panel #entry-modal:has(.form-grid[data-mode="contact"]) .modal-panel,
    .has-desktop-contact-panel #entry-modal:has(.form-grid[data-mode="contact-edit"]) .modal-panel {
        width: 100%;
        height: 100%;
        max-height: none;
        margin: 0;
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
    }
}

@media (max-width: 640px) {
    .profile-contact-editor {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 8px;
    }

    .profile-contact-manager-row {
        grid-template-columns: 98px minmax(0, 1fr) 38px;
        gap: 6px;
    }

    .summary-band,
    .account-grid {
        grid-template-columns: 1fr;
    }

    .topbar h1 {
        font-size: 21px;
    }

    .main-content {
        padding: 14px;
    }

    .bottom-nav button {
        font-size: 12px;
    }

    .quick-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .type-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .detail-metrics article {
        min-height: 52px;
        padding: 9px 8px;
    }

    .detail-metrics span {
        font-size: 11px;
    }

    .detail-metrics strong {
        font-size: 14px;
    }

    .custom-field-add-form {
        grid-template-columns: minmax(86px, 104px) minmax(0, 1fr) 42px;
    }

    .bank-account-add-form .custom-field-add-button {
        width: 42px;
    }

    .bank-account-detail-row {
        grid-template-columns: 1fr;
    }

    .modal {
        align-items: flex-end;
        padding-right: 10px;
        padding-left: 10px;
    }

    #entry-modal[data-mode="contact"],
    #entry-modal[data-mode="contact-edit"],
    #entry-modal[data-mode="summary"],
    #entry-modal:has(.form-grid[data-mode="contact"]),
    #entry-modal:has(.form-grid[data-mode="contact-edit"]),
    #entry-modal:has(.form-grid[data-mode="summary"]) {
        inset: 78px 0 0;
        align-items: flex-start;
        padding: 4px 8px 0;
    }

    .modal-panel {
        max-height: calc(100vh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    #entry-modal[data-mode="contact"] .modal-panel,
    #entry-modal[data-mode="contact-edit"] .modal-panel,
    #entry-modal[data-mode="summary"] .modal-panel,
    #entry-modal:has(.form-grid[data-mode="contact"]) .modal-panel,
    #entry-modal:has(.form-grid[data-mode="contact-edit"]) .modal-panel,
    #entry-modal:has(.form-grid[data-mode="summary"]) .modal-panel {
        max-height: none;
    }

    .map-panel {
        width: 100%;
    }

    .map-canvas {
        min-height: 52vh;
    }

    .map-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .detail-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.back-exit-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 12px);
    background: rgba(23, 33, 31, 0.92);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 9999;
}

.back-exit-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.notification-item {
    cursor: pointer;
    align-items: center !important;
}

.notification-item .notification-body {
    gap: 4px;
}

.notification-read-button {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-left: auto;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
}

.notification-read-button:hover {
    background: var(--surface-strong);
}

.notification-read-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.notification-item.is-unread {
    border-left: 4px solid var(--primary);
}

.notification-item.is-unread strong {
    font-weight: 800;
}

.notification-item.is-read {
    opacity: 0.62;
    box-shadow: none;
}

.notification-item.is-read strong {
    font-weight: 500;
}

.notification-push-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px 14px;
}

.notification-push-card[hidden] {
    display: none;
}

.notification-push-card strong {
    display: block;
    font-size: 14px;
}

.notification-push-card small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.notification-push-card .primary-button {
    flex: 0 0 auto;
}

.notification-reconnect-link {
    justify-self: center;
    margin-top: 16px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.notification-reconnect-link[hidden] {
    display: none;
}

.vehicle-record-dates {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.vehicle-record-dates .vehicle-record-calendar-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    max-width: 120px;
    line-height: 1.2;
}

.vehicle-record-dates .vehicle-record-calendar-check input {
    flex: 0 0 18px;
}

.vehicle-record-dates .vehicle-record-calendar-check span {
    font-size: 12px;
}

.vehicle-record-dates .vehicle-record-calendar-check[hidden] {
    display: none;
}

.vehicle-record-reminder-hint {
    margin-top: -4px;
}

@media (max-width: 560px) {
    .vehicle-record-dates {
        grid-template-columns: 1fr;
    }

    .vehicle-record-dates .vehicle-record-calendar-check {
        min-height: 0;
        max-width: none;
    }
}

.vehicle-record-amount-vendor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 10px;
    align-items: end;
}

@media (max-width: 560px) {
    .vehicle-record-amount-vendor {
        grid-template-columns: 1fr;
    }
}

/* ---- Faturalar ---- */
.invoice-two-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

.invoice-two-cols > [hidden] {
    display: none;
}

@media (max-width: 560px) {
    .invoice-two-cols {
        grid-template-columns: 1fr;
    }
}

.invoice-summary {
    margin-bottom: 14px;
}

.invoice-summary[hidden] {
    display: none;
}

.invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
}

.invoice-row-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.invoice-row-main strong {
    overflow-wrap: anywhere;
}

.invoice-row-main small {
    color: var(--muted);
    font-size: 12px;
}

.invoice-row-side {
    display: grid;
    justify-items: end;
    gap: 6px;
    flex: 0 0 auto;
}

.invoice-row-side strong {
    white-space: nowrap;
}

.invoice-status {
    display: inline-block;
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(102, 115, 112, 0.14);
    color: var(--muted);
}

.invoice-status.is-received {
    background: rgba(212, 142, 36, 0.16);
    color: #8a5a0a;
}

.invoice-status.is-paid {
    background: rgba(17, 100, 102, 0.14);
    color: var(--primary-dark);
}

.invoice-status.is-overdue {
    background: rgba(200, 50, 50, 0.14);
    color: #a02020;
}

.invoice-pay-button {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--primary-dark);
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.invoice-pay-button:hover {
    background: var(--surface-strong);
}

.task-detail-bill-link {
    width: fit-content;
}

.task-detail-bill-link[hidden] {
    display: none;
}

.form-grid .invoice-inline-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.form-grid .invoice-inline-check input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

/* ---- Hesaplar ---- */
.account-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.account-summary[hidden] {
    display: none;
}

@media (max-width: 759px) {
    .summary-band.account-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.account-section-head {
    margin: 18px 0 8px;
}

.account-section-head h3 {
    margin: 0;
    font-size: 15px;
}

.account-section-head .secondary-button {
    padding: 4px 10px;
    font-size: 13px;
}

.account-section-empty {
    color: var(--muted);
    font-size: 13px;
    padding: 4px 2px 8px;
}

.invoice-row.is-inactive {
    opacity: 0.6;
}

.invoice-amount-negative {
    color: #a02020;
}

.invoice-amount-positive {
    color: #116466;
}

.account-balance-card .vehicle-detail-info strong {
    font-size: 26px;
}

.account-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.account-detail-actions [hidden] {
    display: none;
}

.form-grid [data-account-for][hidden],
.form-grid [data-movement-for][hidden] {
    display: none;
}

/* ---- Hesap raporu ---- */
.account-report {
    margin-top: 8px;
}

.account-report-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-report-nav strong {
    min-width: 110px;
    text-align: center;
    font-size: 14px;
}

.account-report-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.account-report-totals article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px;
}

.account-report-totals span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.account-report-totals strong {
    display: block;
    margin-top: 6px;
    font-size: 18px;
}

.account-report-totals small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.report-row {
    display: grid;
    gap: 4px;
    padding: 8px 2px;
}

.report-row-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
}

.report-bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(17, 100, 102, 0.1);
    overflow: hidden;
}

.report-bar span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--primary);
}

.report-bar.is-income span {
    background: #3a9a6b;
}

.report-subhead {
    margin: 12px 0 2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

/* ---- Faz 3: uyari, tekrarlayan, taksit ---- */
.account-warnings:empty {
    display: none;
}

.account-warnings {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.account-warning {
    border: 1px solid rgba(212, 142, 36, 0.5);
    border-radius: 8px;
    background: rgba(212, 142, 36, 0.12);
    color: #6b4506;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
}

.account-recurring {
    margin-top: 8px;
}

.account-csv-button {
    padding: 4px 10px;
    font-size: 13px;
}

.invoice-row-side .invoice-pay-button.is-danger {
    color: #a02020;
}

/* ---- Bankalar ---- */
.bank-group {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    margin-bottom: 12px;
}

.bank-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.bank-group-title {
    display: grid;
    gap: 2px;
}

.bank-group-title strong {
    font-size: 16px;
}

.bank-group-title small {
    color: var(--muted);
    font-size: 12px;
}

.bank-group-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bank-group-actions .secondary-button {
    padding: 4px 10px;
    font-size: 13px;
}

.bank-group .list {
    display: grid;
    gap: 8px;
}

/* ---- Satir ici (sayfa icinde acilan) hesap paneli ---- */
.account-item {
    display: grid;
}

.account-item .invoice-row[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--primary);
}

.account-chevron {
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.account-item .invoice-row[aria-expanded="true"] .account-chevron {
    transform: rotate(90deg);
}

.account-inline {
    display: grid;
    gap: 8px;
    border: 1px solid var(--primary);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #fbfdfc;
    padding: 10px;
}

.account-inline[hidden] {
    display: none;
}

.account-inline .account-detail-actions {
    margin-bottom: 0;
}

.account-inline .invoice-row {
    padding: 8px 10px;
}

.account-inline .report-subhead {
    margin: 4px 0 0;
}

.account-inline-meta {
    color: var(--muted);
    font-size: 12px;
}

/* Iki sutunlu satirda biri gizliyse (orn. transferde kategori) kalan alan tum satiri kaplar. */
.invoice-two-cols:has(> [hidden]) {
    grid-template-columns: minmax(0, 1fr);
}

/* ---- Kategori ayarlari ---- */
.category-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 10px 12px;
}

.category-row.is-child {
    margin-left: 22px;
    background: #fbfdfc;
}

.category-row-name {
    display: grid;
    gap: 2px;
}

.category-row-name small {
    color: var(--muted);
    font-size: 12px;
}

.category-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.category-row-actions button {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--primary-dark);
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.category-row-actions button.is-danger {
    color: #a02020;
}

/* Araclar / Faturalar / Hesaplar liste ekranlarinda ust baslik yok; yalnizca islem dugmeleri sagda. */
.section-head.section-head-actions-only {
    justify-content: flex-end;
}

/* ---- Ekle / Duzenle / Sil simge dugmeleri (uygulama genelinde) ---- */
.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--primary-dark);
    cursor: pointer;
}

.action-icon:hover {
    background: var(--surface-strong);
}

.action-icon[hidden] {
    display: none;
}

.action-icon svg,
.notes-desktop-col-add svg,
.contact-view-delete-bottom svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notes-desktop-col-add svg {
    width: 15px;
    height: 15px;
}

.action-icon.is-danger {
    color: #a02020;
    border-color: rgba(160, 32, 32, 0.28);
}

.action-icon.is-danger:hover {
    background: rgba(160, 32, 32, 0.08);
}

.modal-delete-icon {
    justify-self: center;
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}

.category-row-actions .action-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
}

.account-section-head .action-icon,
.section-head .action-icon {
    flex: 0 0 auto;
}

/* ---- Kategori turu sekmeleri (Giderler / Gelirler) ---- */
.category-kind-tabs {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    width: fit-content;
}

.category-kind-tabs button {
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    padding: 7px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.category-kind-tabs button.is-active {
    background: var(--primary);
    color: #fff;
}

.category-auto-card {
    margin-top: 12px;
}

.category-auto-card .invoice-two-cols {
    margin-top: 6px;
}

/* ---- Arac listesi: yaklasan/gecen bitis etiketi ---- */
.vehicle-row .vehicle-due {
    display: inline-block;
    margin-top: 6px;
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(102, 115, 112, 0.14);
    color: var(--muted);
}

.vehicle-row .vehicle-due.is-soon {
    background: rgba(212, 142, 36, 0.16);
    color: #8a5a0a;
}

.vehicle-row .vehicle-due.is-overdue {
    background: rgba(200, 50, 50, 0.14);
    color: #a02020;
}

/* ---- Arama kutulari (Notlar / Takvim) ---- */
.notes-notebook-picker {
    position: relative;
}

.notes-search {
    position: relative;
    margin-left: auto;
    flex: 0 1 240px;
    min-width: 120px;
}

.notes-search + .notes-sync-status {
    margin-left: 0;
}

.notes-search > svg,
.todo-search > svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.notes-search input,
.todo-search input {
    width: 100%;
    box-sizing: border-box;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    padding: 0 12px 0 32px;
    font-size: 14px;
    color: inherit;
}

.todo-search {
    position: relative;
    margin-bottom: 12px;
}

.todo-search input {
    height: 36px;
    border-radius: 8px;
}

.notes-search-results {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    width: min(380px, 86vw);
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 6px;
}

.notes-search-results[hidden] {
    display: none;
}

.notes-search-item {
    display: grid;
    gap: 2px;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.notes-search-item:hover {
    background: var(--surface-strong);
}

.notes-search-item small {
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.notes-search-empty {
    padding: 10px;
    color: var(--muted);
    font-size: 13px;
}

/* Pencerelerde silme simgesi (solda) ve Kaydet ayni satirda */
.modal-save-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.modal-save-row .primary-button {
    flex: 1 1 auto;
    width: auto;
}

.modal-save-row .modal-delete-icon {
    flex: 0 0 46px;
    width: 46px;
    height: auto;
    min-height: 42px;
    justify-self: auto;
}

.history-row.is-clickable {
    cursor: pointer;
}

/* ---- Kurumsal hesap / plan ---- */
.account-plan-card {
    display: grid;
    gap: 6px;
}

.account-plan-card > span {
    color: var(--muted);
    font-size: 13px;
}

.account-plan-card > strong {
    font-size: 18px;
}

.account-plan-card > small {
    color: var(--muted);
    line-height: 1.5;
}

.account-plan-card .secondary-button {
    width: fit-content;
    margin-top: 4px;
}

.plan-gate-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid rgba(212, 142, 36, 0.5);
    border-radius: 8px;
    background: rgba(212, 142, 36, 0.12);
    color: #6b4506;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.4;
}

.plan-gate-banner[hidden] {
    display: none;
}

.business-panel {
    max-width: 560px;
}

.business-heading {
    margin: 14px 0 8px;
    font-size: 15px;
}

.business-lead {
    margin: 0 0 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(17, 100, 102, 0.08);
    color: var(--primary-dark);
    font-size: 14px;
}

.business-lead[hidden] {
    display: none;
}

.business-feature-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    font-size: 14px;
    line-height: 1.5;
}

.business-plan-preview,
.business-plan-list {
    display: grid;
    gap: 8px;
}

.business-plan-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px 14px;
    cursor: pointer;
}

.business-plan-card.is-selected {
    border-color: var(--primary);
    background: rgba(17, 100, 102, 0.06);
}

.business-plan-card input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.business-plan-card-body {
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
}

.business-plan-card-body small {
    color: var(--muted);
    font-size: 12px;
}

.business-plan-price {
    font-weight: 700;
    white-space: nowrap;
}

.business-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.business-actions .primary-button {
    flex: 1 1 auto;
}

.business-panel [data-business-step] > .primary-button {
    width: 100%;
    margin-top: 12px;
}

.business-bank-box {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    padding: 12px 14px;
    font-size: 14px;
}

.business-bank-box code {
    font-size: 15px;
    font-weight: 700;
    word-break: break-all;
}

.business-iframe {
    width: 100%;
    min-height: 560px;
    border: 0;
    border-radius: 8px;
    background: #fff;
}

.business-success {
    text-align: center;
    padding: 18px 6px;
    display: grid;
    gap: 8px;
}

.business-panel [data-business-step][hidden],
.business-panel [hidden] {
    display: none;
}

/* Kurumsal sihirbaz: kenarlardan bosluk (form olmayan adimlar) */
.business-panel > div[data-business-step] {
    padding: 14px 18px 18px;
}

.account-plan-card .secondary-button {
    justify-self: end;
}

.task-detail-notes-field[hidden] {
    display: none;
}

[data-transaction-account-field].is-disabled {
    opacity: 0.55;
}

/* Yedekleme */
.backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.backup-list {
    display: grid;
    gap: 8px;
}

.backup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.backup-row-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.backup-row-info small {
    color: var(--muted);
}

.backup-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.backup-row-actions a.secondary-button {
    text-decoration: none;
}

/* Ref (kisi yonlendirme) */
.person-main small.person-ref-line {
    margin-top: 1px;
    color: #4b5150;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.contact-ref-body {
    display: grid;
    gap: 8px;
}

.ref-block {
    display: grid;
    gap: 8px;
}

.ref-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ref-chip {
    cursor: pointer;
}

.ref-list {
    display: grid;
    gap: 6px;
}

.ref-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ref-list-row > span:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ref-list-row small,
.ref-total {
    color: var(--muted);
}

.ref-balance {
    color: var(--primary-dark);
    font-weight: 700;
    white-space: nowrap;
}

.ref-balance.is-debt {
    color: var(--danger, #b34040);
}

.ref-search-input {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
}

.ref-pick-list {
    display: grid;
    gap: 6px;
    max-height: 46vh;
    overflow-y: auto;
    margin: 10px 0;
}

.ref-pick-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.ref-pick-row small {
    color: var(--muted);
}

.contact-ref-body[hidden] {
    display: none;
}

[data-contact-form-ref-field] select {
    width: 100%;
    min-height: 44px;
    padding: 0 10px 0 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
}

.contact-view-ref-line {
    display: inline-block;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #8a5a00;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.contact-view-ref-line[hidden] {
    display: none;
}

/* Ref kisiler: cerceve yok, ekle dugmesi baslik satirinda */
.ref-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ref-section-head h3 {
    margin: 0;
}

.ref-list[hidden] {
    display: none;
}

/* Ref uyari kutusu: Kurumsal'a gec dugmesi yazinin sagida */
.contact-ref-section .plan-gate-banner {
    flex-wrap: nowrap;
    align-items: center;
}

.contact-ref-section .plan-gate-banner > span {
    flex: 1 1 auto;
    min-width: 0;
}

.contact-ref-section .plan-gate-banner .secondary-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

[data-contact-form-ref-field] input[type="text"] {
    width: 100%;
    min-height: 44px;
    padding: 0 10px 0 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
}

/* Arama: Ref kisileri de ara simgesi, arama satirinin icinde (carpinin solunda) */
.search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.search-input-wrap.has-clear input {
    padding-right: 44px;
}

.search-input-wrap.has-ref-toggle input {
    padding-right: 78px;
}

/* Yerlesik arama carpisi gizlenir; yerine sagda kendi temizle dugmemiz var */
.search-input-wrap input[type="search"]::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
}

.search-clear-button {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.search-clear-button[hidden] {
    display: none;
}

.search-clear-button:hover {
    background: var(--surface-strong);
}

.search-clear-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.ref-search-toggle {
    position: absolute;
    top: 50%;
    right: 38px;
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.ref-search-toggle[hidden] {
    display: none;
}

.ref-search-toggle:hover {
    background: var(--surface-strong);
}

.ref-search-toggle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ref-search-toggle.is-active {
    border-color: var(--primary);
    background: var(--surface-strong);
    color: var(--primary-dark);
}

/* Kisi sayfasi: ustte bosluk yok. Geri / yildiz / duzenle dugmeleri avatarin yaninda (kart kosesinde), avatar daha kucuk. */
.contact-view-page {
    position: relative;
    gap: 10px;
}

.contact-view-toolbar {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 2;
    width: auto;
    margin: 0;
    pointer-events: none;
}

.contact-view-toolbar > *,
.contact-view-toolbar-actions > * {
    pointer-events: auto;
}

.contact-view-profile {
    padding-top: 8px;
}

.contact-view-avatar {
    width: min(100px, 26vw);
    height: min(100px, 26vw);
    flex-basis: min(100px, 26vw);
    font-size: 28px;
    margin-top: 0;
}

/* Ust cubukta arama (masaustu) */
.topbar-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 640px;
    margin: 0 12px;
}

.topbar-search[hidden] {
    display: none;
}

.topbar-search .search-box,
.topbar-search .todo-search {
    margin: 0;
}

.topbar-search .search-box input,
.topbar-search .todo-search input,
.topbar-search .notes-search input {
    height: 40px;
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 8px;
}

.topbar-search .search-box input {
    padding-left: 13px;
}

.topbar-search .todo-search input,
.topbar-search .notes-search input {
    padding-left: 34px;
    font-size: 15px;
}


.topbar-search .notes-search {
    width: 100%;
    flex: 1 1 auto;
    margin-left: 0;
}

.topbar-search .notes-search-results {
    left: 0;
    right: auto;
}

/* Kisi filtresi: profil satirinin sagi, kartin disi */
.profile-pin-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.profile-pin-row > #profile-pin-slot {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-pin-row > .contact-owner-filter {
    margin-bottom: 24px;
}

[data-contact-list-field] select {
    width: 100%;
    min-height: 44px;
    padding: 0 10px 0 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
}

[data-contact-list-field] select:disabled {
    color: var(--muted);
    opacity: 1;
}

/* Kisi formu: Kaydedilecek liste dugmesi baslik satirinin en sagi */
.contact-list-button {
    flex: 0 0 auto;
    margin-left: auto;
}

.contact-list-button[hidden] {
    display: none;
}

/* Formdaki eski secim kutusu yalniz veri tasir, gorunmez */
[data-contact-list-field][hidden] {
    display: none;
}

/* Kisi filtresi: baskasinin listesi seciliyse profil fotografi */
.contact-owner-filter.has-owner-photo {
    padding: 0;
    overflow: hidden;
}

.owner-filter-avatar {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.owner-filter-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Menu satirlarinda paylasan kisinin kucuk avatari */
.action-menu-item .owner-filter-avatar {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
}

/* Kisi sayfasi: aksiyon dugmeleri, etiketler ve alttaki bolumler arasindaki bosluk en aza indirildi */
.contact-view-page {
    gap: 6px;
}

.contact-view-profile {
    padding-bottom: 4px;
}

.contact-view-tags-row {
    min-height: 0;
}

.contact-view-info-list {
    gap: 8px;
}

/* Paylasilan kisilerde izni olmayan dugmeler pasif gorunur (tiklaninca uyari verir) */
.quick-actions button.is-disabled,
.swipe-actions button.is-disabled {
    opacity: 0.4;
}

.form-icon-field[hidden] {
    display: none;
}

.contact-view-delete-bottom.is-disabled {
    opacity: 0.45;
}

.contact-list-button.is-disabled {
    opacity: 0.45;
}

/* Avatarli menu satirlarinda avatar en solda, secili isareti sagda */
.action-menu-item:has(.owner-filter-avatar) .action-menu-item-check {
    order: 3;
    margin-left: auto;
}

/* Ayni planin aylik / yillik secenekleri yan yana */
.business-plan-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.business-plan-group.has-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.business-plan-group.has-two .business-plan-card {
    flex-wrap: wrap;
    align-items: flex-start;
}

.business-plan-group.has-two .business-plan-card-body {
    flex: 1 1 0;
    min-width: 0;
}

.business-plan-group.has-two .business-plan-price {
    flex: 0 0 100%;
    padding-left: 28px;
}

.business-plan-group-detail {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 12px;
    padding: 0 2px 4px;
}

.business-company-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 4px;
    color: var(--muted);
}

.business-company-edit {
    border: 0;
    background: none;
    color: var(--primary-dark);
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.business-pending {
    display: grid;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px 14px;
    margin-bottom: 10px;
}

.business-pending small {
    color: var(--muted);
}

.business-pending-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.account-plan-pending {
    display: block;
    color: var(--muted);
    margin: 4px 0;
}

button.account-plan-pending {
    display: grid;
    gap: 2px;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    color: var(--muted);
    cursor: pointer;
}

.account-plan-pending-link {
    font-weight: 600;
    color: var(--primary-dark);
    text-decoration: underline;
}

button.account-plan-pending[hidden] {
    display: none;
}

/* Bugun gorevi olan Takvim dugmesinde renkli nokta */
.bottom-nav button.has-today-task {
    position: relative;
}

.bottom-nav button.has-today-task::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e8590c;
    box-shadow: 0 0 0 2px var(--surface, #fff);
}

@media (min-width: 760px) {
    .bottom-nav button.has-today-task::after {
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
    }
}

.todo-sidebar-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin: 0 4px 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    cursor: pointer;
}

.todo-sidebar-option input {
    flex: 0 0 auto;
    margin-top: 2px;
}

input.is-invalid-amount {
    border-color: #b42318;
}

/* Islem penceresinde ek simgeleri ust satirda (kapat dugmesinin solunda); yalniz islem kipinde gorunur */
.modal-attachment-actions {
    display: none;
    align-items: center;
    gap: 8px;
}

#entry-modal:has(.form-grid[data-mode="transaction"]) .modal-attachment-actions {
    display: flex;
}

.transaction-attachment-field[hidden] {
    display: none;
}

.transaction-attachment-actions {
    grid-template-columns: minmax(0, 1fr) auto;
}

/* Ek simgeleri ust satirda saga yaslanir (kapat dugmesinin hemen solunda) */
#entry-modal:has(.form-grid[data-mode="transaction"]) .modal-attachment-actions {
    margin-left: auto;
}

/* ---- Birlesik kisi sayfasi: ust cubuk + profil ozeti + metrikler + sekmeler ---- */
.contact-page-topline .contact-view-toolbar-actions {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

.contact-page-topline .contact-view-toolbar-actions [hidden] {
    display: none;
}

.contact-page-hero {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.contact-page-hero-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-page-avatar {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    margin: 0;
    font-size: 20px;
    background: var(--surface-strong);
}

.contact-page-avatar.is-profile-photo-picker {
    cursor: pointer;
}

.contact-page-hero-text {
    display: grid;
    min-width: 0;
    gap: 2px;
    text-align: left;
}

.contact-page-hero-text small {
    color: var(--muted);
    font-size: 14px;
}

.contact-page .contact-view-tags-row,
#screen-contact-detail .contact-view-tags-row {
    margin: 0 0 10px;
}

.contact-page-tabs {
    display: flex;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--line);
}

.contact-page-tabs[hidden],
.contact-page-panel[hidden],
.detail-metrics[hidden] {
    display: none;
}

.contact-page-tabs button {
    flex: 1 1 0;
    padding: 10px 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.contact-page-tabs button[hidden] {
    display: none;
}

.contact-page-tabs button.is-active {
    border-bottom-color: var(--primary);
    color: var(--primary-dark);
}

.contact-page-panel .contact-view-info-list {
    padding-bottom: 24px;
}

/* hidden ozniteligi gosterim kurallarina ezilmesin (etiket satiri / etiket ekle dugmesi) */
.contact-view-tags-row[hidden],
.tag-add-button[hidden],
.tag-quick-add-input[hidden] {
    display: none;
}

/* Kisi sayfasi: uc metrik (Borc / Alacak / Bakiye) her genislikte tek satir */
.detail-metrics[data-contact-metrics] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Kisi adi profil resminin yaninda; ust cubukta yalniz geri ve islem simgeleri */
.contact-page-topline .contact-view-toolbar-actions {
    margin-left: auto;
}

.contact-page-name {
    flex: 0 1 auto;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 22px;
}

/* Profil resmi + ad / telefon blogu ortada */
.contact-page-hero-main {
    justify-content: center;
}

/* Kisi sayfasi: kucuk (minimal) dugmeler */
.contact-page-topline {
    margin-bottom: 8px;
}

.contact-page-topline .icon-button {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 8px;
}

.contact-page-topline .icon-button svg {
    width: 16px;
    height: 16px;
}

.contact-page-topline .contact-view-toolbar-actions {
    gap: 6px;
}

#screen-contact-detail .contact-view-actions {
    gap: 6px;
}

#screen-contact-detail .contact-view-actions .icon-button {
    height: 34px;
    min-height: 34px;
}

#screen-contact-detail .contact-view-actions .icon-button svg {
    width: 17px;
    height: 17px;
}

.contact-page-avatar {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 18px;
}

/* Profil resmi ustte, ad ve telefon altinda (ortali) */
.contact-page-hero-main {
    flex-direction: column;
    gap: 6px;
}

.contact-page-hero-text {
    justify-items: center;
    text-align: center;
}

.contact-page-avatar {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
    font-size: 22px;
}

/* Ref kisiler basligi "Gorevler ve Notlar" basligiyla ayni stilde */
.contact-ref-section .ref-section-head h3 {
    color: var(--text, #17211f);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
}

.contact-ref-section .ref-section-head {
    margin-bottom: 6px;
}

/* Kisi sayfasi: etiketler biraz daha kucuk */
#screen-contact-detail .contact-view-tags-row .tag-filter-label {
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
}

#screen-contact-detail .contact-view-tags-row .tag-add-button {
    width: 28px;
    height: 28px;
    min-height: 28px;
}

#screen-contact-detail .contact-view-tags-row .tag-add-button svg {
    width: 14px;
    height: 14px;
}

#screen-contact-detail .contact-view-tags-row .contact-tag-filters {
    gap: 6px;
}

/* Etiket ekle dugmesi: "+" ref / gorev dugmeleriyle ayni kutu stilinde (arti turuncu kalir) */
#screen-contact-detail .contact-view-tags-row .tag-add-button {
    width: 34px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--accent);
}

#screen-contact-detail .contact-view-tags-row .tag-add-button svg {
    width: 16px;
    height: 16px;
}

#screen-contact-detail .contact-view-tags-row {
    align-items: center;
}

#screen-contact-detail .contact-view-tags-row .tag-add-button {
    padding: 0;
    display: inline-grid;
    place-items: center;
}

/* Kisi sayfasi metrikleri: alacak / pozitif bakiye yesil, borc / eksi bakiye kirmizi arka plan (daha belirgin) */
#screen-contact-detail .detail-metrics article.is-positive-balance,
#screen-contact-detail .detail-metrics article.is-positive-metric {
    border-color: #8fd0a5;
    background: #dcf3e4;
}

#screen-contact-detail .detail-metrics article.is-negative-balance,
#screen-contact-detail .detail-metrics article.is-negative-metric {
    border-color: #ee9d9d;
    background: #fde0e0;
}

.contact-page-tabs button {
    white-space: nowrap;
}

/* Ad / firma alaninda yazarken cikan harf boyutu dugmesi (aramadaki temizle simgesi gibi) */
.form-icon-field > input.has-case-button,
.has-case-button {
    padding-right: 44px;
}

.field-case-button {
    position: absolute;
    right: 8px;
    bottom: 6px;
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.field-case-button[hidden] {
    display: none;
}

.field-case-button:hover {
    background: var(--surface-strong);
    color: var(--primary-dark);
}

.field-case-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Belge / dosya ekleme: ataç simgesi ust satirda; ek yoksa "Belgeler" alani gizli */
.modal-attach-proxy {
    margin-left: auto;
    margin-right: 8px;
}

.task-detail-head-actions .modal-attach-proxy {
    margin: 0;
}

.attach-proxied .task-attachments-add {
    display: none;
}

.attach-proxied.is-empty {
    display: none;
}

.modal-attach-proxy svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Ataç ile kapat dugmesi arasi dar (yaklasik 8px) */
.section-head > .modal-attach-proxy {
    margin-right: -6px;
}

/* Telefon karti: sag ustte kalem simgesi */
.account-phone-card {
    position: relative;
}

.account-card-edit {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

.account-card-edit svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#account-phone-modal .primary-button:disabled,
#account-email-modal .primary-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#account-email-modal input:disabled {
    background: #f1f4f3;
    color: var(--muted);
    cursor: not-allowed;
}

/* Duzenle dugmesi baslik satirina (E-posta / Telefon numarasi) oturur, giris kutusuyla ayni sag kenarda */
.account-card-edit {
    top: 9px;
    right: 13px;
    width: 28px;
    height: 28px;
    flex-basis: 28px;
}

.account-card-edit svg {
    width: 15px;
    height: 15px;
}

/* Kullanici adi karti: satir ici kalem kalkti, kalem kartin sag ustunde (pencere acar) */
.account-phone-card .account-username-edit {
    display: none;
}

.account-phone-card .account-username-control {
    grid-template-columns: minmax(0, 1fr) 26px;
}

#account-username-modal [data-status="error"] {
    color: #b42318;
}

#account-username-modal [data-status="ok"] {
    color: var(--primary-dark);
}

/* Hesap bilgileri kartlari: kutular kullanici adi kutusu gibi kisa (sag tarafta 32px bosluk) */
.account-phone-card .account-field > input:not([type="hidden"]),
.account-phone-card .account-field > .phone-composite {
    box-sizing: border-box;
    width: calc(100% - 32px);
}

/* Kategoriler karti: "+" dugmesi ustteki baslik satirinin sagina oturur */
.settings-import-card:has([data-category-add]) {
    position: relative;
}

.settings-import-card:has([data-category-add]) [data-category-add] {
    position: absolute;
    top: 8px;
    right: 13px;
}

.settings-import-card:has([data-category-add]) > strong {
    padding-right: 44px;
}

.settings-import-card:has([data-category-add]) > small {
    display: block;
    padding-right: 44px;
}

.business-info-card {
    display: grid;
    gap: 2px;
}

.business-info-card strong {
    color: var(--text, #17211f);
}

.business-info-card small[hidden],
.business-info-card strong[hidden] {
    display: none;
}

/* Banka hesabi kopyala dugmesi: paylasim anahtariyla ayni minimal gorunum, hemen altina yaslanir */
.bank-account-card .bank-account-copy-button {
    top: 48px;
    border: 0;
    color: var(--muted, #667370);
}

.bank-account-card .bank-account-copy-button svg {
    width: 22px;
    height: 22px;
}

/* Kopyala dugmesi: daha kucuk ve anahtarin simgesine yakin */
.bank-account-card .bank-account-copy-button {
    top: 40px;
    height: 24px;
    min-height: 24px;
    padding: 0;
}

.bank-account-card .bank-account-copy-button svg {
    width: 16px;
    height: 16px;
}

/* Bankada anahtar kutusu kopyala dugmesinin ustune binmesin (simge kesiliyordu) */
.bank-account-card .profile-share-toggle {
    height: 30px;
    min-height: 30px;
}

.bank-account-card .bank-account-copy-button {
    top: 42px;
}

/* Harf boyutu dugmesi olan tum alanlarda yazi dugmenin altina girmesin (islem aciklamasi, not, profil adi...) */
input.has-case-button,
textarea.has-case-button,
.form-icon-field > input.has-case-button,
.form-icon-field > textarea.has-case-button {
    padding-right: 44px;
}

/* Uye olmayan numara icin davet paylasim dugmeleri */
.team-invite-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.team-invite-share[hidden] {
    display: none;
}

.team-invite-share .secondary-button {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

/* "FIRMA (Ad Soyad)" basligi: firma buyuk ve normal, ad soyad kucuk ve soluk (davet sayfasindaki gibi) */
.company-title {
    font-weight: 400;
}

.person-name-inline {
    color: var(--muted);
    font-size: 0.6em;
    font-weight: 400;
}

.contact-page-name .company-title {
    font-size: 24px;
}

.contact-page-name .person-name-inline {
    font-size: 14px;
}

.person-main strong .person-name-inline {
    font-size: 13px;
}

/* Yedekleme dugmeleri: sagda ve kucuk */
.backup-actions {
    justify-content: flex-end;
}

.backup-actions .secondary-button {
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

/* Yedek satiri: butonlar sagda ve dikeyde ortali, kucuk */
.backup-row {
    flex-wrap: nowrap;
}

.backup-row-info {
    flex: 1 1 auto;
}

.backup-row-actions {
    flex: 0 0 auto;
    align-items: center;
    margin-left: auto;
}

.backup-row-actions .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 1;
}

.backup-row-actions .action-icon {
    width: 32px;
    height: 32px;
    min-height: 32px;
}

/* Otomatik yedekleme karti: buton basligin / aciklamanin satirinda, sagda ve dikeyde ortali */
[data-settings-panel="backups"] > .settings-import-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
}

[data-settings-panel="backups"] > .settings-import-card > strong,
[data-settings-panel="backups"] > .settings-import-card > small {
    grid-column: 1;
}

[data-settings-panel="backups"] > .settings-import-card > .backup-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

/* Hesap turu karti: "Plani yenile / degistir" butonu baslik (Pro / Bireysel) satirinda, sagda ve kucuk */
.account-plan-card {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
}

.account-plan-card > * {
    grid-column: 1 / -1;
}

.account-plan-card > strong {
    grid-column: 1;
    grid-row: 2;
}

.account-plan-card > .secondary-button {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    margin-top: 0;
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

.account-plan-card > .secondary-button[hidden] {
    display: none;
}

/* Plan butonu "Hesap turu" ve "Kurumsal · Pro" iki basliginin dikey ortasinda */
.account-plan-card > .secondary-button {
    grid-row: 1 / span 2;
}

.account-plan-card > span {
    grid-column: 1;
    grid-row: 1;
}

/* "Hesap turu" ile "Kurumsal · Pro" basliklari birbirine daha yakin */
.account-plan-card > strong {
    margin-top: -5px;
}

/* Excel ile ice aktarma dugmeleri */
.import-xlsx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.import-xlsx-actions .secondary-button,
.import-xlsx-actions .primary-button {
    flex: 1 1 180px;
}

/* Excel sablon dugmeleri: simge + yazi yan yana */
.import-xlsx-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.import-xlsx-actions button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.settings-list .import-xlsx-actions button span {
    color: inherit;
    font: inherit;
}

.settings-list .import-xlsx-actions button span:not(.team-invite-input-row):not(.phone-composite):not(.mobile-caller-icon) {
    color: inherit;
    font: inherit;
}

/* Hesap bilgileri: dogrulanmamis rozet ve dogrulama kutusu */
.verify-badge.is-unverified {
    background: #fff4e0;
    color: #9a5b00;
    cursor: pointer;
}

.verify-badge.is-unverified svg {
    display: none;
}

.account-verify-box {
    display: grid;
    gap: 8px;
    padding: 0 16px 16px;
}

.account-verify-box small {
    color: var(--muted);
}

.account-verify-box button[hidden],
.account-verify-box [hidden] {
    display: none;
}

.account-verify-code {
    display: flex;
    gap: 8px;
}

.account-verify-code input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

/* "Kurumsalda neler var" dugmesi ve onizleme sekmeleri */
.plan-preview-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--primary-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.plan-preview-toggle[hidden],
.plan-preview-hint[hidden] {
    display: none;
}

.plan-preview-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
}

.plan-preview-toggle.is-open svg {
    transform: rotate(180deg);
}

.plan-preview-hint {
    color: var(--muted);
    line-height: 1.5;
}

.settings-nav .todo-sidebar-row .plan-preview-badge {
    display: inline-flex;
    margin-left: auto;
    color: #9a5b00;
}

.settings-nav .todo-sidebar-row .plan-preview-badge svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-nav .todo-sidebar-row[hidden] {
    display: none;
}

.team-invite-form[hidden] {
    display: none;
}

/* Ucretsiz deneme */
.business-trial {
    display: grid;
    gap: 8px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid rgba(17, 100, 102, 0.28);
    border-radius: 8px;
    background: rgba(17, 100, 102, 0.05);
}

.business-trial[hidden] {
    display: none;
}

.business-trial small {
    color: var(--muted);
}

.business-trial-plans {
    display: grid;
    gap: 6px;
}

.business-trial-blockers {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
    color: #9a5b00;
    font-size: 13px;
}

.business-trial-blockers:empty {
    display: none;
}

.business-trial .secondary-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.field-hint.is-error {
    color: #b42318;
}

.account-plan-card.is-trial-ending {
    background: #fff8dc;
    border-color: #e9c46a;
}

/* Cizim: metin araci */
.drawing-stage[data-tool="text"] .drawing-canvas {
    cursor: text;
}

.drawing-stage .drawing-text-editor {
    position: absolute;
    z-index: 3;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 1px dashed var(--primary);
    outline-offset: 2px;
    background: #fff;
    resize: none;
    overflow: hidden;
    white-space: pre;
    line-height: 1.25;
    font-family: "Segoe UI", system-ui, Arial, sans-serif;
    box-sizing: content-box;
}

/* Not sayfasi: PDF indirme dugmesi minimal (kucuk, cercevesiz) */
.note-page-title-row .note-page-download-pdf {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted, #667370);
}

.note-page-title-row .note-page-download-pdf:hover {
    background: var(--surface-strong, #e7efed);
    color: var(--primary-dark, #0b4a4c);
}

.note-page-title-row .note-page-download-pdf svg {
    width: 18px;
    height: 18px;
}

/* Cizim: sec / tasi araci */
.drawing-stage[data-tool="select"] .drawing-canvas {
    cursor: default;
}

/* Cizim araci cubugu: tum dugmeler, ayiricilar, renk dairesi ve kapat / sil ayni hizada (dikey ortali) */
#note-drawing-modal .text-block-head {
    align-items: center;
}

#note-drawing-modal .note-page-toolbar {
    align-items: center;
}

#note-drawing-modal .note-page-toolbar .text-block-toolbar-divider {
    align-self: center;
}

#note-drawing-modal .note-page-toolbar .text-block-size-picker {
    display: flex;
    align-items: center;
}

#note-drawing-modal .text-block-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

#note-drawing-modal .text-block-head-actions .icon-button {
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
}

/* Gorev detayi: baskasinin gorevinde Ilgili kisi pasif */
.task-contact-picker.is-passive input {
    background: var(--surface-strong, #eef3f1);
    color: var(--muted, #667370);
    cursor: default;
}

.task-contact-picker [data-task-contact-note][hidden] {
    display: none;
}

/* Onayli islem: gunluk dugmesi ve bekleyen talep etiketi */
.history-meta-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.history-change-chip {
    padding: 1px 6px;
    border-radius: 999px;
    background: #fff3d6;
    color: #8a5a00;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.history-log-button {
    display: inline-grid;
    width: 20px;
    height: 20px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #7b8686;
    cursor: pointer;
}

.history-log-button:hover {
    color: var(--primary);
}

.history-log-button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Virman */
.section-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.virman-form {
    display: grid;
    gap: 12px;
}

.virman-form label {
    display: grid;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
}

.virman-form input,
.virman-form select {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: inherit;
    font: inherit;
    font-weight: 400;
}

.virman-hint {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

/* Virman penceresi: icerik kenarlara yapismasin */
.virman-modal .virman-form {
    padding: 6px 18px 18px;
}

/* Acik kisi sekmeleri */
.contact-tab-strip {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin: 0 0 8px;
    padding: 6px 4px 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    scrollbar-width: thin;
}

.contact-tab-strip[hidden] {
    display: none;
}

.contact-tab-item {
    display: inline-flex;
    flex: 0 0 auto;
    max-width: 200px;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.contact-tab-item:hover {
    background: var(--surface-strong);
}

.contact-tab-item.is-active {
    margin-bottom: -1px;
    border-color: var(--primary);
    background: var(--surface);
    color: var(--primary);
    font-weight: 700;
}

.contact-tab-name {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-tab-item small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
}

.contact-tab-close {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
}

.contact-tab-close:hover {
    background: rgba(0, 0, 0, 0.08);
}

.contact-tab-clear {
    flex: 0 0 auto;
    margin: 0 0 4px auto;
    padding: 2px 8px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}

@media (max-width: 759px) {
    .contact-tab-strip {
        align-items: center;
        gap: 6px;
        padding: 8px 8px;
        border-bottom: 0;
    }

    .contact-tab-item {
        padding: 5px 6px 5px 11px;
        border: 1px solid var(--line);
        border-radius: 999px;
    }

    .contact-tab-item.is-active {
        margin-bottom: 0;
        background: var(--surface-strong);
    }

    .contact-tab-item small {
        display: none;
    }

    .contact-tab-clear {
        margin: 0 0 0 auto;
    }
}

.contact-tab-strip {
    overflow-y: hidden;
}

/* Sekme seridi: kisi panelinin icinde en ustte, kaydirirken sabit kalir */
.contact-tab-strip {
    position: sticky;
    top: 0;
    margin: 0 0 8px;
    padding: 6px 4px 0;
}

/* Firma bilgileri penceresi: iki alan yan yana */
.company-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

/* Firma turu secim butonlari */
.company-type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.company-type-chip {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.company-type-chip:hover {
    background: var(--surface-strong);
}

.company-type-chip.is-active {
    border-color: var(--primary);
    background: var(--surface-strong);
    color: var(--primary);
    font-weight: 700;
}

/* Tum acilir pencereler: baslik dar, kapat butonu cercevesiz */
.modal .modal-panel > .section-head,
#todo-share-modal .modal-panel > .section-head,
#notebook-share-modal .modal-panel > .section-head,
#section-share-modal .modal-panel > .section-head {
    gap: 8px;
    padding: 8px 8px 6px 16px;
}

.modal .modal-panel > .section-head h2 {
    font-size: 19px;
    line-height: 1.25;
}

.modal .modal-panel .section-head .icon-button[aria-label="Kapat"],
.modal .modal-panel .section-head > [aria-label="Kapat"] {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.modal .modal-panel .section-head .icon-button[aria-label="Kapat"]:hover,
.modal .modal-panel .section-head > [aria-label="Kapat"]:hover {
    background: var(--surface-strong);
    color: var(--primary);
}

/* Pencere basliklarindaki tum butonlar (ataç, kamera, favori, duzenle, sil...) cercevesiz ve kucuk */
.modal .modal-panel > .section-head .icon-button,
.modal .modal-panel > .section-head .modal-title-actions .icon-button,
.modal .modal-panel > .section-head .modal-head-actions .icon-button {
    width: 32px;
    height: 32px;
    border: 0;
    box-shadow: none;
}

.modal .modal-panel > .section-head .icon-button:not(.favorite-header-button) {
    background: transparent;
}

.modal .modal-panel > .section-head .icon-button svg {
    width: 20px;
    height: 20px;
}

.modal .modal-panel > .section-head .modal-title-actions,
.modal .modal-panel > .section-head .modal-head-actions {
    gap: 2px;
}

/* ---- PENCERE BASLIGI STANDARDI (referans: "Yeni islem" penceresi) ----
   Baslik ~47px: ic bosluk 8px 8px 6px 16px, baslik yazisi 19px, butonlar 32px ve cercevesiz,
   kapat butonu duz "x". Yeni pencereler `.modal-panel > .section-head` ile bu yapiyi kullanir. */
#task-detail-modal .task-detail-head {
    padding: 8px 8px 6px 16px;
}

#task-detail-modal .task-detail-head h2 {
    color: inherit;
    font-size: 19px;
    font-weight: inherit;
    line-height: 1.25;
}

#task-detail-modal .task-detail-head-icon {
    width: 32px;
    height: 32px;
    font-size: 20px;
}

/* Islem turu secicisinde "Islem Turu" yazisi gorunmez (ekran okuyucu icin kalir) */
.type-picker legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Virman: kisi arama kutusu + liste */
.virman-picker {
    display: grid;
    gap: 6px;
}

.virman-picker-label {
    font-size: 13px;
    font-weight: 700;
}

.virman-picker input[type="search"] {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: inherit;
    font: inherit;
    font-weight: 400;
}

.virman-results {
    display: grid;
    max-height: 168px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.virman-result {
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.virman-result:last-child {
    border-bottom: 0;
}

.virman-result:hover {
    background: var(--surface-strong);
}

.virman-result.is-selected {
    background: var(--surface-strong);
    color: var(--primary);
    font-weight: 700;
}

.virman-result-empty {
    padding: 10px 12px;
    color: var(--muted);
    font-size: 13px;
}

/* Virman kisi listesi: yalnizca arama kutusu odaktayken acik */
.virman-results {
    display: none;
}

.virman-picker.is-open .virman-results {
    display: grid;
}

/* Virman kisi listesi: diger alanlari itmeden, ustte acilan acilir kutu (notlardaki arama sonuclariyla ayni gorunum) */
.virman-picker {
    position: relative;
}

.virman-results {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 30;
    max-height: 220px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.virman-picker.is-open .virman-results {
    gap: 2px;
}

.virman-result {
    padding: 8px 10px;
    border-bottom: 0;
    border-radius: 8px;
}

/* Hesap sayfasi firma karti: alanlar ikiser ikiser yan yana */
.account-business-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
}

/* Bilgi / onay kutulari (siteAlert, siteConfirm): mobilde de ekranin ortasinda acilir */
.modal.site-dialog-modal {
    align-items: center;
}

/* Fotograf galerisi: pencere buyuk acilir, fotograf alani genis kalir */
#note-gallery-modal .gallery-panel {
    width: min(1000px, 100%);
    height: min(86vh, 820px);
    max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

#note-gallery-modal .gallery-canvas-wrap {
    background: var(--surface-strong);
}

#note-gallery-modal .gallery-canvas-wrap .drawing-canvas {
    width: 100%;
    height: 100%;
}

/* Galeri yakinlastirma */
#note-gallery-modal .gallery-canvas-wrap {
    touch-action: none;
}

#note-gallery-modal .gallery-canvas-wrap.is-zoomed {
    cursor: grab;
}

#note-gallery-modal .gallery-canvas-wrap .drawing-canvas {
    transform-origin: 0 0;
    will-change: transform;
}

/* "Hepsini kapat": seridin sag ucunda sabit, taşan sekmelerin ustunde de gorunur */
.contact-tab-clear {
    position: sticky;
    right: 0;
    margin: 0 0 4px auto;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary);
    font-weight: 700;
    box-shadow: -10px 0 8px var(--surface);
}

@media (max-width: 759px) {
    .contact-tab-clear {
        margin: 0 0 0 auto;
    }
}

/* "Hepsini kapat": yazi yerine simge (cift pencere + carpi); sekmelerdeki duz x'ten farkli */
.contact-tab-clear {
    display: inline-grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    border-radius: 8px;
}

.contact-tab-clear svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Cizim: olcu girisi ve birim ayari */
.drawing-measure,
.drawing-measure-settings {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
    padding: 8px 10px;
    font-size: 13px;
}

.drawing-measure {
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
}

.drawing-measure-settings {
    right: 12px;
    top: 12px;
}

.drawing-measure[hidden],
.drawing-measure-settings[hidden] {
    display: none;
}

.drawing-measure label,
.drawing-measure-settings label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-weight: 700;
}

.drawing-measure input,
.drawing-measure-settings input,
.drawing-measure-settings select {
    width: 84px;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text, inherit);
    font: inherit;
    font-weight: 700;
}

.drawing-measure-settings select {
    width: 64px;
}

.drawing-measure small {
    color: var(--muted);
    font-weight: 700;
}

.drawing-measure button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.drawing-measure button.is-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.drawing-measure-angles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-basis: 100%;
}

.drawing-measure-angles[hidden] {
    display: none;
}

.drawing-measure-angles button {
    min-height: 30px;
    padding: 0 9px;
    font-size: 12px;
}

.drawing-measure-inline {
    position: absolute;
    z-index: 4;
    height: 30px;
    padding: 0 6px;
    border: 2px solid var(--primary);
    border-radius: 6px;
    background: #fff;
    color: var(--primary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    box-shadow: var(--shadow);
}

/* Cizim: izgara / dik / yakalama cubugu */
.drawing-snapbar {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 3;
    display: flex;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow);
    padding: 4px;
}

.drawing-snapbar[hidden] {
    display: none;
}

.drawing-snapbar button {
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.drawing-snapbar button.is-active {
    background: var(--surface-strong, #e7f0ef);
    color: var(--primary);
}

/* Cizim: tasima / kopyalama paneli (secim varken sol ustte, Izgara cubugunun altinda) */
.drawing-measure.drawing-transform {
    left: 12px;
    top: 58px;
    bottom: auto;
    transform: none;
    max-width: calc(100% - 24px);
}

.drawing-measure.drawing-transform[hidden] {
    display: none;
}

.drawing-transform-break {
    flex-basis: 100%;
    height: 0;
}

/* Izgara / Dik / Yakala cubugu asagi (sol alt) tasindi */
.drawing-snapbar {
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
}

.drawing-measure.drawing-transform {
    top: 12px;
}

@media (max-width: 859px) {
    .drawing-measure:not(.drawing-transform) {
        bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

/* Olcu kutusu: tek satir (masaustu ve telefon) */
.drawing-measure:not(.drawing-transform) {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 10px;
}

@media (max-width: 560px) {
    .drawing-measure:not(.drawing-transform) {
        gap: 5px;
        padding: 7px 8px;
        font-size: 12px;
    }

    .drawing-measure:not(.drawing-transform) label {
        gap: 4px;
    }

    .drawing-measure:not(.drawing-transform) input {
        width: 58px;
        padding: 0 6px;
    }

    .drawing-measure:not(.drawing-transform) small {
        display: none;
    }

    .drawing-measure:not(.drawing-transform) button {
        padding: 0 9px;
    }
}

/* Iki secenekli menuler (Metin / Olcu cizgisi ve Kaydir / Sec): beyaz zemin secenekler kadar */
.drawing-shape-dropdown[data-drawing-text-dropdown],
.drawing-shape-dropdown[data-drawing-nav-dropdown] {
    width: max-content;
    grid-template-columns: repeat(2, 30px);
}

/* Izgara / Dik / Yakala: simge dugmeleri */
.drawing-snapbar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-height: 32px;
    padding: 0;
}

.drawing-snapbar button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Yazi boyutu (px) kutusu: sag ust */
.drawing-measure.drawing-textsize {
    left: auto;
    right: 12px;
    top: 12px;
    bottom: auto;
    transform: none;
}

.drawing-measure.drawing-textsize[hidden] {
    display: none;
}

.drawing-measure-settings:not([hidden]) ~ .drawing-textsize {
    top: 118px;
}

/* Yazi boyutu: ust cubukta simge + liste */
.drawing-textsize-dropdown {
    width: 176px;
    padding: 8px;
}

.drawing-textsize-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.drawing-textsize-row input {
    flex: 1;
    width: 100%;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: inherit;
    font: inherit;
    font-weight: 700;
}

.drawing-textsize-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.drawing-textsize-list button {
    min-height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.drawing-textsize-list button:hover {
    background: var(--surface-strong);
}

.drawing-tool-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Secim eylem cubugu (cogalt / sil) */
.drawing-selbar {
    position: absolute;
    z-index: 3;
    display: flex;
    gap: 4px;
    transform: translateX(-50%);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
    padding: 4px;
}

.drawing-selbar[hidden] {
    display: none;
}

.drawing-selbar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
}

.drawing-selbar button:hover {
    background: var(--surface-strong);
}

.drawing-selbar button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.drawing-snapbar button[hidden] {
    display: none;
}

/* Olcu kutusu: birim yazdirma dugmesi */
.drawing-measure .drawing-measure-unit-toggle {
    min-width: 40px;
    padding: 0 8px;
    color: var(--muted);
}

.drawing-measure .drawing-measure-unit-toggle.is-active {
    border-color: var(--primary);
    background: var(--surface-strong, #e7f0ef);
    color: var(--primary);
}

.drawing-measure small:empty {
    display: none;
}

/* Birim / olcek / izgara ayar kutusu: altta ortada */
.drawing-measure-settings {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
    flex-wrap: wrap;
    justify-content: center;
}

/* olcu kutusu da aciksa ayar kutusu onun ustune cikar */
.drawing-stage:has(.drawing-measure:not([hidden]):not(.drawing-textsize)) .drawing-measure-settings {
    bottom: calc(76px + env(safe-area-inset-bottom));
}

@media (max-width: 859px) {
    .drawing-measure-settings {
        bottom: calc(64px + env(safe-area-inset-bottom));
    }

    .drawing-stage:has(.drawing-measure:not([hidden]):not(.drawing-textsize)) .drawing-measure-settings {
        bottom: calc(128px + env(safe-area-inset-bottom));
    }
}

/* Ayar kutusu: tek satir */
.drawing-measure-settings {
    flex-wrap: nowrap;
    gap: 10px;
    white-space: nowrap;
}

.drawing-measure-settings input {
    width: 70px;
}

@media (max-width: 560px) {
    .drawing-measure-settings {
        gap: 6px;
        padding: 7px 8px;
        font-size: 12px;
    }

    .drawing-measure-settings label {
        gap: 4px;
    }

    .drawing-measure-settings input {
        width: 52px;
        padding: 0 5px;
    }

    .drawing-measure-settings select {
        width: 54px;
    }
}

/* Klavye acikken olcu / ayar kutulari klavyenin ustunde */
.drawing-stage[data-kb="1"] .drawing-measure:not(.drawing-textsize),
.drawing-stage[data-kb="1"] .drawing-measure-settings {
    bottom: calc(var(--kb-offset, 0px) + 8px);
}

.drawing-stage[data-kb="1"]:has(.drawing-measure:not([hidden]):not(.drawing-textsize)) .drawing-measure-settings {
    bottom: calc(var(--kb-offset, 0px) + 72px);
}

/* Olcu kutusu: + (kenari ekle) ve tik (bitti) simgeleri */
.drawing-measure .drawing-measure-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: 0;
}

.drawing-measure .drawing-measure-icon[hidden] {
    display: none;
}

.drawing-measure .drawing-measure-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Cizim araç çubuğu: renk yuvarlağı biraz küçük */
#note-drawing-modal .text-block-color-trigger {
    width: 18px;
    height: 18px;
}

#note-drawing-modal .text-block-color-trigger {
    min-width: 18px;
    max-width: 18px;
    flex: 0 0 18px;
    padding: 0;
    aspect-ratio: 1;
}

/* Cizim sablonlari: sekiller menusunun altinda kucuk simgeler */
.drawing-template-section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

.drawing-template-section[hidden] {
    display: none;
}

.drawing-shape-dropdown button.drawing-template {
    padding: 3px;
}

.drawing-template img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.drawing-toast {
    position: absolute;
    left: 50%;
    top: 14px;
    z-index: 6;
    transform: translateX(-50%);
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: var(--shadow);
    pointer-events: none;
}

.drawing-toast[hidden] {
    display: none;
}

.drawing-context-menu {
    position: fixed;
    z-index: 1000;
    display: grid;
    min-width: 170px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow);
}

.drawing-context-menu button {
    padding: 9px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.drawing-context-menu button:hover {
    background: var(--surface-strong);
}

.drawing-context-menu button.is-danger {
    color: #b34040;
}

/* Secim cubugu: sablon olarak kaydedildiyse dugme gri zeminli (dolu) */
.drawing-selbar button.is-active {
    background: var(--surface-strong);
}

.drawing-selbar button.is-active svg path:last-child {
    stroke-width: 2.4;
}