/* Ana Ekran Konteyneri */
.pass-screen-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    opacity: 0;
    display: none;
    transition: opacity 0.4s ease-out;
}
.pass-screen-container.fade-in {
    display: flex !important;
    animation: fadeInMain 1.4s ease-out forwards;
}

.pass-screen-container.fade-out {
    animation: fadeOutMain 0.2s ease-in forwards;
}
.pass-card {
    min-height: min-content;
    min-width: min-content;
    background-color: #000;
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1.75rem 3rem 3rem 3rem; /* pt-7 pl-12 pr-12 pb-12 */
    position: relative;
    overflow: hidden;
    color: white; /* Genel metin rengi */
}
.blur-effect {
    position: absolute;
    top: -5%; /* Yaklaşık -top-1/20 */
    left: 50%;
    transform: translateX(-50%);
    width: 16rem; /* w-64 */
    height: 5.75rem; /* h-23 (Tailwind ölçeğine göre tahmin) */
    background-color: #41FFD1;
    border-radius: 9999px; /* rounded-full */
    filter: blur(48px); /* blur-3xl */
    opacity: 0.70; /* opacity-70 */
    z-index: 0;
    pointer-events: none;
}
.title {
    /* font-family kaldırıldı */
    /* color: #41FFD1; */
    line-height: 1.75rem;
    text-align: center;
    position: relative;
    z-index: 1;
}
.description {
    /* font-family kaldırıldı */
    /* color: rgba(67, 255, 209, 0.55); */
    line-height: 1rem; /* leading-tight */
    text-align: center;
    max-width: 16rem; /* max-w-64 */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}
.input-wrapper {
    width: 100%;
    margin-top: 1.5rem; /* mt-6 */
    margin-bottom: 1.5rem; /* mb-6 */
    position: relative;
    z-index: 1;
}
.password-input {
    /* font-family kaldırıldı */
    font-weight: 400; /* font-weight korundu */
    width: 100%;
    text-align: center;
    color: white;
    background-image: linear-gradient(to bottom, #1A1A1A, black);
    border: 1px solid rgba(255, 255, 255, 0.31);
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}
.password-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.password-input:focus {
    outline: none;
    border-color: #3d3d3d;
}
.keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}
.control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem; /* sm breakpoint için aşağıdaki kurala bakın */
    position: relative;
    z-index: 1;
}
.keypad-button,
.control-button {
    /* font-family kaldırıldı */
    font-weight: 400; /* font-weight korundu */
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    border-radius: 0.125rem;
    width: 100%;
    aspect-ratio: 84 / 33;
    min-width: 50px;
    max-width: 84px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    position: relative;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.keypad-button {
    background: radial-gradient(224.24% 224.24% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.00) 100%);
}
.control-button-alt {
    background-color: rgba(255, 255, 255, 0.10);
}
.keypad-button:hover,
.control-button:hover {
    opacity: 0.8;
}
.keypad-button:active,
.control-button:active {
    transform: scale(0.95);
}









/* ALERT AREA */
.alert-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    right: 1%;
    top: 1%;
    max-width: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s ease;
    z-index: 9999;
}
.alert-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 calc(33.333% - 1rem);
    background-color: #000000ef;
    border-radius: 0.5rem;
    padding: 1rem;
    color: white;
    border-top: 1px solid rgba(255, 255, 255, 0.635);
    overflow: hidden;
    min-height: min-content;
    min-width: 250px;
    position: relative;
}
.white-effect {
    position: absolute;
    top: -10%;
    left: 25%;
    transform: translateY(-100%);
    width: 10rem;
    height: 5rem;
    background-color: rgb(255, 255, 255);
    border-radius: 9999px;
    filter: blur(50.5px);
    z-index: 0;
    pointer-events: none;
}
.alert-container-Wrapper {
    position: relative;
    width: 3rem;
    height: 3rem;
}
.SvgSquareHolder {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #181818, #0d0d0d);
    border-radius: 0.5rem;
    border: 1px solid #737373;
    overflow: hidden;
    z-index: 1;
}
.alert-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    flex: 1;
}
.AlertSvg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5rem;
    height: 1.5rem;
    z-index: 2; /* Holder'ın üstünde olacak */
}
.AlertTitle {
    font-size: 1rem;
    color: white;
    font-weight: 700; 
}
.AlertDescription {
    position: relative;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    line-height: 1rem;
    max-width: 15rem;
    font-weight: 400;
    z-index: 1;
    overflow-wrap: break-word;
}
.alert-container.show {
    opacity: 1;
    transform: translateX(0);
}
.alert-container.hide {
    opacity: 0;
    transform: translateX(-100%);
}
.hidden {
    display: none;
}
.imagemask{
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.679) 40%, rgba(0,0,0,0));
}
/* ALERT AREA */














/*CHART MAIN SCREEN*/
#chart-container {
    position: relative; /* Bunu ekle */
    background: linear-gradient(to bottom, #2a2a2a, #1c1c1c);
    padding: 1.5%;
    border-radius: 0.625rem;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden; /* taşan efekt görünmesin */
    grid-column: span 8;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.chart-header {
    position: absolute;
    top: clamp(10px, 2vw, 20px); /* Responsive yukarıdan boşluk */
    left: clamp(15px, 2vw, 25px); /* Soldan boşluk */
    z-index: 2; /* Chart'ın üstünde olsun */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.chart-header p {
    margin: 0; /* Margin'leri sıfırla */
    padding: 0;
    line-height: 1.2;
}
#chart {
    margin-top: 6%;
    width: 100%;
    height: 100%;
}
.apexcharts-series path {
    stroke-width: 1px !important;
    stroke: #FFB641 !important;
    filter: drop-shadow(0px 6px 12.2px #FFB641);
}
.apexcharts-tooltip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: inherit !important;
    padding: 0 !important;
}
.apexcharts-marker {
    transition: transform 0.3s ease-in-out;
}

.apexcharts-marker:hover {
    transform: scale(1.4); /* Hover durumunda marker büyür */
}

.apexcharts-marker circle {
    filter: drop-shadow(0 0 6px rgba(255, 182, 65, 0.7)); /* Sarı glow efekti */
}

.light-effect {
    position: absolute;
    top: -90%;
    width: 100%;
    height: 80%; /* 40px ile 80px arasında ekran genişliğine göre değişir */
    background: #FFF;
    border-radius: 80%;
    filter: blur(68.5px); /* Blur da responsive */
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}
.chart-container-frame{
    position: absolute;
    inset: 0;
    border-radius: 0.625rem;
    border: 0.5px solid #7D7E7D;
    overflow: hidden;
    z-index: 1;
}
/*CHART MAIN SCREEN*/

  
  
  
  
  








/*Main Screen*/
.crypto-MainScreen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 100vh;
}
.crypto-MainScreen-card {
    background-color: #000;
    border-radius: 1%;
    padding: 3%;
    position: relative;
    overflow: hidden;
    color: white;
    display: flex;
    flex-direction: column;
    max-width: 90vw;
    width: 61vw;
    min-height: min-content;
    /* opacity: 0; 
    display: none; */
    transition: opacity 0.4s ease-out;
}
.crypto-MainScreen-card.fade-in {
    display: flex !important;
    animation: fadeInMain 0.4s ease-out forwards;
}

.crypto-MainScreen-card.fade-out {
    animation: fadeOutMain 0.3s ease-in forwards;
}
.blur-effect-Main {
    position: absolute;
    top: -27%;
    left: 15%;
    transform: translateX(-50%);
    width: 40%;
    height: 25%;
    background-color: #41FFD1;
    border-radius: 9999px;
    filter: blur(150px);
    z-index: 0;
    pointer-events: none;
}
.blur-white-effect-Main {
    position: absolute;
    top: -5%;
    left: 85%;
    transform: translateX(-50%);
    width: 40%;
    height: 10%;
    background-color: #FFFFFF;
    border-radius: 9999px;
    filter: blur(120px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}
.crypto-MainScreen-layout {
    display: grid;
    grid-template-columns: repeat(12, 0.25fr); /*6 kolon */
    grid-template-rows: auto auto auto auto;
    gap: 1%;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.crypto-MainScreen-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    grid-column: span 4;
    grid-row: span 1;
}
.crypto-MainScreen-header {
    display: flex;
    align-items: center;
    gap: 13%;
    margin-left: 4%;
    white-space: nowrap;
}
.BankSvg-container{
    width: min-content;
    height: min-content;
    display: flex;
    align-items: center;
    justify-content: center;
}
.BankSvg {
    position: absolute;
    width: 2.3%;
    height: 2.3%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.crypto-MainScreen-title {
    color: #41FFD1;
    margin: 0;
    line-height: normal;
}
.crypto-MainScreen-description {
    color: rgba(67, 255, 209, 0.55);
    font-weight: 400;
    margin-top: 2%;
    margin-left: 12%; /* Icon genişliği + gap kadar sola kaydırma */
    overflow-wrap: break-word;
    padding-bottom: 5%;
}






/* Ana Bilgiler Bölümü */
.crypto-MainScreen-maininfo {
    grid-column: span 4;
    grid-row: 2; /* 2. ve 3. satırı kapla */
    padding: 6%;
    overflow: hidden;
    position: relative; /* Taşmanın daha net çalışması için genellikle eklenir */
    background: radial-gradient(100% 100% at 50% 0%, rgba(65, 255, 209, 0.07) 0%, rgba(39, 153, 125, 0.11) 100%);
    border-radius: 0.625rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Hover durumunda animasyonu başlat */
.crypto-MainScreen-maininfo:hover {
    transform: scale(1.02);
}
.crypto-MainScreen-maininfo-green-effect{
    position: absolute;
    top: -70%;
    left: 25%;
    width: 10rem;
    height: 4rem;
    background-color: #41FFD1;
    border-radius: 9999px;
    filter: blur(68.5px);
    z-index: 0;
    pointer-events: none;
}
.crypto-MainScreen-maininfo-frame{
    position: absolute;
    inset: 0;
    border-radius: 0.625rem;
    border: 0.5px solid #41FFD1;
    overflow: hidden;
    z-index: 1;
}
.crypto-MainScreen-maininf-bottomgreencircle{
    position: absolute;
    min-height: 100vh;
    min-width: 100vh;
    background: radial-gradient(68.69% 68.69% at 14.66% 22.04%, rgba(66, 255, 208, 0.05) 0%, rgba(66, 255, 208, 0.005) 100%);
    border-radius: 70rem;
    top: -50%;
    left: -5%;
}
.crypto-MainScreen-maininf-topgreenscircle{
    position: absolute;
    min-height: 100vh;
    min-width: 100vh;
    background: radial-gradient(68.69% 68.69% at 14.66% 22.04%, rgba(65, 255, 209, 0.05) 0%, rgba(66, 255, 208, 0.005) 100%);
    border-radius: 70rem;
    top: -20%;
    left: 10%;
}
.crypto-MainScreen-maininf-Header{
    position: absolute;
    display: flex;
    align-items: center;
    line-height: normal;
    color: #FFF;
    z-index: 1;
}
.crypto-MainScreen-maininf-Headerdesc{
    position: relative;
    display: flex;
    align-items: center;
    line-height: normal;
    color: rgba(255, 255, 255, 0.55);
    z-index: 1;
    margin-top: 7%;
}
.crypto-MainScreen-maininf-info-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    bottom: 0px;
    margin-top: 40%;
}
.crypto-MainScreen-maininf-info-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.crypto-MainScreen-maininf-info-blockh {
    display: flex;
    flex-direction: column;
    align-items: right;
    text-align: right;
}
.crypto-MainScreen-maininf-info-header {
    line-height: normal;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    z-index: 1;
}
.crypto-MainScreen-maininf-info-text {
    line-height: normal;
    color: #FFF;
    margin: 0;
    margin-top: 1%;
    z-index: 1;
}
/* Ana Bilgiler Bölümü */










/*DEPOSIT EKRANI*/
.crypto-MainScreen-deposit {
    grid-column: span 3;
    grid-row: 3; /* 2. ve 3. satırı kapla */
    padding: 7%;
    overflow: hidden;
    position: relative; /* Taşmanın daha net çalışması için genellikle eklenir */
    background: radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.00) 100%);
    border-radius: 0.625rem;
    min-width: min-content;
}
.crypto-MainScreen-deposit-white-effect{
    position: absolute;
    top: -70%;
    left: 25%;
    width: 10rem;
    height: 4rem;
    background-color: white;
    border-radius: 9999px;
    filter: blur(68.5px);
    z-index: 0;
    pointer-events: none;
}
.crypto-MainScreen-deposit-frame{
    position: absolute;
    inset: 0;
    background: radial-gradient(116.67% 116.67% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.00) 100%);
    border-radius: 0.625rem;
    border: 0.5px solid #5d5252;
    overflow: hidden;
    z-index: 1;
}
.crypto-MainScreen-deposit-Wrapper {
    position: relative;
    width: 2.2vw; /* ekran genişliğinin %8'i */
    aspect-ratio: 1 / 1; /* kare olarak kalır */
    flex-shrink: 0;
}
.crypto-MainScreen-deposit-Svg {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 35%;
    z-index: 2;
}
.crypto-MainScreen-deposit-TextGroup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.crypto-MainScreen-deposit-Container {
    display: flex;
    align-items: flex-start; /* SVG ve yazı grubu aynı hizada başlasın */
    gap: 0.7rem; /* SVG ile yazıların arası boşluk */
}
.crypto-MainScreen-deposit-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    flex: 1;
}
.crypto-MainScreen-deposit-Header {
    position: relative;
    display: flex;
    align-items: center;
    line-height: normal;
    color: #FFF;
    z-index: 1;
    font-style: normal;
}
.crypto-MainScreen-deposit-desc {
    position: relative;
    display: flex;
    align-items: center;
    line-height: normal;
    color: rgba(255, 255, 255, 0.55);
    max-width: 100%;
    z-index: 1;
}
.crypto-MainScreen-deposit-btn {
    position: relative;
    width: 100%;
    border-radius: 0.3125rem;
    background: rgba(255, 255, 255, 0.10);
    padding-top: 5%;
    padding-bottom: 5%;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 30%;
}
/*DEPOSIT EKRANI*/


















/*WITHDRAW EKRANI*/
.crypto-MainScreen-withdraw {
    grid-column: span 3;
    grid-row: 3; /* 2. ve 3. satırı kapla */
    padding: 7%;
    overflow: hidden;
    position: relative; /* Taşmanın daha net çalışması için genellikle eklenir */
    background: radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.00) 100%);
    border-radius: 0.625rem;
    min-width: min-content;
}
.crypto-MainScreen-withdraw-white-effect{
    position: absolute;
    top: -70%;
    left: 25%;
    width: 10rem;
    height: 4rem;
    background-color: white;
    border-radius: 9999px;
    filter: blur(68.5px);
    z-index: 0;
    pointer-events: none;
}
.crypto-MainScreen-withdraw-frame{
    position: absolute;
    inset: 0;
    background: radial-gradient(116.67% 116.67% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.00) 100%);
    border-radius: 0.625rem;
    border: 0.5px solid #5d5252;
    overflow: hidden;
    z-index: 1;
}
.crypto-MainScreen-withdraw-Wrapper {
    position: relative;
    width: 2.2vw; /* ekran genişliğinin %8'i */
    aspect-ratio: 1 / 1; /* kare olarak kalır */
    flex-shrink: 0;
}
.crypto-MainScreen-withdraw-Svg {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 35%;
    z-index: 2;
}
.crypto-MainScreen-withdraw-TextGroup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.crypto-MainScreen-withdraw-Container {
    display: flex;
    align-items: flex-start; /* SVG ve yazı grubu aynı hizada başlasın */
    gap: 0.7rem; /* SVG ile yazıların arası boşluk */
}
.crypto-MainScreen-withdraw-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    flex: 1;
}
.crypto-MainScreen-withdraw-Header {
    position: relative;
    display: flex;
    align-items: center;
    line-height: normal;
    color: #FFF;
    z-index: 1;
    font-style: normal;
}
.crypto-MainScreen-withdraw-desc {
    position: relative;
    display: flex;
    align-items: center;
    line-height: normal;
    color: rgba(255, 255, 255, 0.55);
    max-width: 100%;
    z-index: 1;
}
.crypto-MainScreen-withdraw-btn {
    position: relative;
    width: 100%;
    border-radius: 0.3125rem;
    background: rgba(255, 255, 255, 0.10);
    padding-top: 5%;
    padding-bottom: 5%;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 30%;
}
/*WITHDRAW EKRANI*/












/*TRANSFER EKRANI*/
.crypto-MainScreen-transfer {
    grid-column: span 3;
    grid-row: 3; /* 2. ve 3. satırı kapla */
    padding: 7%;
    overflow: hidden;
    position: relative; /* Taşmanın daha net çalışması için genellikle eklenir */
    background: radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.00) 100%);
    border-radius: 0.625rem;
    min-width: min-content;
}
.crypto-MainScreen-transfer-white-effect{
    position: absolute;
    top: -70%;
    left: 25%;
    width: 10rem;
    height: 4rem;
    background-color: white;
    border-radius: 9999px;
    filter: blur(68.5px);
    z-index: 0;
    pointer-events: none;
}
.crypto-MainScreen-transfer-frame{
    position: absolute;
    inset: 0;
    background: radial-gradient(116.67% 116.67% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.00) 100%);
    border-radius: 0.625rem;
    border: 0.5px solid #5d5252;
    overflow: hidden;
    z-index: 1;
}
.crypto-MainScreen-transfer-Wrapper {
    position: relative;
    width: 2.2vw; /* ekran genişliğinin %8'i */
    aspect-ratio: 1 / 1; /* kare olarak kalır */
    flex-shrink: 0;
}
.crypto-MainScreen-transfer-Svg {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    z-index: 2;
}
.crypto-MainScreen-transfer-TextGroup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.crypto-MainScreen-transfer-Container {
    display: flex;
    align-items: flex-start; /* SVG ve yazı grubu aynı hizada başlasın */
    gap: 0.7rem; /* SVG ile yazıların arası boşluk */
}
.crypto-MainScreen-transfer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    flex: 1;
}
.crypto-MainScreen-transfer-Header {
    position: relative;
    display: flex;
    align-items: center;
    line-height: normal;
    color: #FFF;
    z-index: 1;
    font-style: normal;
}
.crypto-MainScreen-transfer-desc {
    position: relative;
    display: flex;
    align-items: center;
    line-height: normal;
    color: rgba(255, 255, 255, 0.55);
    max-width: 100%;
    z-index: 1;
}
.crypto-MainScreen-transfer-btn {
    position: relative;
    width: 100%;
    border-radius: 0.3125rem;
    background: rgba(255, 255, 255, 0.10);
    padding-top: 5%;
    padding-bottom: 5%;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 30%;
}
/*TRANSFER EKRANI*/








/*TRANSACTION EKRANI*/
.crypto-MainScreen-transaction {
    grid-column: span 9;
    grid-row: 4; /* 2. ve 3. satırı kapla */
    padding: 2%;
    overflow: hidden;
    position: relative; /* Taşmanın daha net çalışması için genellikle eklenir */
    background: radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.00) 100%);
    border-radius: 0.625rem;
    min-width: min-content;
    height: max-content;
}
.crypto-MainScreen-transaction-white-effect{
    position: absolute;
    top: -85%;
    left: 28%;
    width: 40%;
    height: 10%;
    background-color: white;
    border-radius: 999px;
    filter: blur(98.5px);
    z-index: 0;
    pointer-events: none;
}
.crypto-MainScreen-transaction-frame{
    position: absolute;
    inset: 0;
    background: radial-gradient(116.67% 116.67% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.00) 100%);
    border-radius: 0.625rem;
    border: 0.5px solid #5d5252;
    overflow: hidden;
    z-index: 1;
}
.crypto-MainScreen-transaction-Container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; /* Eğer kapsayıcı yüksekliği belliyse */
    position: relative;
    gap: 1.6rem; /* SVG ve TextGroup arası boşluk */
}
.crypto-MainScreen-transaction-Wrapper {    
    position: relative;
    width: 2.5vw; /* ekran genişliğinin %8'i */
    aspect-ratio: 1 / 1; /* kare olarak kalır */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.crypto-MainScreen-transaction-Svg {
    width: 50%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.crypto-MainScreen-transaction-TextGroup {
    display: flex;
    flex-direction: column;
    align-items: center; /* Ortala */
    justify-content: center; /* Ortala */
    text-align: center; /* Yazı ortala */
    width: 100%;
}
.crypto-MainScreen-transaction-Header {
    color: white;
    margin: 0;
    background: none;
}
.crypto-MainScreen-transaction-desc {
    color: rgba(255, 255, 255, 0.55);
    margin: 0.5% 0 0 0;
    background: none;
    max-width: 30%;
}
.crypto-MainScreen-transaction-btn {
    position: relative;
    border-radius: 0.3125rem;
    background: rgba(255, 255, 255, 0.10);
    padding: 1.3% 9%;
    color: white;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
/*TRANSACTION EKRANI*/

















/*SETTING EKRANI*/
.crypto-MainScreen-setting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    grid-column: span 3;
    grid-row: span 2; /* 2. ve 3. satırı kapla */
    padding: 7%;
    overflow: hidden;
    position: relative; /* Taşmanın daha net çalışması için genellikle eklenir */
    background: radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.00) 100%);
    border-radius: 0.625rem;
    min-width: min-content;
    min-width: min-content;
}
.crypto-MainScreen-setting-white-effect{
    position: absolute;
    top: -25%;
    left: 22%;
    width: 10rem;
    height: 4rem;
    background-color: white;
    border-radius: 9999px;
    filter: blur(68.5px);
    z-index: 0;
    pointer-events: none;
}
.crypto-MainScreen-setting-frame{
    position: absolute;
    inset: 0;
    background: radial-gradient(116.67% 116.67% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.00) 100%);
    border-radius: 0.625rem;
    border: 0.5px solid #5d5252;
    overflow: hidden;
    z-index: 1;
}
.crypto-MainScreen-setting-Wrapper {
    position: relative;
    width: 4vw; /* ekran genişliğinin %8'i */
    aspect-ratio: 1 / 1; /* kare olarak kalır */
    flex-shrink: 0;
    top: -18%;
}
.crypto-MainScreen-setting-Svg {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 35%;
    z-index: 2;
}
.crypto-MainScreen-setting-TextGroup {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    bottom: 13%;
}
.crypto-MainScreen-setting-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1;
}
.crypto-MainScreen-setting-Header {
    position: relative;
    display: flex;
    align-items: center;
    line-height: normal;
    color: #FFF;
    z-index: 1;
    font-style: normal;
}
.crypto-MainScreen-setting-desc {
    position: relative;
    display: flex;
    align-items: center;
    line-height: normal;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    max-width: 90%;
    z-index: 1;
}
.crypto-MainScreen-setting-btn {
    position: relative;
    width: 100%;
    border-radius: 0.3125rem;
    background: rgba(255, 255, 255, 0.10);
    padding-top: 5%;
    padding-bottom: 5%;
    color: white;
    border: none;
    cursor: pointer;
    top: 40%;
}
/*SETTING EKRANI*/



.closebtn{
    position: relative;
    grid-column: 12;
    grid-row: 1;
    right: -60%;

}










/*ANA EKRAN DIV ICI KARE SVGLER*/
.svg-pattern-wrapper-transaction {
    position: absolute;
    width: 40%;
    height: 100%;
    top: 0%;
    left: 0%;
}
.svg-pattern-wrapper-setting {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}
.svg-pattern-wrapper-right {
    position: absolute;
    width: 40%;
    height: 100%;
    top: 0%;
    right: -22%;
}
.svg-instance {
    position: relative;
    width: 44.7%;
    pointer-events: none;
}
.svg-bottom-right {
    bottom: 0;
    left: 30%;
}
.svg-bottom-left {
    top: 0;
    right: 30%;
}


/*ANA EKRAN DIV ICI SVGLER*/



/*Main Screen*/

























/* Varsayılan (mobil, tablet, düşük çözünürlük) */
.px-12 {
    font-size: 0.7rem; /* 12px */
    font-style: normal;
}
.px-15 {
  font-size: 0.88rem; /* 16px */
  font-style: normal;
}
.px-16 {
  font-size: 0.97rem; /* 17px */
  font-style: normal;
}
.px-20 {
  font-size: 1.25rem; /* 20px */
  font-style: normal;
}
.px-32 {
  font-size: 2rem; /* 32px */
  font-style: normal;
}
.px-316 {
  font-size: 17rem; /* 32px */
  font-style: normal;
}
.apexcharts-xaxis-label {
  font-size: 0.5rem; /* 12px */
}
.apexcharts-yaxis-label {
    font-size: 0.5rem; /* 12px */
}

/* Full HD (1920x1080) */
@media (min-width: 1920px) {
  .px-12 {
    font-size: 0.8rem; /* 14px */
  }
  .px-15 {
    font-size: 1rem; /* 18px */
  }
  .px-16 {
    font-size: 1.03rem; /* 20px */
  }
  .px-20 {
    font-size: 1.5rem; /* 24px */
  }
  .px-32 {
    font-size: 2.5rem; /* 40px */
  }
  .px-316 {
    font-size: 22rem; /* 32px */
    font-style: normal;
  }
  .apexcharts-xaxis-label {
      font-size: 0.7rem; /* 14px */
  }
  .apexcharts-yaxis-label {
      font-size: 0.7rem; /* 12px */
  }
}

/* 4K (2560px ve üzeri) */
@media (min-width: 2560px) {
  .px-12 {
    font-size: 1.7rem; /* 16px */
  }
  .px-15 {
    font-size: 1.9rem; /* 20px */
  }
  .px-16 {
    font-size: 1.8rem; /* 22px */
  }
  .px-20 {
    font-size: 2.5rem; /* 28px */
  }
  .px-32 {
    font-size: 4rem; /* 48px */
  }
  .px-316 {
    font-size: 30rem; /* 32px */
    font-style: normal;
  }
  .apexcharts-xaxis-label {
      font-size: 1.2rem; /* 16px */
  }
  .apexcharts-yaxis-label {
      font-size: 1.1rem; /* 12px */
  }
}
  

@media (min-width: 640px) {
    .keypad-button,
    .control-button {
        min-width: 64px;
    }

    .control-grid {
        gap: 0.5rem;
    }
     .keypad-grid {
        /* gap-2 zaten 0.5rem olduğu için ekstra kurala gerek yok */
    }
}