:root {
	/* --- 1. COLORS --- */
	--white: #FFFFFF;
	--light-gray: #DDDDDD;
	--gray: #D9D9D9;
	--smoke: #767676;
	--dark-gray: #1E1E1E;

	--dark-blue: #00375D;
	--blue: #0087DC;
	--light-blue: #64D7D7;
	--bright-blue: #2CF5F5;
	--green: #B9EB5F;

	--loading-screen-bg-color: #000;
   

	/* delta logo width */
	--logo-w: clamp(120px, 10vw, 180px);	

	/* Energy bar height*/	
	--energy-bar-height: 10px;


	/* Borders */
	--color-border: rgba(227, 227, 227, 0.50);
	--border-st: 1px solid var(--color-border);

	/* --- 2. FONT FAMILY --- */
	--font-main: 'Open Sans', sans-serif;

	/* --- 3. FLUID TYPOGRAPHY (Base: 14px) --- */
	--fs-sm: clamp(10px, 0.8vw + 8px, 12px);
	--fs-st: clamp(12px, 1vw + 10px, 14px);
	--fs-md: clamp(14px, 1.2vw + 11px, 16px);
	--fs-lg: clamp(20px, 2vw + 16px, 24px);
	--fs-xl: clamp(28px, 4vw + 20px, 36px);

	/* --- 4. PREMIUM MOTION --- */
	--ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
	--speed-normal: 1s;    /* Büyük geçişler için */
	--speed-fast: 0.5s;    /* YENİ: Buton ve Hoverlar için ideal hız */
	--motion-base: var(--speed-normal) var(--ease-premium);

	/* --- 5. RADIUS & LAYOUT --- */
	--radius-sm: 8px;
	--radius-full: 999px;
	--container-max: 1440px;

	/* --- 6. Z-INDEX HIERARCHY (Updated) --- */
	--z-scene: 0;       /* PlayCanvas 3D Canvas alanı */
	--z-ui: 50;         /* Header, Energy Bar, Hotspotlar ve Butonlar */
	--z-content: 70;		/* energy bar and content*/
	--z-overlay: 100;    /* Karartma katmanı */
	--z-modal: 500;     /* Ürün detay panelleri ve modallar */
	--z-max: 999;       /* Bildirimler ve Tooltipler */
	--z-loading-screen: 9999;


	/* --- 7. PADDING --- */
	--content-area-padding:20px;
	--button-padding: 10px 10px;


	/* device height */
	--fluid-vh: 100vh;
	--safe-top: env(safe-area-inset-top, 0px);
	--min-height: 600px;

}


@supports (height: 100dvh) {
  :root {
    --fluid-vh: 100dvh;
  }
}