/* Yaudu ID - shared design tokens (same visual family as business.yaudu's own palette -
   independently defined here, id.yaudu is a server-rendered Razor Pages app with no build
   pipeline, so the tokens are hand-mirrored rather than shared code). */
:root {
  --background: oklch(0.99 0.004 106);
  --foreground: oklch(0.18 0.035 255);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.035 255);
  --muted: oklch(0.95 0.014 248);
  --muted-foreground: oklch(0.46 0.038 255);
  --primary: oklch(0.43 0.145 255);
  --primary-foreground: oklch(0.99 0.004 106);
  --secondary: oklch(0.9 0.035 205);
  --secondary-foreground: oklch(0.24 0.06 242);
  --accent: oklch(0.88 0.07 160);
  --accent-foreground: oklch(0.21 0.055 172);
  --destructive: oklch(0.55 0.19 28);
  --destructive-foreground: oklch(0.99 0.004 106);
  --success: oklch(0.48 0.13 150);
  --success-foreground: oklch(0.99 0.004 106);
  --warning: oklch(0.78 0.16 78);
  --warning-foreground: oklch(0.22 0.04 70);
  --border: oklch(0.88 0.018 255);
  --input: oklch(0.93 0.014 248);
  --ring: oklch(0.55 0.15 255);

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  --header-height: 3.75rem;
  /* D-135 - widened (15.5rem → 17rem) to move closer to business.yaudu's own sidebar (18rem) -
     roomier now that every nav item carries its own icon, not just group headers. */
  --sidebar-width: 17rem;
  --content-max: 64rem;

  /* D-119 - a mature design system needs more than color tokens: a spacing scale (4px grid,
     used wherever a new component below needs consistent padding/gaps instead of an ad hoc
     rem value), a type scale (so headings/labels/fine-print follow one ratio instead of each
     page inventing its own size), and elevation (shadow) tokens (nothing in this file had any
     depth/shadow before this Etap - every card/panel was perfectly flat). None of this touches
     the existing color/radius/layout tokens above. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

/* D-120 - sticky footer: on short pages (Giriş/Kayıt/Şifre sıfırlama) the footer was stranding
   itself in the middle of the viewport with empty space below it - the classic missing
   flex-column-wrapper symptom. body is now the flex column (100dvh, with a 100vh fallback for
   browsers/engines that don't support dvh yet - min-height accepts a fallback value simply by
   being declared twice, the last one browsers understand wins), and <main> (see the flex rule
   below) is the one flexible child that grows to push the footer down - on long pages (Admin
   tables, etc.) main simply grows past 100dvh and the footer follows normally, exactly as
   before. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  color: var(--foreground);
  background: var(--background);
  line-height: 1.55;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-xl); margin-top: var(--space-7); }
h3 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--primary);
}

/* D-119 - subtle, consistent transitions on anything interactive (links included) instead of an
   instant color-snap - a small, cheap "feels considered" signal every hover/focus state below
   inherits automatically. */
a, button, .btn, .card, input, select, textarea {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

*:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ---------- Public site header/footer ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.site-header .bar {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1.25rem;
  gap: 1rem;
}

.brand {
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  text-decoration: none;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.brand img { display: block; }

/* D-119 - the site's own existing icon (favicon), carried into the header/sidebar brand mark
   itself instead of only living in the browser tab - no new mark invented. */
.brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-left: auto;
}

.site-nav a,
.site-nav button {
  font: inherit;
  color: var(--foreground);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav button:hover {
  color: var(--primary);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
  cursor: pointer;
}

main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  /* D-120 - the one flexible child in body's flex column (sticky footer, see body's own
     comment) - grows to fill any leftover viewport height on short pages, and simply doesn't
     matter on long pages where content already exceeds the viewport. Has no visual effect
     inside the Admin layout (main.admin-content's actual parent, .admin-main, isn't a flex
     container), which is correct - the Admin shell has its own, unrelated min-height:100vh
     layout and no footer to stick. */
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.hero {
  padding: var(--space-4) 0 var(--space-7);
}

.hero p {
  max-width: 42rem;
  color: var(--muted-foreground);
  font-size: var(--text-lg);
}

.product-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.card h3 { margin-top: 0; color: var(--primary); }
.card p { margin-bottom: 0; color: var(--muted-foreground); }

/* D-119 - a plan/pricing card is a decision the customer is making, not just a static info box -
   a little lift on hover (desktop pointer only) says "this is choosable" without adding any new
   interaction logic. */
.product-cards .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (hover: hover) {
  .product-cards .card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--ring);
  }
}

.price-tag {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin: var(--space-2) 0;
}

.price-tag strong {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--foreground);
}

.price-tag span {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.price-list {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.price-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.price-list strong {
  font-size: var(--text-xl);
  color: var(--foreground);
}

.price-list span {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.plan-scope {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
}
.site-footer .footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(8rem, .6fr) minmax(0, 1.5fr);
  gap: 2rem;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2rem 1.25rem;
}
.footer-identity { min-width: 0; }
.footer-brand { display: inline-block; color: var(--foreground); font-size: 1rem; font-weight: 700; text-decoration: none; margin-bottom: .5rem; }
.footer-identity p { font-size: .8125rem; line-height: 1.65; margin: 0 0 .75rem; overflow-wrap: anywhere; }
.footer-identity .footer-copyright { font-size: .75rem; margin: 1rem 0 0; }
.footer-column h2 { margin: 0 0 .65rem; font-size: .8125rem; color: var(--foreground); font-weight: 600; }
.footer-links { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.footer-column-legal .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2rem; padding: .2rem 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.5; text-decoration: none; }
.footer-links a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: .2rem; }
.site-footer a:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: var(--radius-sm); }
@media (max-width: 700px) {
  .site-footer .footer-inner { grid-template-columns: 1fr 2fr; gap: 1.5rem; padding: 1.5rem 1.25rem; }
  .footer-identity { grid-column: 1 / -1; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
}
@media (max-width: 400px) {
  .site-footer .footer-inner { grid-template-columns: 1fr; }
  .footer-column-legal .footer-links { grid-template-columns: 1fr; }
}

/* ---------- Auth pages (Giriş/Kayıt/Şifre sıfırlama) ---------- */

/* D-119/D-120 - every Account/* page (Login, Register, ForgotPassword, ResetPassword, the
   confirmation notices, 2FA) now wraps its content in .auth-shell > .auth-card instead of a
   bare <h1>+<form> sitting directly in <main> - purely additive markup, no id/name/route on any
   existing form control changes. D-119's own radial-gradient wash was removed in D-120 - it only
   ever covered <main>'s own max-width column, not the full viewport, so it read as a separate
   boxed panel instead of a page background (exactly what Beytullah flagged live). .auth-shell now
   carries NO background of its own at all - the page's ordinary var(--background) (set on body,
   see the sticky-footer rule below) shows through everywhere, with only .auth-card itself
   standing out via its own shadow. */
.auth-shell {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-7) var(--space-6);
}

.auth-card h1 {
  font-size: var(--text-2xl);
  text-align: center;
}

.auth-card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--primary) 12%, var(--card));
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

.auth-card-icon svg { width: 1.5rem; height: 1.5rem; }

.auth-subtitle {
  text-align: center;
  color: var(--muted-foreground);
  margin-top: calc(var(--space-3) * -1);
  margin-bottom: var(--space-6);
}

.auth-card form { max-width: none; }

.auth-links {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  text-align: center;
}

.auth-card .btn {
  width: 100%;
  text-align: center;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* D-119 - a simple, no-third-party-integration "trust" row for the pricing/payment screens
   (lock icon + short reassurance text) - text/icon only, nothing new to configure or depend on. */
.trust-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--muted);
  border-radius: var(--radius-md);
}

.trust-badges li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.trust-badges svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--primary);
  flex-shrink: 0;
}

/* ---------- Admin shell (sidebar + topbar) ---------- */

.admin-shell {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: var(--space-5) var(--space-4);
  /* Varsayılan gizli; içeriğin ÜSTÜNDE kayarak açılır (sayfayı itmez). Sol kenar şeridi, odak veya buton açar. */
  position: fixed;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  height: 100vh;
  overflow-y: auto;
  /* D-134 - a hairline border alone reads flat; a subtle shadow gives the sidebar real depth
     against the content area without introducing any new color. */
  box-shadow: var(--shadow-sm);
  z-index: 30;
}

.admin-sidebar.open {
  transform: translateX(0);
  box-shadow: 0.5rem 0 1.5rem rgba(0, 0, 0, 0.12);
}

/* Görünmez ~12px'lik sol kenar şeridi: fare gelince menüyü açar (yalnız fareli cihazlarda). */
.admin-edge-zone {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  z-index: 29;
}

@media (hover: none), (pointer: coarse) {
  .admin-edge-zone { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar { transition: none; }
}

.admin-sidebar .brand {
  margin-bottom: var(--space-6);
  padding: 0 var(--space-2);
}

.admin-nav-group {
  margin-bottom: 1.25rem;
}

/* Etap 11 Faz 2 (D-044), softened in D-135 (see business.yaudu's own sidebar - a flat list that
   separates by WHITESPACE, not drawn rules): the border-top divider is gone, replaced by more
   generous group spacing (see .admin-nav-group's own margin) - the accent bar + uppercase/
   letter-spacing/muted treatment still makes a group header unambiguously non-interactive. */
.admin-nav-group h4 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  margin: 0 0 0.5rem;
  padding: 0 0 0 0.6rem;
  border-left: 3px solid var(--accent);
}

/* Etap 11 Faz 3 (D-045) - one small inline SVG per group header (see _AdminLayout.cshtml) -
   currentColor picks up the h4's own muted-foreground so it never needs its own color rule. */
.nav-group-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.admin-nav-group + .admin-nav-group {
  /* D-135 - the whitespace THAT NOW separates one group from the next (see h4's own comment) -
     more generous than the old margin-top, standing in for the removed border-top rule. */
  margin-top: var(--space-6);
}

.admin-nav-group a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.5rem;
  padding: 0.5rem var(--space-3);
  /* D-135 - business.yaudu's own sidebar uses a more generous "rounded-md" pill (~0.5rem), not
     id.yaudu's sharper --radius-sm (0.25rem, still used elsewhere e.g. inputs) - moved just this
     ONE component closer to that proportion, no new radius token invented. */
  border-radius: var(--radius-md);
  color: var(--foreground);
  text-decoration: none;
  font-size: var(--text-sm);
}

.admin-nav-group a:hover {
  background: var(--muted);
}

.admin-nav-group a.active {
  /* D-135 - business.yaudu's own active state is a SOLID primary-colored pill (bg-primary
     text-primary-foreground), not a subtle tint + thin accent bar - moved id.yaudu's own active
     state closer to that same stronger, unambiguous treatment (still id.yaudu's OWN --primary
     token, not business.yaudu's actual color value). Replaces the old border-left accent bar,
     which would clash with a solid fill anyway.
     */
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-sm);
}

.admin-nav-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  opacity: 0.9;
}

.admin-main {
  flex: 1;
  min-width: 0;
}

.admin-topbar {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border);
  /* D-134 - a translucent card tone + backdrop-filter reads as "floating glass" rather than a
     flat opaque bar; box-shadow gives it the same depth the sidebar now has. Falls back to a
     fully opaque --card in browsers without backdrop-filter support (graceful, no breakage). */
  background: color-mix(in oklch, var(--card) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 10;
}

.admin-topbar strong {
  font-size: var(--text-lg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Yaudu logo, top-left of every admin page (links to /Admin/Dashboard). It sits BEFORE the menu button in the flex row, so the two never
   overlap. While the sliding sidebar is open it covers this corner with its own logo, which links to the same place. */
.admin-topbar .admin-topbar-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

.admin-topbar .admin-topbar-logo {
  height: 1.75rem;
  width: auto;
  max-width: 7.5rem;
  object-fit: contain;
}

@media (max-width: 40rem) {
  .admin-topbar { gap: var(--space-2); padding: 0 var(--space-3); }
  .admin-topbar .admin-topbar-logo { height: 1.4rem; max-width: 5.5rem; }
}

.admin-topbar .admin-account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* D-134 - the account "chip": an initial-letter avatar circle (no photo storage/upload needed)
   + the email, replacing a bare text string with a small, recognizable identity affordance. */
.account-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.account-chip-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--secondary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

.sidebar-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.admin-content {
  max-width: none;
  padding: var(--space-7) var(--space-6) var(--space-9);
}

/* ---------- Shared components (used by both public and admin pages) ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

th {
  background: var(--muted);
  color: var(--muted-foreground);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--muted); }

/* Etap 11 Faz 2 (D-044) - explicit alternating-row treatment for tables that opt in (every
   plain <table> already gets the header/hover treatment above; .data-table adds zebra
   striping on top, for the denser admin listing/attempt tables). */
.data-table tbody tr:nth-child(even) { background: color-mix(in oklch, var(--muted) 55%, var(--card)); }
.data-table tbody tr:nth-child(even):hover { background: var(--muted); }

/* D-119 - Subscription/Index's plan/status <dl> (Plan, Durum, dönem tarihleri) as a clean
   label/value grid instead of the browser's default dl stacking - no markup change needed
   beyond this class, since it targets the existing bare <dl>. */
.status-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
}

.status-card dt {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.status-card dd {
  margin: 0;
  font-weight: var(--font-weight-medium);
}

form { max-width: 28rem; }

.admin-content form.wide { max-width: 40rem; }

.form-group {
  margin-bottom: var(--space-5);
}

.form-group label {
  display: block;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.form-control {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-base);
  border: 1px solid var(--input);
  background: var(--card);
  color: var(--foreground);
  border-radius: var(--radius-sm);
}

.form-control:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 20%, transparent);
  outline: none;
}

textarea.form-control {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9rem;
}

.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.btn:hover { opacity: 0.92; }
.btn:active { transform: translateY(1px); }

/* Etap 11 Faz 2 (D-044) - explicit action hierarchy on top of the plain .btn default: primary
   for the one "do the thing" action per screen ("Ekle", "Kaydet"), secondary/outline for
   lower-stakes actions next to it ("Düzenle", "Pasife al"). .btn-primary is visually identical
   to the existing bare .btn (same var(--primary) fill) - it exists so markup can say what a
   button IS, not just how the one-button-per-page default happens to look. */
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}

.btn-secondary,
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
}

.btn-secondary:hover,
.btn-outline:hover {
  background: var(--muted);
  opacity: 1;
}

/* Admin > Entegratörler "Sil" butonu - destructive, kalıcı bir silme eylemi ("Pasife al"'ın
   aksine geri alınamaz), bu yüzden diğer ikincil eylemlerden (Düzenle/Pasife al) görsel olarak
   ayrışması gerekiyor. */
.btn-destructive {
  background: transparent;
  color: var(--destructive);
  border: 1px solid var(--destructive);
}

.btn-destructive:hover {
  background: var(--destructive);
  color: var(--destructive-foreground, #fff);
  opacity: 1;
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

/* Etap 11 Faz 2 (D-044) - a client-side search box (see site.js's filterTable helper) that
   hides/shows table rows by text match; never touches server-side query/paging. */
.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.toolbar-search {
  position: relative;
  flex: 0 1 20rem;
}

.toolbar-search input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.7rem 0.5rem 2.1rem;
  font-size: 0.92rem;
  border: 1px solid var(--input);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 0.7rem center;
  color: var(--foreground);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.toolbar-search input[type="search"]:focus {
  border-color: var(--ring);
}

.field-validation-error {
  display: block;
  color: var(--destructive);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.validation-summary {
  color: var(--destructive);
  margin-bottom: 1rem;
}

.validation-summary ul {
  margin: 0;
  padding-left: 1.2rem;
}

.alert {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
}

.alert-success { background: color-mix(in oklch, var(--success) 16%, white); color: var(--success); }
.alert-error { background: color-mix(in oklch, var(--destructive) 14%, white); color: var(--destructive); }
.alert-info { background: color-mix(in oklch, var(--primary) 10%, white); color: var(--primary); }
.alert-warning { background: color-mix(in oklch, var(--warning) 22%, white); color: var(--warning-foreground); }
.invoice-mode-warning { margin-bottom:1rem; font-weight:500; }

/* D-119 - a small result icon (check/x) for outcome pages (ödeme başarılı/başarısız, parola
   sıfırlandı, e-posta doğrulandı) - reuses the existing success/destructive tokens, no new
   colors. Sits above an .auth-card's own <h1>. */
.result-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

.result-icon svg { width: 1.75rem; height: 1.75rem; }

.result-icon-success {
  background: color-mix(in oklch, var(--success) 16%, var(--card));
  color: var(--success);
}

.result-icon-error {
  background: color-mix(in oklch, var(--destructive) 14%, var(--card));
  color: var(--destructive);
}

/* Etap 12 - abonelik durumu aciliyet rozetleri (/Admin/Billing/Subscriptions), D-034'ün
   SubscriptionLifecycleRunner'ının kullandığı aynı Critical/Warning/Normal seviyeleri. */
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 600;
}

.badge-critical { background: color-mix(in oklch, var(--destructive) 16%, white); color: var(--destructive); }
.badge-warning { background: color-mix(in oklch, var(--warning) 22%, white); color: var(--warning-foreground); }
.badge-normal { background: var(--muted); color: var(--muted-foreground); }
.badge-test { background: color-mix(in oklch, var(--warning) 22%, white); color: var(--warning-foreground); font-size: 0.7rem; padding: 0.05rem 0.4rem; margin-left: 0.35rem; vertical-align: middle; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .product-cards {
    grid-template-columns: 1fr;
  }

  .admin-content {
    padding: 1.25rem 1rem 2.5rem;
  }
}

@media (max-width: 640px) {
  .nav-toggle {
    display: inline-block;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 1.25rem 1rem;
  }

  .site-nav.open {
    display: flex;
  }

  .site-nav a, .site-nav form { padding: 0.5rem 0; width: 100%; }

  main { padding: 1.75rem 1rem; }

  h1 { font-size: 1.5rem; }

  /* Every table scrolls horizontally on narrow screens instead of squeezing/breaking - no
     per-page wrapper markup needed: the table itself becomes the scroll container. */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .auth-shell {
    padding: var(--space-5) var(--space-3);
  }

  .auth-card {
    padding: var(--space-6) var(--space-4);
  }

  .status-card {
    grid-template-columns: 1fr;
    gap: var(--space-1) 0;
  }

  .status-card dt {
    margin-top: var(--space-3);
  }

  .status-card dt:first-child { margin-top: 0; }

  .trust-badges {
    flex-direction: column;
    gap: var(--space-3);
  }

}

/* D-134 - native <dialog>-based popup form (Admin/Billing/Plans + Subscriptions pilot) - no new
   JS modal library, the browser's own focus-trap/ESC-to-close/::backdrop do the heavy lifting.
   Same elevation/radius/spacing tokens as every other surface, nothing new invented. */
dialog.modal-dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: var(--shadow-lg);
  /* D-135 - widened (34rem → 45rem) so wider forms (Plans' limit fieldset, multi-column layouts)
     have real breathing room - still capped to 92vw so it never overflows on a narrow viewport. */
  width: min(45rem, 92vw);
  max-height: 85vh;
  overflow-y: auto;
}

dialog.modal-dialog::backdrop {
  background: color-mix(in oklch, var(--foreground) 45%, transparent);
  backdrop-filter: blur(2px);
}

.modal-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.modal-dialog-header h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.modal-dialog-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted-foreground);
  padding: var(--space-1) var(--space-2);
}

.modal-dialog-close:hover {
  color: var(--foreground);
}

.modal-dialog-body {
  padding: var(--space-6);
}

/* Account/Manage - "Abonelik ve Faturalama" paneli (Faz A) */
.manage-tabs {
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-6);
  border-bottom: 1px solid var(--border);
  /* Horizontal scroll only when the tabs do not fit (narrow screens); never a vertical bar. */
  overflow-x: auto;
  overflow-y: hidden;
}

.manage-tab {
  padding: var(--space-3) var(--space-4);
  color: var(--muted-foreground);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.manage-tab:hover { color: var(--foreground); }

.manage-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: var(--font-weight-semibold);
}

.billing-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}

.billing-panel h2 { margin-top: 0; }

.billing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.billing-plan-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.billing-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.billing-price strong { font-size: var(--text-2xl); }
.billing-price span { color: var(--muted-foreground); font-size: var(--text-sm); }

.billing-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.billing-facts dt { color: var(--muted-foreground); font-size: var(--text-sm); }
.billing-facts dd { margin: 0; font-weight: var(--font-weight-semibold); }

.billing-note,
.billing-pending {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--muted);
}

.billing-pending { border-left: 3px solid var(--primary); }

.billing-footnote {
  margin: var(--space-4) 0 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.billing-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.billing-empty { text-align: center; padding: var(--space-6) 0; }

.plan-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.plan-card.is-current { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 4%, white); }

.plan-card header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.plan-card h3 { margin: 0; }

.plan-tag {
  font-size: var(--text-sm);
  padding: 0.1rem var(--space-2);
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
}

.plan-tag-up { background: color-mix(in oklch, var(--success) 14%, white); color: var(--success); }

.plan-limits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); color: var(--muted-foreground); }
.plan-limits li::before { content: "\2713\00a0"; color: var(--success); }

.plan-proration { margin: 0; }
.plan-proration small { display: block; color: var(--muted-foreground); }
.plan-card .btn { margin-top: auto; text-align: center; }

.usage-row { margin-bottom: var(--space-4); }
.usage-label { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-1); }

.usage-bar { height: 0.5rem; border-radius: 999px; background: var(--muted); overflow: hidden; }
.usage-bar span { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.usage-bar.is-high span { background: var(--warning); }
.usage-bar.is-full span { background: var(--destructive); }

.billing-table-wrap { overflow-x: auto; }
.billing-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.billing-table th, .billing-table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.billing-table th { color: var(--muted-foreground); font-weight: var(--font-weight-semibold); }
.billing-table .num { text-align: right; }

.billing-form { display: grid; gap: var(--space-3); max-width: 40rem; }
.billing-form fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: var(--space-5); flex-wrap: wrap; }
.billing-form legend { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.billing-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); }
.billing-errors { border-left: 3px solid var(--destructive); background: color-mix(in oklch, var(--destructive) 8%, white); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.billing-errors ul { margin: 0; padding-left: var(--space-5); }

/* Login/Register: brand panel beside the card instead of one narrow card floating in the middle.
   Only the split modifier changes layout; every other .auth-shell page is untouched. */
.auth-shell--split {
  align-items: stretch;
  gap: var(--space-6);
  max-width: 62rem;
  margin: 0 auto;
}

.auth-aside {
  display: none;
}

@media (min-width: 900px) {
  .auth-shell--split .auth-card {
    flex: 0 0 26rem;
    max-width: 26rem;
  }

  .auth-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    gap: var(--space-4);
    padding: var(--space-7) var(--space-6);
  }

  .auth-aside h2 {
    margin: 0;
    font-size: var(--text-2xl);
    color: var(--foreground);
  }

  .auth-aside p { margin: 0; color: var(--muted-foreground); }
}

/* Admin account lists: e-mail and phone columns stack on narrow screens. */
.data-table .verified { color: var(--success, #1a7f37); margin-left: .25rem; }
.data-table .text-muted { opacity: .65; margin-left: .25rem; }
@media (max-width: 700px) {
  #accounts-table thead { display: none; }
  #accounts-table tr, #accounts-table td { display: block; }
  #accounts-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; }
}

/* Admin > Abonelikler: sağ yan panel ve işlem bileşenleri */
.btn .icon { vertical-align: -3px; margin-inline-end: 0.25rem; }
.btn-danger { background: var(--destructive); color: var(--destructive-foreground); border: 1px solid var(--destructive); }
.row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.inline-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm, 0.875rem); }
.pager { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-4); flex-wrap: wrap; }
.muted { color: var(--muted-foreground); font-size: var(--text-xs); }
.side-drawer-backdrop { position: fixed; inset: 0; background: oklch(0.18 0.035 255 / 0.4); z-index: 40; }
.side-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(46rem, 100vw); background: var(--card); color: var(--card-foreground);
  box-shadow: -8px 0 24px oklch(0.18 0.035 255 / 0.2); z-index: 50; display: flex; flex-direction: column; }
.side-drawer[hidden], .side-drawer-backdrop[hidden] { display: none; }
.side-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.side-drawer-header h2 { margin: 0; font-size: 1.125rem; }
.side-drawer-body { padding: var(--space-5); overflow-y: auto; flex: 1; }
.side-drawer-body section { margin-bottom: var(--space-6); }
body.drawer-open { overflow: hidden; }
.detail-grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); }
.detail-grid dt { color: var(--muted-foreground); }
.detail-grid dd { margin: 0; }
.entitlements { padding-inline-start: var(--space-5); }
.tenant-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); margin-block: var(--space-3); }
.tenant-card h4 { margin: 0 0 var(--space-2); }
.tenant-members { margin-top: var(--space-3); overflow-x: auto; }
.action-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-3); }
.impact-box { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--muted); }
.impact-box textarea { width: 100%; }
.form-error { color: var(--destructive); }
@media (max-width: 40rem) { .detail-grid { grid-template-columns: 1fr; } }

/* Menü butonu yalnız dokunmatik/küçük ekranda; fareli masaüstünde sol kenar şeridi kullanılır. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .sidebar-toggle {
    display: inline-block;
  }
}

/* ID / Business shared interface: right panels and consistent page controls. */
:root {
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --sidebar-width: 18rem;
}
.admin-content > h1 { font-size: 1.5rem; margin-bottom: 1.25rem; }
.admin-content > h1 + p, .admin-content > h1 + .toolbar { margin-bottom: 1.5rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem; padding: .5rem .9rem; }
.id-action-icon { display: inline-flex; flex-shrink: 0; width: 1rem; height: 1rem; }
.id-action-icon svg { width: 100%; height: 100%; }
.toolbar input, .toolbar select, .toolbar-search input[type=search] { min-height: 2.5rem; }
.data-table { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.data-table th { background: var(--muted); color: var(--muted-foreground); font-weight: 600; }
.data-table tbody tr:hover { background: color-mix(in oklch, var(--muted) 45%, var(--card)); }
dialog.modal-dialog {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(46rem, 100vw); max-width: 100vw; height: 100vh; height: 100dvh;
  max-height: 100dvh; border-radius: 0; border-left: 1px solid var(--border);
  color: var(--foreground); background: var(--card); padding: 0;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
dialog.modal-dialog[open] { display: flex; flex-direction: column; animation: id-panel-enter .18s ease-out; }
dialog.modal-dialog:not([open]) { display: none; }
.modal-dialog-header { flex: 0 0 auto; padding: 1.25rem 1.5rem; background: var(--card); gap: 1rem; }
.modal-dialog-header h2 { font-size: 1.125rem; }
.modal-dialog-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.5rem; }
.modal-dialog-body form { width: 100%; max-width: none; }
.id-form-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); margin: 0 0 1.25rem; padding: 1rem; min-width: 0; }
.id-form-group legend { padding: 0 .5rem; font-size: .875rem; font-weight: 600; }
.id-form-group .form-group { min-width: 0; margin: 0; }
.id-form-group .form-group:has(textarea), .id-form-group .form-group:has(input[type=checkbox]), .id-form-group .form-group:only-of-type { grid-column: 1 / -1; }
.id-form-group input:not([type=checkbox]):not([type=radio]), .id-form-group select, .id-form-group textarea { width: 100%; max-width: none; }
.id-form-actions { display: flex; flex-wrap: wrap; gap: .75rem; position: sticky; bottom: -1.5rem; background: var(--card); border-top: 1px solid var(--border); margin: 1.5rem -1.5rem -1.5rem; padding: 1rem 1.5rem; }
.id-edit-trigger { margin-bottom: 1.5rem; }
dialog[data-busy=true] .btn, dialog[data-busy=true] .modal-dialog-close { pointer-events: none; opacity: .65; }
.id-panel-error { border-left: 3px solid var(--destructive); padding: .75rem 1rem; color: var(--destructive); background: color-mix(in oklch, var(--destructive) 6%, var(--card)); margin-bottom: 1rem; }
@keyframes id-panel-enter { from { transform: translateX(2rem); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
@media (min-width: 900px) {
  .auth-shell--split { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; grid-template-areas: "intro form"; max-width: 68rem; gap: 3rem; padding: 2rem 0; }
  .auth-shell--split .auth-aside { grid-area: intro; padding: 2rem; }
  .auth-shell--split .auth-card { grid-area: form; width: 26rem; border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); }
}
@media (max-width: 600px) { .id-form-group { grid-template-columns: 1fr; } .modal-dialog-body { padding: 1rem; } .id-form-actions { margin: 1.25rem -1rem -1rem; bottom: -1rem; padding: 1rem; } }
@media (prefers-reduced-motion: reduce) { dialog.modal-dialog[open] { animation: none; } }

.modal-dialog-close { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; min-height: 2.5rem; }

/* Live search preserves the toolbar, input and caret while replacing only results. */
.id-search-status { color: var(--destructive); font-size: .875rem; margin: .5rem 0; }
.id-live-results { min-width: 0; }

/* Hide the retired Shopper column before JS removes it, including fetched search rows. */
:is(.shopper-accounts-page, .shopper-accounts-page > .id-live-results) > .data-table:not([data-shopper-column-removed]) :is(th, td):first-child { display: none; }

/* ID platform dashboard: shared Business cards, responsive counts and summaries. */
.dashboard-heading, .dashboard-section-title { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.dashboard-heading h1 { margin-bottom:.25rem; }
.dashboard-updated, .dashboard-note { color:var(--muted-foreground); font-size:.875rem; }
.dashboard-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; margin:1.25rem 0; }
.dashboard-stat { display:flex; flex-direction:column; gap:.5rem; padding:1.25rem; color:var(--foreground); text-decoration:none; }
.dashboard-stat > span { font-weight:600; }
.dashboard-stat > strong { font-size:1.9rem; line-height:1.2; }
.dashboard-stat > small { color:var(--muted-foreground); line-height:1.5; }
a.dashboard-stat:hover { border-color:var(--primary); }
.dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.dashboard-section { min-width:0; padding:1.5rem; margin-bottom:1rem; }
.dashboard-section-title { margin-bottom:1rem; flex-wrap:wrap; }
.dashboard-section h2 { font-size:1.125rem; margin:0; }
.dashboard-section h3 { font-size:1rem; margin-top:1.25rem; }
.dashboard-statuses { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.dashboard-status { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.65rem .85rem; border:1px solid var(--border); border-radius:var(--radius-md); color:var(--foreground); text-decoration:none; }
a.dashboard-status:hover { background:var(--accent); }
.dashboard-money { display:flex; justify-content:space-between; gap:1rem; }
.dashboard-table-wrap { overflow-x:auto; }
.dashboard-note { margin-top:1rem; line-height:1.6; }
@media (max-width:800px) { .dashboard-grid { grid-template-columns:1fr; } .dashboard-section { padding:1rem; } }
@media (max-width:440px) { .dashboard-stats, .dashboard-statuses { grid-template-columns:1fr; } }

.id-page-panel .auth-card { width: 100%; max-width: none; padding: 0; border: 0; box-shadow: none; }
.id-page-panel .card + .card { margin-top: 1rem; }
.id-page-panel .modal-dialog-body > dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .5rem 1rem; }
.id-page-panel dt { font-weight: 600; }
.id-page-panel dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 440px) { .id-page-panel .modal-dialog-body > dl { grid-template-columns: 1fr; } }

/* Original Yaudu wordmark in the admin sidebar. */
.admin-sidebar .admin-brand-logo {
  width: 100%;
  max-width: 13rem;
  height: auto;
  object-fit: contain;
}

/* ---- Full-page wizard (subscription purchase / renewal / plan change): _WizardLayout.cshtml ----
   One column on phones; wide centered work area; sticky bottom actions. No marketing column. */
.wz-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--background); }
.wz-header { border-bottom: 1px solid var(--border); background: var(--card); }
.wz-bar, .wz-steps, .wz-main, .wz-actions { width: 100%; max-width: 56rem; margin: 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }
.wz-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.wz-account { font-size: var(--text-sm); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wz-steps { padding-bottom: var(--space-3); }
.wz-steps ol { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.wz-step { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; font-size: var(--text-sm); color: var(--muted-foreground); }
.wz-step-bar { height: 0.375rem; border-radius: 999px; background: var(--muted); }
.wz-step-done .wz-step-bar, .wz-step-current .wz-step-bar { background: var(--primary); }
.wz-step-current .wz-step-label { color: var(--foreground); font-weight: var(--font-weight-bold); }
.wz-step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-steps-compact { display: none; margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--muted-foreground); }
.wz-main { flex: 1; padding-top: var(--space-7); padding-bottom: var(--space-7); }
.wz-main h1 { margin-top: 0; }
.wz-lead { color: var(--muted-foreground); max-width: 42rem; }
.wz-footer { position: sticky; bottom: 0; border-top: 1px solid var(--border); background: var(--card); }
.wz-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.wz-actions .btn { min-width: 8rem; text-align: center; text-decoration: none; }
.wz-actions .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.wz-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); }
.wz-panel h2 { margin-top: 0; font-size: var(--text-lg); }
.wz-summary { margin: 0; }
.wz-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; }
.wz-row dt { color: var(--muted-foreground); }
.wz-row dd { margin: 0; text-align: right; white-space: nowrap; flex-shrink: 0; }
.wz-row.wz-total { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); font-weight: var(--font-weight-bold); font-size: var(--text-lg); }
.wz-row.wz-total dt { color: var(--foreground); }
.wz-plans { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.wz-grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-notice { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); background: var(--muted); }
.wz-notice-warning { border-color: var(--warning); background: oklch(0.97 0.04 85); }
.wz-notice-success { border-color: var(--success); background: oklch(0.96 0.04 150); }
.wz-notice-error { border-color: var(--destructive); background: oklch(0.97 0.03 28); }
.wz-link-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 40rem) {
  .wz-steps-compact { display: block; }
  .wz-step-label { display: none; }
  .wz-grid-2 { grid-template-columns: 1fr; }
  .wz-actions { flex-direction: column-reverse; align-items: stretch; }
  .wz-actions .btn { width: 100%; }
}

/* ---- Plan showcase (subscription wizard, plan step): comparable cards, chosen period, bottom bar naming the selection ---- */
.wz-wide .wz-main, .wz-wide .wz-actions { max-width: 76rem; }
.wz-showcase-form { max-width: none; }
.wz-showcase { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); align-items: stretch; }
.wz-plancard { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--card);
  border: 2px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; }
.wz-plancard:hover { border-color: var(--ring); }
.wz-plancard:has(input[type="radio"]:checked), .wz-plancard-selected { border-color: var(--primary); box-shadow: 0 0 0 3px oklch(0.43 0.145 255 / 0.18); }
.wz-plancard:has(input[type="radio"]:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.wz-plancard-name { margin: 0; font-size: var(--text-xl); }
.wz-period { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wz-period-opt { flex: 1 1 8rem; display: grid; gap: 0.125rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--background); cursor: pointer; font-size: var(--text-sm); }
.wz-period-opt input { position: absolute; opacity: 0; pointer-events: none; }
.wz-period-opt:has(input:checked) { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.wz-period-label { font-weight: var(--font-weight-semibold); }
.wz-period-price { opacity: 0.9; }
.wz-cycle { display: grid; gap: var(--space-2); }
.wz-cycle[hidden] { display: none; }
.wz-price { margin: 0; font-size: var(--text-2xl, 1.5rem); }
.wz-price strong { font-size: 1.75rem; }
.wz-price span { color: var(--muted-foreground); }
.wz-price-note { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.wz-yearly { color: var(--foreground); font-weight: var(--font-weight-semibold); }
.wz-trial { margin: 0; font-weight: var(--font-weight-semibold); color: var(--success); }
.wz-products { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; }
.wz-products li { padding: 0.125rem var(--space-3); border-radius: 999px; background: var(--secondary); color: var(--secondary-foreground); font-size: var(--text-sm); }
.wz-limits { margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--border); }
.wz-limits .wz-row { padding: 0.25rem 0; font-size: var(--text-sm); }
.wz-scope-note { margin: var(--space-5) 0 0; color: var(--muted-foreground); font-size: var(--text-sm); max-width: 60rem; }
.wz-actions-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "back selection next"; }
.wz-actions-summary .wz-back { grid-area: back; }
.wz-actions-summary .wz-next { grid-area: next; }
.wz-selection { grid-area: selection; margin: 0; text-align: center; min-width: 0; }
.wz-selection-label { display: block; font-size: var(--text-sm); color: var(--muted-foreground); }
.wz-selection #plan-selection-text { font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .wz-showcase { grid-template-columns: 1fr; }
  .wz-actions.wz-actions-summary { display: grid; grid-template-columns: 1fr; grid-template-areas: "selection" "next" "back"; align-items: stretch; }
}

/* ---- Billing info step (shared by new subscription, renewal and plan change): full-width sections instead of a narrow card ---- */
.wz-billing-type { border: 0; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.wz-billing-type legend { padding: 0; margin-bottom: var(--space-2); font-weight: var(--font-weight-semibold); }
.wz-choice { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; background: var(--background); }
.wz-choice:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px oklch(0.43 0.145 255 / 0.18); }
.wz-billing .form-control { width: 100%; }
.wz-billing [hidden] { display: none; }
.wz-hint { margin: var(--space-1, 0.25rem) 0 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.wz-recipient .wz-row dd { white-space: normal; }
@media (max-width: 40rem) {
  .wz-billing-type { flex-direction: column; }
}

/* ---- Payment history: the invoice column stays readable; on phones each payment is a card so the download button is never off-screen ---- */
.billing-payments .invoice-cell { white-space: normal; min-width: 14rem; max-width: 20rem; }
.billing-payments .invoice-cell small { white-space: normal; display: inline-block; margin-top: var(--space-1, 0.25rem); }
@media (max-width: 40rem) {
  .billing-payments thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .billing-payments, .billing-payments tbody, .billing-payments tr, .billing-payments td { display: block; width: 100%; }
  .billing-payments tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
  .billing-payments td { display: flex; justify-content: space-between; gap: var(--space-3); border: 0; padding: var(--space-1, 0.25rem) 0; white-space: normal; text-align: right; }
  .billing-payments td::before { content: attr(data-label); color: var(--muted-foreground); text-align: left; flex: 0 0 auto; }
  .billing-payments .num { text-align: right; }
  .billing-payments .invoice-cell { max-width: none; min-width: 0; }
}
.billing-payments .invoice-cell .btn + .btn { margin-left: var(--space-2, 0.5rem); }
.billing-payments .invoice-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1, 0.25rem); }
.billing-payments .invoice-number { font-size: 0.75rem; overflow-wrap: anywhere; margin-top: 0; }
@media (max-width: 40rem) { .billing-payments .invoice-actions { align-items: flex-end; } }
@media (max-width: 40rem) { .billing-payments .invoice-cell { flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2, 0.5rem); } .billing-payments .invoice-cell .btn + .btn { margin-left: 0; } }

/* Yönetim paneli görünüm standardı: başlık yalnız üst çubukta; açıklama, ortak arama, tablo, sayfalama. */
.admin-content > .page-intro { color: var(--muted-foreground); margin: 0 0 1.5rem; }
.admin-content .admin-search { max-width: 28rem; }
.admin-content form:has(> .admin-search) { margin-bottom: 1rem; }
.toolbar > .admin-search { margin: 0; flex: 0 1 20rem; }
.toolbar:has(> .admin-search) { align-items: flex-end; }

/* Dashboard: özet kutu ikonları ve varsayılan entegratör kartları. */
.dashboard-stat > span { display:flex; align-items:center; gap:.5rem; }
.dashboard-stat > span .icon, .integrator-card h3 .icon { width:1.25rem; height:1.25rem; flex-shrink:0; color:var(--primary); }
.integrator-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1rem; }
.integrator-card { display:flex; flex-direction:column; gap:.75rem; padding:1.25rem; min-width:0; }
.integrator-card h3 { display:flex; align-items:center; gap:.5rem; margin:0; font-size:1rem; }
.integrator-card dl { margin:0; display:grid; gap:.4rem; }
.integrator-card dl > div { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.integrator-card dt { color:var(--muted-foreground); font-size:.875rem; }
.integrator-card dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.integrator-card .btn { align-self:flex-start; margin-top:auto; }
@media (max-width:600px) { .integrator-cards { grid-template-columns:1fr; } }

/* Abonelik kapasitesi: Varsayılanlar sayfasındaki güncel kullanım özeti. */
.capacity-usage { display:grid; gap:.4rem; margin:0 0 1rem; max-width:40rem; }
.capacity-usage > div { display:flex; justify-content:space-between; gap:1rem; }
.capacity-usage dt { color:var(--muted-foreground); }
.capacity-usage dd { margin:0; text-align:right; font-weight:600; }

/* Account billing profile uses the full card, independent of admin styles. */
.billing-profile-panel .billing-profile-intro { color: var(--muted-foreground); font-size: var(--text-sm); margin-bottom: 1.5rem; }
.billing-form.billing-profile-form { max-width: none; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.billing-profile-form .billing-profile-type { grid-column: 1 / -1; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); gap: .75rem; }
.billing-profile-type label { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm); }
.billing-profile-type label:has(input:checked) { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 6%, var(--card)); color: var(--primary); }
.billing-profile-type input { accent-color: var(--primary); margin: 0; }
.billing-profile-section { min-width: 0; padding: 0; }
.billing-profile-section h3 { font-size: 1rem; margin: 0 0 1.25rem; }
.billing-profile-section .form-group { margin: 0 0 1rem; }
.billing-profile-section .form-group > label { display: block; font-size: var(--text-sm); margin-bottom: .4rem; }
.billing-profile-section .form-control { width: 100%; max-width: none; min-height: 2.75rem; border-radius: var(--radius-md); }
.billing-profile-form .billing-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.billing-profile-form .billing-profile-contact { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.billing-profile-footer { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.billing-profile-footer .btn { width: auto; flex: 0 0 auto; order: 2; margin-left: auto; min-height: 2.75rem; }
.billing-profile-footer .billing-footnote { margin: 0; max-width: 30rem; font-size: var(--text-xs); }
@media (max-width: 700px) {
  .billing-form.billing-profile-form { grid-template-columns: 1fr; gap: 1.25rem; }
  .billing-profile-footer .btn { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 400px) { .billing-profile-form .billing-form-row { grid-template-columns: 1fr; } }

/* Public authentication: consistent spacing without changing the login workflow. */
.auth-shell--split { width: 100%; }
.auth-aside { min-width: 0; }
.auth-card .auth-links a { line-height: 1.5; padding: .25rem; text-underline-offset: .2rem; }
.auth-card .form-control { min-height: 2.75rem; }
.auth-card .form-control:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (min-width: 900px) {
  .auth-shell--split { grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); gap: 2.5rem; align-items: center; padding: 2rem 0 3rem; }
  .auth-shell--split .auth-aside { padding: 1.5rem 1rem 1.5rem 0; }
  .auth-shell--split .auth-card { width: 100%; }
}
@media (max-width: 500px) { .auth-card { padding: 1.25rem; } }

/* Registration methods keep native single-choice keyboard behavior. */
.auth-registration-method { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.auth-registration-method legend { padding: 0; margin-bottom: .6rem; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.auth-mode-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.auth-mode-toggle .auth-mode-option { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin: 0; padding: .85rem; border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; background: var(--card); }
.auth-mode-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.auth-mode-option > span { display: flex; align-items: center; gap: .5rem; font-weight: var(--font-weight-semibold); font-size: var(--text-sm); }
.auth-mode-option svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.auth-mode-option small { color: var(--muted-foreground); font-size: var(--text-xs); font-weight: 400; }
.auth-mode-option:has(input:checked) { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 7%, var(--card)); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.auth-mode-option:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 3px; }
.auth-phone-control { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); overflow: hidden; }
.auth-phone-country { display: flex; align-items: center; padding: .65rem .85rem; background: var(--muted); border-right: 1px solid var(--border); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); flex: 0 0 auto; }
.auth-phone-control > input.form-control { width: 100%; min-width: 0; border: 0; border-radius: 0; margin: 0; }
.auth-phone-control:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.auth-card .auth-phone-control > input.form-control:focus-visible { outline: none; }
.auth-field-help { display: block; color: var(--muted-foreground); font-size: var(--text-xs); margin-top: .5rem; line-height: 1.5; }
@media (max-width: 360px) { .auth-mode-toggle { grid-template-columns: 1fr; } }
/* Subscription wizard: visible progress and searchable address choices. */
.wz-wide .wz-bar, .wz-wide .wz-steps { max-width: 76rem; }
.wz-steps { padding-top: .5rem; padding-bottom: 1.25rem; }
.wz-steps ol { gap: 1rem; }
.wz-step { position: relative; flex-direction: row; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); }
.wz-step-current { border-color: var(--primary); background: #eff6ff; box-shadow: 0 0 0 1px var(--primary); }
.wz-step-number { display: grid; place-items: center; flex: 0 0 2rem; height: 2rem; border-radius: 50%; background: var(--muted); font-weight: 700; }
.wz-step-current .wz-step-number, .wz-step-done .wz-step-number { color: white; background: var(--primary); }
.wz-step-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wz-step-label { display: block; font-weight: 600; }
.wz-step-description { font-size: .75rem; }
.wz-main { padding-top: 2rem; }
.wz-choice { flex: 1; max-width: 19rem; padding: 1rem; border-radius: .75rem; }
@media (max-width: 40rem) {
  .wz-steps ol { gap: .4rem; }
  .wz-step { flex-direction: column; padding: .65rem .25rem; gap: .4rem; text-align: center; }
  .wz-step-label { display: block; font-size: .8rem; }
  .wz-step-description { display: none; }
}
.wz-footer { z-index: 5; }

/* ---- Billing info form (two sections: Fatura bilgileri / Fatura adresi) ---- */
html:has(.wz-page) { scroll-padding-bottom: 7.5rem; scroll-padding-top: 1rem; }
.wz-page .wz-main { padding-bottom: 7rem; }
.wz-billing { display: grid; gap: 1.5rem; }
.wz-billing-section { min-width: 0; padding: 1.5rem; border: 1px solid var(--border); border-radius: .75rem; background: #fafbfd; }
.wz-billing-section h3 { margin: 0 0 1rem; font-size: var(--text-base); }
.wz-billing-type { margin-bottom: 1.25rem; }
.wz-billing-type .wz-choice { flex: 1 1 auto; min-width: 12rem; max-width: 19rem; min-height: 3.5rem; }
.wz-showcase-form:has(.wz-billing) { padding: 0; border: 0; background: transparent; }
.wz-fields { display: grid; gap: 1.1rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.wz-address-row { display: grid; gap: 1.1rem 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; margin-bottom: 1.1rem; }
.wz-field { min-width: 0; margin: 0; }
.wz-field > label { display: block; margin: 0 0 .4rem; font-weight: 600; font-size: .9rem; line-height: 1.3; }
.wz-field .form-control { width: 100%; height: 2.75rem; box-sizing: border-box; }
.wz-field .wz-hint, .wz-field .wz-field-error { margin: .4rem 0 0; font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.wz-field-error { color: var(--destructive); font-weight: 600; }
.wz-field .form-control[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 2px color-mix(in oklch, var(--destructive) 18%, transparent); }
.wz-saved { margin: 0 0 .4rem; padding: .55rem .75rem; border: 1px dashed var(--border); border-radius: .5rem; background: var(--card); font-size: .9rem; overflow-wrap: anywhere; }
.wz-link { padding: 0 0 0 .5rem; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.wz-phone { display: flex; align-items: stretch; }
.wz-phone-prefix { display: inline-flex; align-items: center; padding: 0 .75rem; border: 1px solid var(--border); border-right: 0; border-radius: .5rem 0 0 .5rem; background: var(--muted); color: var(--foreground); font-weight: 600; }
.wz-phone .form-control { border-radius: 0 .5rem .5rem 0; min-width: 0; }
.wz-combo { position: relative; }
.wz-combo .form-control { padding-right: 2rem; text-overflow: ellipsis; }
.wz-combo::after { content: ""; position: absolute; right: .85rem; top: 1.1rem; width: .45rem; height: .45rem; border-right: 2px solid var(--muted-foreground); border-bottom: 2px solid var(--muted-foreground); transform: rotate(45deg); pointer-events: none; }
.wz-combo .form-control:disabled { background: var(--muted); cursor: not-allowed; }
.wz-combo-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .25rem); max-height: 15rem; margin: 0; padding: .25rem; overflow-y: auto; list-style: none; background: var(--card); border: 1px solid var(--border); border-radius: .5rem; box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.wz-combo-list[hidden] { display: none; }
.wz-combo-list li { padding: .5rem .65rem; border-radius: .35rem; cursor: pointer; overflow-wrap: anywhere; }
.wz-combo-list li.is-active { background: #eff6ff; outline: 1px solid var(--primary); }
.wz-combo-list li.is-chosen { font-weight: 700; }
.wz-combo-list li.wz-combo-empty { cursor: default; color: var(--muted-foreground); }
.wz-address-status { margin: 0 0 1rem; }
@media (max-width: 52rem) { .wz-address-row { grid-template-columns: 1fr; } }
@media (max-width: 40rem) {
  .wz-fields { grid-template-columns: 1fr; }
  .wz-billing-section { padding: 1rem; }
  .wz-billing-type .wz-choice { max-width: none; min-width: 0; width: 100%; }
}
.integrator-usage { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 1rem; color:var(--muted-foreground); font-size:.875rem; line-height:1.5; }
.integrator-card .integrator-usage { margin:.25rem 0 .75rem; }

/* Ödeme özeti: her satır etiket + değer çifti; aynı satırdaki etiketler iki satıra kırılsa bile değerler aynı hizada kalır (subgrid),
   toplam ayrı, tam genişlikte tek satırdır. */
.wz-payment-summary .wz-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 0; }
.wz-payment-summary .wz-row { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: .25rem; align-items: start; padding: .5rem 0; }
.wz-payment-summary .wz-row dt { align-self: end; }
.wz-payment-summary .wz-row dd { margin: 0; text-align: left; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.wz-payment-summary .wz-row.wz-total { grid-column: 1 / -1; grid-row: auto; display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .5rem; padding: .85rem 0 0; border-top: 1px solid var(--border); border-left: 0; }
.wz-payment-summary .wz-row.wz-total dt { white-space: nowrap; }
@media (max-width: 40rem) { .wz-payment-summary .wz-summary { grid-template-columns: 1fr 1fr; } .wz-payment-summary .wz-row.wz-total { flex-wrap: wrap; } .wz-payment-summary .wz-row.wz-total dt { white-space: normal; } }

/* Panel (Genel bakış): okunur boyutlar - ikincil metinler 14px altına inmez, tablo ve durum satırları gövde boyutunda. */
.dashboard-updated, .dashboard-note, .dashboard-stat > small, .integrator-card dt, .integrator-usage { font-size: 1rem; }
.dashboard-stat > span, .dashboard-status, .integrator-card dd { font-size: 1.0625rem; }
.dashboard-section h2 { font-size: 1.25rem; }
.dashboard-section h3, .integrator-card h3 { font-size: 1.125rem; }
.dashboard-section .data-table th, .dashboard-section .data-table td { font-size: 1rem; }
.dashboard-shortcuts, .dashboard-shortcuts a { font-size: 1rem; }

/* Kart adımı: taksit seçenekleri */
.wz-installments { margin: 0 0 var(--space-4, 1rem); }
.wz-installments h3 { margin: 0 0 .25rem; font-size: 1.0625rem; }
.wz-installment-list { display: grid; gap: .5rem; }
.wz-installment { display: grid; grid-template-columns: auto minmax(5rem, auto) 1fr auto; align-items: center; gap: .75rem; padding: .65rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.wz-installment:has(input:checked) { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 8%, white); }
.wz-installment-name { font-weight: 600; }
.wz-installment strong { text-align: right; white-space: nowrap; }
@media (max-width: 40rem) { .wz-installment { grid-template-columns: auto 1fr auto; row-gap: .15rem; } .wz-installment span:nth-of-type(2) { grid-column: 2 / -1; grid-row: 2; color: var(--muted-foreground); white-space: nowrap; } .wz-installment strong { grid-column: 3; grid-row: 1; } }
.wz-payment-summary .wz-row[hidden] { display: none; }

/* Admin > Entegratörler: kimlik bilgisi kartları */
.credential-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); margin-bottom: 1.5rem; }
.credential-card { display: flex; flex-direction: column; gap: .85rem; min-width: 0; padding: 1.1rem 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.credential-card[hidden] { display: none; }
.credential-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.credential-card-title { min-width: 0; }
.credential-card-title h3 { margin: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
.credential-card-scope { color: var(--muted-foreground); font-size: .9375rem; }
.credential-status { padding: .6rem .8rem; border: 1px solid; border-radius: var(--radius-md); overflow-wrap: anywhere; }
.credential-status strong { display: block; }
.credential-status p { margin: .2rem 0 0; font-size: .9375rem; }
.credential-status-ok { background: color-mix(in oklch, var(--success) 14%, white); border-color: color-mix(in oklch, var(--success) 45%, white); color: var(--success); }
.credential-status-warning { background: color-mix(in oklch, var(--warning) 22%, white); border-color: var(--warning); color: var(--warning-foreground); }
.credential-status-error { background: color-mix(in oklch, var(--destructive) 12%, white); border-color: color-mix(in oklch, var(--destructive) 45%, white); color: var(--destructive); }
.credential-details { margin: 0; display: grid; gap: .4rem; }
.credential-details > div { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: .75rem; }
.credential-details dt { color: var(--muted-foreground); }
.credential-details dd { margin: 0; overflow-wrap: anywhere; }
.credential-rates summary { cursor: pointer; }
.credential-rates-scroll { overflow-x: auto; max-height: 18rem; overflow-y: auto; margin-top: .5rem; }
.credential-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--border); }
.credential-actions-main { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.credential-actions-main form { margin: 0; }
.credential-actions-danger { margin-left: auto; }
.credential-actions .btn { white-space: normal; text-align: center; }
.credential-actions .btn-destructive { background: transparent; color: var(--destructive); border: 1px solid var(--destructive); }
.credential-actions .btn-destructive:hover { background: color-mix(in oklch, var(--destructive) 10%, white); }
@media (max-width: 40rem) { .credential-details > div { grid-template-columns: 1fr; gap: .1rem; } .credential-cards { grid-template-columns: minmax(0, 1fr); } }

/* Güncellenen koşullar ekranı: kart sayfada yatay ve dikey ortalı (kayıt/giriş kartlarıyla aynı kart), dar ekranda taşmaz */
main:has(> .auth-shell--center) { display: flex; flex-direction: column; justify-content: center; }
.auth-shell--center { align-items: center; padding: 1.5rem 0; }
.auth-shell--center .auth-card { margin: 0 auto; }
.consent-docs { margin: 0 0 1rem; padding-left: 1.25rem; overflow-wrap: anywhere; }
.consent-check label { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; cursor: pointer; }
.consent-check-copy { flex: 1; min-width: 0; }
.consent-check-note { display: block; margin-top: .25rem; font-weight: 400; }
.consent-check input[type="checkbox"] { flex: 0 0 1rem; width: 1rem; height: 1rem; margin: .2rem 0 0; accent-color: var(--primary); }
.consent-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.auth-card .btn:disabled, .auth-card .btn[disabled] { opacity: .55; cursor: not-allowed; }