/* === global === */
:root {
  --color-black: #000000;
  --color-white: #ffffff;


  --color-bmx-green: #2EBD85;
  --color-bmx-green-dark: #0ECB81;
  --color-bmx-green-light: #32D993;
  
  --color-bmx-red: #E33B54;
  --color-bmx-red-dark: #F6465D;
  --color-bmx-red-light: #FF707E;

  --color-bmx-red-a8:   rgba(227, 59, 84, 0.20);
  --color-bmx-green-a8: rgba(46, 189,133, 0.20);
 
/* original theme */
  --color-bmx-darker: #9A79B9;

  --color-bmx-dark:   #7F62A1;
  --color-bmx-light:  #C1A4DD;

  --color-bmx-purple: #60426F; 
  --color-bmx-purple2: #EDE2F8;

  --color-bmx-shadow: rgba(154, 121, 185, 0.5);
  --color-bmx-shadow2: rgba(154, 121, 185, 0.15);
  --color-bmx-shadow3: rgba(154, 121, 185, 0.25);

  --filter-bmx-darker: invert(53%) sepia(20%) saturate(620%) hue-rotate(265deg) brightness(91%) contrast(94%);
  --filter-bmx-purple2: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(750%) hue-rotate(245deg) brightness(97%) contrast(99%);
/* original theme end */


  --color-border-dark: #333;
  --color-border-light: #ddd;
 
  --color-gray1: #f5f5f5; /* light main bg */
  --color-gray2: #f0f0f0; /* light block bg */
  --color-gray3: #f0f0f0; /* light block bg2 */

  --color-coal1: #0a0c12; /* dark main bg */
  --color-coal2: #0d0f17; /* dark block bg */
  --color-coal3: #141724; /* dark block bg2 */
  
  --color-coal-old: #12141c; /* may need */
  --color-gray-old: #888888; /* may need */
  --color-green-old: #00eb8c; /* may need */
  --color-red-old: #eb007d; /* may need */

--card1: #2a2540;
--card2: rgba(170, 187, 255, 0.125); /* lines in card dark*/
--card3: #2a2540;

--card4: #110f1a;
--card5:rgba(153, 138, 230, 0.125); /* lines in card light*/
--card6: #110f1a;

--color-opacity1: rgba(255,255,255,.8);
--color-opacity2: rgba(0,0,0,.8); 

--ck-accent: var(--color-bmx-darker);

caret-color: var(--color-bmx-darker);

--tab-active-color: var(--color-bmx-darker); 


 


/* === Dark (Default) === */
  --bg-color: var(--color-coal1);
  --text-color: var(--color-white);
  --text-color-negative: var(--color-black);
   --text-color-opacity: var(--color-opacity1);
  --block-bg: var(--color-coal2);
  --block-bg2: var(--color-coal3);
  --color-card1:var(--card1);
  --color-card2:var(--card2);
  --color-card3:var(--card3);
   --u-card1: repeating-linear-gradient(235deg, #0c0e15, #0c0b0f 128px);

}
  /* === Light (Optional) === */
[data-theme="light"] {
  --bg-color: var(--color-gray1);
  --text-color: var(--color-black);
  --text-color-negative: var(--color-white);
   --text-color-opacity: var(--color-opacity2);
  --block-bg: var(--color-gray2);
  --block-bg2: var(--color-gray3);
  --color-card1:var(--card4);
  --color-card2:var(--card5);
  --color-card3:var(--card6);
  --u-card1: repeating-linear-gradient(235deg, #eeecec, #e5e5e5 128px);
}


[data-palette="magma"]{
  --color-bmx-darker:  #FF5E2E;
  --color-bmx-dark:   #FF4E1D;
  --color-bmx-light: #FF8550;

  --color-bmx-purple: #8C2F00; 
  --color-bmx-purple2: #FFD2B1;  

  --color-bmx-shadow: rgba(255, 94, 46, 0.5);
  --color-bmx-shadow2: rgba(255, 94, 46, 0.15); 
  --color-bmx-shadow3: rgba(255, 94, 46, 0.2); 

  --filter-bmx-darker: invert(55%) sepia(86%) saturate(1250%) hue-rotate(340deg) brightness(95%) contrast(103%);
  --filter-bmx-purple2: invert(96%) sepia(52%) saturate(723%) hue-rotate(320deg) brightness(103%) contrast(95%);
}

[data-palette="diamond"]{
  --color-bmx-darker: #a3bcff; 

  --color-bmx-dark: #91A7E0; 
  --color-bmx-light: #b8cfff; 

  --color-bmx-purple: #E3D5FF;  
  --color-bmx-purple2: #D8E5FF;   
  --color-bmx-shadow: rgba(147, 176, 255, 0.25);
  --color-bmx-shadow2: rgba(200, 210, 255, 0.1);
  --color-bmx-shadow3: rgba(255, 255, 255, 0.3); 

  --filter-bmx-darker: invert(86%) sepia(41%) saturate(4903%) hue-rotate(191deg) brightness(105%) contrast(101%);
  --filter-bmx-purple2: invert(91%) sepia(22%) saturate(2974%) hue-rotate(182deg) brightness(102%) contrast(101%);
}

[data-palette="gold"]{
  --color-bmx-darker: #D9A441;
  --color-bmx-dark: #B78C36;
  --color-bmx-light: #dbad58;

  --color-bmx-purple: #A76F3C;
  --color-bmx-purple2: #d6b87e;

  --color-bmx-shadow: rgba(217, 164, 65, 0.5);
--color-bmx-shadow2: rgba(217, 164, 65, 0.15);
--color-bmx-shadow3: rgba(217, 164, 65, 0.25);

 --filter-bmx-darker: invert(84%) sepia(62%) saturate(3789%) hue-rotate(323deg) brightness(88%) contrast(90%);
  --filter-bmx-purple2: invert(100%) sepia(17%) saturate(6817%) hue-rotate(307deg) brightness(84%) contrast(102%);

}


[data-palette="mint"]{
  --color-bmx-darker: #00e3a3;
  --color-bmx-dark: #00D89B;
  --color-bmx-light: #A6FFE3;

  --color-bmx-purple: #00D89B;     
 --color-bmx-purple2: #F2FFF9;  

  --color-bmx-shadow: rgba(0, 255, 178, 0.5);
  --color-bmx-shadow2: rgba(0, 255, 178, 0.15);
  --color-bmx-shadow3: rgba(0, 255, 178, 0.25);

   --filter-bmx-darker: invert(82%) sepia(66%) saturate(3011%) hue-rotate(95deg) brightness(105%) contrast(103%);
  --filter-bmx-purple2: invert(88%) sepia(70%) saturate(272%) hue-rotate(72deg) brightness(105%) contrast(108%);
}

[data-palette="candy"]{
--color-bmx-darker: #FF4BA0;
--color-bmx-dark: #E1408D;
--color-bmx-light: #FF9BC8;

--color-bmx-purple: #D92B7D;
--color-bmx-purple2: #FFE3F0;

--color-bmx-shadow: rgba(255, 75, 160, 0.35);
--color-bmx-shadow2: rgba(209, 43, 125, 0.15);
--color-bmx-shadow3: rgba(255, 227, 240, 0.25);

   --filter-bmx-darker: invert(52%) sepia(96%) saturate(3407%) hue-rotate(305deg) brightness(102%) contrast(102%);
  --filter-bmx-purple2: invert(75%) sepia(46%) saturate(699%) hue-rotate(291deg) brightness(100%) contrast(107%);
}



/* tüm selectionlar) */
*::selection{
  background: var(--color-bmx-purple);
  color: #fff;
}
/* Firefox için */
*::-moz-selection{
  background: var(--color-bmx-purple);
  color: #fff;
}

/* Tüm checkbox’lar */
input[type="checkbox"]{
  accent-color: var(--ck-accent);   /* tik + kutu dolgusu bu renge döner */
  width: 18px; height: 18px;        /* opsiyonel ölçü */
  border-radius: 4px;               /* opsiyonel köşe */
}


.not-found-404{justify-items: center;}

.not-found{
  min-height: calc(100dvh - 120px);
  display: grid; place-items: center;
  padding: 40px 16px;
    text-align: center;
}

.not-found h1{ font-size: 80px; font-weight: 700; margin: 0 0 20px;  text-align: center; }
.not-found h2{ font-size: 45px; font-weight: 700; margin: 0 0 26px;  text-align: center;}
.not-found h3{ font-size: 20px; font-weight: 700; margin: 0 0 26px;  text-align: center;}
.not-found a{ font-size: 14px; font-weight: 700; margin: 0 0 6px;  text-align: center;}

.btn-404 {
  width: 130px;
  padding: 0 16px;
  background-color: var(--color-bmx-dark);
  color: var(--text-color-negative);
  border: none;
  border-radius: 6px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
  text-align: center;
}


body, html {
  margin: 0;
  padding-top: 10px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Roboto', Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
  width: 100%;
  max-width: 100%;
  overflow-x: clip; 
}