/* Sociportal — Bootstrap 5 üzerine kurumsal, aydınlık tema.
   Marka rengi değişkendir: beyaz etikette ajansın, kullanıcı temasında kullanıcının rengiyle değiştirilir (_Layout, Web/UserTheme.cs); öne çıkan alanlar bu renkten türer. */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --brand: #4f46e5;
  --brand-hover: color-mix(in srgb, var(--brand) 86%, #000);
  --brand-soft: color-mix(in srgb, var(--brand) 9%, #fff);
  --brand-softer: color-mix(in srgb, var(--brand) 5%, #fff);
  --brand-ring: color-mix(in srgb, var(--brand) 18%, transparent);
  --brand-text: color-mix(in srgb, var(--brand) 82%, #000);
  --brand-on: #fff;
  --surface: #ffffff;
  --page: #f6f7fb;
  --subtle: #f9fafd;
  --fill: #f0f2f8;
  --line-strong: #d6dbe7;
  --line: #e6e9f2;
  --line-soft: #eef0f6;
  --faint: #8c95ad;
  --muted: #636e88;
  --ink-3: #4b5672;
  --ink-2: #36405e;
  --ink: #1c2540;
  --radius: 1rem;
  --sticky-top: 4rem;
  --shadow-xs: 0 1px 2px rgba(17, 26, 53, .05);
  --shadow-sm: 0 1px 2px rgba(17, 26, 53, .04), 0 6px 18px -12px rgba(17, 26, 53, .14);
  --shadow-md: 0 2px 4px rgba(17, 26, 53, .04), 0 14px 30px -14px rgba(17, 26, 53, .2);
  --shadow-lg: 0 24px 48px -16px rgba(17, 26, 53, .28), 0 6px 14px -6px rgba(17, 26, 53, .1);
  /* Kenar menüsü: varsayılan aydınlık; koyu tonda aşağıdaki [data-side-tone] geçerli */
  --side-bg: var(--surface);
  --side-ink: var(--ink-3);
  --side-ink-strong: var(--ink);
  --side-faint: var(--faint);
  --side-icon: var(--faint);
  --side-hover: var(--fill);
  --side-line: var(--line);
  --side-active-bg: var(--brand-soft);
  --side-active-ink: var(--brand-text);
  --side-active-shadow: none;
  --side-border: var(--line);
  --side-cta-bg: linear-gradient(135deg, color-mix(in srgb, var(--brand) 86%, #fff), var(--brand));
  --bs-primary: var(--brand);
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: var(--brand-text);
  --bs-link-hover-color: var(--brand-hover);
  --bs-body-font-family: "Nunito", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-weight: 500;
  --bs-body-color: var(--ink);
  --bs-body-line-height: 1.55;
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--subtle);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line-soft);
  --bs-border-radius: .625rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .875rem;
  --bs-border-radius-xl: 1rem;
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-lg: var(--shadow-lg);
  --bs-focus-ring-color: var(--brand-ring);
}

/* Koyu tonlu menü: lacivert ya da koyu seçilmiş özel tema (Web/UserTheme.cs) */
:root[data-side-tone="dark"] {
  --side-ink: rgba(255, 255, 255, .82);
  --side-ink-strong: #fff;
  --side-faint: rgba(255, 255, 255, .56);
  --side-icon: rgba(255, 255, 255, .66);
  --side-hover: rgba(255, 255, 255, .1);
  --side-line: rgba(255, 255, 255, .14);
  --side-active-bg: rgba(255, 255, 255, .16);
  --side-active-ink: #fff;
  --side-border: transparent;
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--page);
  color: var(--ink);
  font-size: .9375rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -.012em; color: var(--ink); font-weight: 800; }
.fw-normal { font-weight: 500 !important; }
.fw-medium { font-weight: 650 !important; }
b, strong { font-weight: 750; }
.fw-semibold { font-weight: 750 !important; }
::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
a { color: var(--brand-text); text-underline-offset: .18em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
hr { border-color: var(--line); opacity: 1; }
code { color: #a3155f; background: #fdf2f8; padding: .05rem .3rem; border-radius: .3rem; font-size: .82em; }
kbd { background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; box-shadow: none; font-size: .7rem; padding: .05rem .35rem; border-radius: .35rem; }

/* İnce kaydırma çubukları */
* { scrollbar-width: thin; scrollbar-color: #cdd3e1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cdd3e1; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Düğmeler: Bootstrap primary marka rengini izlesin ── */
.btn {
  --bs-btn-font-weight: 700;
  --bs-btn-padding-x: 1.05rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-font-size: .875rem;
  --bs-btn-border-radius: .625rem;
  --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--brand-ring);
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn.w-100.text-start, .btn.text-start { justify-content: flex-start; }
.btn-sm { --bs-btn-padding-x: .8rem; --bs-btn-padding-y: .35rem; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: .5rem; }
.btn-lg { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: .75rem; }
.btn-primary {
  --bs-btn-color: var(--brand-on);
  --bs-btn-hover-color: var(--brand-on);
  --bs-btn-active-color: var(--brand-on);
  --bs-btn-disabled-color: var(--brand-on);
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .13), transparent);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-text);
  --bs-btn-border-color: color-mix(in srgb, var(--brand) 40%, #fff);
  --bs-btn-hover-color: var(--brand-text);
  --bs-btn-hover-bg: var(--brand-soft);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 60%, #fff);
  --bs-btn-active-color: var(--brand-text);
  --bs-btn-active-bg: color-mix(in srgb, var(--brand) 14%, #fff);
  --bs-btn-active-border-color: var(--brand);
  background: var(--surface);
}
.btn-outline-secondary, .btn-light, .btn-outline-dark {
  --bs-btn-color: var(--ink-2);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--subtle);
  --bs-btn-hover-border-color: var(--faint);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--fill);
  --bs-btn-active-border-color: var(--faint);
  --bs-btn-disabled-color: var(--faint);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--line-soft);
  box-shadow: var(--shadow-xs);
}
.btn-outline-danger {
  --bs-btn-color: #b42318;
  --bs-btn-border-color: #f5b1aa;
  --bs-btn-hover-color: #912018;
  --bs-btn-hover-bg: #fef3f2;
  --bs-btn-hover-border-color: #f97066;
  --bs-btn-active-color: #912018;
  --bs-btn-active-bg: #fee4e2;
  --bs-btn-active-border-color: #f97066;
  background: var(--surface);
}
.btn-secondary, .btn-dark {
  --bs-btn-bg: var(--ink-2); --bs-btn-border-color: var(--ink-2); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink); --bs-btn-disabled-bg: var(--faint); --bs-btn-disabled-border-color: var(--faint);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.btn-danger {--bs-btn-bg: #d92d20; --bs-btn-border-color: #d92d20; --bs-btn-hover-bg: #b42318; --bs-btn-hover-border-color: #b42318; }
.btn-success { --bs-btn-bg: #079455; --bs-btn-border-color: #079455; --bs-btn-hover-bg: #067647; --bs-btn-hover-border-color: #067647; }
.btn-link { --bs-btn-color: var(--brand-text); --bs-btn-hover-color: var(--brand-hover); box-shadow: none; }
.btn-close { opacity: .4; }
.btn-close:hover { opacity: .75; }

/* ── Form öğeleri ── */
.form-label { font-weight: 700; color: var(--ink-2); font-size: .85rem; margin-bottom: .35rem; }
.form-text { color: var(--muted); font-size: .8125rem; }
.form-control, .form-select {
  border-color: var(--line-strong); border-radius: .625rem; padding: .52rem .85rem; font-size: .9375rem; font-weight: 500; color: var(--ink);
  box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s;
}
.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { padding: .36rem .7rem; font-size: .85rem; border-radius: .5rem; }
.form-select-sm { padding-right: 2rem; }
.form-control-lg, .form-select-lg { padding: .75rem 1.05rem; font-size: 1rem; border-radius: .75rem; }
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: var(--faint); }
.form-control::placeholder { color: var(--faint); font-weight: 500; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--subtle); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: color-mix(in srgb, var(--brand) 60%, #fff);
  box-shadow: 0 0 0 .22rem var(--brand-ring);
}
.form-check-input { border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cfd5e3'/%3e%3c/svg%3e"); }
.input-group-text { background: var(--subtle); border-color: var(--line-strong); color: var(--muted); font-size: .85rem; }
.form-range::-webkit-slider-thumb { background: var(--brand); }
.form-range::-moz-range-thumb { background: var(--brand); }
fieldset.border { border-color: var(--line) !important; border-radius: .875rem !important; background: var(--subtle); }
fieldset > legend { font-weight: 750; font-size: .9rem; color: var(--ink); background: transparent; }

.text-brand, .text-primary { color: var(--brand-text) !important; }
.bg-brand-soft { background: var(--brand-soft) !important; }
.text-secondary { color: var(--muted) !important; }
.text-body-secondary { color: var(--muted) !important; }
.bg-light { background-color: var(--subtle) !important; }

/* ── Kart ── */
.card {
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: var(--radius);
  --bs-card-inner-border-radius: calc(var(--radius) - 1px);
  --bs-card-cap-padding-x: 1.35rem;
  --bs-card-cap-padding-y: .95rem;
  --bs-card-spacer-x: 1.35rem;
  --bs-card-spacer-y: 1.25rem;
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
}
.card-header { background: transparent; border-bottom-color: var(--line-soft); font-weight: 800; font-size: 1rem; color: var(--ink); }
.card-footer { background: var(--subtle); border-top-color: var(--line-soft); }
.card-title { font-weight: 800; letter-spacing: -.01em; }
a.card { transition: box-shadow .15s, border-color .15s, transform .15s; }
a.card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); transform: translateY(-2px); }
.list-group { --bs-list-group-border-color: var(--line-soft); --bs-list-group-action-hover-bg: var(--subtle); }

/* ── Uyarı kutuları ── */
.alert {
  --bs-alert-padding-x: 1.1rem;
  --bs-alert-padding-y: .8rem;
  --bs-alert-border-radius: .875rem;
  border-width: 1px;
  line-height: 1.5;
}
.alert-warning { --bs-alert-bg: #fffaeb; --bs-alert-border-color: #fbe3a6; --bs-alert-color: #7a3b0c; --bs-alert-link-color: #6a2f08; --alert-accent: #f5a524; }
.alert-danger  { --bs-alert-bg: #fef5f4; --bs-alert-border-color: #fbcfca; --bs-alert-color: #912018; --bs-alert-link-color: #7a1a13; --alert-accent: #f04438; }
.alert-success { --bs-alert-bg: #f0faf4; --bs-alert-border-color: #bde8cf; --bs-alert-color: #075a3a; --bs-alert-link-color: #054a30; --alert-accent: #17b26a; }
.alert-info    { --bs-alert-bg: #f1f6ff; --bs-alert-border-color: #cddffc; --bs-alert-color: #1d3f8f; --bs-alert-link-color: #18337a; --alert-accent: #3b82f6; }
.alert-primary { --bs-alert-bg: var(--brand-softer); --bs-alert-border-color: color-mix(in srgb, var(--brand) 18%, #fff); --bs-alert-color: var(--brand-text); --bs-alert-link-color: var(--brand-text); --alert-accent: var(--brand); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--subtle); --bs-alert-border-color: var(--line); --bs-alert-color: var(--ink-2); --bs-alert-link-color: var(--ink); --alert-accent: var(--faint); }
.alert-link { font-weight: 750; }
.alert .btn-close { padding: 1rem; }

/* ── Rozetler, ilerleme, açılır menü, pencere ── */
.badge { font-weight: 700; letter-spacing: .01em; padding: .35em .7em; border-radius: 999px; }
.progress { --bs-progress-height: .5rem; --bs-progress-bg: var(--fill); --bs-progress-border-radius: 999px; --bs-progress-bar-bg: var(--brand); }
.dropdown-menu {
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: .875rem;
  --bs-dropdown-padding-x: .35rem;
  --bs-dropdown-padding-y: .35rem;
  --bs-dropdown-item-padding-x: .7rem;
  --bs-dropdown-item-padding-y: .45rem;
  --bs-dropdown-item-border-radius: .5rem;
  --bs-dropdown-link-hover-bg: var(--fill);
  --bs-dropdown-link-active-bg: var(--brand-soft);
  --bs-dropdown-link-active-color: var(--brand-text);
  --bs-dropdown-header-color: var(--faint);
  --bs-dropdown-divider-bg: var(--line-soft);
  font-size: .875rem;
  box-shadow: var(--shadow-lg) !important;
}
.dropdown-header { font-size: .78rem; font-weight: 750; }
.modal { --bs-modal-border-radius: var(--radius); --bs-modal-border-color: transparent; --bs-modal-header-border-color: var(--line-soft); --bs-modal-footer-border-color: var(--line-soft); --bs-modal-box-shadow: var(--shadow-lg); }
.modal-backdrop { --bs-backdrop-bg: #0a1028; --bs-backdrop-opacity: .45; }
.modal-content { box-shadow: var(--shadow-lg); }
.modal-title { font-weight: 800; font-size: 1.05rem; }
.tooltip { --bs-tooltip-bg: #101828; --bs-tooltip-border-radius: .45rem; --bs-tooltip-font-size: .78rem; }
.toast { --bs-toast-border-radius: .875rem; --bs-toast-border-color: var(--line); box-shadow: var(--shadow-lg); }

/* ── Sekmeler ── */
.nav-underline {
  --bs-nav-underline-gap: 1.35rem;
  --bs-nav-underline-border-width: 2.5px;
  --bs-nav-link-color: var(--muted);
  --bs-nav-link-hover-color: var(--ink);
  --bs-nav-underline-link-active-color: var(--brand-text);
  --bs-nav-link-font-size: .875rem;
  --bs-nav-link-font-weight: 650;
  --bs-nav-link-padding-y: .65rem;
  border-bottom-color: var(--line) !important;
}
.nav-underline .nav-link { margin-bottom: -1px; }
.nav-underline .nav-link.active, .nav-underline .show > .nav-link { font-weight: 800; border-bottom-color: var(--brand); }
.nav-underline .nav-link:hover:not(.active) { border-bottom-color: var(--line-strong); }
.nav-tabs { --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-active-color: var(--ink); --bs-nav-tabs-link-hover-border-color: transparent; --bs-nav-link-color: var(--muted); --bs-nav-link-hover-color: var(--ink); --bs-nav-link-font-weight: 650; font-size: .875rem; }
.nav-pills {
  --bs-nav-pills-border-radius: .55rem;
  --bs-nav-pills-link-active-bg: var(--surface);
  --bs-nav-pills-link-active-color: var(--brand-text);
  --bs-nav-link-color: var(--muted);
  --bs-nav-link-hover-color: var(--ink);
  --bs-nav-link-font-weight: 700;
  display: inline-flex; flex-wrap: wrap; gap: .15rem; padding: .25rem; border-radius: .75rem; background: var(--fill);
}
.nav-pills .nav-link.active { box-shadow: var(--shadow-sm); }

/* ── Panel düzeni ── */
@media (min-width: 992px) { :root { --sticky-top: 4.75rem; } }
.in-app { --sticky-top: .75rem; }
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  position: sticky; top: 0; height: 100vh; width: 16.5rem; flex-shrink: 0; z-index: 20;
  display: flex; flex-direction: column; background: var(--side-bg); color: var(--side-ink); border-right: 1px solid var(--side-border);
  transition: width .18s ease;
}
.app-sidebar .brand, .side-drawer .brand { height: 4rem; display: flex; align-items: center; gap: .7rem; padding: 0 1.15rem; color: var(--side-ink-strong); text-decoration: none; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; flex-shrink: 0; }
.app-sidebar .brand .brand-name, .side-drawer .brand .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-scroll { flex: 1; overflow-y: auto; padding: .25rem .8rem 1rem; scrollbar-color: transparent transparent; }
.nav-scroll:hover { scrollbar-color: var(--side-line) transparent; }
.app-sidebar .user-box { border-top: 1px solid var(--side-line); padding: .7rem .8rem; }
.app-sidebar .user-box .btn-light { --bs-btn-color: var(--side-ink-strong); --bs-btn-hover-color: var(--side-ink-strong); --bs-btn-active-color: var(--side-ink-strong); box-shadow: none; border-color: transparent; background: transparent; padding: .45rem .55rem; }
.app-sidebar .user-box .btn-light:hover, .app-sidebar .user-box .btn-light.show { background: var(--side-hover); border-color: transparent; }
.app-sidebar .user-box .btn-light .small-muted { color: var(--side-faint); font-size: .78rem; }
.app-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.app-content { width: 100%; max-width: 86rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; flex: 1; }
@media (min-width: 992px) { .app-content { padding: 2rem 2.25rem 4rem; } }
@media (min-width: 576px) and (max-width: 991.98px) { .app-content { padding-left: 1.5rem; padding-right: 1.5rem; } }
.app-topbar { position: sticky; top: 0; z-index: 30; background: var(--side-bg); color: var(--side-ink-strong); border-bottom: 1px solid var(--side-border); box-shadow: 0 6px 18px -14px rgba(10, 16, 40, .35); }
.app-topbar-row { display: flex; align-items: center; gap: .5rem; height: 3.5rem; padding: 0 .6rem 0 .5rem; }
.app-topbar-brand { display: flex; align-items: center; gap: .55rem; min-width: 0; margin-right: auto; font-weight: 800; color: var(--side-ink-strong); text-decoration: none; }
.app-topbar-brand:hover { color: var(--side-ink-strong); }
.app-topbar-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-icon { flex-shrink: 0; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 0; border-radius: .6rem; background: transparent; color: var(--side-ink-strong); }
.topbar-icon:hover { background: var(--side-hover); }
.topbar-icon svg { width: 1.3rem; height: 1.3rem; }
.app-topbar .btn-light { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--side-ink-strong); --bs-btn-hover-bg: var(--side-hover); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--side-ink-strong); --bs-btn-active-bg: var(--side-hover); --bs-btn-active-color: var(--side-ink-strong); box-shadow: none; padding-left: .35rem; padding-right: .35rem; }

/* Telefon ve tablette menü soldan açılır */
.side-drawer { --bs-offcanvas-width: min(19rem, 86vw); --bs-offcanvas-bg: transparent; --bs-offcanvas-color: var(--side-ink); background: var(--side-bg); border: 0 !important; }
.side-drawer .nav-scroll { padding-top: 0; }
.side-drawer-close { margin-left: auto; color: var(--side-ink-strong); }
.side-drawer .side-search { margin: 0 .8rem .6rem; width: auto; flex-shrink: 0; }

.brand-mark {
  width: 2.1rem; height: 2.1rem; border-radius: .65rem; color: var(--brand-on); display: grid; place-items: center; font-weight: 800; font-size: .9rem; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 72%, #fff), var(--brand) 55%, color-mix(in srgb, var(--brand) 78%, #000));
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--brand) 70%, #000), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.side-nav a {
  position: relative; display: flex; align-items: center; gap: .72rem; padding: .5rem .7rem; border-radius: .625rem;
  color: var(--side-ink); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; transition: background-color .12s, color .12s;
}
.side-nav a svg { color: var(--side-icon); transition: color .12s; }
.side-nav a:hover { background: var(--side-hover); color: var(--side-ink-strong); }
.side-nav a:hover svg { color: var(--side-ink-strong); }
.side-nav a.active { background: var(--side-active-bg); color: var(--side-active-ink); font-weight: 750; box-shadow: var(--side-active-shadow); }
.side-nav a.active svg { color: var(--side-active-ink); }
.side-nav svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.side-nav a.side-cta {
  justify-content: center; margin: .15rem 0 .75rem; padding: .58rem .7rem; color: var(--brand-on); font-weight: 800;
  background: var(--side-cta-bg); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 85%, #000), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.side-nav a.side-cta svg { color: var(--brand-on); }
.side-nav a.side-cta:hover { filter: brightness(1.06); color: var(--brand-on); }
.side-nav a.side-cta.active { color: var(--brand-on); background: var(--side-cta-bg); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 85%, #000), inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.side-nav a.side-cta.active svg { color: var(--brand-on); }

/* Dar menü (rail): yalnızca simgeler; durum tarayıcıda saklanır (site.js) */
@media (min-width: 992px) {
  .side-collapsed .app-sidebar { width: 4.6rem; }
  .side-collapsed .app-sidebar .brand { padding: 0; justify-content: center; }
  .side-collapsed .app-sidebar .brand-name, .side-collapsed .app-sidebar .side-nav a > span, .side-collapsed .app-sidebar .nav-group > summary { display: none; }
  .side-collapsed .app-sidebar .side-nav a { justify-content: center; padding: .6rem 0; }
  .side-collapsed .app-sidebar .nav-group { padding-top: .4rem; margin-top: .4rem; border-top: 1px solid var(--side-line); }
  .side-collapsed .app-sidebar .side-nav a.side-cta { margin-bottom: .25rem; }
  .side-collapsed .app-sidebar .user-box .dropdown-toggle::after, .side-collapsed .app-sidebar .user-box .flex-grow-1 { display: none; }
  .side-collapsed .app-sidebar .user-box .btn-light { justify-content: center; padding-left: 0; padding-right: 0; }
}

/* ── Sayfa başlığı ── */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { font-size: 1.65rem; font-weight: 800; letter-spacing: -.022em; margin: 0; line-height: 1.2; }
.page-head p { color: var(--muted); margin: .35rem 0 0; max-width: 46rem; font-size: .95rem; }
.page-head > :last-child:not(:first-child) { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (max-width: 575.98px) { .page-head h1 { font-size: 1.4rem; } }

/* Süzgeç çubuğu: sayfa üstündeki arama ve seçim kutularını bir arada tutar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem .85rem; margin-bottom: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.toolbar .form-control, .toolbar .form-select { box-shadow: none; }
@media (max-width: 575.98px) { .toolbar .form-control, .toolbar .form-select { max-width: none !important; flex: 1 1 100%; } }

/* ── Platform rozeti ── */
.platform-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.platform-dot { width: .55rem; height: .55rem; border-radius: 999px; display: inline-block; }

/* ── Durum rozetleri (gönderi, varyant, iş) ── */
.status { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 750; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }
.status::before { content: ""; width: .4rem; height: .4rem; border-radius: 999px; background: currentColor; opacity: .75; }
.status-draft { background: #f2f4f7; color: #475467; }
.status-pending { background: #fffaeb; color: #b54708; }
.status-scheduled { background: #eff8ff; color: #175cd3; }
.status-running { background: #f4f3ff; color: #5925dc; }
.status-ok { background: #ecfdf3; color: #067647; }
.status-warn { background: #fff6ed; color: #c4320a; }
.status-error { background: #fef3f2; color: #b42318; }

/* ── Boş durum ── */
.empty-state { text-align: center; padding: 3.25rem 1rem; color: var(--muted); }
.card.empty-state, .empty-state.d-flex, .empty-state.d-grid { align-items: center; justify-items: center; }
.empty-state p { max-width: 34rem; margin-left: auto; margin-right: auto; }
.empty-state h3 { font-size: 1.05rem; color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
.empty-state::before {
  content: ""; display: block; width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: .9rem;
  background: var(--brand-soft) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636e88' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 13h4l2 3h4l2-3h4'/%3e%3cpath d='M5.5 5.5 4 13v5a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-5l-1.5-7.5a1 1 0 0 0-1-.8h-11a1 1 0 0 0-1 .8z'/%3e%3c/svg%3e") center / 1.4rem no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent);
}

/* ── Kimlik doğrulama sayfaları ── */
.auth-split { min-height: 100vh; display: grid; }
.auth-side { display: none; }
@media (min-width: 992px) {
  .auth-split { grid-template-columns: minmax(22rem, 40%) 1fr; }
  .auth-side {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.5rem 3rem; color: #fff;
    background:
      radial-gradient(34rem 26rem at 105% 105%, color-mix(in srgb, var(--brand) 55%, #fff), transparent 65%),
      linear-gradient(165deg, color-mix(in srgb, var(--brand) 88%, #1c2540), var(--brand));
  }
    .auth-side::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
    background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem; -webkit-mask-image: radial-gradient(30rem 24rem at 30% 40%, #000, transparent 75%); mask-image: radial-gradient(30rem 24rem at 30% 40%, #000, transparent 75%);
  }
  .auth-side > * { position: relative; z-index: 1; }
  .auth-side .brand-mark { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
  .auth-side h2 { color: #fff; font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; max-width: 26rem; margin-bottom: 1.5rem; }
  .auth-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
  .auth-side li { display: flex; gap: .7rem; align-items: center; color: rgba(255, 255, 255, .88); }
  .auth-side li::before {
    content: ""; width: 1.4rem; height: 1.4rem; flex-shrink: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .16) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m5 12 5 5 9-10'/%3e%3c/svg%3e") center / .75rem no-repeat;
  }
  .auth-side p { color: rgba(255, 255, 255, .6); font-size: .8rem; }
  .auth-mobile-brand { display: none !important; }
}
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem;
  background: radial-gradient(50rem 26rem at 50% -6rem, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%) no-repeat, var(--page);
}
.auth-card { width: 100%; max-width: 27rem; }
.auth-card .card { box-shadow: var(--shadow-lg); border-color: transparent; }
.auth-card h1 { font-size: 1.45rem !important; font-weight: 800; letter-spacing: -.02em; }
.auth-card .btn-primary.w-100 { --bs-btn-padding-y: .6rem; }

/* ── Giriş gerektirmeyen paylaşım sayfaları ── */
.public-page { min-height: 100vh; background: radial-gradient(60rem 24rem at 50% -8rem, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%) no-repeat, var(--page); }
.public-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.75rem; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }

.muted { color: var(--muted); }
.small-muted { color: var(--muted); font-size: .85rem; }
.text-pre { white-space: pre-wrap; }
.stat-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }

/* ── Tablolar ── */
.table { --bs-table-border-color: var(--line-soft); --bs-table-hover-bg: var(--brand-softer); --bs-table-striped-bg: var(--subtle); --bs-table-color: var(--ink); }
.table > :not(caption) > * > * { padding: .75rem .85rem; }
.table thead th {
  font-size: .78rem; color: var(--muted); font-weight: 750;
  background: var(--subtle); border-bottom-color: var(--line); white-space: nowrap;
}
.table tbody tr:last-child > * { border-bottom-width: 0; }
.table > tbody > tr { transition: background-color .1s; }
.card > .table, .card > .table-responsive > .table { margin-bottom: 0; }
.card > .table-responsive { border-radius: calc(var(--radius) - 1px); }
.card > .table thead th:first-child, .card > .table-responsive > .table thead th:first-child { padding-left: 1.4rem; }
.card > .table td:first-child, .card > .table-responsive > .table td:first-child { padding-left: 1.4rem; }
.card > .table thead th:last-child, .card > .table-responsive > .table thead th:last-child, .card > .table td:last-child, .card > .table-responsive > .table td:last-child { padding-right: 1.4rem; }
.card > .table:first-child thead th:first-child, .card > .table-responsive:first-child .table thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
.card > .table:first-child thead th:last-child, .card > .table-responsive:first-child .table thead th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }

/* Bootstrap d-flex / d-grid gibi sınıflar hidden özniteliğini ezmesin */
[hidden] { display: none !important; }

/* ── Menü grupları ve arama ── */
.side-nav .nav-group + .nav-group, .side-nav > a + .nav-group { margin-top: .2rem; }
.side-nav .nav-group > summary {
  list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between;
  padding: .8rem .7rem .3rem; font-size: .74rem; font-weight: 800; letter-spacing: .02em; color: var(--side-faint); border-radius: .5rem;
}
.side-nav .nav-group > summary::-webkit-details-marker { display: none; }
.side-nav .nav-group > summary::after { content: ""; width: .38rem; height: .38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s, opacity .15s; margin-right: .2rem; opacity: 0; }
.side-nav .nav-group:not([open]) > summary::after { transform: rotate(-45deg); opacity: 1; }
.side-nav:hover .nav-group > summary::after { opacity: 1; }
.side-nav .nav-group > summary:hover { color: var(--side-ink-strong); }
.side-search {
  width: 100%; display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; padding: .5rem .7rem; border: 1px solid var(--side-line);
  border-radius: .625rem; background: var(--side-hover); color: var(--side-ink); font-size: .875rem; text-align: left;
}
.side-search svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.side-search span { flex: 1; }
.search-head kbd, .search-foot kbd { background: var(--subtle); color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; box-shadow: none; font-size: .68rem; padding: .05rem .35rem; }
.search-dialog { max-width: 40rem; margin-top: 8vh; }
.search-dialog .modal-content { overflow: hidden; }
.search-head { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line-soft); }
.search-head svg { width: 1.15rem; height: 1.15rem; color: #98a2b3; flex-shrink: 0; }
.search-head input { font-size: 1.05rem; padding: .5rem 0; box-shadow: none !important; }
.search-results { padding: .35rem; max-height: 60vh; overflow-y: auto; }
.search-group { padding: .6rem .75rem .25rem; font-size: .76rem; font-weight: 800; color: var(--faint); }
.search-item { display: flex; flex-direction: column; gap: .05rem; padding: .5rem .75rem; color: var(--ink); text-decoration: none; border-radius: .55rem; }
.search-item.active { background: var(--brand-soft); }
.search-item.active .search-label { color: var(--brand-text); }
.search-label { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-detail { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-foot { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: 1px solid var(--line-soft); background: var(--subtle); }
@media (max-width: 575.98px) { .search-foot span.ms-auto { display: none; } }

/* ── Masaüstü üst çubuğu: konum ve hızlı işlemler ── */
.app-header {
  position: sticky; top: 0; z-index: 10; height: 4rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 2.25rem 0 1.25rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line);
}
.app-header-start { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.side-toggle { flex-shrink: 0; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 0; border-radius: .55rem; background: transparent; color: var(--muted); }
.side-toggle:hover { background: var(--fill); color: var(--ink); }
.side-toggle svg { width: 1.2rem; height: 1.2rem; }
.app-crumbs { display: flex; align-items: center; gap: .55rem; min-width: 0; font-size: .875rem; color: var(--muted); }
.app-crumbs > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-crumbs a { color: var(--ink-3); text-decoration: none; font-weight: 650; }
.app-crumbs a:hover { color: var(--ink); }
.app-crumbs strong { color: var(--ink); font-weight: 800; }
.app-crumbs i { flex-shrink: 0; width: .38rem; height: .38rem; border-right: 1.5px solid var(--faint); border-top: 1.5px solid var(--faint); transform: rotate(45deg); }
.app-header-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.app-header-search {
  display: flex; align-items: center; gap: .55rem; width: 19rem; padding: .45rem .5rem .45rem .85rem; border: 1px solid var(--line); border-radius: .65rem;
  background: var(--subtle); color: var(--muted); font-size: .85rem; font-weight: 600; text-align: left; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.app-header-search:hover { border-color: var(--line-strong); background: var(--surface); box-shadow: var(--shadow-sm); }
.app-header-search svg { width: .95rem; height: .95rem; flex-shrink: 0; }
.app-header-search span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header-search kbd { background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; font-size: .66rem; padding: .02rem .32rem; }
@media (max-width: 1199.98px) { .app-header-search { width: 14rem; } .app-header-search kbd { display: none; } }

/* ── Doğrulanmamış e-posta şeridi ── */
.verify-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; margin-bottom: 1.25rem; padding: .55rem .6rem .55rem 1rem; font-size: .85rem; }
.verify-strip .btn { --bs-btn-padding-y: .25rem; --bs-btn-font-size: .78rem; }

/* ── Sekme şeritleri (_SettingsTabs, MailCampaigns/_Tabs, Blog/_Tabs) ──
   Geniş ekranda sığmayan sekmeler alt satıra geçer (gizli kalmaz); telefonda yana kayar ve sağ kenar soluklaşarak devamı olduğunu gösterir (site.js) */
.tab-strip { flex-wrap: wrap; row-gap: .15rem; }
@media (max-width: 767.98px) {
  .tab-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; --bs-nav-underline-gap: 1.1rem;
    --fade: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2.5rem), transparent); -webkit-mask-image: var(--fade); mask-image: var(--fade); }
  .tab-strip::-webkit-scrollbar { display: none; }
  .tab-strip.at-start { --fade: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
  .tab-strip.at-end { --fade: linear-gradient(to right, transparent, #000 2rem); }
  .tab-strip.at-start.at-end { -webkit-mask-image: none; mask-image: none; }
  .tab-strip .nav-link { white-space: nowrap; }
}

/* ── Roller ve yetkiler (Views/Settings/Roles.cshtml) ── */
.rl-features { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.rl-features li { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .4rem; border-radius: 999px; font-size: .8rem; font-weight: 500;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: help; }
.rl-mark { width: 1.15rem; height: 1.15rem; border-radius: 999px; display: grid; place-items: center; font-size: .65rem; font-weight: 700; }
.rl-features .is-on .rl-mark { background: #dcfce7; color: #166534; }
.rl-features .is-off { color: var(--faint); background: var(--subtle); border-style: dashed; }
.rl-features .is-off .rl-mark { background: var(--fill); color: var(--faint); }

.rl-matrix { overflow: hidden; }
.rl-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line-soft); }
.rl-role { display: grid; gap: .1rem; padding: .85rem 1.25rem; min-width: 0; }
.rl-role + .rl-role { border-left: 1px solid var(--line-soft); }
.rl-role strong { font-size: .9rem; color: var(--ink); }
.rl-count { font-size: .8rem; color: var(--muted); }
.rl-count b { color: var(--brand-text); font-weight: 600; }
.rl-role small { font-size: .75rem; color: var(--faint); line-height: 1.35; }

.rl-head, .rl-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 6.5rem); align-items: center; gap: .5rem; padding: .65rem 1.25rem; }
.rl-head { background: var(--subtle); border-bottom: 1px solid var(--line-soft); font-size: .8rem; font-weight: 500; color: var(--muted); }
.rl-head span:not(:first-child) { text-align: center; }
.rl-group { padding: .9rem 1.25rem .35rem; font-size: .85rem; font-weight: 600; color: var(--brand-text); }
.rl-row + .rl-group { border-top: 1px solid var(--line-soft); margin-top: .25rem; }
.rl-row:hover { background: var(--subtle); }
.rl-perm { min-width: 0; font-size: .875rem; color: var(--ink); }
.rl-perm small { display: block; font-size: .8rem; color: var(--muted); }
.rl-row.is-off .rl-perm > span.fw-medium { color: var(--muted); }
.rl-cell { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0; cursor: pointer; }
.rl-cell .form-check-input { margin: 0; width: 1.15rem; height: 1.15rem; }
.rl-cell-role { display: none; font-size: .8rem; color: var(--ink-3); }
@media (max-width: 991.98px) {
  .rl-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-role:nth-child(3) { border-left: 0; }
  .rl-role:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 767.98px) {
  .rl-head { display: none; }
  .rl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .75rem; padding: .75rem 1rem; }
  .rl-perm { grid-column: 1 / -1; }
  .rl-cell { justify-content: flex-start; }
  .rl-cell-role { display: inline; }
  .rl-group { padding-left: 1rem; }
  .rl-role { padding: .75rem 1rem; }
}
@media (min-width: 420px) and (max-width: 767.98px) { .rl-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* E-posta abone formu (Views/MailSignup) */
.signup-ok { width: 3rem; height: 3rem; margin: 0 auto .25rem; border-radius: 999px; display: grid; place-items: center; font-size: 1.4rem; background: var(--brand-soft); color: var(--brand-text); }
.signup-ok.is-error { background: #fee2e2; color: #991b1b; }

/* Yapay zekâ model seçici (ai-secici.js): düğmelerin yanında <span data-ai-pick="POST"> */
.ai-pick { position: relative; display: inline-flex; align-items: center; }
.ai-pick-btn { display: inline-flex; align-items: center; gap: .3rem; max-width: 14rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink-2); font-size: .75rem; line-height: 1.4; white-space: nowrap; }
.ai-pick-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.ai-pick-btn > span { overflow: hidden; text-overflow: ellipsis; }
.ai-pick-btn::before { content: "✦"; color: var(--brand); font-size: .7rem; }
.ai-pick-btn.is-custom { border-color: var(--brand-ring, var(--brand)); background: var(--brand-softer); color: var(--brand-text); }
.ai-pick .dropdown-menu { max-height: 18rem; overflow-y: auto; font-size: .8125rem; min-width: 14rem; }
.ai-pick .dropdown-header { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.ai-pick .dropdown-item.active { background: var(--brand-soft); color: var(--brand-text); }

/* Yasal sayfalar (/gizlilik, /kullanim-kosullari, /veri-silme) ve giriş sayfasındaki bağlantılar */
.auth-legal { margin: 1rem 0 0; text-align: center; font-size: .78rem; color: var(--faint); }
.auth-legal a { color: var(--muted); text-decoration: none; }
.auth-legal a:hover { color: var(--ink); text-decoration: underline; }
.legal-nav { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 1rem; }
.legal-nav a { padding: .35rem .8rem; border-radius: 999px; font-size: .8125rem; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line-soft); background: var(--surface); }
.legal-nav a.active { background: var(--brand-soft); border-color: transparent; color: var(--brand-text); font-weight: 500; }
.legal-doc .card-body { padding: clamp(1.25rem, 4vw, 2.5rem); line-height: 1.65; color: var(--ink-2); font-size: .9375rem; }
.legal-doc h1 { font-size: 1.6rem; font-weight: 700; color: var(--ink); margin-bottom: .25rem; }
.legal-doc h2 { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 1.75rem 0 .5rem; }
.legal-doc .legal-meta { font-size: .8125rem; color: var(--faint); margin-bottom: 1.5rem; }
.legal-doc ul, .legal-doc ol { padding-left: 1.25rem; }
.legal-doc li { margin-bottom: .35rem; }
.legal-contact { font-style: normal; padding: .875rem 1rem; border-radius: .75rem; background: var(--subtle); border: 1px solid var(--line-soft); }

/* Mobil uygulamanın içinde açılan panel sayfası: menü, üst çubuk ve konum satırı uygulamada (Features/Mobile/MobileWeb.cs) */
/* Tema ve görünüm (Views/Appearance) */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.theme-tile { display: grid; gap: .3rem; padding: .75rem; text-align: left; border: 1.5px solid var(--line); border-radius: .875rem; background: var(--surface); color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.theme-tile:hover { border-color: var(--line-strong); }
.theme-tile.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.theme-tile strong { font-size: .9rem; font-weight: 800; }
.theme-tile small { font-size: .78rem; line-height: 1.35; color: var(--muted); }
.theme-mini { display: grid; grid-template-columns: 30% 1fr; height: 4.25rem; margin-bottom: .35rem; overflow: hidden; border-radius: .5rem; border: 1px solid var(--line); background: var(--theme-mini-page, #f6f7fb); }
.theme-mini i { background: var(--theme-mini-side, #fff); border-right: 1px solid var(--line); }
.theme-mini b { margin: .55rem; border-radius: .3rem; background: linear-gradient(115deg, color-mix(in srgb, var(--brand) 12%, #fff), color-mix(in srgb, var(--brand) 26%, #fff)); }
.theme-mini-yumusak { --theme-mini-side: color-mix(in srgb, var(--brand) 12%, #fff); --theme-mini-page: color-mix(in srgb, var(--brand) 5%, #f6f7fb); }
.theme-mini-lacivert { --theme-mini-side: color-mix(in srgb, var(--brand) 26%, #3b4a70); }
.theme-mini-ozel { --theme-mini-side: conic-gradient(#fca5a5, #fde68a, #86efac, #93c5fd, #c4b5fd, #fca5a5); }
.theme-mini-ozel i { background: var(--theme-mini-side); }
.theme-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.theme-swatch { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .1s; }
.theme-swatch:hover { transform: scale(1.08); }
.theme-swatch.active { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme-color { display: inline-flex; align-items: center; gap: .6rem; margin: 0; cursor: pointer; font-size: .875rem; font-weight: 650; }
.theme-color input[type=color] { width: 2.25rem; height: 2.25rem; flex-shrink: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: .55rem; background: var(--surface); cursor: pointer; }
.theme-color small { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); }
.theme-custom { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 1.5rem; }

.in-app .app-sidebar, .in-app .app-topbar, .in-app .app-header, .in-app .side-drawer { display: none !important; }