/* Hitit Dijital Uygulamalar — tasarım dili
   Kurumsal kılavuz renkleri: Ana #9A1A2F, Ana-Koyu #7F0018, Özel (altın) #AC9058, Gri #C6BAB5.
   Zemin, ana-koyu renkten türetilmiş derin bordo tonlarıdır. */

:root {
  --h-wine-990: #0c0206;
  --h-wine-950: #160309;
  --h-wine-900: #22050e;
  --h-wine-800: #3a0715;
  --h-bordo-dark: #7f0018;
  --h-bordo: #9a1a2f;
  --h-bordo-light: #c43a52;
  --h-gold: #ac9058;
  --h-gold-light: #d8c08d;
  --h-gold-pale: #efe2c4;
  --h-stone: #c6bab5;
  /* Nötr zemin: kurumsal gri (#C6BAB5) sıcaklığında koyu antrasit; bordo ve altın üzerinde öne çıkar. */
  --h-char-990: #0d0b0c;
  --h-char-950: #151113;
  --h-char-900: #1e181a;
  --h-char-800: #2b2225;
  --h-ink: #fbf6f2;
  --h-ink-soft: #e2d6d0;
  --h-muted: #b3a29b;
  --h-glass: rgba(255, 244, 236, .06);
  --h-glass-strong: rgba(255, 244, 236, .11);
  --h-line: rgba(239, 226, 196, .16);
  --h-radius: 18px;
  --h-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --h-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

html { font-size: 15px; }
body { font-family: var(--h-font); background: #f6f2ef; color: #2a1218; }

/* ---------- Üst bant: marka · karşılama · araçlar · kullanıcı ---------- */
.h-topbar {
  position: relative; z-index: 20; color: var(--h-ink);
  background:
    radial-gradient(600px 120px at 50% 0%, rgba(216,192,141,.14), transparent 70%),
    linear-gradient(90deg, #4d000f, var(--h-bordo-dark) 45%, #5c0011);
  border-bottom: 2px solid var(--h-gold);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.h-topbar-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 74px; padding: 0 1.75rem; }
.h-brand { display: flex; align-items: center; gap: .9rem; font-family: var(--h-font-display); color: var(--h-ink); text-decoration: none; flex: none; }
.h-brand:hover { color: #fff; }
.h-logo { height: 40px; width: auto; filter: brightness(0) invert(1); }
.h-brand-divider { width: 1px; height: 32px; background: linear-gradient(transparent, var(--h-gold-light), transparent); }
.h-brand-name { font-weight: 650; font-size: 1.1rem; letter-spacing: .2px; line-height: 1.1; }
.h-brand-name small { display: block; font-size: .76rem; font-weight: 500; color: var(--h-gold-light); letter-spacing: .4px; margin-top: .15rem; }

.h-topbar-center { flex: 1; min-width: 0; display: flex; justify-content: center; }
.h-greeting { text-align: center; }
.h-greeting h1 { margin: 0; font-family: var(--h-font-display); font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: -.2px; }
.h-greeting p { margin: .1rem 0 0; font-size: .86rem; color: rgba(255,240,230,.78); }
.h-greeting strong { color: var(--h-gold-pale); }

.h-topbar-tools { display: flex; align-items: center; gap: .6rem; flex: none; }
.h-topbar .eco-seg { background: rgba(0,0,0,.2); border-color: rgba(239,226,196,.25); }
.h-topbar .eco-seg button { color: rgba(255,240,230,.85); }
.h-topbar .eco-seg button[aria-pressed="true"] { background: linear-gradient(135deg, var(--h-gold-pale), var(--h-gold-light)); color: #3a0a14; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.h-topbar .eco-icon-btn { background: rgba(0,0,0,.2); border-color: rgba(239,226,196,.25); color: #fff; }
.h-topbar .eco-icon-btn:hover { background: rgba(0,0,0,.32); color: var(--h-gold-pale); }

/* Kullanıcı: fotoğraf + erişim oranı halkası (conic) + ad + tip */
.h-user {
  display: flex; align-items: center; gap: .7rem; padding: 4px 14px 4px 4px; margin-left: .4rem; border-radius: 999px; color: #fff;
  background: rgba(0,0,0,.2); border: 1px solid rgba(239,226,196,.25); transition: background .2s, border-color .2s;
}
.h-user:hover, .h-user[aria-expanded="true"] { background: rgba(0,0,0,.34); border-color: rgba(239,226,196,.5); }
.h-user:focus-visible { outline: 2px solid var(--h-gold-light); outline-offset: 2px; }
.h-user-avatar {
  width: 48px; height: 48px; border-radius: 50%; padding: 3px; flex: none;
  background: conic-gradient(var(--h-gold-light) calc(var(--ratio, 1) * 1turn), rgba(255,248,239,.18) 0);
}
.h-user-face {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--h-bordo), #4d000f); border: 2px solid #4d000f;
}
.h-user-face .initials { font-family: var(--h-font-display); font-size: .95rem; font-weight: 700; color: var(--h-gold-pale); }
.h-user-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-user-text { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.h-user-text strong { font-size: .92rem; font-weight: 650; }
.h-user-text small { font-size: .76rem; color: var(--h-gold-light); }
.h-user-chevron { display: flex; color: rgba(255,240,230,.7); }
.h-menu { min-width: 230px; padding: .45rem; border: 0; border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.35); margin-top: .5rem !important; }
.h-menu .dropdown-header { font-size: .72rem; letter-spacing: 1.4px; text-transform: uppercase; color: #8a7479; }
.h-menu .dropdown-item { display: flex; align-items: center; gap: .65rem; border-radius: 9px; padding: .55rem .75rem; font-size: .92rem; }
.h-menu .dropdown-item .hi { color: var(--h-bordo); }
.h-menu .dropdown-item:hover, .h-menu .dropdown-item:focus { background: #f6ecee; color: var(--h-bordo-dark); }

@media (max-width: 992px) {
  .h-topbar-center { display: none; }
}
@media (max-width: 768px) {
  .h-topbar-inner { gap: .6rem; padding: 0 .9rem; min-height: 64px; }
  .h-logo { height: 30px; }
  .h-brand-divider, .h-user-text, .h-user-chevron { display: none; }
  .h-brand-name { font-size: .92rem; }
  .h-user { padding: 3px; }
  .h-user-avatar { width: 42px; height: 42px; }
  .h-topbar-tools { margin-left: auto; }
  .h-topbar .eco-seg button { padding: 0 .5rem; font-size: 0; gap: 0; }
  .h-topbar .eco-seg button .hi { font-size: 1rem; }
}
.btn-primary { --bs-btn-bg: var(--h-bordo-dark); --bs-btn-border-color: var(--h-bordo-dark); --bs-btn-hover-bg: var(--h-bordo); --bs-btn-hover-border-color: var(--h-bordo); --bs-btn-active-bg: #5e0012; }
.btn-outline-primary { --bs-btn-color: var(--h-bordo-dark); --bs-btn-border-color: var(--h-bordo-dark); --bs-btn-hover-bg: var(--h-bordo-dark); --bs-btn-hover-border-color: var(--h-bordo-dark); }
a { color: var(--h-bordo-dark); }
.footer { padding: 1rem 0; font-size: .85rem; }

.hi { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* Yönetim: renk seçici */
.h-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.h-swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: var(--sw, #eee); cursor: pointer; padding: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18); transition: transform .15s, box-shadow .15s; display: grid; place-items: center; position: relative; overflow: hidden;
}
.h-swatch:hover { transform: scale(1.1); }
.h-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--h-bordo-dark); transform: scale(1.08); }
.h-swatch.is-auto { width: auto; padding: 0 .7rem; border-radius: 99px; font-size: .78rem; font-weight: 600; color: #4b3a3e; background: conic-gradient(from 90deg, #e8a0a855, #d9c28e55, #9fc5a855, #9db7d555, #b9a6d655, #e8a0a855); }
.h-swatch.is-custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.h-swatch.is-custom input { position: absolute; inset: -8px; width: 50px; height: 50px; opacity: 0; cursor: pointer; }
.h-swatch-preview { display: inline-flex; align-items: center; gap: .45rem; margin-left: .6rem; font-size: .85rem; color: #6b5a5e; }
.h-swatch-preview i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }

/* =====================================================================
   GİRİŞ EKRANI
   ===================================================================== */
.auth-body *, .auth-body *::before, .auth-body *::after { box-sizing: border-box; }
.auth-body {
  margin: 0; height: 100vh; overflow: hidden; color: var(--h-ink); font-family: var(--h-font);
  background:
    radial-gradient(760px 620px at 74% 50%, rgba(154, 26, 47, .42), transparent 65%),
    radial-gradient(700px 520px at 0% 100%, rgba(127, 0, 24, .32), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(172, 144, 88, .12), transparent 60%),
    linear-gradient(160deg, var(--h-char-990), var(--h-char-900) 55%, var(--h-char-950));
}
.auth-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.auth-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(239,226,196,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(239,226,196,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at 40% 50%, #000 30%, transparent 75%);
}
.auth-shell {
  position: relative; z-index: 1; height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr;
  align-items: center; gap: 4rem; max-width: 1320px; margin: 0 auto; padding: 2rem 3rem 3rem;
}
.auth-brand-logo { height: 64px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.auth-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 2.2rem; padding: .4rem .95rem .4rem .5rem; border-radius: 999px;
  background: var(--h-glass); border: 1px solid var(--h-line); font-size: .86rem; letter-spacing: .5px; color: var(--h-gold-light);
}
.auth-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--h-gold-light); box-shadow: 0 0 0 4px rgba(216,192,141,.2); animation: h-blink 2.4s infinite; }
.auth-title {
  font-family: var(--h-font-display); font-weight: 750; line-height: .98; letter-spacing: -1.5px; margin: 1.2rem 0 1.2rem;
  font-size: clamp(2.8rem, 5.6vw, 5.2rem);
}
.auth-title .grad {
  background: linear-gradient(100deg, var(--h-gold-pale) 0%, var(--h-gold-light) 35%, var(--h-gold) 60%, var(--h-gold-pale) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 220% 100%; animation: h-shine 8s ease-in-out infinite;
}
.auth-lead { font-size: 1.12rem; line-height: 1.65; color: var(--h-ink-soft); max-width: 34rem; }
.auth-features { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.auth-feature {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 12px; font-size: .88rem;
  background: var(--h-glass); border: 1px solid var(--h-line); color: var(--h-ink);
}
.auth-feature .hi { color: var(--h-gold-light); }

/* Giriş kartının arkasında dönen sistem yörüngesi */
.auth-card-wrap { position: relative; display: grid; place-items: center; }
.auth-card-wrap .auth-card { width: 100%; max-width: 450px; z-index: 1; }
.auth-orbit { position: absolute; left: 50%; top: 50%; width: 660px; height: 660px; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.auth-orbit .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(216,192,141,.22); animation: h-spin 70s linear infinite; }
.auth-orbit .ring.r2 { inset: 95px; border-style: solid; border-color: rgba(196,58,82,.3); animation-duration: 48s; animation-direction: reverse; }
.auth-orbit .sat {
  position: absolute; width: 48px; height: 48px; margin: -24px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(154,26,47,.9), rgba(58,7,21,.95)); border: 1px solid rgba(216,192,141,.45); color: var(--h-gold-pale);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 18px rgba(172,144,88,.25);
  animation: h-spin 70s linear infinite reverse;
}
.auth-orbit .sat .hi { width: 22px; height: 22px; }
.auth-orbit .ring.r2 .sat { animation-duration: 48s; animation-direction: normal; }
.auth-orbit .halo {
  position: absolute; inset: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,58,82,.45), rgba(127,0,24,.18) 45%, transparent 70%);
  animation: h-breathe-soft 5s ease-in-out infinite;
}

/* Giriş kartı */
.auth-card {
  position: relative; border-radius: 26px; padding: 2.4rem 2.3rem 2rem;
  background: linear-gradient(160deg, rgba(255,244,236,.13), rgba(255,244,236,.04));
  border: 1px solid rgba(239,226,196,.2); backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .25s ease;
}
.auth-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--h-gold-light), transparent 35%, transparent 65%, var(--h-bordo-light));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.auth-card h2 { font-family: var(--h-font-display); font-weight: 700; font-size: 1.7rem; margin: 0; }
.auth-card .sub { color: var(--h-gold-light); font-size: .88rem; letter-spacing: .4px; }
.auth-logo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.auth-logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }

.realm-pill {
  display: flex; align-items: center; gap: .75rem; padding: .75rem .95rem; border-radius: 14px; margin-bottom: 1.1rem;
  background: rgba(255,244,236,.05); border: 1px solid var(--h-line); transition: all .35s cubic-bezier(.2,.8,.2,1);
}
.realm-pill .realm-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,244,236,.08); transition: all .35s; flex: none; }
.realm-pill .realm-icon .hi { width: 21px; height: 21px; }
.realm-pill strong { display: block; font-size: .95rem; }
.realm-pill .realm-text span { font-size: .8rem; color: var(--h-muted); }
.realm-pill[data-realm="student"] { border-color: rgba(216,192,141,.7); background: rgba(172,144,88,.16); }
.realm-pill[data-realm="student"] .realm-icon { background: var(--h-gold); color: var(--h-wine-950); box-shadow: 0 6px 20px rgba(172,144,88,.5); }
.realm-pill[data-realm="staff"] { border-color: rgba(196,58,82,.7); background: rgba(154,26,47,.22); }
.realm-pill[data-realm="staff"] .realm-icon { background: var(--h-bordo); color: #fff; box-shadow: 0 6px 20px rgba(154,26,47,.6); }
.realm-pill.bump { animation: h-bump .4s ease; }

.h-field { position: relative; margin-bottom: 1rem; }
.h-field label { display: block; font-size: .82rem; color: var(--h-ink-soft); margin-bottom: .4rem; letter-spacing: .3px; }
.h-field .h-input-wrap { position: relative; }
.h-field .h-input-wrap > span[data-icon] { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--h-muted); pointer-events: none; transition: color .2s; }
.h-field input {
  width: 100%; height: 54px; padding: 0 3rem 0 2.8rem; border-radius: 14px; font-size: 1.02rem; color: #fff;
  background: rgba(12, 2, 6, .5); border: 1px solid rgba(239,226,196,.18); outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.h-field input::placeholder { color: rgba(226, 214, 208, .45); }
.h-field input:focus { border-color: var(--h-gold-light); box-shadow: 0 0 0 4px rgba(172,144,88,.22); background: rgba(12, 2, 6, .65); }
.h-field .h-input-wrap:focus-within > span[data-icon] { color: var(--h-gold-light); }
.h-field .toggle-pass {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--h-muted);
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
}
.h-field .toggle-pass:hover, .h-field .toggle-pass:focus-visible { color: #fff; background: rgba(255,244,236,.08); outline: none; }
.h-field .field-error { color: #ffb3bf; font-size: .8rem; margin-top: .3rem; display: block; }
.caps-warning { display: none; align-items: center; gap: .4rem; font-size: .8rem; color: var(--h-gold-light); margin: -.4rem 0 .8rem; }
.caps-warning.show { display: flex; }

.auth-error {
  display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 12px; margin-bottom: 1rem; font-size: .9rem;
  background: rgba(127, 0, 24, .45); border: 1px solid rgba(196, 58, 82, .7); color: #ffe7eb; animation: h-shake .45s ease;
}
.auth-error ul { margin: 0; padding: 0; list-style: none; }
.validation-summary-valid.auth-error { display: none; }

.h-btn-primary {
  position: relative; width: 100%; height: 56px; border: 0; border-radius: 14px; font-weight: 650; font-size: 1.04rem; color: #fff; overflow: hidden; cursor: pointer;
  background: linear-gradient(100deg, var(--h-bordo-dark), var(--h-bordo) 55%, var(--h-bordo-dark));
  background-size: 200% 100%; box-shadow: 0 14px 34px rgba(127, 0, 24, .55), inset 0 1px 0 rgba(255,255,255,.15);
  transition: background-position .5s, transform .15s, box-shadow .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; text-decoration: none;
}
.h-btn-primary:hover { background-position: 100% 0; color: #fff; box-shadow: 0 18px 44px rgba(127, 0, 24, .7), 0 0 0 1px rgba(216,192,141,.5); }
.h-btn-primary:active { transform: translateY(1px) scale(.995); }
.h-btn-primary:focus-visible { outline: 3px solid var(--h-gold-light); outline-offset: 3px; }
.h-btn-primary .hi { transition: transform .25s; }
.h-btn-primary:hover .hi { transform: translateX(4px); }
.h-btn-primary .spinner { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: h-spin .8s linear infinite; }
.h-btn-primary.loading { pointer-events: none; }
.h-btn-primary.loading .spinner { display: inline-block; }
.h-btn-primary.loading .hi, .h-btn-primary.loading .label { display: none; }
.h-btn-primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(239,226,196,.35), transparent); transform: skewX(-20deg); animation: h-sweep 4.5s ease-in-out infinite;
}
.auth-help { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; font-size: .82rem; color: var(--h-muted); }
.auth-help a { color: var(--h-gold-light); text-decoration: none; }
.auth-help a:hover, .auth-help a:focus-visible { color: var(--h-gold-pale); text-decoration: underline; }
.auth-help-contact { color: var(--h-muted); text-align: right; }
.auth-footer {
  position: fixed; z-index: 1; left: 0; right: 0; bottom: 1rem; text-align: center; color: var(--h-muted); font-size: .8rem; letter-spacing: .3px;
}
.auth-footer strong { color: var(--h-gold-light); font-weight: 600; }

@media (max-width: 992px) {
  .auth-body { height: auto; min-height: 100vh; overflow: auto; }
  .auth-shell { height: auto; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.25rem 5rem; }
  .auth-orbit { width: 480px; height: 480px; opacity: .55; }
  .auth-orbit .ring.r2 { inset: 70px; }
  .auth-orbit .halo { inset: 150px; }
  .auth-lead { font-size: 1rem; }
  .auth-footer { position: relative; bottom: auto; padding-bottom: 1.2rem; }
}
@media (max-height: 760px) and (min-width: 993px) {
  .auth-title { font-size: clamp(2.4rem, 4.6vw, 4rem); }
  .auth-eyebrow { margin-top: 1.2rem; }
  .auth-card { padding: 1.8rem 2rem 1.5rem; }
}

/* =====================================================================
   EKOSİSTEM (ana sayfa) — tek ekran, kaydırma yok
   ===================================================================== */
.eco-page { height: 100vh; height: 100dvh; margin: 0 !important; overflow: hidden; display: flex; flex-direction: column; background: var(--h-char-990); color: var(--h-ink); }
.eco-page > header { flex: none; }
.eco-page > .h-fill { flex: 1; min-height: 0; display: flex; }
.eco-page main { flex: 1; min-height: 0; display: flex; padding: 0 !important; }
.eco-page .footer { display: none; }

.eco {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; overflow: clip; isolation: isolate;
  background:
    radial-gradient(900px 640px at 50% 55%, rgba(127, 0, 24, .26), transparent 70%),
    radial-gradient(620px 480px at 0% 100%, rgba(154, 26, 47, .16), transparent 60%),
    radial-gradient(700px 520px at 100% 0%, rgba(172, 144, 88, .09), transparent 60%),
    linear-gradient(180deg, var(--h-char-950), var(--h-char-990));
}
.eco::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(239,226,196,.09) 1px, transparent 1px); background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 50% 55%, #000 35%, transparent 80%);
}

.eco-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--h-glass); border: 1px solid var(--h-line); }
.eco-seg button {
  border: 0; background: transparent; color: var(--h-ink-soft); height: 34px; padding: 0 .9rem; border-radius: 9px; font-size: .88rem;
  display: inline-flex; align-items: center; gap: .4rem; transition: all .2s;
}
.eco-seg button[aria-pressed="true"] { background: linear-gradient(135deg, var(--h-bordo), var(--h-bordo-dark)); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3), inset 0 0 0 1px rgba(216,192,141,.35); }
.eco-seg button:focus-visible, .eco-icon-btn:focus-visible { outline: 2px solid var(--h-gold-light); outline-offset: 2px; }
.eco-icon-btn {
  height: 42px; width: 42px; border-radius: 12px; border: 1px solid var(--h-line); background: var(--h-glass); color: var(--h-ink); display: grid; place-items: center;
}
.eco-icon-btn:hover { background: var(--h-glass-strong); color: var(--h-gold-light); }

/* Harita sahnesi: kalan yüksekliğin tamamını kullanır */
.eco-stage { position: relative; flex: 1; min-height: 0; touch-action: none; }
.eco-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.eco-nodes { position: absolute; inset: 0; }
.eco-intro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: .82rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--h-gold-light); pointer-events: none; transition: opacity .8s;
}

.eco-node {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .6rem; will-change: transform; -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 0; transition: opacity .35s ease, filter .35s ease;
}
.eco-node:focus { outline: none; }
.eco-orb {
  --size: 72px; position: relative; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 32% 26%, rgba(255,244,236,.28), rgba(255,244,236,.06) 45%, rgba(30,24,26,.95) 100%);
  border: 2px solid rgba(239,226,196,.28);
  box-shadow: inset 0 0 18px rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.5);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.eco-orb .hi { width: 44%; height: 44%; stroke-width: 1.6; }
.eco-orb img { width: 48%; height: 48%; object-fit: contain; }
.eco-orb::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid transparent; pointer-events: none; }
.eco-label {
  font-size: .95rem; font-weight: 650; white-space: nowrap; padding: .3rem .8rem; border-radius: 99px; letter-spacing: .1px;
  background: rgba(13, 11, 12, .8); border: 1px solid rgba(239,226,196,.14); text-shadow: 0 1px 2px rgba(0,0,0,.5);
  transition: all .3s;
}
.eco-badge {
  position: absolute; right: -2px; top: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--h-char-900); border: 1.5px solid rgba(198,186,181,.6); color: var(--h-stone);
}
.eco-badge .hi { width: 13px; height: 13px; }
.eco-badge.is-data { background: var(--h-gold-light); border-color: #fff8ef; color: #3a0a14; }

/* Erişilebilir: her sistem kendi yumuşak renginde cam küre (--c-rgb ecosystem.js'den gelir) */
.eco-orb.is-live {
  color: var(--c-ink, #1f1517); border-color: rgb(var(--c-rgb));
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.6), rgb(var(--c-rgb) / .95) 34%, rgb(var(--c-rgb) / .7) 66%, rgb(var(--c-rgb) / .45) 100%);
  box-shadow: inset 0 -8px 18px rgba(0,0,0,.22), inset 0 2px 10px rgba(255,255,255,.35),
              0 0 0 6px rgb(var(--c-rgb) / .13), 0 0 44px rgb(var(--c-rgb) / .35), 0 14px 34px rgba(0,0,0,.55);
}
.eco-orb.is-live .hi { stroke-width: 1.9; }
.eco-node[data-status="active"] .eco-orb::after { border-color: rgb(var(--c-rgb) / .55); animation: h-ripple 3.6s ease-out infinite; }
.eco-node[data-status="active"] .eco-label { border-color: rgb(var(--c-rgb) / .45); }
.eco-node[data-status="noResponse"] .eco-orb { border-style: dotted; border-width: 3px; filter: saturate(.7); }
/* Veri entegrasyonu: kendi renginde ama dış kesikli halkayla "açılmayan, arka planda çalışan" sistem olduğu belli olur */
.eco-node[data-status="dataOnly"] { cursor: default; }
.eco-node[data-status="dataOnly"] .eco-orb { outline: 1.5px dashed rgb(var(--c-rgb) / .75); outline-offset: 6px; }
.eco-node[data-status="dataOnly"] .eco-orb::after { animation: none; }
.eco-node[data-status="dataOnly"] .eco-label { font-style: italic; border-style: dashed; border-color: rgb(var(--c-rgb) / .5); }
/* Yetkisiz: kurumsal gri, soluk ama yerinde */
.eco-node[data-status="inactive"], .eco-node[data-status="notAvailable"] { opacity: .5; filter: saturate(.25); }
.eco-node[data-status="inactive"] .eco-orb, .eco-node[data-status="notAvailable"] .eco-orb {
  border-style: dashed; border-color: rgba(198,186,181,.55); color: var(--h-stone);
  background: radial-gradient(circle at 32% 26%, rgba(198,186,181,.2), rgba(43,34,37,.7) 60%, rgba(21,17,19,.95) 100%);
}
.eco-node[data-status="inactive"] .eco-label, .eco-node[data-status="notAvailable"] .eco-label { color: var(--h-stone); font-weight: 500; }
.eco-node.is-hub .eco-label { font-size: 1.05rem; }

/* Odak: üzerine gelinen sistem büyür, kendi renginde ışır ve etiketi kendi rengine döner (JS'deki 1.2 kenar hesabıyla aynı) */
.eco-node.is-focus .eco-orb { transform: scale(1.2); }
.eco-node:focus-visible .eco-label { outline: 2px solid var(--h-gold-light); outline-offset: 2px; }
.eco-node.is-focus { opacity: 1 !important; filter: none !important; z-index: 4; }
.eco-node.is-focus .eco-orb {
  border-width: 3px; border-style: solid; border-color: #fff8ef;
  box-shadow: 0 0 0 7px rgb(var(--c-rgb) / .38), 0 0 0 15px rgb(var(--c-rgb) / .12), 0 0 90px rgb(var(--c-rgb) / .55), 0 16px 40px rgba(0,0,0,.6);
}
.eco-node.is-focus .eco-orb::after { border-color: rgb(var(--c-rgb) / .85); animation-duration: 1.8s; }
.eco-node.is-focus .eco-label {
  background: rgb(var(--c-rgb)); color: var(--c-ink, #1a1113); border-color: #fff8ef;
  text-shadow: none; font-weight: 700; transform: translateY(6px) scale(1.06); box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.eco-node.is-neighbor { z-index: 3; }
.eco-node.is-neighbor .eco-label { border-color: rgb(var(--c-rgb) / .75); }
.eco-node.is-neighbor:not([data-status="active"]) { opacity: .8; }
.eco-node.is-dim { opacity: .1 !important; }
.eco-node.dragging { cursor: grabbing; }
.eco-node.dragging .eco-orb { transform: scale(1.18); }


/* Sol alt: hizmet alanı etiketleri + durum açıklaması */
.eco-legend-wrap { position: absolute; left: 1.5rem; bottom: 1.2rem; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; max-width: calc(100% - 20rem); }
.eco-areas {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .45rem .55rem; border-radius: 14px;
  background: rgba(13, 11, 12, .72); border: 1px solid var(--h-line); backdrop-filter: blur(8px);
}
.eco-area {
  display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--h-line); background: rgba(255,244,236,.04); color: var(--h-ink-soft);
  border-radius: 99px; padding: .28rem .7rem; font-size: .8rem; transition: all .2s;
}
.eco-area b { font-weight: 600; font-size: .72rem; color: var(--h-gold-light); min-width: 1.2em; text-align: center; }
.eco-area:hover:not(:disabled), .eco-area:focus-visible { color: #fff; border-color: var(--h-gold-light); outline: none; }
.eco-area[aria-pressed="true"] { background: linear-gradient(135deg, var(--h-gold-pale), var(--h-gold-light)); color: #3a0a14; border-color: var(--h-gold-pale); }
.eco-area[aria-pressed="true"] b { color: #3a0a14; }
.eco-area:disabled { opacity: .45; cursor: default; }
.eco-area:disabled b { color: var(--h-muted); }
.eco-legend {
  display: flex; flex-wrap: wrap; gap: 1rem; padding: .65rem 1rem; border-radius: 14px;
  background: rgba(13, 11, 12, .72); border: 1px solid var(--h-line); backdrop-filter: blur(8px); font-size: .8rem; color: var(--h-ink-soft);
}
/* Alan vurgusunda eşleşen sistemin etiketi altın çerçeve alır */
.eco-node.is-area .eco-label { border-color: var(--h-gold-light); box-shadow: 0 0 0 1px rgba(216,192,141,.35); }
.eco-area-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.3rem 0 1rem; }
.eco-area-tags span { font-size: .76rem; padding: .22rem .6rem; border-radius: 99px; border: 1px solid rgba(216,192,141,.5); color: var(--h-gold-pale); }
.eco-list-count { font-size: .72rem; letter-spacing: 0; color: var(--h-muted); margin-left: .35rem; }
.eco-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.eco-legend i { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
.eco-legend .l-active { background: conic-gradient(#e8a0a8, #d9c28e, #9fc5a8, #9db7d5, #b9a6d6, #e8a0a8); box-shadow: 0 0 8px rgba(255,248,239,.35); }
.eco-legend .l-locked { border: 1.5px dashed var(--h-stone); }
.eco-legend .l-flow { width: 24px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #e8a0a8, #9db7d5); }
.eco-legend .l-wait { border: 2px dotted var(--h-gold); }
.eco-legend .l-data { background: var(--h-gold-light); outline: 1.5px dashed var(--h-gold-light); outline-offset: 2px; transform: scale(.75); }
.eco-credit {
  position: absolute; right: 1.5rem; bottom: 1.2rem; z-index: 4; text-align: right; font-size: .78rem; color: var(--h-muted); line-height: 1.4;
}
.eco-credit strong { display: block; color: var(--h-gold-light); font-weight: 600; letter-spacing: .3px; }

/* Detay paneli */
.eco-panel {
  position: absolute; z-index: 8; top: 1rem; right: 1rem; bottom: 1rem; width: 390px; max-width: calc(100% - 2rem); overflow-y: auto;
  border-radius: 22px; padding: 1.7rem; color: var(--h-ink);
  background: linear-gradient(170deg, rgba(43, 34, 37, .97), rgba(13, 11, 12, .97));
  border: 1px solid rgba(216,192,141,.28); box-shadow: -20px 0 60px rgba(0,0,0,.5); backdrop-filter: blur(18px);
  transform: translateX(110%); transition: transform .45s cubic-bezier(.2,.8,.2,1); visibility: hidden;
}
.eco-panel.open { transform: none; visibility: visible; }
.eco-panel .close { position: absolute; right: 1rem; top: 1rem; }
.eco-panel-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem; padding-right: 2.5rem; }
.eco-panel-head .eco-orb { --size: 62px; flex: none; }
.eco-panel h2 { font-family: var(--h-font-display); font-size: 1.45rem; margin: 0; font-weight: 700; }
.eco-panel .cat { font-size: .76rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--h-gold-light); }
.eco-status {
  display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .95rem; border-radius: 14px; font-size: .9rem; margin-bottom: 1.1rem;
  border: 1px solid var(--h-line); background: rgba(255,244,236,.05);
}
.eco-status .hi { margin-top: .1rem; }
.eco-status.ok { border-color: rgba(216,192,141,.55); background: rgba(172,144,88,.14); }
.eco-status.ok .hi { color: var(--h-gold-light); }
.eco-status.locked { border-color: rgba(198,186,181,.4); background: rgba(198,186,181,.08); }
.eco-status.locked .hi { color: var(--h-stone); }
.eco-status.wait { border-color: rgba(172,144,88,.45); border-style: dashed; }
.eco-status.wait .hi { color: var(--h-gold); }
.eco-status.data { border-color: rgba(216,192,141,.45); border-style: dashed; background: rgba(172,144,88,.08); }
.eco-status.data .hi { color: var(--h-gold-light); }
.eco-panel p.desc { color: var(--h-ink-soft); line-height: 1.6; }
.eco-panel h3 { font-size: .76rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--h-muted); margin: 1.4rem 0 .7rem; }
.eco-links-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.eco-link-chip {
  display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--h-line); background: rgba(255,244,236,.05); color: var(--h-ink);
  border-radius: 12px; padding: .42rem .75rem; font-size: .86rem; transition: all .2s;
}
.eco-link-chip:hover, .eco-link-chip:focus-visible { border-color: var(--h-gold-light); background: rgba(172,144,88,.16); outline: none; }
.eco-link-chip i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px dashed var(--h-stone); }
.eco-link-chip[data-status="active"] i, .eco-link-chip[data-status="noResponse"] i, .eco-link-chip[data-status="dataOnly"] i { border: 0; background: rgb(var(--c-rgb)); box-shadow: 0 0 8px rgb(var(--c-rgb) / .8); }
.eco-roles { display: flex; flex-wrap: wrap; gap: .4rem; }
.eco-roles span { font-size: .82rem; padding: .28rem .65rem; border-radius: 8px; background: rgba(172,144,88,.2); color: var(--h-gold-pale); }
.eco-open { margin-top: 1.6rem; }
.eco-open[aria-disabled="true"] { background: rgba(255,244,236,.08); box-shadow: none; color: var(--h-muted); pointer-events: none; }
.eco-open[aria-disabled="true"]::after { display: none; }
.eco-panel .note { font-size: .8rem; color: var(--h-muted); margin-top: .7rem; }

/* Liste görünümü: kendi alanında kayar, sayfa kaymaz */
.eco-list { position: relative; z-index: 3; flex: 1; min-height: 0; overflow-y: auto; padding: .5rem 2rem 2rem; display: none; }
.eco.view-list .eco-list { display: block; }
.eco.view-list .eco-stage, .eco.view-list .eco-legend-wrap, .eco.view-list .eco-credit { display: none; }
.eco-list h2 { font-size: .78rem; letter-spacing: 1.8px; text-transform: uppercase; color: var(--h-gold-light); margin: 1.4rem 0 .8rem; }
.eco-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.eco-card {
  position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 1.25rem; border-radius: var(--h-radius); color: var(--h-ink); text-decoration: none;
  background: linear-gradient(160deg, rgba(255,244,236,.08), rgba(255,244,236,.02)); border: 1px solid var(--h-line);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
a.eco-card:hover { transform: translateY(-4px); border-color: rgb(var(--c-rgb, 216 192 141)); box-shadow: 0 18px 40px rgba(0,0,0,.4), 0 0 30px rgb(var(--c-rgb, 216 192 141) / .3); color: #fff; }
.eco-card.locked { opacity: .5; filter: saturate(.25); }
.eco-card.is-data { border-style: dashed; border-color: rgb(var(--c-rgb, 216 192 141) / .5); }
.eco-card.is-data .eco-orb {
  color: var(--c-ink, #1f1517); border-color: rgb(var(--c-rgb, 216 192 141));
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.5), rgb(var(--c-rgb, 216 192 141) / .8) 34%, rgb(var(--c-rgb, 216 192 141) / .45) 100%);
}
.eco-card.is-data .state { color: var(--h-gold-light); font-style: italic; }

/* Tablet ve telefon: harita yerine her zaman liste (ecosystem.js'teki compactDevice sorgusuyla aynı) */
@media (max-width: 1023.98px), (pointer: coarse) and (max-width: 1366px) {
  .eco .eco-stage, .eco .eco-legend-wrap, .eco .eco-credit, .eco .eco-panel { display: none !important; }
  .eco .eco-list { display: block !important; }
  .h-topbar .eco-seg { display: none; }
}
.eco-card .top { display: flex; align-items: center; gap: .85rem; }
.eco-card .eco-orb { --size: 48px; }
a.eco-card .eco-orb {
  color: var(--c-ink, #1f1517); border-color: rgb(var(--c-rgb, 216 192 141));
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.6), rgb(var(--c-rgb, 216 192 141) / .95) 34%, rgb(var(--c-rgb, 216 192 141) / .6) 100%);
}
.eco-card h3 { font-size: 1.05rem; margin: 0; font-weight: 650; }
.eco-card p { margin: 0; font-size: .86rem; color: var(--h-ink-soft); line-height: 1.5; }
.eco-card .meta { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--h-muted); margin-top: auto; }
.eco-card .state { display: inline-flex; align-items: center; gap: .35rem; }
a.eco-card .state { color: var(--h-gold-light); }

@media (max-width: 768px) {
  .eco-legend-wrap { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
  .eco-legend { gap: .6rem; font-size: .72rem; }
    .eco-area { font-size: .72rem; padding: .22rem .55rem; }
  .eco-credit { display: none; }
  .eco-panel { top: auto; left: .5rem; right: .5rem; bottom: .5rem; width: auto; max-width: none; max-height: 75%; transform: translateY(110%); }
  .eco-label { font-size: .85rem; }
  .eco-seg button { padding: 0 .6rem; }
  .eco-list { padding: .5rem 1rem 1.5rem; }
}

/* ---------- Animasyonlar ---------- */
@keyframes h-spin { to { transform: rotate(360deg); } }
@keyframes h-blink { 50% { opacity: .35; } }
@keyframes h-shine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes h-breathe-soft { 50% { transform: scale(1.12); opacity: .7; } }
@keyframes h-ripple { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes h-sweep { 0%, 60% { left: -60%; } 100% { left: 130%; } }
@keyframes h-bump { 40% { transform: scale(1.03); } }
@keyframes h-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Aranabilir seçim kutusu (_Picker.cshtml, admin-picker.js) */
.h-picker { position: relative; }
.h-picker-list { position: absolute; z-index: 1060; left: 0; right: 0; top: 100%; max-height: 320px; overflow-y: auto; margin-top: 2px; }
.h-picker-list .list-group-item { font-size: .875rem; }
.h-picker-detail { font-size: .75rem; opacity: .7; }
.h-picker input[type=search]::-webkit-search-cancel-button { display: none; }

/* Birim ağacı */
.h-tree-indent { display: inline-block; border-left: 1px solid rgba(127, 127, 127, .35); height: 1.1em; vertical-align: middle; margin-right: .5rem; }

/* Haftalık yemek tablosu */
.h-meal-table td { min-width: 170px; vertical-align: top; }
.h-meal-table ul { padding-left: 1rem; margin: 0; }
.h-meal-table .h-today { background: rgba(172, 144, 88, .12); }