/* fonts */
/* vietnamese */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format("woff2");
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format("woff2");
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format("woff2");
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format("woff2");
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format("woff2");
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* Border Radius Sizes #"--border-radius" */
--border-radius-square: 0px; /* Tam kare (köşesiz) */
--border-radius-min: 1px; /* En küçük yuvarlama */
--border-radius-xs: 2px; /* Çok küçük öğeler */
--border-radius-sm: 4px; /* Küçük butonlar, inputlar */
--border-radius-md-sm: 6px; /* Orta-küçük öğeler */
--border-radius-md: 8px; /* Orta öğeler */
--border-radius-lg-sm: 10px; /* Büyük butonlar */
--border-radius-lg: 12px; /* Geniş kartlar */
--border-radius-xl-sm: 14px; /* Büyük kartlar */
--border-radius-xl: 16px; /* Geniş alanlar */
--border-radius-xxl-sm: 18px; /* Çok büyük öğeler */
--border-radius-xxl: 20px; /* Çok geniş kutular */
--border-radius-xxxl: 22px; /* Ekstra büyük kutular */
--border-radius-max: 24px; /* En büyük yuvarlama */
--border-radius-full: 9999px; /* Yuvarlak öğeler (avatarlar) */
--border-radius-circle: 50%; /* Tam çember */
/* Border Radius Sizes #"--border-radius" */
--title-light-color: #1b1b1b;
--title-light-color-rgb: 27, 27, 27;
--title-dark-color: #ffffff;
--title-dark-color-rgb: 255, 255, 255;
--text-dark-color: #d9d9d9;
--text-dark-color-rgb: 217, 217, 217;
--text-light-color: #333333;
--text-light-color-rgb: 51, 51, 51;
--subtext-dark-color: #b5b5b5;
--subtext-dark-color-rgb: 181, 181, 181;
--subtext-light-color: #707070;
--subtext-light-color-rgb: 112, 112, 112;
--info-rgb: 100, 210, 255;
--error-rgb: 255, 69, 58;
--warning-rgb: 255, 214, 10;
--success-rgb: 46, 204, 113;
}
:root.dark {
--page-color: #030b15;
--page-color-rgb: 3, 11, 21;
--page-secondary-color: #121212;
--page-secondary-color-rgb: 18, 18, 18;
--emphasis-primary-color: #2c3e50;
--emphasis-primary-color-rgb: 44, 62, 80;
--emphasis-secondary-color: #5c6bc0;
--emphasis-secondary-color-rgb: 92, 107, 192;
--detail-color: #37474f;
--detail-color-rgb: 55, 71, 79;
--title-color: #ffffff;
--title-color-rgb: 255, 255, 255;
--text-color: #d9d9d9;
--text-color-rgb: 217, 217, 217;
--subtext-color: #b5b5b5;
--subtext-color-rgb: 181, 181, 181;
--primary-color: #212529;
--primary-color-rgb: 33, 37, 41;
--secondary-color: #4b5cf6;
--secondary-color-rgb: 75, 92, 246;
/* NAV */
--navbar-bg-color: #0d1117;
--navbar-bg-color-rgb: 13, 17, 23;
/* NAV */
/* Other Colors RGB */
--other-c-error-color: 220, 53, 69;
--other-c-success-color: 40, 167, 69;
--other-c-warning-color: 255, 193, 7;
--other-c-info-color: 23, 162, 184;
/* Other Colors RGB */
/* Form */
--form-border: #27303e;
--form-border-2: 74, 92, 246;
--form-input-bg: #0d1117;
--form-input-2-bg: #12171f;
/* Form */
/* Interactive Gradient */
--interactive-color-bg1: rgb(8, 10, 15);
--interactive-color-bg2: rgb(0, 17, 32);
--interactive-color1: 18, 113, 255;
--interactive-color2: 107, 74, 255;
--interactive-color3: 100, 100, 255;
--interactive-color4: 50, 160, 220;
--interactive-color5: 80, 47, 122;
--interactive-color-interactive: 140, 100, 255;
--interactive-circle-size: 20%;
--interactive-blending: hard-light;
/* Interactive Gradient */
/* Main Colors */
--main-title-a: 74, 92, 246;
--main-title-a-hover: 84, 101, 243;
--main-title-a-2: 43, 61, 215;
--main-title-b: 74, 92, 246;
/* Main Colors */
--ui-hover-bg: rgba(255, 255, 255, 0.08);
--ui-active-bg: rgba(255, 255, 255, 0.14);
--ui-border-glass: rgba(255, 255, 255, 0.05);
--ui-radio-active: rgba(var(--secondary-color-rgb), 1);
--main-accent-color: #4fa3ff;
}
:root.light {
--page-color: #ffffff;
--page-color-rgb: 255, 255, 255;
--page-secondary-color: #f5f5f5;
--page-secondary-color-rgb: 245, 245, 245;
--emphasis-primary-color: #2c3e50;
--emphasis-primary-color-rgb: 44, 62, 80;
--emphasis-secondary-color: #5c6bc0;
--emphasis-secondary-color-rgb: 92, 107, 192;
--detail-color: #cfd8dc;
--detail-color-rgb: 207, 216, 220;
--title-color: #1b1b1b;
--title-color-rgb: 27, 27, 27;
--text-color: #333333;
--text-color-rgb: 51, 51, 51;
--subtext-color: #707070;
--subtext-color-rgb: 112, 112, 112;
--primary-color: #cccccc;
--primary-color-rgb: 204, 204, 204;
--secondary-color: #4a5cf6;
--secondary-color-rgb: 74, 92, 246;
/* NAV */
--navbar-bg-color: #eceff1;
--navbar-bg-color-rgb: 236, 239, 241;
/* NAV */
/* Other Colors RGB */
--other-c-error-color: 220, 53, 69;
--other-c-success-color: 40, 167, 69;
--other-c-warning-color: 255, 193, 7;
--other-c-info-color: 23, 162, 184;
/* Other Colors RGB */
/* Form */
--form-border: #c0c0c0;
--form-border-2: 74, 92, 246;
--form-input-bg: #ffffff;
--form-input-2-bg: #f0f0f0;
/* Form */
/* Interactive Gradient */
--interactive-color-bg1: rgb(230, 230, 240);
--interactive-color-bg2: rgb(240, 245, 255);
--interactive-color1: 18, 113, 255;
--interactive-color2: 107, 74, 255;
--interactive-color3: 100, 100, 255;
--interactive-color4: 50, 160, 220;
--interactive-color5: 80, 47, 122;
--interactive-color-interactive: 140, 100, 255;
--interactive-circle-size: 20%;
--interactive-blending: normal;
/* Interactive Gradient */
/* Main Colors */
--main-title-a: 74, 92, 246;
--main-title-a-hover: 84, 101, 243;
--main-title-a-2: 43, 61, 215;
--main-title-b: 74, 92, 246;
/* Main Colors */
--ui-hover-bg: rgba(0, 0, 0, 0.06);
--ui-active-bg: rgba(0, 0, 0, 0.1);
--ui-border-glass: rgba(0, 0, 0, 0.06);
--ui-radio-active: rgba(var(--secondary-color-rgb), 1);
--main-accent-color: #5b9df9;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Public Sans", sans-serif;
transition: all 0.1s ease-in-out;
}
body {
background: var(--page-color);
color: var(--text-color);
transition: all 0.1s ease-in-out;
overflow-x: hidden;
}
body.modal-open {
overflow: hidden;
height: 100vh;
touch-action: none;
}
#page {
color: var(--text-color);
transition: all 0.1s ease-in-out;
align-items: center;
justify-content: center;
flex-direction: column;
display: none;
}
input,
textarea,
button,
select,
a,
div,
span {
-webkit-tap-highlight-color: transparent;
}
::-webkit-scrollbar {
width: 0;
background: transparent;
}
/*
*/
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: fit-content;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.1s ease-in-out;
}
.navbar {
position: relative;
width: calc(100% - 80px);
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
margin-top: 20px;
border-radius: var(--border-radius-lg);
background-color: var(--navbar-bg-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
transition: all 0.1s ease-in-out;
}
.navbar__logo {
display: flex;
align-items: center;
justify-content: center;
width: 150px;
height: 100%;
}
@media screen and (max-width: 768px) {
.navbar__logo {
width: fit-content;
}
}
.navbar__logo a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.navbar__logo a img {
width: auto;
height: 100%;
object-fit: cover;
transition: all 0.1s ease-in-out;
}
.navbar__menus {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.navbar__menu {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.navbar__menu--left {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
}
.navbar__menu--right {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 100%;
}
.navbar__menu__item {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: 100%;
margin-left: 15px;
}
.navbar__menu__settings {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: 100%;
padding: 5px 10px;
cursor: pointer;
border-radius: var(--border-radius-md);
background: rgba(var(--secondary-color-rgb), 1);
}
.navbar__menu__settings:hover {
background: rgba(var(--secondary-color-rgb), 0.9);
transition: all 0.1s ease-in-out;
}
.navbar__menu__settings__icon {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: 100%;
}
.navbar__menu__settings__icon svg {
width: 24px;
height: 24px;
color: var(--title-dark-color);
transition: all 0.1s ease-in-out;
}
/*
*/
.navbar__menu__settings__dropdown {
position: absolute;
top: 68px;
right: 0;
width: 240px;
background: color-mix(in srgb, var(--navbar-bg-color) 92%, transparent);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border-radius: var(--border-radius-lg);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.35),
inset 0 0 0 1px var(--ui-border-glass);
padding: 12px 0;
cursor: default;
opacity: 0;
transform: translateY(-6px) scale(0.98);
pointer-events: none;
transition:
opacity 0.18s ease,
transform 0.18s ease;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 768px) {
.navbar__menu__settings__dropdown {
width: 100%;
right: 0;
}
}
.navbar__menu__settings__dropdown.active {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.navbar__menu__settings__dropdown__item_title {
width: 100%;
padding: 10px 0 12px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
color: var(--title-color);
text-align: center;
border-bottom: 1px solid var(--ui-border-glass);
margin-bottom: 6px;
}
.navbar__menu__settings__dropdown__items_radio {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: fit-content;
}
.navbar__menu__settings__dropdown__items_radio__label {
display: flex;
align-items: center;
width: 100%;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
color: var(--text-color);
cursor: pointer;
border-radius: var(--border-radius-md);
transition:
background-color 0.15s ease,
transform 0.1s ease;
}
.navbar__menu__settings__dropdown__items_radio__label:hover {
background-color: var(--ui-hover-bg);
}
.navbar__menu__settings__dropdown__items_radio__label:active {
background-color: var(--ui-active-bg);
transform: scale(0.98);
}
.navbar__menu__settings__dropdown__items_radio__input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.navbar__menu__settings__dropdown__items_radio__custom {
width: 18px;
height: 18px;
border: 2px solid var(--ui-border-glass);
border-radius: 50%;
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.navbar__menu__settings__dropdown__items_radio__input:checked ~ .navbar__menu__settings__dropdown__items_radio__custom {
border-color: var(--ui-radio-active);
box-shadow: 0 0 0 3px rgba(var(--secondary-color-rgb), 0.25);
}
.navbar__menu__settings__dropdown__items_radio__input:checked ~ .navbar__menu__settings__dropdown__items_radio__custom::after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--ui-radio-active);
}
.navbar__menu__profile {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: 100%;
padding: 5px 10px;
cursor: pointer;
border-radius: var(--border-radius-md);
}
.navbar__menu__profile:hover {
background: rgba(0, 0, 0, 0.25);
transition: all 0.1s ease-in-out;
}
.navbar__menu__profile__img {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
min-width: 34px;
height: 34px;
min-height: 34px;
border-radius: var(--border-radius-md);
overflow: hidden;
background-color: var(--bg-color-secondary, #f1f5f9);
border: 1px solid var(--border-color, rgba(0,0,0,0.05));
}
.dark .navbar__menu__profile__img {
background-color: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
.navbar__menu__profile__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease-in-out;
}
.navbar__menu__profile__img:hover img {
transform: scale(1.1);
}
.navbar__menu__profile__name {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: 100%;
margin-left: 10px;
}
.navbar__menu__profile__name.hard {
display: flex !important;
margin-left: unset;
}
.navbar__menu__profile__name__text {
font-size: 16px;
font-weight: 500;
color: var(--title-color);
transition: all 0.1s ease-in-out;
}
.navbar__menu__profile__down {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: 100%;
margin-left: 10px;
}
@media screen and (max-width: 768px) {
.navbar__menu__profile {
padding: 5px 5px;
}
.navbar__menu__profile__name {
display: none;
}
.navbar__menu__profile__name.hard {
display: flex !important;
}
.navbar__menu__profile__down {
display: none;
}
}
.navbar__menu__profile__down svg {
width: 20px;
height: 20px;
color: var(--title-color);
transition: all 0.1s ease-in-out;
}
.navbar__menu__profile__dropdown {
position: absolute;
top: 68px;
right: 20px;
width: 220px;
background: color-mix(in srgb, var(--navbar-bg-color) 92%, transparent);
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
border-radius: var(--border-radius-lg);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.35),
inset 0 0 0 1px var(--ui-border-glass);
padding: 12px 0;
cursor: default;
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
transform: translateY(-6px) scale(0.98);
pointer-events: none;
transition:
opacity 0.18s ease,
transform 0.18s ease;
}
@media (max-width: 768px) {
.navbar__menu__profile__dropdown {
width: 100%;
right: 0;
}
.navbar__menu__profile__dropdown.active {
transform: translateY(0) scale(1);
}
}
.navbar__menu__profile__dropdown.active {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.navbar__menu__profile__dropdown__item {
width: calc(100% - 16px);
padding: 10px 14px;
border-radius: var(--border-radius-md);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background-color 0.15s ease,
transform 0.1s ease;
}
.navbar__menu__profile__dropdown__item:hover {
background-color: var(--ui-hover-bg);
}
.navbar__menu__profile__dropdown__item:active {
transform: scale(0.98);
}
.navbar__menu__profile__dropdown__item a {
width: 100%;
text-align: left;
color: var(--title-color);
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
/* ARKA PLAN GRADIENT */
@keyframes moveInCircle {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes moveVertical {
0% {
transform: translateY(-50%);
}
50% {
transform: translateY(50%);
}
100% {
transform: translateY(-50%);
}
}
@keyframes moveHorizontal {
0% {
transform: translateX(-50%) translateY(-10%);
}
50% {
transform: translateX(50%) translateY(10%);
}
100% {
transform: translateX(-50%) translateY(-10%);
}
}
.gradient-bg {
width: 100vw;
height: 100vh;
position: fixed;
overflow: hidden;
background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
top: 0;
left: 0;
z-index: -1;
}
.gradient-bg .svgBlur {
display: none;
}
.gradient-bg .noiseBg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
mix-blend-mode: soft-light;
opacity: 0.3;
}
.gradient-bg .gradients-container {
filter: url(#goo) blur(40px);
width: 100%;
height: 100%;
}
.gradient-bg .g1 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--interactive-color1), 0.8) 0, rgba(var(--interactive-color1), 0) 50%) no-repeat;
mix-blend-mode: var(--interactive-blending);
width: var(--interactive-circle-size);
height: var(--interactive-circle-size);
top: calc(50% - var(--interactive-circle-size) / 2);
left: calc(50% - var(--interactive-circle-size) / 2);
transform-origin: center center;
animation: moveVertical 30s ease infinite;
opacity: 1;
}
.gradient-bg .g2 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--interactive-color2), 0.8) 0, rgba(var(--interactive-color2), 0) 50%) no-repeat;
mix-blend-mode: var(--interactive-blending);
width: var(--interactive-circle-size);
height: var(--interactive-circle-size);
top: calc(50% - var(--interactive-circle-size) / 2);
left: calc(50% - var(--interactive-circle-size) / 2);
transform-origin: calc(50% - 400px);
animation: moveInCircle 20s reverse infinite;
opacity: 1;
}
.gradient-bg .g3 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--interactive-color3), 0.8) 0, rgba(var(--interactive-color3), 0) 50%) no-repeat;
mix-blend-mode: var(--interactive-blending);
width: var(--interactive-circle-size);
height: var(--interactive-circle-size);
top: calc(50% - var(--interactive-circle-size) / 2 + 200px);
left: calc(50% - var(--interactive-circle-size) / 2 - 500px);
transform-origin: calc(50% + 400px);
animation: moveInCircle 40s linear infinite;
opacity: 1;
}
.gradient-bg .g4 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--interactive-color4), 0.8) 0, rgba(var(--interactive-color4), 0) 50%) no-repeat;
mix-blend-mode: var(--interactive-blending);
width: var(--interactive-circle-size);
height: var(--interactive-circle-size);
top: calc(50% - var(--interactive-circle-size) / 2);
left: calc(50% - var(--interactive-circle-size) / 2);
transform-origin: calc(50% - 200px);
animation: moveHorizontal 40s ease infinite;
opacity: 0.7;
}
.gradient-bg .g5 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--interactive-color5), 0.8) 0, rgba(var(--interactive-color5), 0) 50%) no-repeat;
mix-blend-mode: var(--interactive-blending);
width: calc(var(--interactive-circle-size) * 2);
height: calc(var(--interactive-circle-size) * 2);
top: calc(50% - var(--interactive-circle-size));
left: calc(50% - var(--interactive-circle-size));
transform-origin: calc(50% - 800px) calc(50% + 200px);
animation: moveInCircle 20s ease infinite;
opacity: 1;
}
.gradient-bg .interactive {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--interactive-color-interactive), 0.8) 0, rgba(var(--interactive-color-interactive), 0) 50%) no-repeat;
mix-blend-mode: var(--interactive-blending);
width: 80%;
height: 80%;
top: -50%;
left: -50%;
opacity: 0.7;
}
/* ARKA PLAN GRADIENT */
.colorredText {
color: var(--secondary-color) !important;
transition: all 0.1s ease-in-out;
}
.colorredText.animated {
font-weight: 800;
position: relative;
background-image: linear-gradient(-225deg, rgb(var(--main-title-b)) 0, rgb(var(--main-title-a-hover)) 29%, rgb(var(--main-title-a)) 67%, rgb(var(--main-title-a-2)) 100%);
background-size: 200% auto;
color: #fff;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: 10s linear infinite textclip;
display: inline-block;
}
@keyframes textclip {
0% {
background-position: 0% center;
}
25% {
background-position: -200% center;
}
75% {
background-position: 0% center;
}
}
.redColorText {
color: rgba(var(--other-c-error-color), 1) !important;
transition: all 0.1s ease-in-out;
}
.greenColorText {
color: rgba(var(--other-c-success-color), 1) !important;
transition: all 0.1s ease-in-out;
}
.infoColorText {
color: rgba(var(--other-c-info-color), 1) !important;
transition: all 0.1s ease-in-out;
}
.warningColorText {
color: rgba(var(--other-c-warning-color), 1) !important;
transition: all 0.1s ease-in-out;
}
/*
Foventra'ya Hoş Geldiniz!
Foventra
*/
.home__content {
position: relative;
width: 100%;
height: 100vh;
height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
/* İçeriğin taşmasını önlemek için */
overflow: hidden;
/* Zoom ve yeniden boyutlandırmada yumuşak geçiş için */
transition: all 0.3s ease-in-out;
}
.home__content__container {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.home__content__container__left {
position: relative;
display: flex;
padding: 15px;
flex-direction: column;
min-height: 200px;
align-items: flex-start;
width: 50%;
left: 0;
margin-left: 5%;
}
@media screen and (max-width: 768px) {
.home__content__container__left {
width: 100%;
margin-left: 0;
margin-bottom: 10px;
align-items: center;
}
}
/* -------------------- GLASS BUTTONS -------------------- */
/* Genel Buton Yapısı */
.glass_btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: var(--border-radius-lg-sm); /* Root'taki değişkenin */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
overflow: hidden;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Birincil Buton (Hemen Kayıt Ol) */
.glass_btn_primary {
background: rgba(var(--secondary-color-rgb), 0.85); /* Root: 75, 92, 246 */
color: var(--title-color);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 15px rgba(var(--secondary-color-rgb), 0.3);
}
.glass_btn_primary:hover {
background: rgba(var(--secondary-color-rgb), 1);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--secondary-color-rgb), 0.45);
color: var(--title-dark-color);
}
/* İkincil Buton (Giriş Yap) */
.glass_btn_secondary {
background: var(--ui-hover-bg); /* Root: rgba(255, 255, 255, 0.08) */
color: var(--title-color);
border: 1px solid var(--ui-border-glass); /* Root: rgba(255, 255, 255, 0.05) */
}
.glass_btn_secondary:hover {
background: var(--ui-active-bg);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* Buton Konteynırı Mesafesi */
.home__content__container__left__buttons {
display: flex;
gap: 16px;
margin-top: 32px;
}
/* Tıklama Efekti */
.glass_btn:active {
transform: translateY(0) scale(0.97);
}
/* Responsive Düzenleme */
@media screen and (max-width: 480px) {
.home__content__container__left__buttons {
flex-direction: column;
width: 100%;
}
.glass_btn {
width: 100%;
}
}
.home__content__container__right {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
right: 0;
margin-right: 5%;
}
@media screen and (max-width: 768px) {
.home__content__container__right {
width: 80%;
margin: 0 auto;
}
}
.home__content__container__left h1 {
font-size: 72px;
font-weight: 700;
color: var(--title-color);
transition: all 0.1s ease-in-out;
text-align: left;
}
@media screen and (max-width: 768px) {
.home__content__container__left h1 {
font-size: 32px;
text-align: center;
}
}
.home__content__container__left p {
font-size: 24px;
font-weight: 500;
color: var(--text-color);
transition: all 0.1s ease-in-out;
text-align: left;
}
@media screen and (max-width: 768px) {
.home__content__container__left p {
font-size: 20px;
text-align: center;
}
}
/*
*/
.hm_r__form_crd {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
background-color: transparent;
}
.hm_r__form_crd__body {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 0 15px 15px 15px;
border-radius: 2px;
}
.hm_r__form_crd__body form {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
width: 100%;
}
.hm_r__form_crd_by_grp {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 10px;
width: 100%;
}
.hm_r__form_crd_by_grp label {
font-size: 14px;
font-weight: 500;
color: var(--title-color);
}
.hm_r__form_crd_by_grp__input {
position: relative;
display: flex;
flex-direction: column;
letter-spacing: -0.01em;
padding: 12px 24px;
font-size: 14px;
font-weight: 500;
border-radius: 12px;
border-color: var(--form-border);
border-width: 1px;
border-style: solid;
background: var(--form-input-bg);
box-shadow: 0 0 0 30px var(--form-input-bg) inset;
-webkit-box-shadow: 0 0 0 30px var(--form-input-bg) inset !important;
color: var(--text-color);
height: 48px;
width: 100%;
transition: all 0.1s ease-in-out;
}
.hm_r__form_crd_by_grp__input.toogle_button {
padding-right: 50px;
}
.hm_r__form_crd_by_grp__password__toggle {
position: absolute;
right: 20px;
bottom: 14px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--subtext-color);
user-select: none;
}
.hm_r__form_crd_by_grp__password__toggle svg {
width: 20px;
height: 20px;
max-width: 20px;
max-height: 20px;
min-width: 20px;
min-height: 20px;
transition: all 0.1s ease-in-out;
}
.hm_r__form_crd_by_grp__input:focus {
outline: none;
border-color: rgba(var(--form-border-2), 0.7);
transition: all 0.1s ease-in-out;
}
.hm_r__form_crd_by_grp__input:hover {
border-color: rgba(var(--form-border-2), 1);
transition: all 0.1s ease-in-out;
}
.hm_r__form_crd_by_grp__input::placeholder {
color: var(--text-color);
font-size: 16px;
}
.hm_r__form_crd_by_grp__input:-webkit-autofill,
.hm_r__form_crd_by_grp__input:-webkit-autofill:hover,
.hm_r__form_crd_by_grp__input:-webkit-autofill:focus,
.hm_r__form_crd_by_grp__input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px var(--form-input-bg) inset !important;
}
.hm_r__form_crd_by_grp__input:-webkit-autofill {
-webkit-text-fill-color: var(--text-color) !important;
}
.hm_r__form_crd_by_grp__input:-webkit-autofill::first-line {
font-size: 16px;
}
.hm_r__form_crd_by_grp__input:-webkit-autofill::placeholder {
color: var(--text-color) !important;
}
.hm_r__form_crd_by_grp_1 {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: 100%;
}
.hm_r__form_crd_by_grp_1__left {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: 50%;
height: 100%;
}
.hm_r__form_crd_by_grp_1__right {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: 50%;
height: 100%;
}
.hm_r__form_crd_by_grp__checkbox {
display: block;
position: relative;
cursor: pointer;
font-size: 1.5rem;
user-select: none;
}
.hm_r__form_crd_by_grp__checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.hm_r__form_crd_by_grp__checkbox__checkmark {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid var(--form-border);
background-color: var(--form-input-bg);
}
.hm_r__form_crd_by_grp__checkbox__checkmark:hover {
border-color: rgba(var(--form-border-2), 1);
transition: all 0.1s ease-in-out;
}
.hm_r__form_crd_by_grp__checkbox__checkmark::before {
content: "";
position: relative;
display: none;
width: 10px;
height: 10px;
border-radius: 2px;
background-color: var(--form-border-2);
}
.hm_r__form_crd_by_grp__checkbox input:checked ~ .hm_r__form_crd_by_grp__checkbox__checkmark::before {
display: block;
}
.hm_r__form_crd_by_grp__checkbox__checkmark:hover::before {
transition: all 0.1s ease-in-out;
}
.hm_r__form_crd_by_grp__checkbox__checkmark::before {
display: none;
}
.hm_r__form_crd_by_grp__checkbox input:checked ~ .hm_r__form_crd_by_grp__checkbox__checkmark {
border-color: rgba(var(--form-border-2), 1);
background-color: rgba(var(--form-border-2), 0.7);
}
.hm_r__form_crd_by_grp__checkbox input:checked ~ .hm_r__form_crd_by_grp__checkbox__checkmark::before {
left: 0%;
top: 0%;
width: 4px;
height: 8px;
border: solid var(--title-color);
border-width: 0 0.15em 0.15em 0;
transform: rotate(45deg);
}
.hm_r__form_crd_by_grp__checkbox__label {
font-size: 14px;
font-weight: 500;
color: var(--title-color);
cursor: pointer;
user-select: none;
}
.hm_r__form_crd_by_grp__password__forgot {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
}
.hm_r__form_crd_by_grp__password__forgot a {
font-size: 14px;
font-weight: 500;
color: var(--text-color);
text-decoration: none;
}
.hm_r__form_crd_by_grp_btns {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: 100%;
margin-bottom: 20px;
}
.hm_r__form_crd_by_grp_btns__button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
width: 100%;
height: 36px;
border-radius: 8px;
background-color: rgba(var(--secondary-color-rgb), 1);
filter: drop-shadow(0px 1px 3px rgba(var(--secondary-color-rgb), 1));
transition: all 0.1s ease-in-out;
border: none;
cursor: pointer;
outline: none;
transition: all 0.1s ease-in-out;
}
.hm_r__form_crd_by_grp_btns__button > a {
display: flex;
align-items: center;
justify-content: center;
color: var(--title-dark-color);
font-size: 16px;
font-weight: 500;
text-decoration: none;
}
.hm_r__form_crd_by_grp_btns__button:hover {
background: rgba(var(--secondary-color-rgb), 0.7);
}
.hm_r__form_crd_by_grp_btns__button_1 {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
width: 100%;
height: 36px;
border-radius: 8px;
background-color: rgba(var(--primary-color-rgb), 1);
filter: drop-shadow(0px 1px 3px rgba(var(--primary-color-rgb), 1));
border: 1px solid rgba(var(--primary-color-rgb), 1);
transition: all 0.1s ease-in-out;
border: none;
cursor: pointer;
outline: none;
transition: all 0.1s ease-in-out;
}
.hm_r__form_crd_by_grp_btns__button_1 > a {
display: flex;
align-items: center;
justify-content: center;
color: var(--title-color);
font-size: 16px;
font-weight: 500;
text-decoration: none;
}
.hm_r__form_crd_by_grp_btns__button_1:hover {
background: rgba(var(--primary-color-rgb), 0.7);
}
/*
*/
.main_page_items {
position: relative;
width: 100%;
height: fit-content;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all 0.1s ease-in-out;
margin-top: 400px;
margin-bottom: 100px;
gap: 150px;
overflow: hidden;
}
.main_page_items_item {
position: relative;
width: 90%;
height: fit-content;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all 0.1s ease-in-out;
}
.main_page_items_item_title {
position: relative;
width: 100%;
height: fit-content;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
text-align: center;
}
.main_page_items_item_title h2 {
font-size: 32px;
font-weight: 700;
color: var(--title-color);
transition: all 0.1s ease-in-out;
}
.main_page_items_item_text {
position: relative;
width: 100%;
height: fit-content;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
text-align: center;
}
.main_page_items_item_text h3 {
font-size: 18px;
font-weight: 500;
color: var(--text-color);
transition: all 0.1s ease-in-out;
}
.shiny-text {
display: inline-block;
font-weight: bold;
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation-name: shine;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.shiny-text.pause {
animation-play-state: paused;
}
@keyframes shine {
0% {
background-position: 150% center;
}
100% {
background-position: -50% center;
}
}
.main_page_items_item_1_cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px 0;
}
.main_page_items_item_1_cards_card {
width: calc(25% - 15px);
background: color-mix(in srgb, var(--navbar-bg-color) 85%, transparent);
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
border-radius: var(--border-radius-lg);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.25),
inset 0 0 0 1px var(--ui-border-glass);
padding: 24px 20px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.main_page_items_item_1_cards_card:hover {
transform: translateY(-6px) scale(1.03);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.35),
inset 0 0 0 1px var(--main-accent-color);
}
.main_page_items_item_1_cards_card_icon svg {
width: 48px;
height: 48px;
margin-bottom: 16px;
stroke: var(--main-accent-color);
transition: stroke 0.25s ease;
}
.main_page_items_item_1_cards_card:hover .main_page_items_item_1_cards_card_icon svg {
stroke: var(--title-color);
}
.main_page_items_item_1_cards_card_body {
text-align: left;
width: 100%;
}
.main_page_items_item_1_cards_card_title {
font-size: 18px;
font-weight: 600;
color: var(--title-color);
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
width: 100%;
gap: 8px;
flex-wrap: wrap;
}
.main_page_items_item_1_cards_card_title sup {
position: relative;
top: 0;
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 2px 8px;
border-radius: 999px;
line-height: 1.4;
text-transform: uppercase;
background: rgba(var(--secondary-color-rgb, 75, 92, 246), 0.12);
color: var(--secondary-color, #4b5cf6);
border: 1px solid rgba(var(--secondary-color-rgb, 75, 92, 246), 0.28);
}
.main_page_items_item_1_cards_card_title sup.badge-success {
background: rgba(40, 199, 111, 0.15);
color: #28c76f;
border-color: rgba(40, 199, 111, 0.35);
}
.main_page_items_item_1_cards_card_title sup.badge-warning {
background: rgba(255, 159, 67, 0.15);
color: #ff9f43;
border-color: rgba(255, 159, 67, 0.35);
}
.main_page_items_item_1_cards_card_title sup.badge-info {
background: rgba(var(--secondary-color-rgb, 75, 92, 246), 0.15);
color: var(--secondary-color, #4b5cf6);
border-color: rgba(var(--secondary-color-rgb, 75, 92, 246), 0.35);
}
.main_page_items_item_1_cards_card_title sup.badge-primary {
background: rgba(115, 103, 240, 0.15);
color: #7367f0;
border-color: rgba(115, 103, 240, 0.35);
}
.main_page_items_item_1_cards_card_text {
font-size: 14px;
color: var(--text-color);
line-height: 1.5;
}
/* Responsive */
@media (max-width: 1024px) {
.main_page_items_item_1_cards_card {
width: calc(33.333% - 13.333px);
}
}
@media (max-width: 768px) {
.main_page_items_item_1_cards_card {
width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.main_page_items_item_1_cards_card {
width: 100%;
}
}
.mn_bt-0 {
margin-bottom: 0 !important;
}
.mn_bt-5 {
margin-bottom: 5px !important;
}
.mn_bt-10 {
margin-bottom: 10px !important;
}
.mn_bt-15 {
margin-bottom: 15px !important;
}
.mn_bt-20 {
margin-bottom: 20px !important;
}
.mn-tp-0 {
margin-top: 0 !important;
}
.mn-tp-5 {
margin-top: 5px !important;
}
.mn-tp-10 {
margin-top: 10px !important;
}
.mn-tp-15 {
margin-top: 15px !important;
}
.mn-tp-20 {
margin-top: 20px !important;
}
.table_compare_wrap {
width: 100%;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--main-accent-color) 45%, transparent) color-mix(in srgb, var(--navbar-bg-color) 70%, transparent);
border-radius: var(--border-radius-lg);
display: none;
}
.table_compare_wrap.active {
display: block;
}
.table_compare_wrap::-webkit-scrollbar {
height: 10px;
}
.table_compare_wrap::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--navbar-bg-color) 70%, transparent);
border-radius: 999px;
backdrop-filter: blur(8px);
}
.table_compare_wrap::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--main-accent-color) 35%, transparent);
border-radius: 999px;
backdrop-filter: blur(12px);
opacity: 0.4;
border: 1px solid var(--ui-border-glass);
}
.table_compare_wrap::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--main-accent-color) 55%, transparent);
opacity: 1;
}
.table_compare_table {
min-width: 900px;
width: 100%;
background: color-mix(in srgb, var(--navbar-bg-color) 85%, transparent);
backdrop-filter: blur(18px);
border-radius: var(--border-radius-lg);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}
/* HEADER & ROW AYNI GRID */
.table_compare_head,
.table_compare_row {
display: grid;
grid-template-columns: 240px repeat(auto-fit, minmax(160px, 1fr));
}
.table_compare_head > div {
padding: 18px;
font-weight: 600;
border-bottom: 1px solid var(--ui-border-glass);
color: var(--title-color);
}
.table_compare_row > div {
padding: 16px;
border-bottom: 1px solid var(--ui-border-glass);
color: var(--text-color);
}
.table_compare_row:hover > div {
background: color-mix(in srgb, var(--main-accent-color) 10%, transparent);
}
@media (max-width: 768px) {
.table_compare_wrap {
overflow: visible;
}
.table_compare_table {
display: flex;
flex-direction: column;
min-width: 100%;
background: none;
box-shadow: none;
}
.table_compare_head {
display: none;
}
.table_compare_row {
display: grid;
grid-template-columns: 1fr;
background: color-mix(in srgb, var(--navbar-bg-color) 85%, transparent);
border-radius: var(--border-radius-lg);
margin-bottom: 16px;
backdrop-filter: blur(16px) saturate(120%);
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.25),
inset 0 0 0 1px var(--ui-border-glass);
}
.table_compare_row > div {
display: flex;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--ui-border-glass);
color: var(--text-color);
text-align: right;
}
.table_compare_row > div::before {
content: attr(data-label);
font-weight: 500;
color: var(--title-color);
text-align: left;
}
.table_compare_row > div:last-child {
border-bottom: none;
}
}
.table_compare_head_best {
display: inline-flex;
margin-left: 8px;
padding: 4px 10px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(var(--secondary-color-rgb), 0.9), rgba(var(--secondary-color-rgb), 0.6));
backdrop-filter: blur(6px);
animation: badgeGlow 2.8s ease-in-out infinite;
}
.table_compare_head_best span {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
color: var(--title-dark-color);
}
@keyframes badgeGlow {
0%,
100% {
box-shadow:
0 -6px 18px rgba(var(--secondary-color-rgb), 0.35),
inset 0 0 0 1px rgba(var(--title-color-rgb), 0.25);
}
50% {
box-shadow:
0 6px 22px rgba(var(--secondary-color-rgb), 0.6),
inset 0 0 0 1px rgba(var(--title-color-rgb), 0.45);
}
}
.foventra_product_filter {
display: inline-flex;
gap: 8px;
margin: 22px 0 28px;
padding: 6px;
background: color-mix(in srgb, var(--navbar-bg-color) 75%, transparent);
backdrop-filter: blur(14px) saturate(120%);
border-radius: 999px;
box-shadow:
inset 0 0 0 1px var(--ui-border-glass),
0 8px 26px rgba(0, 0, 0, 0.25);
}
.foventra_product_filter button {
appearance: none;
border: none;
cursor: pointer;
padding: 10px 18px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
color: var(--text-color);
background: transparent;
transition: all 0.25s ease;
}
.foventra_product_filter button:hover {
background: color-mix(in srgb, var(--main-accent-color) 12%, transparent);
}
.foventra_product_filter button.active {
background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.85), rgba(var(--primary-color-rgb), 0.6));
color: #fff;
box-shadow:
0 6px 20px rgba(var(--primary-color-rgb), 0.45),
inset 0 0 0 1px rgba(var(--title-color-rgb), 0.25);
}
@media (max-width: 768px) {
.foventra_product_filter {
flex-wrap: wrap;
justify-content: center;
border-radius: 20px;
}
.foventra_product_filter button {
padding: 8px 14px;
font-size: 13px;
}
}
/* CTA alanı */
.glass_cta {
display: flex;
gap: 18px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 60px;
}
.glass_btn {
position: relative;
padding: 16px 36px;
border-radius: 18px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;
text-decoration: none;
color: var(--title-color);
background: rgba(var(--page-color-rgb), 0.55);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--ui-border-glass);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.35),
inset 0 1px 1px rgba(var(--page-color-rgb), 0.18);
transition: all 0.35s ease;
overflow: hidden;
}
.glass_btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(var(--title-color-rgb), 0.35), rgba(var(--title-color-rgb), 0.08), rgba(var(--title-color-rgb), 0));
opacity: 0.6;
pointer-events: none;
transition: opacity 0.35s ease;
}
.glass_btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 18px 45px rgba(var(--page-color-rgb), 0.45),
inset 0 1px 1px rgba(var(--title-color-rgb), 0.25);
}
.glass_btn:hover::before {
opacity: 0.8;
}
.glass_primary {
background: linear-gradient(135deg, rgba(var(--secondary-color-rgb), 0.95), rgba(var(--secondary-color-rgb), 0.8));
color: var(--title-dark-color);
border: 1px solid rgba(var(--secondary-color-rgb), 0.9);
}
.glass_primary:hover {
background: linear-gradient(135deg, rgba(var(--secondary-color-rgb), 1), rgba(var(--secondary-color-rgb), 0.8));
}
.glass_secondary {
background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 1), rgba(var(--primary-color-rgb), 0.9));
color: var(--title-color);
border: 1px solid rgba(var(--primary-color-rgb), 0.4);
}
.glass_secondary:hover {
background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 1), rgba(var(--primary-color-rgb), 1));
}
.logo_loop_wrapper {
overflow-x: auto;
scroll-behavior: smooth;
cursor: grab;
padding: 16px 0;
width: 100%;
}
.logo_loop_wrapper.active {
cursor: grabbing;
}
.logo_loop_inner {
display: flex;
gap: 24px;
}
.logo_item {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 12px;
border-radius: 12px;
text-decoration: none;
color: var(--title-color);
background: color-mix(in srgb, var(--navbar-bg-color) 85%, transparent);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
border: 1px solid rgba(var(--title-color-rgb), 0.15);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.logo_item:hover {
transform: translateY(-3px);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.25),
inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
.logo_item_logo {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: var(--border-radius-md);
background: rgba(var(--secondary-color-rgb), 0.1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.logo_item_logo img {
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
.logo_item_text {
font-size: 15px;
font-weight: 600;
white-space: nowrap;
}
/* Filters */
.foventra_product_filter,
.billing_toggle {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 30px;
}
.foventra_product_filter button,
.billing_toggle button {
padding: 10px 18px;
border-radius: 999px;
background: rgba(var(--page-color-rgb), 0.25);
border: 1px solid rgba(var(--title-color-rgb), 0.15);
color: var(--title-color);
cursor: pointer;
backdrop-filter: blur(10px);
}
.foventra_product_filter button.active,
.billing_toggle button.active {
background: var(--secondary-color);
color: var(--title-dark-color);
}
.pricing_cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin-top: 40px;
}
@media (max-width: 768px) {
.pricing_cards {
gap: 16px;
}
}
@media (max-width: 480px) {
.pricing_cards {
flex-direction: column;
align-items: stretch;
padding: 0 16px;
}
}
.pricing_card {
flex: 1 1 calc(33.333% - 16px);
max-width: 360px;
min-width: 360px;
padding: 28px;
border-radius: 20px;
background: rgba(var(--page-color-rgb), 0.28);
backdrop-filter: blur(14px) saturate(150%);
border: 1px solid rgba(var(--title-color-rgb), 0.15);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 768px) {
.pricing_card {
flex: 1 1 calc(50% - 12px);
max-width: unset;
min-width: unset;
}
}
@media (max-width: 480px) {
.pricing_card {
width: 100%;
max-width: unset;
flex: auto;
min-width: unset;
}
.pricing_card.featured {
transform: none;
box-shadow: unset;
margin-bottom: 0;
}
}
.pricing_card.featured {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
z-index: 1;
}
@media (max-width: 768px) {
.pricing_card.featured {
transform: none;
box-shadow: none;
margin-bottom: 0;
}
}
.pricing_card .badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--secondary-color);
padding: 4px 14px;
border-radius: 999px;
font-size: 12px;
color: #fff;
}
.pricing_card h3 {
font-size: 24px;
margin: 0;
color: var(--title-color);
}
.price {
font-size: 34px;
margin: 16px 0;
}
.price span {
font-size: 18px;
opacity: 0.7;
}
.price sub {
font-size: 16px;
color: var(--text-color);
}
.features {
list-style: none;
padding: 0;
margin: 20px 0;
text-align: left;
width: 100%;
}
.features li {
padding: 8px 0;
border-bottom: transparent 1px solid;
font-size: 14px;
}
.pricing_btn {
width: 100%;
padding: 12px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(var(--page-color-rgb), 0.4), rgba(var(--page-color-rgb), 0.2));
border: 1px solid rgba(var(--title-color-rgb), 0.2);
color: var(--title-color);
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
text-align: center;
text-decoration: none;
display: inline-block;
margin-top: auto;
}
.pricing_btn.primary {
background: linear-gradient(135deg, rgba(var(--secondary-color-rgb), 1), rgba(var(--secondary-color-rgb), 0.4));
color: var(--title-dark-color);
border: 1px solid rgba(var(--secondary-color-rgb), 0.9);
transition: all 0.3s ease;
}
.pricing_btn.standart:hover {
background: linear-gradient(135deg, rgba(var(--page-color-rgb), 0.6), rgba(var(--page-color-rgb), 0.3));
transition: all 0.3s ease;
}
.pricing_btn.primary:hover {
background: linear-gradient(135deg, rgba(var(--secondary-color-rgb), 1), rgba(var(--secondary-color-rgb), 0.6));
transition: all 0.3s ease;
}
.pricing_btn.standart:hover,
.pricing_btn.primary:hover {
transform: translateY(-2px) scale(1.02);
}
.pricing_feature {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
color: var(--text-color);
font-size: 14px;
}
.pricing_feature_icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.pricing_feature_icon svg {
width: 22px;
height: 22px;
stroke: currentColor;
}
.pricing_feature_icon.success {
color: rgb(var(--success-rgb));
}
.pricing_feature_icon.error {
color: rgb(var(--error-rgb));
opacity: 0.6;
}
.pricing_feature_icon.king {
color: var(--secondary-color);
font-weight: 600;
}
.pricing_feature_icon.sad {
color: rgb(var(--error-rgb));
opacity: 0.6;
}
.pricing_feature_icon.smile {
color: rgb(var(--warning-rgb));
}
/*
*/
/* glassmorphism pricing note */
/* glassmorphism */
.pricing_note {
display: flex;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
padding: 16px 24px;
background: rgba(var(--page-color-rgb), 0.25);
backdrop-filter: blur(14px) saturate(150%);
border-radius: var(--border-radius-lg);
border: 1px solid rgba(var(--title-color-rgb), 0.15);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.25),
inset 0 1px 1px rgba(var(--title-color-rgb), 0.1);
}
.pricing_note.column {
flex-direction: column;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 768px) {
.pricing_note {
justify-content: center;
}
.pricing_note.column {
flex-direction: column;
align-items: start;
}
}
.note_item {
display: flex;
align-items: center;
gap: 8px;
}
.note_icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-color);
}
.note_icon.success {
color: rgb(var(--success-rgb));
}
.note_icon.error {
color: rgb(var(--error-rgb));
opacity: 0.6;
}
.note_icon.king {
color: var(--secondary-color);
font-weight: 600;
}
.note_icon.sad {
color: rgb(var(--error-rgb));
opacity: 0.6;
}
.note_icon.smile {
color: rgb(var(--warning-rgb));
}
.note_text {
font-size: 14px;
color: var(--text-color);
}
/* -------------------- GLASS FOOTER -------------------- */
.glass_footer {
width: 100%;
margin-top: 120px;
padding: 60px 20px 20px;
background: linear-gradient(180deg, rgba(var(--page-color-rgb), 0.15), rgba(var(--page-color-rgb), 0.35));
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border-top: 1px solid var(--ui-border-glass);
}
.glass_footer_inner {
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 40px;
}
/* BRAND */
.glass_footer_brand img {
width: auto;
height: 40px;
object-fit: cover;
transition: all 0.1s ease-in-out;
}
.glass_footer_brand p {
font-size: 14px;
color: var(--text-muted-color);
max-width: 280px;
line-height: 1.6;
}
/* COLUMNS */
.glass_footer_col h4 {
font-size: 24px;
font-weight: 600;
margin-bottom: 14px;
color: var(--title-color);
}
.glass_footer_col a {
display: block;
font-size: 16px;
color: var(--text-muted-color);
text-decoration: none;
margin-bottom: 10px;
cursor: pointer;
transition:
color 0.25s ease,
transform 0.25s ease;
}
.glass_footer_col a:hover {
text-decoration: underline;
}
.glass_footer_col .colorred {
color: var(--main-accent-color);
font-weight: 500;
}
/* BOTTOM */
.glass_footer_bottom {
margin-top: 40px;
padding-top: 18px;
border-top: 1px solid var(--ui-border-glass);
text-align: center;
font-size: 13px;
color: var(--text-muted-color);
}
/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 900px) {
.glass_footer_inner {
grid-template-columns: repeat(2, 1fr);
justify-items: center;
text-align: center;
padding: 0 20px;
}
/* İlk kolon full width + ortalı */
.glass_footer_inner > :first-child {
grid-column: 1 / -1;
max-width: 420px;
justify-self: center;
}
}
@media screen and (max-width: 600px) {
.glass_footer_inner {
grid-template-columns: 1fr;
gap: 32px;
text-align: unset;
justify-items: unset;
}
.glass_footer_inner > :first-child {
max-width: 320px;
justify-self: center;
text-align: center;
}
}
@media (max-width: 520px) {
.glass_footer_inner {
gap: 28px;
}
}
