.app-bar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.app-drawer { border-right: 1px solid var(--mud-palette-lines-default); }

.stat-card { height: 100%; }
.stat-card .value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }

.mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .85rem; word-break: break-all; }

.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; margin-bottom: 8px; }
.bar-row .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--mud-palette-primary); opacity: .75; }

.code-block { background: var(--mud-palette-background-gray); border-radius: 8px; padding: 12px; overflow-x: auto; white-space: pre; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }

/* Telefon önizlemesi */
.phone { width: 260px; height: 520px; border-radius: 36px; border: 10px solid #1f2333; background: #eef0f5; position: relative; overflow: hidden; margin: 0 auto; }
.phone .screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.phone .fake-content { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.phone .fake-line { height: 10px; border-radius: 5px; background: #d5d8e2; }
.phone .banner { height: 56px; background: #fff; border-top: 1px solid #d5d8e2; display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: #1f2333; }
.phone .banner img, .phone .banner video { height: 44px; width: 44px; object-fit: cover; border-radius: 6px; }
.phone .banner .t { font-size: 12px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone .banner .b { font-size: 11px; background: #5b4bdb; color: #fff; padding: 4px 8px; border-radius: 12px; }
.phone .overlay { position: absolute; inset: 0; background: rgba(10, 12, 20, .55); display: flex; align-items: center; justify-content: center; padding: 14px; }
.phone .full { position: absolute; inset: 0; background: #000; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; }
.phone .full img, .phone .full video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone .full .info { position: relative; padding: 16px; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.phone .card { background: #fff; color: #1f2333; border-radius: 16px; width: 100%; overflow: hidden; }
.phone .card img, .phone .card video { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.phone .card .info { padding: 12px; }
.phone .cta { display: block; text-align: center; margin-top: 10px; background: #5b4bdb; color: #fff; border-radius: 20px; padding: 8px; font-size: 13px; font-weight: 600; }
.phone .close { position: absolute; top: 10px; right: 12px; color: #fff; font-size: 13px; background: rgba(0,0,0,.5); border-radius: 12px; padding: 2px 8px; z-index: 2; }

#blazor-error-ui { display: none; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "Bir hata oluştu."; }

.login-input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--mud-palette-lines-inputs); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; }
.login-input:focus { outline: 2px solid var(--mud-palette-primary); border-color: transparent; }
.validation-message { color: var(--mud-palette-error); font-size: .8rem; }

/* API dokümanı */
.docs-toc { display: flex; flex-wrap: wrap; gap: 6px 16px; position: sticky; top: 56px; z-index: 5; background: var(--mud-palette-surface); }
.docs-toc a { color: var(--mud-palette-primary); text-decoration: none; font-size: .9rem; }
.docs-section { margin-bottom: 40px; scroll-margin-top: 110px; }
.docs-endpoint { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--mud-palette-lines-default); scroll-margin-top: 110px; }
.docs-list { padding-left: 20px; line-height: 1.7; }
.docs-section code, .docs-list code { background: var(--mud-palette-background-gray); padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.code-wrap { position: relative; }
.code-copy { position: absolute; top: 4px; right: 4px; }