/* ShopTrend V6 · tasarım tokenları (tek kaynak)
   Yerleşim kavramı: "Pazar ışıkları" — canlı veri gece camında (iki temada da koyu), okuma yüzeyleri temaya göre; ışık = etkinlik.
   Koyu önce: bare :root koyu, açık tema prefers-color-scheme:light (data-theme=dark değilse) ve [data-theme=light].
   Renk anlamı (İ4): köz = bu mağaza / şimdi · turkuaz = aralık, bağlam · nane = büyüme · gül = düşüş · amber = uyarı. */

:root{
  /* --- renk: zemin ve yüzeyler (ışıkla yükselti: üstteki yüzey daha açık) --- */
  --night:#050A09;            /* gece camı: canlı sahneler, her temada */
  --bg:#070D0C;
  --s1:#0C1513;               /* kart */
  --s2:#111C19;               /* yükseltilmiş / üzerine gelince */
  --s3:#172521;               /* seçili, giriş alanı */
  --line:rgba(190,255,235,.075);
  --line-2:rgba(190,255,235,.14);
  --ink:#ECF3F0;              /* 17,4:1 */
  --ink-2:#A9B9B3;            /* 9,6:1 */
  --ink-3:#7D8E87;            /* 5,7:1 — en soluk metin, AA */
  /* --- renk: anlam --- */
  --teal:#2EC4CF;  --teal-2:#7FE3EA;  --teal-w:rgba(46,196,207,.14);
  --ember:#FF8A57; --ember-2:#FFB08C; --ember-w:rgba(255,138,87,.16);
  --mint:#7BE3A6;  --mint-w:rgba(123,227,166,.14);
  --rose:#F49AB8;  --rose-w:rgba(244,154,184,.14);
  --amber:#F2C14E; --amber-w:rgba(242,193,78,.14);
  --focus:#A5A2FF;
  --on-teal:#04211F;          /* turkuaz düğme üstü metin, 8:1 */
  --logo-ink:#FFFFFF;         /* TikTok/X gibi tek renkli logoların ana rengi */
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -24px rgba(0,0,0,.6);

  /* --- tip (İ6: 1,25 oran) --- */
  --f-display:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --f-ui:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-12:12px; --t-14:14px; --t-16:16px; --t-20:20px; --t-25:25px; --t-31:31px;
  --t-39:39px; --t-49:49px; --t-61:61px; --t-76:76px; --t-96:96px;
  --display-stretch:112%;

  /* --- boşluk (4 tabanlı) --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* --- biçim --- */
  --r-s:8px; --r-m:12px; --r-l:18px; --r-xl:28px; --r-pill:999px;
  --content:1200px; --gutter:max(16px,env(safe-area-inset-left,0px));

  /* --- hareket (İ5) --- */
  --ease-ui:cubic-bezier(.2,.9,.25,1.05);    /* yay: hafif aşma */
  --ease-data:cubic-bezier(.16,1,.3,1);      /* yumuşak varış */
  --d-ui:180ms; --d-panel:260ms; --d-data:600ms; --d-enter:900ms;
  --halflife-h:6;                            /* ışık sönümü yarı ömrü (saat) */

  color-scheme:dark;
}

@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){
  --bg:#F3F6F4; --s1:#FFFFFF; --s2:#F7FAF8; --s3:#E9EFEC;
  --line:rgba(10,40,30,.09); --line-2:rgba(10,40,30,.16);
  --ink:#0A1412; --ink-2:#3D4D47; --ink-3:#56665F;
  --teal:#08727A; --teal-2:#0A5F66; --teal-w:rgba(8,114,122,.10);
  --ember:#B03C0D; --ember-2:#8E300A; --ember-w:rgba(176,60,13,.10);
  --mint:#11733F; --mint-w:rgba(17,115,63,.10);
  --rose:#B0245A; --rose-w:rgba(176,36,90,.10);
  --amber:#8A5A00; --amber-w:rgba(138,90,0,.10);
  --focus:#5B54E8; --on-teal:#FFFFFF; --logo-ink:#000000;
  --shadow:0 1px 2px rgba(10,30,25,.06), 0 18px 40px -24px rgba(10,30,25,.25);
  color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#F3F6F4; --s1:#FFFFFF; --s2:#F7FAF8; --s3:#E9EFEC;
  --line:rgba(10,40,30,.09); --line-2:rgba(10,40,30,.16);
  --ink:#0A1412; --ink-2:#3D4D47; --ink-3:#56665F;
  --teal:#08727A; --teal-2:#0A5F66; --teal-w:rgba(8,114,122,.10);
  --ember:#B03C0D; --ember-2:#8E300A; --ember-w:rgba(176,60,13,.10);
  --mint:#11733F; --mint-w:rgba(17,115,63,.10);
  --rose:#B0245A; --rose-w:rgba(176,36,90,.10);
  --amber:#8A5A00; --amber-w:rgba(138,90,0,.10);
  --focus:#5B54E8; --on-teal:#FFFFFF; --logo-ink:#000000;
  --shadow:0 1px 2px rgba(10,30,25,.06), 0 18px 40px -24px rgba(10,30,25,.25);
  color-scheme:light;
}

/* Gece camı: canlı veri sahnesi her temada aynı koyu değerleri kullanır (İ1: ışık karanlıkta okunur). */
.night{
  --bg:#050A09; --s1:#0B1412; --s2:#101B18; --s3:#16231F;
  --line:rgba(190,255,235,.08); --line-2:rgba(190,255,235,.15);
  --ink:#ECF3F0; --ink-2:#A9B9B3; --ink-3:#7D8E87;
  --teal:#2EC4CF; --teal-2:#7FE3EA; --teal-w:rgba(46,196,207,.14);
  --ember:#FF8A57; --ember-2:#FFB08C; --ember-w:rgba(255,138,87,.16);
  --mint:#7BE3A6; --mint-w:rgba(123,227,166,.14);
  --rose:#F49AB8; --rose-w:rgba(244,154,184,.14);
  --amber:#F2C14E; --amber-w:rgba(242,193,78,.14);
  --focus:#A5A2FF; --on-teal:#04211F; --logo-ink:#FFFFFF;
  --shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 60px -30px rgba(0,0,0,.7);
  color-scheme:dark;
  background:var(--bg); color:var(--ink);
}