@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "Inter";
  src: url("fonts/Inter-Medium-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Medium-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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: "Inter";
  src: url("fonts/Inter-SemiBold-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-SemiBold-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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: "Inter";
  src: url("fonts/Inter-Bold-latin-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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: "Inter";
  src: url("fonts/Inter-ExtraBold-latin-ext.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-ExtraBold-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  --color-primary: #ECFE2B;
  --color-primary-dark: #3A4200;
  --color-secondary: #1B211D;
  --color-accent-wine: #E11D48;
  --color-paper: #EEF1EA;
  --color-sage-tint: rgba(236, 254, 43, 0.12);
  --color-charcoal: #333333;
  --color-mist: #6B7568;
  --color-border: rgba(15, 23, 42, 0.08);
  --color-warning: #C97F2E;
  --color-warning-tint: #FBEEDD;
  --color-wine-tint: rgba(225, 29, 72, 0.12);
  --color-ink: #11140F;
  --color-ink-soft: #1B2019;
  --color-ink-border: #2C3229;
  --color-ink-mist: #8C978A;
  --color-accent-blue: #3B82F6;
  --color-accent-blue-soft: #E4ECFF;

  /* Buzlu cam (glassmorphism) yardimci token'lari - logo ile ayni acik zemin */
  --color-page-gradient: linear-gradient(160deg, #FDFEFC 0%, #F5F7F3 55%, #EEF1EC 100%);
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-flat: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(15, 23, 42, 0.08);
  --glass-blur: blur(20px) saturate(1.2);
  --glass-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.07);
  --glass-shadow-hover: 0 4px 10px rgba(15, 23, 42, 0.06), 0 18px 36px rgba(15, 23, 42, 0.1);

  /* Modul renk kodlamasi: her ozellik alani kendi rengiyle taninir */
  --color-module-measurement: #14B8A6;
  --color-module-measurement-tint: rgba(20, 184, 166, 0.28);
  --color-module-appointment: #3B82F6;
  --color-module-appointment-tint: rgba(59, 130, 246, 0.24);
  --color-module-nutrition: #F59E0B;
  --color-module-nutrition-tint: rgba(245, 158, 11, 0.26);
  --color-module-notification: #E11D48;
  --color-module-notification-tint: rgba(225, 29, 72, 0.22);
  --color-module-ai: #3A4200;
  --color-module-ai-icon: #ECFE2B;
  --color-module-ai-tint: rgba(236, 254, 43, 0.55);
  --color-module-neutral: #868E96;
  --color-module-neutral-tint: rgba(134, 142, 150, 0.28);
  --color-module-sleep: #6366F1;
  --color-module-sleep-tint: rgba(99, 102, 241, 0.24);
  --color-module-stress: #06B6D4;
  --color-module-stress-tint: rgba(6, 182, 212, 0.26);
  --color-module-lifestyle: #F97316;
  --color-module-lifestyle-tint: rgba(249, 115, 22, 0.26);

  --font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
}

body {
  margin: 0;
  background: var(--color-page-gradient);
  background-attachment: fixed;
  color: var(--color-charcoal);
  font-family: var(--font-family);
}

/* Form kontrolleri tarayicida varsayilan olarak body fontunu miras almaz, garanti altina alinir */
button, input, select, textarea, optgroup {
  font-family: var(--font-family);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Navbar (buzlu cam) ---- */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  margin: 16px auto 0;
  max-width: 920px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: var(--glass-shadow);
  gap: var(--spacing-md);
  position: sticky;
  top: 16px;
  z-index: 20;
}

.navbar-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.navbar-brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

.navbar-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  overflow: visible;
}

.navbar-link {
  color: var(--color-secondary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar-link:hover {
  background-color: var(--color-sage-tint);
  color: var(--color-primary-dark);
}

/* ---- Navbar ikon linkleri (Satinalma Ai ikon-rayi referansi: kucuk ikon + hover tooltip) ---- */
.navbar-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  position: relative;
}

.navbar-icon-link:hover {
  background-color: var(--color-sage-tint);
}

.navbar-link-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.navbar-icon {
  width: 21px;
  height: 21px;
  display: block;
  background-color: var(--color-secondary);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.15s ease;
}

.navbar-icon-link:hover .navbar-icon {
  background-color: var(--color-primary-dark);
}

.navbar-icon-home { -webkit-mask-image: url(/assets/icons/home.svg); mask-image: url(/assets/icons/home.svg); }
.navbar-icon-habit { -webkit-mask-image: url(/assets/icons/habit.svg); mask-image: url(/assets/icons/habit.svg); }
.navbar-icon-bar-chart { -webkit-mask-image: url(/assets/icons/bar-chart.svg); mask-image: url(/assets/icons/bar-chart.svg); }
.navbar-icon-ruler { -webkit-mask-image: url(/assets/icons/ruler.svg); mask-image: url(/assets/icons/ruler.svg); }
.navbar-icon-calendar { -webkit-mask-image: url(/assets/icons/calendar.svg); mask-image: url(/assets/icons/calendar.svg); }
.navbar-icon-leaf { -webkit-mask-image: url(/assets/icons/leaf.svg); mask-image: url(/assets/icons/leaf.svg); }
.navbar-icon-spark { -webkit-mask-image: url(/assets/icons/spark.svg); mask-image: url(/assets/icons/spark.svg); }
.navbar-icon-user-search { -webkit-mask-image: url(/assets/icons/user-search.svg); mask-image: url(/assets/icons/user-search.svg); }
.navbar-icon-bell { -webkit-mask-image: url(/assets/icons/bell.svg); mask-image: url(/assets/icons/bell.svg); }
.navbar-icon-users { -webkit-mask-image: url(/assets/icons/users.svg); mask-image: url(/assets/icons/users.svg); }
.navbar-icon-user-check { -webkit-mask-image: url(/assets/icons/user-check.svg); mask-image: url(/assets/icons/user-check.svg); }
.navbar-icon-inbox { -webkit-mask-image: url(/assets/icons/inbox.svg); mask-image: url(/assets/icons/inbox.svg); }
.navbar-icon-user-circle { -webkit-mask-image: url(/assets/icons/user-circle.svg); mask-image: url(/assets/icons/user-circle.svg); }

.navbar-icon-link-badge .navbar-icon {
  background-color: var(--color-accent-wine);
}

.navbar-icon-link-badge::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-accent-wine);
  border: 1.5px solid #FFFFFF;
}

.navbar-icon-link[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background-color: var(--color-secondary);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 30;
}

.navbar-icon-link:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.navbar-user {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--spacing-sm);
}

.navbar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1B211D;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.8rem;
  box-shadow: none;
}

.navbar-username {
  font-size: 0.8rem;
  color: var(--color-mist);
  font-weight: 500;
  line-height: 1;
  display: flex;
  align-items: center;
}

.navbar-logout-button {
  background: rgba(0, 191, 143, 0.1);
  border: none;
  color: #00BF8F;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-family);
  box-shadow: none;
  transition: background-color 0.15s ease;
}

.navbar-logout-button:hover {
  background-color: rgba(0, 191, 143, 0.18);
  color: #00BF8F;
  box-shadow: none;
}

/* ---- Genel sayfa govdesi ---- */
[class$="-page"] {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-md);
}

h2, h3 {
  font-weight: 600;
  color: var(--color-secondary);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-lg) 0;
}

.unauthorized-message {
  padding: var(--spacing-lg);
  background-color: var(--color-wine-tint);
  border-radius: var(--radius-md);
  color: var(--color-accent-wine);
  text-align: center;
}

/* ---- Form elemanlari ----
   Dash 4, dcc.Input'u artik ciplak <input> olarak degil
   <div class="dash-input-container"><input class="dash-input-element"><button class="dash-input-stepper">...</div>
   seklinde sariyor. Kutu cizimi container'da, input tamamen seffaf/kenarliksiz iceride oturuyor. */
.dash-input-container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 400px;
  margin-bottom: var(--spacing-sm);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dash-input-container:focus-within {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(236, 254, 43, 0.25);
}

.dash-input-element {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 40px;
  padding: 0 var(--spacing-md);
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-charcoal);
  font-size: 0.95rem;
  font-family: var(--font-family);
  box-sizing: border-box;
}

.dash-input-element::selection {
  background: var(--color-primary);
  color: var(--color-primary-dark);
}

/* Dash'in kendi eklediği +/- stepper butonlari - gerek yok */
.dash-input-stepper {
  display: none;
}

textarea,
.dash-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 80px;
  resize: vertical;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  margin-bottom: var(--spacing-sm);
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 16px !important;
  background-color: #FFFFFF;
  color: var(--color-charcoal);
  font-size: 0.95rem;
  font-family: var(--font-family);
  box-sizing: border-box;
}

textarea:focus,
textarea:focus-visible,
.dash-textarea:focus,
.dash-textarea:focus-visible,
.dash-textarea:focus-within {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(236, 254, 43, 0.25);
}

/* Dash'in kendi calisma-zamani stili "input.dash-input-element:invalid{color:red}"
   enjekte ediyor (type="email" alaninda gecersiz deger girilirken) - daha yuksek
   ozgullukle eziliyor, aksi halde asagidaki kural kaybediyor */
input.dash-input-element:invalid {
  color: var(--color-charcoal) !important;
}

/* ---- Etiketli pill alan grubu (arama/filtre kutulari icin standart dil) ---- */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 400px;
  margin-bottom: var(--spacing-sm);
}

.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-mist);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-left: 4px;
}

.field-pill {
  margin-bottom: 0 !important;
  border-radius: 999px !important;
}

.field-group .dash-input-container,
.field-group textarea,
.field-group .dash-dropdown-wrapper {
  margin-bottom: 0;
  max-width: 100%;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.field-grid .field-group {
  max-width: none;
}

button {
  font-family: var(--font-family);
  background-color: var(--color-primary);
  color: var(--color-primary-dark);
  border: none;
  border-radius: 999px;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: var(--spacing-sm);
  box-shadow: 0 4px 12px rgba(236, 254, 43, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(236, 254, 43, 0.35);
}

/* ---- Dropdown (dcc.Dropdown, Dash 4'un Radix tabanli bileseni) ---- */
.dash-dropdown-wrapper {
  max-width: 400px;
  margin-bottom: var(--spacing-sm);
}

.dash-dropdown {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  color: var(--color-charcoal);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  padding: 0 var(--spacing-md);
  height: 42px;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 0;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dash-dropdown:hover {
  border-color: rgba(15, 23, 42, 0.24);
  transform: none;
  box-shadow: none;
}

.dash-dropdown[data-state="open"],
.dash-dropdown:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(236, 254, 43, 0.25);
}

.dash-dropdown-grid-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.dash-dropdown-value {
  font-size: 0.9rem;
  color: var(--color-charcoal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-dropdown-placeholder {
  color: rgba(51, 51, 51, 0.45);
}

.dash-dropdown-trigger-icon {
  color: var(--color-mist);
  flex-shrink: 0;
}

.dash-dropdown-value-count {
  background: var(--color-sage-tint);
  color: var(--color-primary-dark);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
}

.dash-dropdown-value-item {
  display: inline-flex;
  background: var(--color-sage-tint);
  color: var(--color-primary-dark);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 9px;
  margin: 2px;
}

/* Acilir menu: Radix bunu body altina portal olarak render ediyor, buzlu cam dile uyumlu */
.dash-dropdown-content {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.25);
  padding: 6px;
  z-index: 1000;
  font-family: var(--font-family);
}

.dash-dropdown-search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  outline: none !important;
  margin-bottom: 4px;
}

.dash-dropdown-search-container:focus-within {
  border-bottom-color: var(--color-primary) !important;
  outline: none !important;
}

.dash-dropdown-search {
  border: none;
  outline: none;
  font-size: 0.85rem;
  font-family: var(--font-family);
  flex: 1;
  background: transparent;
  color: var(--color-charcoal);
}

.dash-dropdown-search-icon {
  color: var(--color-mist) !important;
  flex-shrink: 0;
}

.dash-dropdown-options {
  max-height: 240px;
  overflow-y: auto;
}

.dash-dropdown-option {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--color-charcoal);
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.dash-dropdown-option:hover,
.dash-dropdown-option[data-highlighted] {
  background-color: var(--color-sage-tint);
}

/* Dash 4.4 varsayilani .dash-options-list-option:hover/:focus-within uzerine
   kendi mor vurgu rengini (--Dash-Fill-Interactive-Strong) yaziyor - RadioItems
   (checkin-rating) ve Dropdown secenekleri ayni temel sinifi paylastigi icin
   ikisini de tek noktadan eziyoruz. */
.dash-options-list-option:hover,
.dash-options-list-option:focus-within {
  color: var(--color-charcoal) !important;
}

/* Ayni Dash 4.4 varsayilani secili radio/checkbox'i native accent-color ile mor
   boyuyor (appearance:auto oldugu icin tarayicinin kendi UI'si render ediliyor) */
.dash-options-list-option-checkbox {
  accent-color: var(--color-primary-dark) !important;
  outline-color: var(--color-primary-dark) !important;
}

.dash-dropdown-option[aria-selected="true"] {
  background-color: var(--color-primary);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.dash-dropdown-clear,
.dash-dropdown-action-button {
  background: transparent;
  color: var(--color-mist);
  box-shadow: none;
  border: none;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0;
}

.dash-dropdown-clear:hover,
.dash-dropdown-action-button:hover {
  transform: none;
  box-shadow: none;
  background: var(--color-sage-tint);
}

/* ---- Takvim (dcc.DatePickerSingle, Dash 4'un Radix tabanli bileseni) ---- */
.dash-datepicker-input-wrapper {
  display: inline-flex;
}

.dash-datepicker-input {
  height: 42px;
  padding: 0 var(--spacing-md);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  background-color: #FFFFFF;
  color: var(--color-charcoal);
  font-size: 0.9rem;
  font-family: var(--font-family);
  box-sizing: border-box;
}

.dash-datepicker-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(236, 254, 43, 0.25);
}

.dash-datepicker-content {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.25);
  padding: 14px;
  font-family: var(--font-family);
  z-index: 1000;
}

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

.dash-datepicker-month-nav {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-sage-tint);
  color: var(--color-primary-dark);
  border-radius: 50%;
  padding: 0;
  box-shadow: none;
  margin-bottom: 0;
}

.dash-datepicker-month-nav:hover {
  transform: none;
  box-shadow: none;
  background: var(--color-primary);
}

.dash-datepicker-controls .dash-dropdown {
  height: 32px;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 0.8rem;
  font-weight: 600;
}

.dash-datepicker-calendar {
  border-collapse: separate;
  border-spacing: 2px;
}

.dash-datepicker-calendar thead span {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-mist);
  text-transform: uppercase;
}

.dash-datepicker-calendar td {
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.dash-datepicker-calendar td span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--color-charcoal);
}

.dash-datepicker-calendar td:hover span {
  background-color: var(--color-sage-tint);
}

.dash-datepicker-calendar-date-outside span {
  color: rgba(51, 51, 51, 0.3);
}

.dash-datepicker-calendar-date-highlighted span {
  border: 1px solid var(--color-primary-dark);
}

.dash-datepicker-calendar-date-selected span {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-dark);
  font-weight: 700;
}

.dash-datepicker-clear {
  color: var(--color-mist);
  background: transparent;
  box-shadow: none;
  padding: 4px;
  margin-bottom: 0;
}

.dash-datepicker-clear:hover {
  transform: none;
  box-shadow: none;
  background: var(--color-sage-tint);
}

/* ---- Login / Logout (Satinalma Ai auth-bg-wrapper referansi) ---- */
.login-page {
  position: relative;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
  background-image: linear-gradient(135deg, rgba(4, 20, 15, 0.88) 0%, rgba(0, 110, 84, 0.72) 48%, rgba(0, 191, 143, 0.55) 100%), url("auth-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  overflow: hidden;
}

.login-page > * {
  position: relative;
  z-index: 1;
}

.auth-hero-col {
  flex: 0 1 480px;
  max-width: 480px;
  color: #FFFFFF;
  padding: 0 12px;
}

.auth-hero-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.login-page .auth-hero-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 18px;
  color: #FFFFFF;
}

.auth-hero-subtitle {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 420px;
  margin: 0;
}

@media (max-width: 992px) {
  .auth-hero-col {
    display: none;
  }
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 35px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 28px;
  box-shadow: 0 25px 60px -12px rgba(5, 15, 12, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.auth-card-logo {
  width: 200px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto var(--spacing-md);
}

.logout-brand-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--spacing-md);
  border-radius: 50%;
  background: linear-gradient(135deg, #14B8A6, #0D9488);
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.35);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.login-page h1 {
  margin-bottom: 4px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-secondary);
}

.login-subtitle {
  color: var(--color-mist);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  margin-bottom: var(--spacing-lg);
}

.login-page .dash-input-container {
  max-width: 100%;
  width: 100%;
  height: 42px;
  border-radius: 21px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: 18px center;
  background-size: 16px;
}

.login-page .dash-input-element {
  height: 100%;
  padding: 0 18px 0 46px;
  font-size: 0.8rem;
  box-sizing: border-box;
}

.login-page .login-input-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
}

.login-page .login-input-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

.login-page button {
  width: 100%;
  height: 42px;
  border-radius: 21px;
  font-size: 0.8rem;
}

.logout-message {
  font-weight: 800;
  color: #0D9488;
  margin-bottom: var(--spacing-xs);
  font-size: 0.95rem;
}

.logout-subtitle {
  color: var(--color-mist);
  font-size: 0.8rem;
  margin-bottom: var(--spacing-lg);
}

.logout-return-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  border-radius: 21px;
  border: 1px solid var(--color-primary-dark);
  color: var(--color-primary-dark);
  background: transparent;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
  box-sizing: border-box;
  transition: background-color 0.15s ease;
}

.logout-return-link:hover {
  background-color: var(--color-sage-tint);
}

/* ---- Satir/liste kartlari (admin panelleri) ---- */
.admin-measurement-row,
.appointment-row,
.admin-appointment-row,
.user-row,
.coach-row,
.mr-row,
.measurement-row,
.notif-row {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  background: var(--glass-bg-flat);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-measurement-row:hover,
.appointment-row:hover,
.admin-appointment-row:hover,
.user-row:hover,
.coach-row:hover,
.mr-row:hover,
.measurement-row:hover,
.notif-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-hover);
}

.notif-unread {
  border-left: 3px solid var(--color-primary);
  background: rgba(236, 254, 43, 0.12);
}

.notif-type {
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-xs);
}

.notif-date {
  color: var(--color-mist);
  font-size: 0.85rem;
  margin-top: var(--spacing-xs);
}

.measurement-note {
  color: var(--color-mist);
  font-size: 0.85rem;
  margin-top: var(--spacing-xs);
}

/* ---- Randevu durum rozetleri (dmc.Badge variant="light" referansi) ---- */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-badge-approved {
  background-color: rgba(20, 184, 166, 0.12);
  color: #0D9488;
}

.status-badge-pending {
  background-color: var(--color-warning-tint);
  color: var(--color-warning);
}

.status-badge-rejected {
  background-color: var(--color-wine-tint);
  color: var(--color-accent-wine);
}

.status-badge-completed {
  background-color: var(--color-module-neutral-tint);
  color: var(--color-module-neutral);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.card-title {
  font-weight: 600;
  color: var(--color-secondary);
}

.apt-card-date {
  color: var(--color-mist);
  font-size: 0.9rem;
}

.apt-card-note {
  margin-top: var(--spacing-xs);
  font-size: 0.9rem;
}

.apt-card-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

/* ---- Randevu alma karti (uye) ---- */
.apt-booking-card {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

.apt-booking-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--spacing-lg);
  margin: var(--spacing-md) 0;
  align-items: start;
}

.apt-calendar-panel {
  padding: var(--spacing-md);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.apt-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.apt-calendar-month-label {
  font-weight: 700;
  color: var(--color-secondary);
  font-size: 0.9rem;
}

.apt-calendar-nav-button {
  background: transparent;
  color: var(--color-mist);
  box-shadow: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 0;
}

.apt-calendar-nav-button:hover {
  transform: none;
  box-shadow: none;
  background: var(--color-sage-tint);
}

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

.apt-calendar-weekday {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-mist);
  text-transform: uppercase;
  padding-bottom: 4px;
}

.apt-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-charcoal);
  background: transparent;
  cursor: pointer;
  margin-bottom: 0;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.apt-calendar-day:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
  background: var(--color-sage-tint);
}

.apt-calendar-day-empty {
  cursor: default;
  pointer-events: none;
}

.apt-calendar-day-available {
  color: var(--color-module-measurement);
}

.apt-calendar-day-limited {
  color: var(--color-module-nutrition);
}

.apt-calendar-day-full,
.apt-calendar-day-disabled {
  color: var(--color-mist);
  opacity: 0.4;
  cursor: not-allowed;
}

.apt-calendar-day-selected {
  background: var(--color-module-appointment) !important;
  color: #FFFFFF !important;
  box-shadow: none;
}

.apt-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}

.apt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--color-mist);
}

.apt-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.apt-legend-available { background: var(--color-module-measurement); }
.apt-legend-limited { background: var(--color-module-nutrition); }
.apt-legend-full { background: var(--color-mist); }

.apt-timeslot-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.apt-timeslot-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.apt-timeslot-options .dash-options-list-option {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  color: var(--color-charcoal);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.apt-timeslot-options .dash-options-list-option:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.apt-timeslot-options .dash-options-list-option.selected {
  border-color: var(--color-module-appointment);
  background: var(--color-module-appointment-tint);
  font-weight: 700;
}

.apt-timeslot-options .dash-options-list-option-checkbox {
  accent-color: var(--color-module-appointment) !important;
}

@media (max-width: 640px) {
  .apt-booking-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Admin/coach haftalik randevu takvimi ---- */
.admin-cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.admin-cal-week-label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-secondary);
}

.admin-cal-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.admin-cal-today-button {
  background: transparent;
  color: var(--color-charcoal);
  box-shadow: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.8rem;
  margin-bottom: 0;
}

.admin-cal-today-button:hover {
  transform: none;
  box-shadow: none;
  background: var(--color-sage-tint);
}

.admin-cal-wrapper {
  overflow-x: auto;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: var(--spacing-sm);
}

.admin-cal-grid {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(120px, 1fr));
  min-width: 900px;
}

.admin-cal-corner {
  position: sticky;
  top: 0;
  background: transparent;
}

.admin-cal-day-header {
  text-align: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-border);
}

.admin-cal-day-header-today .admin-cal-day-number {
  background: var(--color-module-appointment);
  color: #FFFFFF;
}

.admin-cal-day-name {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-mist);
  letter-spacing: 0.03em;
}

.admin-cal-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 700;
  color: var(--color-charcoal);
  margin-top: 2px;
}

.admin-cal-hour-label {
  font-size: 0.68rem;
  color: var(--color-mist);
  text-align: right;
  padding: 4px 8px 0 0;
  border-top: 1px solid var(--color-border);
}

.admin-cal-slot {
  min-height: 48px;
  padding: 2px;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-cal-event {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 3px 7px;
  margin-bottom: 0;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}

.admin-cal-event:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(0.97);
}

.admin-cal-event-time {
  font-size: 0.65rem;
  font-weight: 700;
  opacity: 0.85;
}

.admin-cal-event-name {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.admin-cal-event-pending {
  background: var(--color-warning-tint);
  color: var(--color-warning);
}

.admin-cal-event-approved {
  background: var(--color-module-measurement-tint);
  color: var(--color-module-measurement);
}

.admin-cal-event-completed {
  background: var(--color-module-neutral-tint);
  color: var(--color-module-neutral);
}

.admin-cal-event-rejected {
  background: var(--color-wine-tint);
  color: var(--color-accent-wine);
}

/* Yan panel */
.admin-apt-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 90;
}

.admin-apt-panel-backdrop-open {
  opacity: 1;
  pointer-events: auto;
}

.admin-apt-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 360px;
  max-width: 90vw;
  background: #FFFFFF;
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.15);
  padding: var(--spacing-lg);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 91;
  overflow-y: auto;
  box-sizing: border-box;
}

.admin-apt-panel-open {
  transform: translateX(0);
}

.admin-apt-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.admin-apt-panel-close-button {
  background: transparent;
  color: var(--color-mist);
  box-shadow: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 4px;
  margin-bottom: 0;
}

.admin-apt-panel-close-button:hover {
  transform: none;
  box-shadow: none;
  color: var(--color-charcoal);
}

.admin-apt-panel-row {
  color: var(--color-charcoal);
  font-size: 0.9rem;
  margin-top: var(--spacing-sm);
}

.admin-apt-panel-note {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--color-sage-tint);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.admin-apt-panel-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.admin-apt-reject-button {
  background: var(--color-wine-tint);
  color: var(--color-accent-wine);
}

/* ---- Olcumler (uye) ---- */
.profile-summary-box,
.bmi-summary-box {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
}

/* ---- AI Co-Pilot ---- */
.ai-action-buttons {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.ai-result {
  padding: var(--spacing-lg);
  margin-top: var(--spacing-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
}

/* ---- Ogun Planlama ---- */
.meal-day-block {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--glass-bg-flat);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
}

.meal-day-block summary {
  font-weight: 600;
  color: var(--color-secondary);
  cursor: pointer;
}

.mp-date-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.mp-date-row .dash-datepicker {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* ---- Ogun tablosu (dash_table.DataTable) ---- */
.dash-spreadsheet-container {
  font-family: var(--font-family) !important;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dash-spreadsheet-inner table,
.dash-spreadsheet-inner * {
  font-family: var(--font-family) !important;
}

.dash-header {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.dash-header .column-header-name {
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-mist) !important;
}

.dash-cell {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.dash-cell-value {
  font-size: 0.85rem !important;
  color: var(--color-charcoal) !important;
}

.column-0 .dash-cell-value,
.column-1 .dash-cell-value,
.dash-header.column-0 .column-header-name,
.dash-header.column-1 .column-header-name {
  text-align: left !important;
}

.dash-delete-cell {
  color: var(--color-mist) !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.meal-plan-day {
  margin-bottom: var(--spacing-lg);
}

.meal-plan-item {
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  background-color: var(--color-module-nutrition-tint);
  border-radius: var(--radius-sm);
}

.meal-plan-item-name {
  font-weight: 600;
}

.meal-plan-item-content {
  color: var(--color-mist);
  font-size: 0.9rem;
}

.meal-plan-item-macros {
  font-size: 0.8rem;
  color: var(--color-module-nutrition);
  margin-top: var(--spacing-xs);
}

/* ---- Landing sayfasi (Augen Pro tasarim sistemi referans alinarak) ---- */
:root {
  --lp-off-black: #0f1012;
  --lp-pure-black: #020201;
  --lp-off-white: #f2f2f4;
  --lp-pure-white: #fdfdfd;
  --lp-steel-gray: #5e5e5e;
  --lp-ash-gray: #8f8f8f;
  --lp-signal-blue: #0071e3;
  --lp-hairline: rgba(0, 0, 0, 0.08);
  --lp-radius-tag: 9999px;
  --lp-radius-button: 26px;
  --lp-radius-nav: 10px;
  --lp-radius-card: 54px;
}

.landing-page {
  max-width: none;
  padding: 0;
  background-color: var(--lp-off-white);
  color: var(--lp-off-black);
  overflow-x: hidden;
  font-family: var(--font-family);
  letter-spacing: -0.02em;
}

.landing-page h1,
.landing-page h2,
.landing-page h3 {
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--lp-off-black);
  margin: 0;
}

.landing-page p {
  font-weight: 400;
  color: var(--lp-steel-gray);
  line-height: 1.5;
  margin: 0;
}

/* Manyetik hover: JS ile transform uygulanir, burada sadece yumusak spring gecisi tanimlaniyor */
.lp-magnetic {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease, border-color 0.2s ease;
  will-change: transform;
}

.lp-float-nav {
  position: fixed;
  top: 34px;
  left: 24px;
  right: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.lp-float-nav > * {
  pointer-events: auto;
}

.lp-brand {
  display: flex;
  align-items: center;
}

.lp-brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--lp-pure-white);
  border: 0.5px solid var(--lp-hairline);
  border-radius: var(--lp-radius-nav);
  padding: 6px;
}

.lp-nav-link {
  color: var(--lp-off-black);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 400;
  padding: 8px 14px;
  border-radius: 6px;
}

.lp-nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(12, 13, 15, 0.05);
  color: var(--lp-pure-black);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 400;
  padding: 8px 16px;
  border-radius: var(--lp-radius-button);
}

.lp-nav-cta:hover {
  background-color: rgba(12, 13, 15, 0.09);
}

.lp-cta-icon {
  color: var(--lp-signal-blue);
}

.lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--lp-ash-gray);
}

.lp-kicker-num {
  color: var(--lp-signal-blue);
}

.lp-section-title {
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--lp-off-black);
  margin-top: 4px;
}

/* Hero */
.hero-section {
  position: relative;
  min-height: 100vh;
  background-color: var(--lp-off-white);
  overflow: hidden;
}

.hero-grid {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 100vh;
  margin: 0 auto;
}

.hero-content {
  position: absolute;
  left: 60px;
  bottom: 130px;
  right: calc(min(720px, 44vw) + 40px);
  max-width: 420px;
  text-align: left;
  z-index: 2;
}

.hero-content h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.hero-content h1 .lp-accent-blue {
  color: var(--lp-signal-blue);
}

.hero-content p {
  color: var(--lp-steel-gray);
  font-size: 1rem;
  margin-top: 16px;
  max-width: 420px;
  text-align: left;
}

.lp-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 24px;
}

.lp-chip {
  display: inline-flex;
  align-items: center;
  border: 0.5px solid var(--lp-signal-blue);
  color: var(--lp-signal-blue);
  background-color: transparent;
  font-size: 0.75rem;
  font-weight: 400;
  padding: 2px 10px;
  border-radius: var(--lp-radius-tag);
}

.lp-chip:hover {
  border-width: 1px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(12, 13, 15, 0.05);
  color: var(--lp-pure-black);
  font-size: 0.85rem;
  font-weight: 400;
  padding: 12px 24px;
  border-radius: var(--lp-radius-button);
  text-decoration: none;
  margin-top: 28px;
}

.cta-button:hover {
  background-color: rgba(12, 13, 15, 0.09);
}

.hero-visual {
  position: absolute;
  top: 110px;
  bottom: 0;
  right: 0;
  width: min(720px, 44vw);
  overflow: visible;
}

.hero-visual-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: radial-gradient(ellipse 68% 88% at 50% 42%, black 45%, transparent 98%);
  -webkit-mask-image: radial-gradient(ellipse 68% 88% at 50% 42%, black 45%, transparent 98%);
}

@media (max-width: 860px) {
  .hero-visual {
    display: none;
  }
}

.lp-scroll-cue {
  position: absolute;
  left: 60px;
  bottom: 40px;
  color: var(--lp-signal-blue);
  font-size: 1rem;
  text-decoration: none;
  animation: lp-bounce 2.2s ease-in-out infinite;
}

@keyframes lp-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Statement / breakthrough section - dar etiket | genis metin asimetrik grid */
.lp-statement-section {
  padding: 96px 60px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.lp-statement-label-col {
  flex: 0 0 220px;
}

.lp-statement-text {
  flex: 1 1 480px;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--lp-off-black);
  text-align: left;
  max-width: 640px;
  margin: 0;
}

.lp-statement-text .lp-accent-blue {
  color: var(--lp-signal-blue);
}

/* Dark mission/vision band */
.lp-dark-section {
  background-color: var(--lp-off-black);
  color: var(--lp-pure-white);
  padding: 96px 60px;
}

.lp-dark-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.lp-numbered-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 0;
  border-top: 0.5px solid rgba(255, 255, 255, 0.14);
  text-align: left;
}

.lp-numbered-row:last-child {
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.14);
}

.lp-numbered-row .lp-kicker {
  color: var(--lp-ash-gray);
}

.lp-numbered-row h3 {
  color: var(--lp-pure-white);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
  max-width: 560px;
}

/* Glossary style 3-col */
.lp-glossary-section {
  background-color: var(--lp-off-black);
  color: var(--lp-pure-white);
  padding: 0 60px 96px;
}

.lp-glossary-grid {
  max-width: 1200px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  text-align: left;
}

.lp-glossary-label {
  color: var(--lp-signal-blue);
  font-size: 1rem;
  font-weight: 400;
}

.lp-glossary-desc {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  font-size: 0.9rem;
}

/* Approach / features */
.lp-approach-heading {
  text-align: center;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--lp-signal-blue);
  padding-top: 96px;
}

.features-section, .coaches-section, .testimonials-section, .membership-form-section {
  padding: 64px 60px;
  max-width: 1200px;
  margin: 0 auto;
}

.features-section h2, .coaches-section h2, .testimonials-section h2, .membership-form-section h2 {
  text-align: center;
  font-size: 27px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.coaches-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
}

.feature-card {
  padding: 48px 40px;
  background-color: var(--lp-pure-white);
  border: 0.5px solid var(--lp-hairline);
  border-radius: var(--lp-radius-card);
  text-align: left;
  transition: border-color 0.2s ease;
}

.feature-card:hover {
  border-color: rgba(0, 0, 0, 0.18);
}

.feature-card h3 {
  font-size: 1rem;
  margin-top: 16px;
}

.feature-card p {
  font-size: 0.9rem;
  margin-top: 8px;
}

.feature-icon {
  width: 28px;
  height: 28px;
}

.coach-card {
  flex: 0 1 260px;
  max-width: 260px;
  padding: 40px 32px;
  background-color: var(--lp-pure-white);
  border: 0.5px solid var(--lp-hairline);
  border-radius: var(--lp-radius-card);
  text-align: center;
  transition: border-color 0.2s ease;
}

.coach-card:hover {
  border-color: rgba(0, 0, 0, 0.18);
}

.coach-card h3 {
  font-size: 1rem;
}

.coach-photo {
  width: 120px;
  height: 120px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 16px;
}

.coach-photo-placeholder {
  width: 120px;
  height: 120px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--lp-off-white);
  color: var(--lp-off-black);
  font-weight: 400;
  font-size: 1.1rem;
  border-radius: 50%;
  margin: 0 auto 16px;
}

.coach-bio {
  color: var(--lp-steel-gray);
  font-size: 0.85rem;
}

.testimonial-section-single {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.testimonial-quote-icon {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--lp-signal-blue);
  font-weight: 400;
}

.testimonial-quote-text {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--lp-off-black);
  margin-top: 8px;
}

.testimonial-name {
  font-weight: 400;
  color: var(--lp-steel-gray);
  margin-top: 16px;
  font-size: 0.9rem;
}

/* Membership form */
.membership-form-section {
  text-align: center;
}

.membership-form-section h2 {
  margin-bottom: 32px;
}

/* dcc.Input sarmalayici kendi border/genislik stilini getiriyor, onu sifirlayip görünümü input'a tasiyoruz */
.membership-form-section .dash-input-container {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 0 auto 12px;
  border: none;
  background: transparent;
}

.membership-form-section .dash-input-container:focus-within {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.membership-form-section input,
.membership-form-section textarea,
.membership-form-section .dash-textarea {
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  background-color: var(--lp-pure-white);
  border: 0.5px solid var(--lp-hairline) !important;
  color: var(--lp-off-black);
  font-size: 0.95rem;
  box-shadow: none !important;
}

.membership-form-section input::placeholder,
.membership-form-section textarea::placeholder {
  color: var(--lp-ash-gray);
}

.membership-form-section input:focus,
.membership-form-section textarea:focus,
.membership-form-section .dash-textarea:focus {
  outline: none;
  border-color: var(--lp-signal-blue) !important;
}

.membership-form-section textarea,
.membership-form-section .dash-textarea {
  border-radius: 20px !important;
  min-height: 100px;
}

.membership-form-section button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(12, 13, 15, 0.05);
  color: var(--lp-pure-black);
  border-radius: var(--lp-radius-button);
  padding: 14px 36px;
  font-weight: 400;
  font-size: 0.9rem;
  box-shadow: none;
  transform: none;
}

.membership-form-section button:hover {
  background-color: rgba(12, 13, 15, 0.09);
  box-shadow: none;
  transform: none;
}

.lp-footer {
  background-color: var(--lp-off-black);
  color: var(--lp-pure-white);
  text-align: center;
  padding: 50px 69px;
  font-size: 0.85rem;
  font-weight: 400;
}

@media (max-width: 860px) {
  .lp-float-nav {
    left: 16px;
    right: 16px;
  }

  .lp-nav-link {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .lp-nav-cta {
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  .hero-section {
    min-height: auto;
    padding: 120px 24px 64px;
  }

  .hero-grid {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    height: auto;
  }

  .hero-content {
    position: static;
    text-align: center;
    max-width: 100%;
  }

  .hero-content p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .lp-chip-row {
    justify-content: center;
  }

  .lp-scroll-cue {
    position: static;
    margin-top: 32px;
    display: inline-block;
  }

  .lp-statement-section {
    flex-direction: column;
    text-align: center;
    padding: 64px 24px;
    gap: 16px;
  }

  .lp-statement-label-col {
    flex: none;
  }

  .lp-statement-text {
    flex: none;
    text-align: center;
    margin: 0 auto;
  }

  .lp-dark-section, .lp-glossary-section, .features-section, .coaches-section, .testimonials-section, .membership-form-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .lp-dark-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .lp-glossary-section {
    padding-bottom: 48px;
  }

  .features-section, .coaches-section, .testimonials-section, .membership-form-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .lp-approach-heading {
    padding-top: 0;
  }

  .lp-numbered-row {
    flex-direction: column;
    gap: 8px;
    padding: 20px 0;
  }

  .feature-card {
    padding: 32px 28px;
  }
}

/* ---- Panel (dashboard) ---- */
.dashboard-greeting {
  color: var(--color-mist);
  margin-bottom: var(--spacing-lg);
}

.breathing-ring-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

.breathing-ring-wrap {
  position: relative;
  width: 220px;
  height: 220px;
}

.breathing-ring {
  width: 100%;
  height: 100%;
  display: block;
  animation: nefes-breathe 10s ease-in-out infinite;
  transform-origin: 50% 50%;
}

.breathing-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.breathing-ring-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-secondary);
}

.breathing-ring-label {
  font-size: 0.85rem;
  color: var(--color-mist);
}

.breathing-ring-caption {
  margin-top: var(--spacing-md);
  color: var(--color-mist);
  font-size: 0.9rem;
}

@keyframes nefes-breathe {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---- Haftalik gun seridi ---- */
.day-strip {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

.day-strip-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1;
}

.day-strip-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-mist);
}

.day-strip-today .day-strip-label {
  color: var(--color-secondary);
}

.day-strip-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-charcoal);
  box-sizing: border-box;
}

.day-strip-mark-active {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.day-strip-mark-future {
  border-style: dashed;
}

.day-strip-today .day-strip-mark {
  box-shadow: 0 0 0 3px var(--color-sage-tint);
}

/* ---- Ozet istatistik kartlari (buzlu cam KPI karti) ---- */
.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.stat-card {
  padding: var(--spacing-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover);
}

.stat-card-clickable {
  cursor: pointer;
  position: relative;
  padding-right: 40px;
  border: none;
  text-align: left;
  font-family: var(--font-family);
  box-shadow: var(--glass-shadow);
  margin-bottom: 0;
}

.stat-card-clickable:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover);
}

.stat-card-chevron {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-md);
  font-size: 1rem;
  color: var(--color-mist);
  transition: transform 0.2s ease;
}

.stat-card-open .stat-card-chevron {
  transform: rotate(180deg);
}

.stat-card-detail {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
  margin: -8px 0 var(--spacing-lg);
}

.stat-card-detail-open {
  max-height: 480px;
  overflow-y: auto;
}

.stat-card-detail-panel {
  padding: var(--spacing-md);
  background: var(--glass-bg-flat);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

.stat-card-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-secondary);
}

.stat-card-detail-row:last-child {
  border-bottom: none;
}

.stat-card-detail-empty {
  color: var(--color-mist);
  font-size: 0.85rem;
  padding: var(--spacing-sm) 4px;
}

.stat-card-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.stat-card-filter-toggle {
  display: flex;
  gap: 6px;
}

.stat-card-filter-toggle button {
  background: var(--glass-bg-flat);
  color: var(--color-mist);
  box-shadow: none;
  border: 1px solid var(--glass-border);
  padding: 8px 16px;
  font-size: 0.78rem;
}

.stat-card-filter-toggle button.active {
  background-color: var(--color-primary);
  color: var(--color-primary-dark);
  border-color: transparent;
}

/* Kartin arka planinda ikon yerine modul rengine gore hafif gradyan tint (Satinalma Ai kpi-card referansi) */
.stat-card-measurement { background: linear-gradient(165deg, var(--color-module-measurement-tint) 0%, var(--glass-bg) 60%); }
.stat-card-appointment { background: linear-gradient(165deg, var(--color-module-appointment-tint) 0%, var(--glass-bg) 60%); }
.stat-card-nutrition { background: linear-gradient(165deg, var(--color-module-nutrition-tint) 0%, var(--glass-bg) 60%); }
.stat-card-notification { background: linear-gradient(165deg, var(--color-module-notification-tint) 0%, var(--glass-bg) 60%); }
.stat-card-ai { background: linear-gradient(165deg, var(--color-module-ai-tint) 0%, var(--glass-bg) 60%); }
.stat-card-neutral { background: linear-gradient(165deg, var(--color-module-neutral-tint) 0%, var(--glass-bg) 60%); }
.stat-card-sleep { background: linear-gradient(165deg, var(--color-module-sleep-tint) 0%, var(--glass-bg) 60%); }
.stat-card-stress { background: linear-gradient(165deg, var(--color-module-stress-tint) 0%, var(--glass-bg) 60%); }
.stat-card-lifestyle { background: linear-gradient(165deg, var(--color-module-lifestyle-tint) 0%, var(--glass-bg) 60%); }

.stat-card-value {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}

.stat-card-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-mist);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---- Grafik kartlari ---- */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.chart-card {
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  background: var(--glass-bg-flat);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
}

.chart-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-sm);
}

/* ---- Bos durum (empty state) ---- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 20px;
  text-align: center;
}

.empty-state-compact {
  padding: 24px 16px;
  gap: 8px;
}

.empty-state-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-sage-tint);
  flex-shrink: 0;
}

.empty-state-compact .empty-state-icon-wrap {
  width: 36px;
  height: 36px;
}

.empty-state-icon {
  width: 22px;
  height: 22px;
  background-color: var(--color-primary-dark);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.empty-state-compact .empty-state-icon {
  width: 16px;
  height: 16px;
}

.empty-state-icon-ruler { -webkit-mask-image: url(/assets/icons/ruler.svg); mask-image: url(/assets/icons/ruler.svg); }
.empty-state-icon-calendar { -webkit-mask-image: url(/assets/icons/calendar.svg); mask-image: url(/assets/icons/calendar.svg); }
.empty-state-icon-bell { -webkit-mask-image: url(/assets/icons/bell.svg); mask-image: url(/assets/icons/bell.svg); }
.empty-state-icon-inbox { -webkit-mask-image: url(/assets/icons/inbox.svg); mask-image: url(/assets/icons/inbox.svg); }
.empty-state-icon-leaf { -webkit-mask-image: url(/assets/icons/leaf.svg); mask-image: url(/assets/icons/leaf.svg); }
.empty-state-icon-user-search { -webkit-mask-image: url(/assets/icons/user-search.svg); mask-image: url(/assets/icons/user-search.svg); }
.empty-state-icon-users { -webkit-mask-image: url(/assets/icons/users.svg); mask-image: url(/assets/icons/users.svg); }
.empty-state-icon-user-check { -webkit-mask-image: url(/assets/icons/user-check.svg); mask-image: url(/assets/icons/user-check.svg); }

.empty-state-message {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-mist);
  max-width: 280px;
}

.empty-state-compact .empty-state-message {
  font-size: 0.78rem;
}

/* ---- Yuklenme iskeleti (skeleton) ---- */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.skeleton-row {
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--glass-bg-flat);
  border: 1px solid var(--glass-border);
  margin-bottom: var(--spacing-sm);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-card {
  height: 96px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-row, .skeleton-card {
    animation: none;
    opacity: 0.7;
  }
}

/* ---- Gunluk Check-in ---- */
.checkin-form {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--spacing-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
}

.checkin-form label {
  font-weight: 600;
  color: var(--color-secondary);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
}

.checkin-rating {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.checkin-rating label {
  font-weight: 400;
  color: var(--color-charcoal);
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 768px) {
  .stat-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .charts-grid {
    grid-template-columns: 1fr;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .navbar {
    margin: 8px 8px 0;
    top: 8px;
    padding: 8px 14px;
    gap: 6px;
  }

  .navbar-links {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .navbar-links::-webkit-scrollbar {
    display: none;
  }

  .navbar-brand {
    display: none;
  }

  .navbar-username {
    display: none;
  }

  .stat-card-grid {
    grid-template-columns: 1fr;
  }

  .mp-date-row {
    flex-direction: column;
  }

  .auth-card {
    padding: 24px;
  }

  .hero-section {
    text-align: center;
    padding: 48px var(--spacing-lg);
  }

  .hero-content {
    max-width: 100%;
  }
}