/* Merihe Panel — temel: yazı tipleri (projeye gömülü), renk tokenları (marka yeşil/altın DEĞİŞMEDİ), sıfırlama, kabuk.
   Görsel dil (v3, 2026-11-06 — TASARIM-PLANI.md): salonun gerçek fotoğrafı çok bulanık ve koyu yeşil tülle tüm uygulamanın
   arkasında; sol menü salonun "penceresi" (fotoğraf daha seçik); menü/üst çubuk/pencereler buzlu cam, kartlar yarı saydam
   yeşil cam + üstte ince altın ışık; başlık ve büyük sayılar Poppins SemiBold, metin Inter; tek vurgu altın. */

/* Poppins (sitenin fontu): başlık, büyük sayı, marka — 500/600/700, latin + latin-ext */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Inter (latin + latin-ext: Türkçe karakterler) — değişken ağırlık 100–900 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokenlar: çıplak :root = koyu marka teması ---------- */
:root {
  --green-950: #081C12; --green-900: #0C2818; --green-800: #123420; --green-700: #1B4028; --green-600: #2A5738;
  --gold-600: #A9843F; --gold-500: #C6A15B; --gold-300: #E4CE9B; --gold-100: #F2E7CB;
  --cream: #F6F1E4; --cream-dim: #D9D2BE;

  color-scheme: dark;
  --bg: #06150D;
  --rail-bg: #0A2217;            /* cam yüzeylerin (menü, pencere) dolgu tonu */
  --surface: #0D2919;
  --surface-2: #123420;
  --surface-3: #18402A;
  --sunken: rgba(0, 0, 0, 0.22);
  --card-bg: rgba(13, 38, 25, 0.58);            /* yeşil cam (zemin zaten bulanık: canlı blur gerekmez) */
  --card-bg-2: rgba(246, 241, 228, 0.06);
  --card-line: rgba(246, 241, 228, 0.09);
  --card-line-2: rgba(246, 241, 228, 0.15);
  --card-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.85), 0 2px 6px -2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 238, 205, 0.07);
  --card-sheen: linear-gradient(180deg, rgba(255, 240, 210, 0.045), rgba(255, 240, 210, 0) 42%);
  --glass: rgba(9, 30, 19, 0.62);               /* buzlu cam: menü, üst çubuk, pencere */
  --glass-strong: rgba(8, 26, 17, 0.86);
  --glass-blur: blur(22px) saturate(140%);
  --gold-line: linear-gradient(90deg, rgba(228, 206, 155, 0), rgba(228, 206, 155, 0.55), rgba(228, 206, 155, 0));
  --amb-tint: linear-gradient(180deg, rgba(5, 18, 11, 0.70), rgba(5, 18, 11, 0.82) 55%, rgba(4, 14, 9, 0.9));
  --amb-base: linear-gradient(160deg, #08200F 0%, #04160C 50%, #030F08 100%);
  --fl-1: rgba(34, 140, 88, 0.50);    /* zümrüt */
  --fl-2: rgba(214, 176, 100, 0.24);  /* altın */
  --fl-3: rgba(14, 106, 92, 0.46);    /* derin camgöbeği-yeşil */
  --fl-4: rgba(170, 130, 70, 0.12);   /* bakır-altın (az: yeşille karışıp çamurlaşmasın) */
  --fl-5: rgba(228, 206, 155, 0.08);  /* şampanya ışığı */
  --fl-rib: rgba(236, 214, 160, 0.13); /* ipek şerit */
  --amb-veil: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 40%, rgba(2, 10, 6, 0.55) 100%);
  --amb-glow: radial-gradient(ellipse 60% 45% at 78% -8%, rgba(198, 161, 91, 0.16), transparent 70%), radial-gradient(ellipse 50% 50% at 8% 108%, rgba(46, 120, 76, 0.18), transparent 70%);
  --rail-tint: linear-gradient(180deg, rgba(6, 22, 14, 0.52) 0%, rgba(6, 22, 14, 0.70) 45%, rgba(5, 18, 11, 0.90) 100%);
  --text: #F6F1E4;
  --text-2: rgba(246, 241, 228, 0.72);
  --text-3: rgba(246, 241, 228, 0.5);
  --text-4: rgba(246, 241, 228, 0.38);
  --accent: #C6A15B;
  --accent-text: #E4CE9B;
  --on-accent: #081C12;
  --line: rgba(246, 241, 228, 0.10);
  --line-strong: rgba(246, 241, 228, 0.18);
  --line-soft: rgba(246, 241, 228, 0.06);
  --focus: #E4CE9B;
  --scrim: rgba(3, 12, 8, 0.7);
  --hover: rgba(246, 241, 228, 0.05);
  --today-bg: rgba(198, 161, 91, 0.14);
  --accent-glow: 0 2px 8px rgba(198, 161, 91, 0.16), 0 10px 32px rgba(198, 161, 91, 0.22);

  /* durum / anlam renkleri: açık tonlu metin + %15 zemin (referans dil) */
  --ok: #B9E8C8;      --ok-bg: rgba(94, 180, 125, 0.16);   --ok-line: rgba(185, 232, 200, 0.35);  --ok-solid: #5EB47D;
  --warn: #F7E3A8;    --warn-bg: rgba(232, 185, 106, 0.16); --warn-line: rgba(247, 227, 168, 0.35); --warn-solid: #E8B96A;
  --danger: #FFB9AB;  --danger-bg: rgba(226, 106, 88, 0.17); --danger-line: rgba(255, 185, 171, 0.4); --danger-solid: #E26A58;
  --info: #C4E3FF;    --info-bg: rgba(120, 170, 205, 0.16); --info-line: rgba(196, 227, 255, 0.35); --info-solid: #78AACD;
  --purple: #D9CCFA;  --purple-bg: rgba(170, 145, 230, 0.17); --purple-line: rgba(217, 204, 250, 0.38); --purple-solid: #AA91E6;
  --muted-fg: rgba(246, 241, 228, 0.6); --muted-bg: rgba(246, 241, 228, 0.07); --muted-line: rgba(246, 241, 228, 0.16);
  --today: #E4CE9B; /* "bugün" vurgusu: altın */

  --rail-text: rgba(246, 241, 228, 0.68);
  --page-glow: rgba(198, 161, 91, 0.07);

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Poppins', 'Inter', system-ui, sans-serif;
  --radius: 16px; --radius-sm: 10px; --radius-lg: 20px; --radius-btn: 8px;
  --rail-w: 264px;
  --topbar-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms; --t-mid: 260ms; --t-slow: 450ms;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #EFE9DA;
  --rail-bg: #FBF7EE;
  --surface: #FFFDF7;
  --surface-2: #F6F0DF;
  --surface-3: #EDE4CB;
  --sunken: rgba(18, 40, 27, 0.04);
  --card-bg: rgba(255, 253, 247, 0.82);
  --card-bg-2: rgba(18, 40, 27, 0.04);
  --card-line: rgba(18, 40, 27, 0.10);
  --card-line-2: rgba(18, 40, 27, 0.16);
  --card-shadow: 0 18px 40px -28px rgba(18, 40, 27, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 40%);
  --glass: rgba(251, 247, 238, 0.72);
  --glass-strong: rgba(251, 247, 238, 0.94);
  --gold-line: linear-gradient(90deg, rgba(169, 132, 63, 0), rgba(169, 132, 63, 0.5), rgba(169, 132, 63, 0));
  --amb-tint: linear-gradient(180deg, rgba(243, 238, 226, 0.86), rgba(239, 233, 218, 0.93));
  --amb-base: linear-gradient(160deg, #F6F1E5 0%, #EFE8D8 55%, #E9E1CE 100%);
  --fl-1: rgba(120, 170, 130, 0.30);
  --fl-2: rgba(214, 178, 108, 0.32);
  --fl-3: rgba(150, 190, 165, 0.28);
  --fl-4: rgba(228, 196, 140, 0.30);
  --fl-5: rgba(255, 250, 238, 0.55);
  --fl-rib: rgba(214, 178, 108, 0.22);
  --amb-veil: none;
  --amb-glow: radial-gradient(ellipse 60% 45% at 78% -8%, rgba(198, 161, 91, 0.22), transparent 70%);
  --rail-tint: linear-gradient(180deg, rgba(251, 247, 238, 0.66), rgba(251, 247, 238, 0.86) 50%, rgba(251, 247, 238, 0.95));
  --text: #12281B;
  --text-2: rgba(18, 40, 27, 0.75);
  --text-3: rgba(18, 40, 27, 0.55);
  --text-4: rgba(18, 40, 27, 0.42);
  --accent: #A9843F;
  --accent-text: #7A5C1E;
  --on-accent: #081C12;
  --line: rgba(18, 40, 27, 0.12);
  --line-strong: rgba(18, 40, 27, 0.22);
  --line-soft: rgba(18, 40, 27, 0.07);
  --focus: #1B4028;
  --scrim: rgba(8, 28, 18, 0.5);
  --hover: rgba(18, 40, 27, 0.05);
  --today-bg: rgba(169, 132, 63, 0.16);
  --accent-glow: 0 2px 8px rgba(169, 132, 63, 0.14), 0 10px 28px rgba(169, 132, 63, 0.18);
  --ok: #1E6B40;     --ok-bg: rgba(30, 107, 64, 0.10);   --ok-line: rgba(30, 107, 64, 0.3);   --ok-solid: #2E8A55;
  --warn: #85560A;   --warn-bg: rgba(181, 122, 20, 0.14); --warn-line: rgba(133, 86, 10, 0.35); --warn-solid: #D39A2A;
  --danger: #B0392A; --danger-bg: rgba(176, 57, 42, 0.10); --danger-line: rgba(176, 57, 42, 0.32); --danger-solid: #D04A3A;
  --info: #245D85;   --info-bg: rgba(36, 93, 133, 0.10);  --info-line: rgba(36, 93, 133, 0.3);  --info-solid: #3E7FAE;
  --purple: #5B45B8; --purple-bg: rgba(91, 69, 184, 0.10); --purple-line: rgba(91, 69, 184, 0.32); --purple-solid: #7A66CF;
  --muted-fg: rgba(18, 40, 27, 0.62); --muted-bg: rgba(18, 40, 27, 0.06); --muted-line: rgba(18, 40, 27, 0.16);
  --today: #A9843F;
  --rail-text: rgba(18, 40, 27, 0.7);
  --page-glow: rgba(198, 161, 91, 0.14);
}

/* ---------- Sıfırlama ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.no-scroll, html.no-scroll body { overflow: hidden; }
body {
  min-height: 100vh; min-height: 100dvh;
  font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.5;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv11' 1;
  color: var(--text); background-color: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
img, svg { display: block; max-width: 100%; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--gold-500); color: var(--green-950); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--gold-300); color: var(--green-950); padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }

.ic { display: inline-flex; width: var(--s, 16px); height: var(--s, 16px); flex: none; }
.ic svg { width: 100%; height: 100%; }
.ic.spin svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.muted { color: var(--text-3); }
.soft { color: var(--text-2); }
.grow { flex: 1 1 auto; min-width: 0; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }

/* ---------- Salon zemini: gerçek fotoğraf, önceden bulanık, çok yavaş nefes alır ---------- */
/* İçerik zemini: akışkan ışık. Kütleler radial-gradient (bulanıklık filtresi yok, kendiliğinden yumuşak);
   yalnız transform ile hareket eder → ekran kartında çalışır, işlemciyi yormaz. Fotoğraf yalnız sol menüde. */
.amb { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--amb-base); }
.amb .fl { position: absolute; display: block; border-radius: 50%; will-change: transform; animation: var(--fa) ease-in-out infinite alternate; }
.amb .f1 { width: 78vmax; height: 62vmax; left: -18vmax; top: -26vmax; background: radial-gradient(closest-side, var(--fl-1), transparent); --fa: fl-a 46s; }
.amb .f2 { width: 64vmax; height: 54vmax; right: -16vmax; top: -22vmax; background: radial-gradient(closest-side, var(--fl-2), transparent); --fa: fl-b 58s; }
.amb .f3 { width: 72vmax; height: 60vmax; right: -24vmax; bottom: -30vmax; background: radial-gradient(closest-side, var(--fl-3), transparent); --fa: fl-c 52s; }
.amb .f4 { width: 56vmax; height: 44vmax; left: 6vmax; bottom: -24vmax; background: radial-gradient(closest-side, var(--fl-4), transparent); --fa: fl-d 64s; }
.amb .f5 { width: 40vmax; height: 30vmax; left: 34%; top: 26%; background: radial-gradient(closest-side, var(--fl-5), transparent); --fa: fl-e 40s; }
.amb .f6 { width: 130vmax; height: 16vmax; left: -20vmax; top: 38%; background: radial-gradient(closest-side, var(--fl-rib), transparent); --fa: fl-rib 72s; }
.amb::after { content: ''; position: absolute; inset: 0; background: var(--amb-veil); }
@keyframes fl-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vw, 10vh, 0) scale(1.18) rotate(8deg); } }
@keyframes fl-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-18vw, 14vh, 0) scale(0.9) rotate(-10deg); } }
@keyframes fl-c { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-12vw, -16vh, 0) scale(1.2) rotate(6deg); } }
@keyframes fl-d { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(20vw, -8vh, 0) scale(0.92); } }
@keyframes fl-rib { from { transform: translate3d(-6vw, 8vh, 0) rotate(-16deg) scaleY(0.8); } to { transform: translate3d(8vw, -10vh, 0) rotate(-8deg) scaleY(1.3); } }
@keyframes fl-e { from { transform: translate3d(-8vw, 6vh, 0) scale(0.85); opacity: 0.5; } to { transform: translate3d(10vw, -6vh, 0) scale(1.15); opacity: 1; } }

/* ---------- Açılış ---------- */
.boot { display: grid; place-items: center; min-height: 100dvh; background: radial-gradient(ellipse 50% 40% at 50% 45%, rgba(198, 161, 91, 0.10), transparent 70%), var(--bg); }
.boot img { width: 120px; filter: drop-shadow(0 8px 30px rgba(198, 161, 91, 0.35)); animation: boot-in 1.1s var(--ease-out) both; }
@keyframes boot-in { from { opacity: 0; transform: scale(0.92); filter: blur(10px) drop-shadow(0 8px 30px rgba(198, 161, 91, 0)); } to { opacity: 1; transform: none; } }

/* ---------- Kabuk: sol menü (salon penceresi) + üst çubuk ---------- */
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100dvh; }
.rail {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  color: var(--rail-text); background: var(--glass-strong);
}
/* menünün arkasında salon fotoğrafı (az bulanık) + koyu tül; çok yavaş kayar */
.rail-photo { position: absolute; inset: -6%; z-index: -2; background: url('../img/salon-rail.jpg') 42% 58% / cover no-repeat; animation: rail-drift 48s ease-in-out infinite alternate; will-change: transform; }
.rail::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--rail-tint); }
.rail::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: linear-gradient(180deg, rgba(228, 206, 155, 0), rgba(228, 206, 155, 0.35) 30%, rgba(228, 206, 155, 0.12) 75%, rgba(228, 206, 155, 0)); }
@keyframes rail-drift { from { transform: scale(1.02) translate3d(0, -1.5%, 0); } to { transform: scale(1.1) translate3d(-2%, 1.5%, 0); } }
.rail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.rail-scroll::-webkit-scrollbar { display: none; }
.rail-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 20px 18px; position: relative; text-align: center; }
.rail-brand img { width: 92px; height: auto; filter: drop-shadow(0 6px 22px rgba(198, 161, 91, 0.35)); transition: transform var(--t-slow) var(--ease-out), filter var(--t-slow); }
.rail-brand:hover img { transform: scale(1.03); filter: drop-shadow(0 8px 28px rgba(198, 161, 91, 0.5)); }
.rail-brand::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px; background: var(--gold-line); }
.brand-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: 0.2em; color: var(--text); line-height: 1.1; }
.brand-sub { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); opacity: 0.8; margin-top: 4px; }
.nav { padding: 10px 0 14px; position: relative; }
.nav-group { padding: 4px 0 2px; }
.nav-group-label { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-4); padding: 14px 26px 6px; }
/* aktif sayfa işareti: sayfalar arasında kayarak gider */
.nav-glow { position: absolute; left: 12px; right: 12px; top: 0; height: 46px; border-radius: 13px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(198, 161, 91, 0.20), rgba(198, 161, 91, 0.06) 70%, rgba(198, 161, 91, 0.02));
  box-shadow: inset 0 0 0 1px rgba(228, 206, 155, 0.22), 0 10px 26px -14px rgba(198, 161, 91, 0.55);
  transition: transform 0.42s var(--ease-out), opacity 0.2s; }
.nav-glow::before { content: ''; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--gold-300), var(--gold-600)); box-shadow: 0 0 12px rgba(228, 206, 155, 0.7); }
.nav-glow.is-on { opacity: 1; }
.nav-item {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 10px 0 8px; margin: 1px 12px;
  border-radius: 13px; font-size: 14px; font-weight: 500; color: var(--rail-text); transition: background var(--t-fast), color var(--t-fast);
}
.nav-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--text-3);
  background: rgba(246, 241, 228, 0.05); border: 1px solid rgba(246, 241, 228, 0.08);
  transition: color var(--t-mid), background var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid) var(--ease-out); }
.nav-ic .ic { --s: 17px; }
.nav-item:hover { color: var(--text); background: rgba(246, 241, 228, 0.045); }
.nav-item:hover .nav-ic { color: var(--accent-text); border-color: rgba(228, 206, 155, 0.3); transform: translateY(-1px); }
.nav-item[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav-item[aria-current="page"] .nav-ic { color: var(--green-950); border-color: transparent;
  background: linear-gradient(135deg, var(--gold-100), var(--gold-300) 35%, var(--gold-500) 75%, var(--gold-600));
  box-shadow: 0 6px 16px -6px rgba(198, 161, 91, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.nav-badge { margin-left: auto; min-width: 22px; padding: 0 7px; height: 20px; border-radius: 999px; text-align: center; font-size: 11px; font-weight: 700; line-height: 20px; color: #fff; background: linear-gradient(180deg, #EA7C69, var(--danger-solid)); box-shadow: 0 4px 12px -4px rgba(226, 106, 88, 0.8); }
.nav-badge.is-today { color: var(--green-950); background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); box-shadow: 0 4px 12px -4px rgba(198, 161, 91, 0.8); }
.rail-foot { display: flex; align-items: center; gap: 10px; margin: 0 12px 14px; padding: 10px 12px; border-radius: 13px; font-size: 12px; color: var(--text-3);
  background: rgba(246, 241, 228, 0.05); border: 1px solid rgba(246, 241, 228, 0.08); }
.rail-foot b { display: block; font-weight: 600; font-size: 12.5px; color: var(--text); line-height: 1.25; }
.rail-foot .ic { color: var(--accent-text); flex: none; }
.rail-scrim { display: none; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 28px;
  background: linear-gradient(180deg, rgba(6, 21, 13, 0.72), rgba(6, 21, 13, 0.5)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(246, 241, 228, 0.08), rgba(228, 206, 155, 0.22) 50%, rgba(246, 241, 228, 0.04)); }
.topbar .menu-btn { display: none; }
.top-head { display: flex; flex-direction: column; min-width: 0; }
.top-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); line-height: 1.2; }
.top-date { font-size: 11.5px; color: var(--text-3); text-transform: capitalize; }
.top-spacer { flex: 1; }
.top-user { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 10px; font-size: 13px; border-radius: 12px; transition: background var(--t-fast); }
.top-user:hover { background: var(--hover); }
.top-user .who { text-align: right; white-space: nowrap; }
.top-user b { display: block; font-weight: 600; line-height: 1.2; color: var(--text); }
.top-user .who span { display: block; font-size: 11px; color: var(--text-3); line-height: 1.2; }
/* dar masaüstü (≈1000-1180 px): başlık ve ad tek satırda kalır; yer gerekirse önce arama kutusu daralır */
.top-title, .top-date { white-space: nowrap; }
.top-head { flex: none; }
.qs { flex: 0 1 420px; width: auto; min-width: 160px; }
@media (max-width: 1180px) { .top-user .who span { display: none; } }
.top-user .avatar { background: linear-gradient(135deg, rgba(228, 206, 155, 0.25), rgba(198, 161, 91, 0.08)); border-color: rgba(228, 206, 155, 0.35); }

/* hızlı arama (üst çubuk) */
.qs { position: relative; }
.qs-box { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; border-radius: 12px; color: var(--text-3);
  background: rgba(246, 241, 228, 0.06); border: 1px solid rgba(246, 241, 228, 0.10); transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
.qs-box:focus-within { border-color: rgba(228, 206, 155, 0.5); background: rgba(246, 241, 228, 0.09); box-shadow: 0 0 0 4px rgba(198, 161, 91, 0.12); }
.qs-box input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: none; font-size: 13.5px; color: var(--text); }
.qs-box input::placeholder { color: var(--text-4); }
.qs-kbd { font-size: 11px; font-weight: 600; color: var(--text-3); padding: 2px 7px; border-radius: 6px; border: 1px solid var(--card-line-2); background: var(--card-bg-2); }
.qs-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 8px); padding: 6px; border-radius: 14px; max-height: 380px; overflow-y: auto;
  background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--card-line-2);
  box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.85); animation: pop-in var(--t-mid) var(--ease-out) both; }
.qs-hit { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: left; transition: background var(--t-fast); }
.qs-hit:hover, .qs-hit.is-active { background: rgba(198, 161, 91, 0.12); }
.qs-hit .meta { flex: 1; min-width: 0; }
.qs-hit b { display: block; font-weight: 600; font-size: 13.5px; }
.qs-hit small { display: block; color: var(--text-3); font-size: 12px; }
.qs-empty { padding: 12px; color: var(--text-3); font-size: 13px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

.page { width: 100%; max-width: 1320px; margin: 0 auto; padding: 28px 32px 64px; outline: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-title { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--text); }
.page-sub { font-size: 14px; color: var(--text-3); margin-top: 5px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Hareket sistemi: tek ritim (160 / 260 / 450 ms), bulanıktan netleşerek giriş ---------- */
.view-enter { animation: view-in 0.5s var(--ease-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
/* kartlar sırayla (--i) gelir */
.rise { animation: rise 0.55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.99); } to { opacity: 1; transform: none; } }
/* uygulamaya ilk giriş: zemin açılır, menü soldan, içerik bulanıktan */
.app.is-arriving .rail { animation: arrive-rail 0.9s var(--ease-out) both; }
.app.is-arriving .topbar { animation: arrive-top 0.8s 0.15s var(--ease-out) both; }
.amb.is-arriving { animation: amb-arrive 1.6s var(--ease-out) both; }
@keyframes arrive-rail { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes arrive-top { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes amb-arrive { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; z-index: 90; left: 0; top: 0; width: min(86vw, var(--rail-w)); transform: translateX(-102%); transition: transform 0.32s var(--ease-out); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65); }
  .rail.is-open { transform: none; }
  .rail-scrim.is-open { display: block; position: fixed; inset: 0; z-index: 80; background: var(--scrim); backdrop-filter: blur(4px); animation: fade-in var(--t-mid) both; }
  .topbar { padding: 0 12px; gap: 6px; }
  .topbar .menu-btn { display: inline-grid; }
  .top-user .who { display: none; }
  .qs { width: auto; flex: 1; min-width: 0; }
  .qs-box { min-width: 0; }
  .top-spacer { display: none; }
  .qs-kbd { display: none; }
  .top-head { display: none; }
  .page { padding: 18px 14px 48px; }
  .page-title { font-size: 23px; }
}
@media (max-width: 420px) { .page { padding-inline: 12px; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* açık tema: cam krem, zemin açık tül */
:root[data-theme="light"] .topbar { background: linear-gradient(180deg, rgba(251, 247, 238, 0.85), rgba(251, 247, 238, 0.65)); }
:root[data-theme="light"] .nav-item[aria-current="page"] .nav-ic { color: #fff; }
:root[data-theme="light"] .nav-ic { background: rgba(18, 40, 27, 0.04); border-color: rgba(18, 40, 27, 0.08); }
:root[data-theme="light"] .rail-foot, :root[data-theme="light"] .qs-box { background: rgba(255, 255, 255, 0.55); border-color: rgba(18, 40, 27, 0.10); }

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

/* ---------- Hafif mod (zayıf cihaz / kullanıcı seçimi) — perf.js ----------
   Canlı cam bulanıklığı yerine aynı tonda daha dolu yüzey; sürekli hareketler durur; sayfa geçişi bulanıksız.
   Önceden bulanıklaştırılmış görseller (salon, ışık zemini) aynen kalır: görünüm neredeyse değişmez. */
.fx-lite .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, rgba(6, 21, 13, 0.94), rgba(6, 21, 13, 0.88)); }
.fx-lite .qs-list, .fx-lite .menu, .fx-lite .toast, .fx-lite .sheet, .fx-lite .sync-pill, .fx-lite .auth-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.fx-lite .qs-list, .fx-lite .menu, .fx-lite .toast { background: #0B2418; }
.fx-lite .sheet { background: #0A2217; }
.fx-lite .auth-card { background: linear-gradient(180deg, rgba(255, 240, 210, 0.06), rgba(255, 240, 210, 0.01) 40%), rgba(7, 24, 15, 0.9); }
.fx-lite .sheet-backdrop, .fx-lite .rail-scrim.is-open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(3, 12, 8, 0.72); }
.fx-lite .amb .fl, .fx-lite .rail-photo, .fx-lite .dust, .fx-lite .bk, .fx-lite .logo-sheen { animation: none !important; }
.fx-lite .dust { display: none; }
.fx-lite .view-enter { animation-name: view-in-lite; }
@keyframes view-in-lite { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fx-lite .is-lift::after, .fx-lite .btn-primary::after { display: none; }
:root[data-theme="light"].fx-lite .topbar { background: rgba(246, 241, 229, 0.95); }
:root[data-theme="light"].fx-lite .qs-list, :root[data-theme="light"].fx-lite .menu, :root[data-theme="light"].fx-lite .toast, :root[data-theme="light"].fx-lite .sheet { background: #FBF8F1; }
/* sekme arka plandayken sonsuz döngüler durur */
.is-hidden-tab .amb .fl, .is-hidden-tab .rail-photo, .is-hidden-tab .dust i, .is-hidden-tab .bk, .is-hidden-tab .logo-sheen { animation-play-state: paused !important; }