body {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  font-size: var(--fs-st); /* 14px Standart */
  background-color: var(--dark-gray);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}


.delta_logo {
    display: block;
    width: var(--logo-w); 
    aspect-ratio: 3 / 1; 
    background-image: url('../images/delta_logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    text-indent: -9999px;
    overflow: hidden;
    transition: var(--motion-base);
    z-index: var(--z-ui);
}


#main-container{
	position: relative;
	min-height: var(--min-height);
	height: var(--fluid-vh);
}


header{
	position: fixed;
    z-index: var(--z-ui);
    top: 0;
    width: 100%;
	background-color: white;
	display: none;
	opacity: 0;
}

#application-canvas {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    min-width: 100vw !important;
    min-height: 100% !important;
    z-index: var(--z-scene) !important;
}


/****** ENERGY BAR ******/

#bottom {
    position: fixed;
    transform: translateY(calc(var(--fluid-vh) - var(--energy-bar-height)));
    left: 0;
    width: 100%;
    display: flex;
	flex-direction: column;
    z-index: var(--z-content);
	background-color: var(--white);
	transition: all var(--speed-normal) var(--ease-premium);
	bottom: 0;
	height: var(--fluid-vh);
	opacity: 0;
	display: none;
}

#bottom.is-visible {
  transform: translateY(var(--safe-top));
}

#bottom #energy_bar{
	height: var(--energy-bar-height);
	display: flex;
}

#bottom #energy_bar .segment {
    height: 100%;
}

#bottom #energy_bar .segment:nth-child(1) {
    width: 60%;
    background-color: var(--blue);
}

#bottom #energy_bar .segment:nth-child(2) {
    width: 20%;
    background-color: var(--light-blue);
}

#bottom #energy_bar .segment:nth-child(3) {
    width: 20%;
    background-color: var(--green);
}


/********** CONTENT AREA **************/

#bottom #content_header{
	display: flex;
    justify-content: space-between;
    padding: var(--content-area-padding);
}

#bottom #content{
    padding: var(--content-area-padding);
}




/* ------------------------- BUTTONS ----------------------------*/

/* --- 1. BASE CLASS (İskelet) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* İkon ve metin arası boşluk */
    align-self: center;
	
    /* Boyutlandırma */
    padding: var(--button-padding); 
    /*min-height: 48px;*/
    
    /* Tipografi */
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    
    /* Görünüm */
	background-color: var(--white);
	color: var(--dark-blue);
    border: var(--border-st);
    cursor: pointer;
    user-select: none;
    position: relative;
	border-radius: var(--radius-sm); /* 8px */

    /* Animasyon (Senin Premium Motion Ayarların) */
	transition: all var(--speed-fast) var(--ease-premium);
}


.btn:hover {
	color: var(--white);
    background-color: var(--blue);
	--icon-color: var(--white);
}


/* VARIANTS (Renk & Şekil) */

.circle{
	border-radius: var(--radius-full); 
}

.btn-blue {
    background-color: var(--blue);
    color: var(--white);
	border: 1px solid var(--blue);
	--icon-color: var(--white);
}

.btn-blue:hover {
    background-color: var(--dark-blue);
}

.btn-cyan {
	background-color: var(--light-blue);
    color: var(--dark-blue); /* Açık zemin üstüne koyu yazı */
	border: 1px solid var(--light-blue);
}

.btn-cyan:hover {
    background-color: var(--bright-blue); /* Daha parlak bir camgöbeği */
}

/********* ICONS  **********/

[class^="icon-"], 
.btn i, 
.btn svg {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
	background-color: var(--icon-color, var(--blue));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.icon-close {
	-webkit-mask-image: url('../images/close.svg');
	mask-image: url('../images/close.svg');
}