:root.dark {
    /* --- Temel Renkler --- */
    --popup-bg: #0d1117;
    --text-popup-color: #d9d9d9;
    --title-popup-color: #ffffff;
    --link-popup-color: #4a9eff;

    /* --- Buton Renkleri --- */
    --primary-popup-color: #4a5cf6;
    --primary-popup-hover: #5a6cf7;

    --secondary-popup-color: #5856d6;
    --secondary-popup-hover: #6a68e0;

    --success-color: #2ecc71;
    --success-hover: #27ae60;

    --danger-color: #ff453a;
    --danger-hover: #e03b32;

    --warning-color: #ffd60a;
    --warning-hover: #e6c200;

    --info-color: #64d2ff;
    --info-hover: #4bbfe6;

    --default-color: #8e8e93;
    --default-hover: #737378;

    /* --- RGB (Toast / Opacity) --- */
    --info-rgb: 100, 210, 255;
    --error-rgb: 255, 69, 58;
    --warning-rgb: 255, 214, 10;
    --success-rgb: 46, 204, 113;

    /* --- Yapısal --- */
    --border-radius: 14px;
    --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    --overlay-bg: rgba(0, 0, 0, 0.55);
}

:root.light {
    /* --- Temel Renkler --- */
    --popup-bg: #ffffff;
    --text-popup-color: #333333;
    --title-popup-color: #0b0b0b;
    --link-popup-color: #007aff;

    /* --- Buton Renkleri --- */
    --primary-popup-color: #007aff;
    --primary-popup-hover: #0062cc;

    --secondary-popup-color: #5856d6;
    --secondary-popup-hover: #4745ac;

    --success-color: #34c759;
    --success-hover: #2db14f;

    --danger-color: #ff3b30;
    --danger-hover: #d63229;

    --warning-color: #ffcc00;
    --warning-hover: #e6b800;

    --info-color: #5ac8fa;
    --info-hover: #4bb3e0;

    --default-color: #8e8e93;
    --default-hover: #737378;

    /* --- RGB (Toast / Opacity) --- */
    --info-rgb: 90, 200, 250;
    --error-rgb: 255, 59, 48;
    --warning-rgb: 255, 204, 0;
    --success-rgb: 52, 199, 89;

    /* --- Yapısal --- */
    --border-radius: 12px;
    --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.05);

    --overlay-bg: rgba(0, 0, 0, 0.4);
}

/* =========================================
   MODAL ROOT
========================================= */

.customPopup {
    position: fixed;
    inset: 0;
    z-index: 100005;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.customPopup.Show {
    display: flex;
    opacity: 1;
}

/* =========================================
   OVERLAY
========================================= */

.customPopup-Overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    z-index: 100004;
}

/* =========================================
   CONTROL LAYER
========================================= */

.customPopup-Control {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.customPopup-Controlable {
    pointer-events: auto;
}

@media screen and (max-width: 480px) {
    .customPopup-Controlable {
        padding: 12px;
        width: 100%;
    }

}

/* =========================================
   MODAL CARD (GLASS)
========================================= */

.popup-header_card {
    width: 440px;
    max-width: 100%;

    background: var(--popup-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);

    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);

    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    transform: translateY(12px) scale(0.97);
    opacity: 0;

    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
}

@media screen and (max-width: 480px) {
    .popup-header_card {
        width: 100%;
        padding: 20px 16px;
    }
}

/* Show */
.customPopup.Show .popup-header_card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Hide */
.customPopup.Bomb .popup-header_card {
    transform: translateY(8px) scale(0.96);
    opacity: 0;
    transition: all 0.2s ease-in;
}

/* =========================================
   CLOSE BUTTON
========================================= */

.popup-header_card_close {
    position: absolute;
    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    cursor: pointer;

    color: var(--default-color);
    background: rgba(0, 0, 0, 0.04);

    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.popup-header_card_close svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.popup-header_card_close:hover {
    background: rgba(var(--error-rgb), 0.12);
    color: var(--danger-color);
}

.popup-header_card_close:active {
    transform: scale(0.92);
}

/* =========================================
   ICON
========================================= */

.popup-header_card_icon_container {
    font-size: 46px;
    line-height: 1;
    margin-top: 6px;
    animation: iconPop 0.45s ease;
}

.popup-header_card_icon_container svg {
    width: 100px;
    height: 100px;
}

/* =========================================
   TEXT
========================================= */

.popup-header_card_text_contaier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    max-width: 90%;
}

.popup-header_card_text_contaier_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.popup-header_card_text_contaier_title_text {
    font-size: 20px;
    font-weight: 700;
    color: var(--title-popup-color);
    text-align: center;
}

.popup-header_card_text_contaier_content {
    display: flex;
    justify-content: center;
}

.popup-header_card_text_contaier_content_text {
    font-size: 14.5px;
    color: var(--text-popup-color);
    line-height: 1.55;
    text-align: center;
}

/* =========================================
   BUTTON GROUP
========================================= */

.popup-header_buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.popup-header_buttons_button {
    min-width: 120px;
    padding: 10px 18px;

    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;

    color: #fff;
    cursor: pointer;
    user-select: none;

    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    align-items: center;
    display: flex;
    justify-content: center;
}

.popup-header_buttons_button:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.popup-header_buttons_button:active {
    transform: scale(0.95);
}

.popup-header_buttons_button_text {
    color: inherit;
    text-decoration: none;
}

/* =========================================
   BUTTON COLORS (TOKEN BASED)
========================================= */

.primary-button-color {
    background: var(--primary-popup-color);
}
.primary-button-color:hover {
    background: var(--primary-popup-hover);
}

.secondary-button-color {
    background: var(--secondary-popup-color);
}
.secondary-button-color:hover {
    background: var(--secondary-popup-hover);
}

.success-button-color {
    background: var(--success-color);
}
.success-button-color:hover {
    background: var(--success-hover);
}

.danger-button-color {
    background: var(--danger-color);
}
.danger-button-color:hover {
    background: var(--danger-hover);
}

.warning-button-color {
    background: var(--warning-color);
    color: #000;
}
.warning-button-color:hover {
    background: var(--warning-hover);
}

.info-button-color {
    background: var(--info-color);
}
.info-button-color:hover {
    background: var(--info-hover);
}

.default-button-color {
    background: var(--default-color);
}
.default-button-color:hover {
    background: var(--default-hover);
}

/* =========================================
   FOOTER
========================================= */

.popup-header_card_footer {
    margin-top: 14px;
    padding-top: 14px;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.popup-header_card_footer_text a {
    font-size: 12px;
    color: var(--default-color);
    text-decoration: none;
}

.popup-header_card_footer_text a:hover {
    color: var(--primary-popup-color);
    text-decoration: underline;
}

/* =========================================
   ICON COLOR TOKENS
========================================= */

.infoColorTest {
    color: var(--info-color);
}
.errorColorTest {
    color: var(--danger-color);
}
.warningColorTest {
    color: var(--warning-color);
}
.successColorTest {
    color: var(--success-color);
}
.questionColorTest {
    color: var(--primary-popup-color);
}

/* =========================================
   TOAST CONTAINER
========================================= */

#customToast-Container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

/* =========================================
   TOAST ITEM (GLASS)
========================================= */

.customToast-Item {
    width: 360px;
    max-width: 92vw;

    background: var(--popup-bg);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);

    padding: 16px 18px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);

    display: flex;
    align-items: flex-start;
    gap: 14px;

    position: relative;
    overflow: hidden;
    pointer-events: auto;

    opacity: 0;
    transform: translateX(40px) scale(0.98);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);

    border-left: 4px solid transparent;
}

/* Show */
.customToast-Item.Show {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Hide */
.customToast-Item.Bomb {
    opacity: 0;
    transform: translateX(80px) scale(0.96);
}

/* =========================================
   CONTENT
========================================= */

.customToast-Item-Icon {
    font-size: 22px;
    line-height: 1;
    margin-top: 2px;
    animation: iconPop 0.4s ease;
}

.customToast-Item-Text {
    flex: 1;
}

.customToast-Item-Text-Title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--title-popup-color);
    margin-bottom: 3px;
}

.customToast-Item-Text-Content {
    font-size: 13px;
    color: var(--text-popup-color);
    line-height: 1.45;
}

/* =========================================
   COLOR VARIANTS (TOKEN BASED)
========================================= */

/* INFO */
.customToast-Item.infoColor {
    border-left-color: var(--info-color);
    background: linear-gradient(90deg, rgba(var(--info-rgb), 0.12), rgba(var(--info-rgb), 0.04), transparent), var(--popup-bg);
}
.customToast-Item.infoColor .customToast-Item-Icon {
    color: var(--info-color);
}

/* ERROR */
.customToast-Item.errorColor {
    border-left-color: var(--danger-color);
    background: linear-gradient(90deg, rgba(var(--error-rgb), 0.14), rgba(var(--error-rgb), 0.05), transparent), var(--popup-bg);
}
.customToast-Item.errorColor .customToast-Item-Icon {
    color: var(--danger-color);
}

/* WARNING */
.customToast-Item.warningColor {
    border-left-color: var(--warning-color);
    background: linear-gradient(90deg, rgba(var(--warning-rgb), 0.14), rgba(var(--warning-rgb), 0.05), transparent), var(--popup-bg);
}
.customToast-Item.warningColor .customToast-Item-Icon {
    color: var(--warning-color);
}

/* SUCCESS */
.customToast-Item.successColor {
    border-left-color: var(--success-color);
    background: linear-gradient(90deg, rgba(var(--success-rgb), 0.14), rgba(var(--success-rgb), 0.05), transparent), var(--popup-bg);
}
.customToast-Item.successColor .customToast-Item-Icon {
    color: var(--success-color);
}

/* =========================================
   PROGRESS BAR
========================================= */

.customToast-ProgressBar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: left;
    animation: progressLinear linear forwards;
}

/* Token bazlı */
.infoColor .customToast-ProgressBar {
    background: rgb(var(--info-rgb));
}
.errorColor .customToast-ProgressBar {
    background: rgb(var(--error-rgb));
}
.warningColor .customToast-ProgressBar {
    background: rgb(var(--warning-rgb));
}
.successColor .customToast-ProgressBar {
    background: rgb(var(--success-rgb));
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes progressLinear {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

@keyframes iconPop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }
    60% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {
    #customToast-Container {
        top: 12px;
        left: 12px;
        right: 12px;
        align-items: center;
    }

    .customToast-Item {
        width: 100%;
    }
}