/* =========================
   KUI - Kodesel UI System
   ========================= */

/* ===== DARK THEME (DEFAULT) ===== */

:root {
  /* =========================
     COLORS
     ========================= */

  --bg-main: #10262f;
  --bg-main-transparent: #335867a0;
  --bg-header: #10262f;

  --bg-row: #214e61;
  --bg-row-selected: #2a5161;
  --bg-row-hover: #214e6175;


  --bg-surface: #183845;

  --bg-header-pw: #10262f;


  --bg-menubutton: #1c4758;
  --bg-card: #183845;

  --bg-card-hover: #1d4655;
  --bg-input: #1d4655;

  --bg-modal: #102832;

  --bg-button: #2a657d;
  --bg-button-hover:#1e576eab;
  --bg-button-hover-soft: #78c6d5;
  

  --bg-button-active:#f1f0f0;
  --text-button-active:#201f1f;

  --bg-success: #258e4b;
  --bg-warning: #72541a;
  --bg-danger: #9c3628;

  --text-success: #24c15e;
  --text-warning: #b5822b;
  --text-danger: #c53d2e;

  --text-main: #e6edf3;
  --text-secondary: #c9d1d9;
  --text-label: #c9d1d9;
  --text-button: #c9d1d9;
  --text-muted: #9fb3bd;

  --border-soft: #ffffff45;
  --border-medium: #ffffff8b;
  --border-strong: #ffffff;

  --select-bg: #14313d;
  --select-option-bg: #1a4254;
  --select-option-hover: #2d5563;

  --bg-formheader: #122c36;
  --bg-formbody: #153844;
  --bg-forminput: #1c4758;

  /* =========================
     HEADER
     ========================= */

  --header-height: 70px;

  /* =========================
     APP1 PWA / SAFE AREA
     ========================= */

  --app1-viewport-height: 100vh;

  --app1-device-safe-top:
    env(safe-area-inset-top, 0px);

  --app1-device-safe-right:
    env(safe-area-inset-right, 0px);

  --app1-device-safe-bottom:
    env(safe-area-inset-bottom, 0px);

  --app1-device-safe-left:
    env(safe-area-inset-left, 0px);

  --app1-layout-top-gap: 0px;
  --app1-layout-bottom-gap: 8px;

  --pwa-safe-area-bg:
    var(--bg-header-pw);

  /* =========================
     Z-INDEX
     ========================= */

  --zindex-cart: 900;
  --zindex-sidemenu: 900;
  --zindex-modal: 1000;
  --zindex-modalextra: 1001;
  --zindex-alert: 1100;

  /* =========================
     APP1 LAYOUT
     ========================= */

  --app1-layout-max-width: 1500px;

  /*
   * Yatay kullanımda kullanılabilir ekran genişliği.
   * Sağ ve sol fiziksel safe-area değerleri bu alandan çıkarılır.
   */
  --app1-layout-available-width:
    calc(
      100vw -
      var(--app1-device-safe-left) -
      var(--app1-device-safe-right)
    );

  --app1-layout-width:
    min(
      var(--app1-layout-available-width),
      var(--app1-layout-max-width)
    );

  /*
   * Layout, safe-area sınırları içinde ortalanır.
   */
  --app1-layout-left:
    calc(
      var(--app1-device-safe-left) +
      (
        var(--app1-layout-available-width) -
        var(--app1-layout-width)
      ) / 2
    );

  --app1-side-menu-width:
    calc(
      var(--app1-layout-width) *
      0.24
    );

  --app1-main-width:
    calc(
      var(--app1-layout-width) *
      0.38
    );

  --app1-cart-width:
    calc(
      var(--app1-layout-width) *
      0.38
    );

  /* =========================
     PNG FILTER
     Kullanım:
     filter: var(--png-bg);
     ========================= */

  --png-bg: none;

  /* =========================
     SPACING
     ========================= */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  /* =========================
     RADIUS
     ========================= */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-round: 999px;

  /* =========================
     SHADOW
     ========================= */

  --shadow-soft:
    0 0 4px 0
    rgba(0, 0, 0, 0.18);

  --shadow-medium:
  0px 0px 11px rgba(0, 0, 0, 0.35);

  --shadow-heavy:
   1px 3px 56px rgba(0, 0, 0, 0.45);

  --shadow-button:
    0 0 19px 3px
    rgba(0, 0, 0, 0.45);

  /* =========================
     TRANSITION
     ========================= */

  --transition-fast: none;
  --transition-normal: none;

  /* =========================
     FONT
     ========================= */

  --font-main:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

/* ===== LIGHT THEME ===== */

[data-theme="light"] {
  /* =========================
     COLORS
     ========================= */

  --bg-main: #f5f7fa;
  --bg-main-transparent: #f5f7faa0;
  --bg-header: #bcbcbc;

  --bg-surface: #eeeeee;
  --bg-header-pw: #bcbcbc;

  --bg-row: #e7e7e7;
  --bg-row-selected:#d2d2d2;
  --bg-row-hover: #e7e7e76b;

  --bg-menubutton: #a1dad5;
  --bg-card: #ffffff;

  --bg-card-hover: #ced5d8a1;
  --bg-input: #f0f3f5;

  --bg-modal: #ffffff;

  --bg-button: #a1dad5;
  --bg-button-hover: #918e8e64;
  --bg-button-hover-soft: #bec6c8;


  --bg-button-active:#3d3c3c;
  --text-button-active:#d1cfcf;

  --bg-success: rgb(128 221 162);
  --bg-warning: #ffbb45;
  --bg-danger: #fd8977;

  --text-success: rgb(33 164 81);
  --text-warning: #d99011;
  --text-danger: rgb(233 34 11);

  --text-main: #1a1a1a;
  --text-secondary: #504f4f;
  --text-label: #5c5c5c;
  --text-button: #1a1a1a;
  --text-muted: #7a7a7a;

  --border-soft: #a6a4a4;
  --border-medium: #5f5d5d;
  --border-strong: #1a1919e0;

  --select-bg: #ffffff;
  --select-option-bg: #f1f1f1;
  --select-option-hover: #e9e9e9;

  --bg-formheader: #d0d0d0;
  --bg-formbody: #d0d0d0;
  --bg-forminput: #ffffff;

  /* =========================
     PNG FILTER
     ========================= */

  --png-bg:
    invert(1)
    brightness(0);

  /* =========================
     PWA SAFE AREA COLOR
     ========================= */

  --pwa-safe-area-bg:
    var(--bg-header-pw);
}

/* ===== BASE ===== */

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

html,
body {
  width: 100%;
  min-width: 0;

  margin: 0;

  background-color:
    var(--pwa-safe-area-bg, var(--bg-header-pw));

  color:
    var(--text-main);

  font-family:
    var(--font-main);

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  min-height:
    var(--app1-viewport-height);
}

body {
  min-height:
    var(--app1-viewport-height);

  padding-top:
    var(--header-height);

  line-height: 1.5;
}