@import url("https://p.typekit.net/p.css?s=1&k=rii6sdv&ht=tk&f=25495.25496.25497.25498.25499.25500.25501.58117.58121.35472.35473.35474.35476.35477.35478.35480.35484.54656.54657.54659.54660.54663.54664.54665.54666.54667&a=192638705&app=typekit&e=css");

@font-face {
    font-family:"stevie-sans";
    src:url("https://use.typekit.net/af/798ceb/00000000000000007735a69a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/798ceb/00000000000000007735a69a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/798ceb/00000000000000007735a69a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:900;font-stretch:normal;
}

@font-face {
    font-family:"stevie-sans";
    src:url("https://use.typekit.net/af/1c305e/00000000000000007735a6b3/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/1c305e/00000000000000007735a6b3/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/1c305e/00000000000000007735a6b3/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
    font-family:"stevie-sans";
    src:url("https://use.typekit.net/af/083076/00000000000000007735a699/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/083076/00000000000000007735a699/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/083076/00000000000000007735a699/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
    font-family:"stevie-sans";
    src:url("https://use.typekit.net/af/2a38f0/00000000000000007735a69e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/2a38f0/00000000000000007735a69e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/2a38f0/00000000000000007735a69e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}

@font-face {
    font-family:"stevie-sans";
    src:url("https://use.typekit.net/af/ad2711/00000000000000007735a6a5/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/ad2711/00000000000000007735a6a5/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/ad2711/00000000000000007735a6a5/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}

@font-face {
    font-family:"stevie-sans";
    src:url("https://use.typekit.net/af/d21501/00000000000000007735a6aa/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/d21501/00000000000000007735a6aa/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/d21501/00000000000000007735a6aa/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}

@font-face {
    font-family:"stevie-sans";
    src:url("https://use.typekit.net/af/fb7d0d/00000000000000007735a6b1/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff2"),url("https://use.typekit.net/af/fb7d0d/00000000000000007735a6b1/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff"),url("https://use.typekit.net/af/fb7d0d/00000000000000007735a6b1/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:200;font-stretch:normal;
}

@font-face {
    font-family:"stevie-sans";
    src:url("https://use.typekit.net/af/14ab80/000000000000000077572318/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/14ab80/000000000000000077572318/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/14ab80/000000000000000077572318/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:700;font-stretch:normal;
}

@font-face {
    font-family:"stevie-sans";
    src:url("https://use.typekit.net/af/5bfcc4/00000000000000007757231c/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/5bfcc4/00000000000000007757231c/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/5bfcc4/00000000000000007757231c/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
}

@font-face {
    font-family:"basic-sans";
    src:url("https://use.typekit.net/af/60b710/00000000000000007735abd4/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/60b710/00000000000000007735abd4/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/60b710/00000000000000007735abd4/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:900;font-stretch:normal;
}

@font-face {
    font-family:"basic-sans";
    src:url("https://use.typekit.net/af/4bfb19/00000000000000007735abd7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/4bfb19/00000000000000007735abd7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/4bfb19/00000000000000007735abd7/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:700;font-stretch:normal;
}

@font-face {
    font-family:"basic-sans";
    src:url("https://use.typekit.net/af/fa5d28/00000000000000007735abe8/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/fa5d28/00000000000000007735abe8/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/fa5d28/00000000000000007735abe8/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
    font-family:"basic-sans";
    src:url("https://use.typekit.net/af/c68f64/00000000000000007735abe6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/c68f64/00000000000000007735abe6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/c68f64/00000000000000007735abe6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}

@font-face {
    font-family:"basic-sans";
    src:url("https://use.typekit.net/af/49252d/00000000000000007735abed/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/49252d/00000000000000007735abed/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/49252d/00000000000000007735abed/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
}

@font-face {
    font-family:"basic-sans";
    src:url("https://use.typekit.net/af/721f9c/00000000000000007735abf2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/721f9c/00000000000000007735abf2/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/721f9c/00000000000000007735abf2/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
    font-family:"basic-sans";
    src:url("https://use.typekit.net/af/515e84/00000000000000007735abfc/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/515e84/00000000000000007735abfc/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/515e84/00000000000000007735abfc/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}

@font-face {
    font-family:"basic-sans";
    src:url("https://use.typekit.net/af/7008d7/00000000000000007735ac10/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("woff2"),url("https://use.typekit.net/af/7008d7/00000000000000007735ac10/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("woff"),url("https://use.typekit.net/af/7008d7/00000000000000007735ac10/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:100;font-stretch:normal;
}

@font-face {
    font-family:"figtree";
    src:url("https://use.typekit.net/af/ff6ca0/0000000000000000774f4c1a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff2"),url("https://use.typekit.net/af/ff6ca0/0000000000000000774f4c1a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff"),url("https://use.typekit.net/af/ff6ca0/0000000000000000774f4c1a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:800;font-stretch:normal;
}

@font-face {
    font-family:"figtree";
    src:url("https://use.typekit.net/af/c1b31a/0000000000000000774f4c22/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/c1b31a/0000000000000000774f4c22/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/c1b31a/0000000000000000774f4c22/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}

@font-face {
    font-family:"figtree";
    src:url("https://use.typekit.net/af/6c3490/0000000000000000774f4c24/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/6c3490/0000000000000000774f4c24/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/6c3490/0000000000000000774f4c24/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}

@font-face {
    font-family:"figtree";
    src:url("https://use.typekit.net/af/6ba02d/0000000000000000774f4c28/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/6ba02d/0000000000000000774f4c28/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/6ba02d/0000000000000000774f4c28/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
}

@font-face {
    font-family:"figtree";
    src:url("https://use.typekit.net/af/52bac0/0000000000000000774f4c20/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/52bac0/0000000000000000774f4c20/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/52bac0/0000000000000000774f4c20/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:700;font-stretch:normal;
}

@font-face {
    font-family:"figtree";
    src:url("https://use.typekit.net/af/eb2807/0000000000000000774f4c1e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/eb2807/0000000000000000774f4c1e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/eb2807/0000000000000000774f4c1e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
    font-family:"figtree";
    src:url("https://use.typekit.net/af/c57472/0000000000000000774f4c26/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/c57472/0000000000000000774f4c26/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/c57472/0000000000000000774f4c26/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
    font-family:"figtree";
    src:url("https://use.typekit.net/af/ab14d8/0000000000000000774f4c29/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/ab14d8/0000000000000000774f4c29/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/ab14d8/0000000000000000774f4c29/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:900;font-stretch:normal;
}

@font-face {
    font-family:"figtree";
    src:url("https://use.typekit.net/af/938b3c/0000000000000000774f4c1c/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/938b3c/0000000000000000774f4c1c/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/938b3c/0000000000000000774f4c1c/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}

:root{
    --figtree:"figtree",sans-serif;
    --basicsans:"basic-sans",sans-serif;
    --steviesans:"stevie-sans",sans-serif;
}
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    transition: all 0.3s ease;
    background-color:#FBF8F8;
    scrollbar-color: #48BEA6 #F1F1F1;
}

/* Sidebar Styles */
.sidebar {
    background-color: #F9F9F9;
    color: white;
    min-height: 100vh;
    overflow: hidden;
    position: absolute;
    top:0;
    left: 0;
    width:10%;
    z-index: 200;
    display: flex;
    justify-content: center;
    flex-direction: column;
    transition: .1s;
    border-right: 3px solid #D9D9D9;
}
.sidebar:hover{
    width: 20%;
    z-index: 100;
}
.sidebar .logo{
    margin: 79px auto;
}
.sidebar a {
    text-decoration: none;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 75px;
    color: rgba(221, 221, 221, 0.50);
    font-size: 0px;
    font-style: normal;
    font-weight: 500;
    width: 100%;
    transition: 0s all ease;
    color: #3D3D3D;
    line-height: normal;
    margin-bottom: 5px;
    border-radius: 50px;

}
.sidebar:hover a{
    font-size: 14px;
    width: 100%;
    border-radius: 50px 0px 0px 50px;
    background: #fff;
}
.sidebar a i{
    font-size: 24px;
    width: 50px;
    height: 50px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    color: #3D3D3D;
    border-radius: 25px;
    background-color: #fff;
}
.sidebar a.active {
    background: transparent;
    color: #3D3D3D;
    font-size: 0px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    transition: 0s;
}
.sidebar:hover a.active{
    background: #48BEA6;
    color: #fff;
    font-size: 14px;
}
.sidebar a:hover i, .sidebar a.active i{
    background: #48BEA6;
    color: #fff;
}
.content{
    height: 92vh;
    overflow-y: scroll;
    padding: 20px;
}
#profilim.content{
    overflow: visible;
}
#bildirimler.content{
    overflow: visible;
}
.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-box input {
    border: none;
    outline: none;
    width: 200px;
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.search-box a:nth-child(2){
   color: var(--text-black-60, rgba(45, 45, 45, 0.60));
   position: absolute;
   z-index: 2;
   right: 20px;
}
.topbar .d-flex {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dropdown-menu a {
    padding: 10px;
    color: #000;
    text-decoration: none;
}



/* Topbar Styles */
.topbar {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 8vh;
    padding: 10px 35px;
    z-index: 11;
}
.topbar .topictbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px;
  z-index: 10;
  position: relative;
  height: auto;
}
.topbar .topictbar .kutubaslik h5{
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
}
.topbar .search-box {
    margin: 5px;
    border-radius: 50px;

}
.topbarucuncu {
    margin-left: ;
}
.topbar .search-box input {
   display: inline-flex;
   padding: 10px 12px 10px 17px;
   justify-content: flex-end;
   align-items: center;
   gap: 165px;
   border-radius: 50px;
   width: 390px;
   position: relative;
   color: var(--text-black-60, rgba(45, 45, 45, 0.60));
   font-family: var(--steviesans);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   background: rgba(255, 255, 255, 0.65);
}
.topbar .search-box form{
    display: flex;
    align-items: center;
    position: relative;
}
.topbar .user-menu {
    position: relative;
    display: flex;
}
.topbar .user-menu .btn.btn-primary.dropdown-toggle {
    display: flex;
    padding:10px 12px 10px 17px;
    justify-content: center;
    align-items: center;
    transition: .3s;
    width: 160px;
    border-radius: 50px;
    background: rgba(241, 241, 241, 0.65);
    border: none;
}
.topbar .user-menu .icusermen{
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    margin-left: 5px;
    margin-right: 25px;
}
.topbar .user-menu .icusermen p{
    padding: 0;
    margin: 0;
    color: #3D3D3D;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.topbar .user-menu .icusermen span{
    color: rgba(255, 255, 255, 0.50);
    font-size: 12px;
    font-style: normal;
    font-weight: 550;
    line-height: normal;
    display: none;
}
.dropdown-toggle::after{
    display: none;
}
.topbar .user-menu #icon2{
    color: #2D2D2D;
    font-size: 12px;
}
.topbar .user-menu .parag1{
    display: flex;
}

.topbar .user-menu .btn i{

    color: #48BEA6;


}
.topbar .user-menu .btn.btn-primary.show.dropdown-toggle{
    border-radius: 0;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    background-color: #55BCA7;
}
.topbar .user-menu .btn.btn-primary.show.dropdown-toggle i {
    color: #fff;
}
.topbar .user-menu .btn.btn-primary.show.dropdown-toggle p {
    color: #fff;
}
.topbar .user-menu .btn.btn-primary.show.dropdown-toggle #icon2{
    color: #fff;
}
.topbar .user-menu .dropdown-menu {
    position: absolute;
    top: -2px !important;
    right: 0;
    border: none;
    background: #55BCA7;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.topbar .user-menu .dropdown-menu a {
    margin: 0px 15px;
    padding: 10px;
    border-top: 1px solid  rgba(255, 255, 255, 0.50);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    transition: background 0.3s;
}

.topbar .user-menu .dropdown-menu a:hover {
    background-color: #55BCA7;
}

/* Notification and Fullscreen Button Styles */
.topbar .notification-btn{
    display: flex;
    padding: 5px 10px;
    align-items: center;
    gap: 1px;
    border-radius: 50px;
    background: #F5F3F3;
    cursor: pointer;
    margin-left: 15px;
    text-decoration: none;
}
.topbar .notification-btn >span{
    color: rgba(43, 40, 40, 0.70);
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.topbar .notification-btn i{
    color: #F2CF20;
    font-size: 21px;
}
.topbar .fullscreen-btn {
 border-radius: 3px;
 background: rgba(228, 227, 223, 0.75);
 padding: 7px 8px;
 display: none;
 cursor: pointer;
}
.topbar .fullscreen-btn i{
    color: #2D2D2D99;
    font-size: 18px;
}

.kapsayici{
    display: flex;
}
.sagbar{
    width: 90%;
    margin-left: 10%;
}
.sagarkabar{
    width: 100%;
    height: 76px;
    position: absolute;
    top: 0;
    left: 0;
    background: #55BCA7;
    z-index: -1;

}
.anasayfacont .card{
    margin:10px 0 ;
    padding: 20px;
    background: #FFF;
    border-radius: 20px;
    border: 1px solid #EBEBEB;
    background: #FFF;
    box-shadow: 0px 57px 16px 0px rgba(196, 196, 196, 0.00), 0px 37px 15px 0px rgba(196, 196, 196, 0.01), 0px 21px 12px 0px rgba(196, 196, 196, 0.05), 0px 9px 9px 0px rgba(196, 196, 196, 0.09), 0px 2px 5px 0px rgba(196, 196, 196, 0.10);

}
.anaustcard .card{
    height: 139px;
    position: relative;
    border-radius: 20px;

}
.anasayfacont .anaustcard .yeslicard{
    display: flex;
    align-items: center;
    background: #45DF4D;
    padding: 20px 35px;
    justify-content: space-between;
    margin-bottom: 10px;
}
.anasayfacont .anaustcard .yeslicard h2{
    color: #FFF;
    font-family: var(--basicsans);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}
.anasayfacont .anaustcard .yeslicard h2 > span{
    font-weight: 700;
}
.anasayfacont .anaustcard .yeslicard p{
    color: rgba(255, 255, 255, 0.80);
    font-family: var(--basicsans);
    margin-bottom: 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
}
.dropdown-menu.show{
    background: #F5F5F5;
    border: none;
}
.anasayfacont .anaustcard .yeslicard a{
    display: flex;
    padding: 15px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 3px solid #FFF;
    background: rgba(255, 255, 255, 0.33);
    color: #FFF;
    font-family: var(--figtree);
    text-decoration: none;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    transition: .3s;
}
.anasayfacont .anaustcard .yeslicard a:hover{
    opacity: .9;
    transform: scale(1.1);
}
.anasayfacont .row.karperformans{
 display: grid; 
 grid-template-rows: 1fr 1fr;
 grid-template-columns: 2fr 1fr;
 gap: 20px;
 margin: 0;
 padding-top: 10px;
}
.anasayfacont .row.karperformans .item-0{
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-column-end: 2;
    margin: 0;

}
.anasayfacont .row.karperformans .item-1{
 grid-row-start: 2;
 grid-column-start: 1;
 grid-row-end: 3;
 grid-column-end: 2;
 margin: 0;
 height: 331px;
}
.anasayfacont .row.karperformans .item-1 .tablee{
    overflow-y:scroll;
    scrollbar-color: #48BEA6 #F1F1F1;
    margin-top: 10px;

}
.anasayfacont .row.karperformans .item-2{
 grid-row-start: 1;
 grid-column-start: 2;
 grid-row-end: 3;
 grid-column-end: 3;
 margin: 0;
}
.ciro-legend {
    display: flex;
    overflow: auto;
    flex-direction: column;
    gap: 10px;
    height: 235px;
    scrollbar-color: #48BEA6 #F1F1F1;
}
.anasayfacont .row.karperformans .item-1 .tablee th{
    color: #BABABA;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
}
.anasayfacont .row.karperformans .item-1 .tablee td {
    color: var(--Grey, #3D3D3D);
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    text-align: center;

}
.row.karperformans > div.card.item-1 > div.tablee > table > tbody > tr > td:nth-child(1){
    padding: 0;
}
.row.karperformans .table tr{
    border-bottom: 3px solid transparent;
}
.row.karperformans .table tr td{
    background: #FCFCFC;
}
.row.karperformans  .table thead {
    border-bottom: 3px solid transparent;
}
.anasayfacont .row.karperformans .item-1 .tablee td >div >img{
    width: 38px;
    height: 38px;
}
.anasayfacont .row.karperformans .item-1 .tablee td >div >.ictd {
    display: flex;
    flex-direction: column;
    margin-left: 2px;
}
.anasayfacont .row.karperformans .item-1 .tablee td >div >.ictd > h2{
    color: var(--Grey, #3D3D3D);
    text-align: start;
    font-family: var(--figtree);
    margin-bottom: 0;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.anasayfacont .row.karperformans .item-1 .tablee td >div >.ictd > span{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: var(--figtree);
    font-size: 10px;
    text-align: start;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.anasayfacont .row.karperformans td>.badge{
    background: #F88578;
    font-family: var(--figtree);
}
.anasayfacont .row.karperformans .bgyesil > span{
    display: flex;
    border-radius: 5px;
    background: #89F878;
    padding: 10px;
    width: 46px;
    color: #FFF;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap: 10px;
}
.anasayfacont .row.karperformans .bgkirmizi > span{
    display: flex;
    border-radius: 5px;
    margin: auto;
    background: #F88578;
    padding: 10px;
    width: 46px;
    color: #FFF;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.ciro-legend .legend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:5px;
}

.ciro-legend .legend-item .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.ciro-legend .legend-item .legend-label {
    flex: 1;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.ciro-legend .legend-item .legend-value {
    font-weight: bold;
    font-size: 12px;
    position: relative;
}
.ciro-legend .legend-item .legend-value::after{
    content: '%';
}

/*.anaustcard .card::before{
    content: '';
    position: absolute;
    top: -1px;
    right: 0px;
    border-top-right-radius: 50px;
    width: 107px;
    height: 128px;
    background: url(../img/sagustcircle.png) no-repeat;
    background-size: cover;
}*/
.anaustcard .card h5{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: var(--figtree);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.anaustcard .dropdown{
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.card .dropdown .btn.btn-primary.btnay {
    display: inline-flex;
    padding: 2px 10px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 50px;
    border:none;
    background: transparent;
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: var(--figtree);
    font-size: 12px;
    background: #F5F5F5;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    transition: .3s;
}

.card.dropdown .btn.btn-primary.btnay:hover{
    background:  rgba(45, 45, 45, 0.60);
    color:#F5F5F5 ;
}
.card .dropdown-menu.show{
    z-index: 101;
}
.card .dropdown-menu.show  li a{
    font-size: 12px;
    color: rgba(45, 45, 45, 0.60);
    position: relative;
    z-index: 101;
}
.card .dropdown .btn.btn-primary.btnay i{
    transform: rotate(90deg);
    font-size: 10px;
    margin-left: 2px;
}
.apexcharts-toolbar{
    z-index: 10 !important;
}
.card .dropdown .btn.btn-primary.btnay li a{
 font-size: 12px;
 color: rgba(45, 45, 45, 0.60);
}
.anaustcard .card h2{
    color: var(--TextBlack, #2B2828);
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
}
.anaustcard .card p{

    font-family: Poppins;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 0;
    margin: 0;
}
.anaustcard .card .success{
   color: #4BC42A; 
}
.anaustcard .card .danger{
   color: #E75147; 
}
.karperformans .card h5{

    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    margin-bottom: 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.karperformans .card .apexcharts-text tspan {
    color: #3D3D3D !important;
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.karediyormuyum .card{
    position: relative;
    background: #62CA68;
    height: 390px;
    display: flex;
    justify-content: space-between;
}
.karediyormuyum .card::after{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 220.987px;
    height: 343.282px;
    clip-path: polygon(100% 1%, 0% 100%, 100% 100%);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
}
.karediyormuyum .card h5{
    color: #FFF;
    font-size: 28px;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; 
}
.karediyormuyum .card h5 > span{
    font-weight: 700;
}
.karediyormuyum .card p{
    color: rgba(255, 255, 255, 0.50);
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; 
    padding: 0;
    margin: 0;
}
.karediyormuyum .btn{
    display: flex;
    margin-top: 20px;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    border: 3px solid #FFF;
    background: rgba(255, 255, 255, 0.22);
    width: 155px;
    height: 45px;
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%; /* 22.4px */
    transition: .3s;
}
.karediyormuyum .btn:hover{
    background-color:  #FFF;
    border:3px solid rgba(255, 255, 255, 0.22);
    color:#000;
}
.karediyormuyum .karediyormuyumimg{
    width: 170px;
    position: relative;
    right: 0px;
    bottom: 5px;
}
.encoksatanlar .card {
    position: relative;
    
}
.encoksatanlar .card .tab-content{
    padding-right: 50px;
    overflow-x: auto;
}

.encoksatanlar .card .nav.nav-tabs {
    position: absolute;
    right: 10px;
    top: 50%; 
    transform: translateY(-50%); 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: none;
}
.encoksatanlar .card .nav.nav-tabs .nav-item .nav-link{
    color:  rgba(45, 45, 45, 0.60);
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    transition: .3s;
}
.encoksatanlar .card .nav.nav-tabs .nav-item .nav-link.active{
    background-color:#55BCA7;
    border-radius: 25px;
    padding: 7px 14px;
    color: #fff;

}
.encoksatanlar .card .nav.nav-tabs .nav-item .nav-link:hover{
 background-color:#55BCA7;
 color: #fff;
 border-radius: 25px;
}
.encoksatanlar .card h5{
    color: #2D2D2D;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.encoksatanlar .card tr td img{
    width: 53px;
    margin-right: 2px;
    height: 53px;
}
.encoksatanlar .card tr td .badge{
    color: #BD1414;
    background-color: transparent ;
    text-align: center;
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 5px;
    border: 1px solid #BD1414;
    display: inline-flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.encoksatanlar .card tbody tr{
    border-radius: 5px;
    background: transparent;
}
.encoksatanlar .card table tr th{
    color: rgba(45, 45, 45, 0.60);
    text-align: center;
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.encoksatanlar .card tbody tr td .ictd{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.encoksatanlar tbody, td, tfoot, th, thead, tr{
    border-bottom: 5px solid #fff;
}
.encoksatanlar .card tbody tr td{
    color: #3D3D3D;
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background: #F9F9F9;
    vertical-align: middle; 
}
.encoksatanlar .card tr td h2{
    color: #3D3D3D;
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

}
.encoksatanlar .card tr td span{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.chart-placeholder {
    min-height: 200px;
}
.nav-tabs-vertical {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    list-style: none;
    padding: 0;
}
.nav-tabs-vertical .nav-link {
    display: block;
    text-align: center;
    margin: 5px 0;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    cursor: pointer;
}
.nav-tabs-vertical .nav-link.active {
    background-color: #6c63ff;
    color: #fff;
}
.card.ciroicerik h5{


}
.card.ciroicerik{
    display: flex;

}
.ciroicerik #ciroIcerikChart{
    display: flex;
    justify-content: center;
}
.card-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}
/* Menü Butonu (Mobil) */
.navbar-toggler {
    display: none;
    cursor: pointer;
    padding: 10px;
}



.hesaplama-card {

    position: relative;
}
.hesaplama-card h5{
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.btn-hesapla {
    background-color: #28a745;
    color: white;
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: bold;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.btn-hesapla:hover {
    background-color: #218838;
}

#moduller{
/*  overflow: visible; */
}
#moduller .nav-tabs{
    border-bottom: 0;
}
#moduller .nav-tabs .nav-link{
 color: var(--TextBlack, #2B2828);
 font-family: var(--figtree);
 display: flex;
 padding: 20px;
 align-items: center;
 gap: 10px;
 border-radius: 10px;
 border: 1px solid #E2E2E2;
 background: #FBF8F8;
 font-size: 15px;
 font-style: normal;
 font-weight: 500;
 line-height: normal;
 margin-right: 10px;
}
#moduller .nav-tabs .nav-link.active{
    border-radius: 10px;
    border: 1px solid #48BEA6;
    background: #FBF8F8;
    box-shadow: 0px 19px 5px 0px rgba(133, 133, 133, 0.00), 0px 12px 5px 0px rgba(133, 133, 133, 0.01), 0px 7px 4px 0px rgba(133, 133, 133, 0.05), 0px 3px 3px 0px rgba(133, 133, 133, 0.09), 0px 1px 2px 0px rgba(133, 133, 133, 0.10);
}
#moduller .hesaplama-card .form-label{
    color: #C9C9C9;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#moduller .hesaplama-card .form-control, .form-select{
    display: flex;
    border:none;
    background-color: transparent;
    border-radius: 0;
    padding: 9px 6px 9px 0px;
    align-items: center;
    align-self: stretch;
    color: #000;
    font-family: var(--figtree);
    border-bottom: 1px solid #C9C9C9;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#moduller .hesaplama-card .form-control::placeholder{
    color: rgba(0, 0, 0, 0.50);

}
#moduller .hesaplama-card .btn{
    display: flex;
    margin-top: 37px;
    padding: 10px 0px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    background: #76EB76;
    color: #FFF;
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    box-shadow: 0px 63px 18px 0px rgba(0, 0, 0, 0.00), 0px 40px 16px 0px rgba(0, 0, 0, 0.01), 0px 23px 14px 0px rgba(0, 0, 0, 0.05), 0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 3px 6px 0px rgba(0, 0, 0, 0.10);
}
#moduller .hesaplama-card .btn:hover{
    color:#76EB76 ;
    background-color: #fff;
}
#moduller .hesaplama-card .btn.btn-entegrasyon{
    display: inline;
    width: 50%;
    border-radius: 10px;
    background: #6F9DC0;
    transition: .3s;
}
#moduller .hesaplama-card .btn.btn-entegrasyon:hover{
    background:#000 ;
    color:#6F9DC0;
}
#moduller .Entegrasyonpp{
    color: var(--Grey, #3D3D3D);
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin-top: 8px;
}
#moduller .aciklamabas{
    color: var(--Grey, #3D3D3D);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 30px 0px;
}
#moduller .hesaplama-card .col-lg-3, .col-lg-4, .col-lg-2{
    margin-top:5px;
}
#moduller .hesaplama-sonuc {
    padding: 21px 23px;
    text-align: center;
    border-radius: 30px;
    border: 3px solid rgba(72, 190, 166, 0.70);
    background: #FFF;
    position: relative;
    z-index: 1;
    box-shadow: 0px 204px 57px 0px rgba(159, 223, 206, 0.00), 0px 130px 52px 0px rgba(159, 223, 206, 0.01), 0px 73px 44px 0px rgba(159, 223, 206, 0.05), 0px 33px 33px 0px rgba(159, 223, 206, 0.09), 0px 8px 18px 0px rgba(159, 223, 206, 0.10);
}
#moduller .hesaplama-sonuc::before{
    position: absolute;
    width: 100%;
    height:100%;
    content: '';
    left: 0;
    top: 0;
    background: url(../img/hesapsonuccizgi.svg) no-repeat;
}
#moduller .hesaplama-sonuc .hesapso1{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}


#moduller .hesaplama-sonuc h5{
    position: relative;
    color: var(--White, #FFF);
    position: relative;
    z-index: 2;
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}
#moduller .hesaplama-sonuc h2{
    color: var(--TextBlack, #2B2828);
    text-align: center;
    position: relative;
    z-index: 2;
    font-family: var(--figtree);
    font-size: 36px;
    margin-top: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
}
#moduller .hesaplama-sonuc .tavsiyee{
    color: var(--TextBlack, #2B2828);
    text-align: center;
    position: relative;
    z-index: 2;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#moduller .hesaplama-sonuc .hesapic{
  position: relative;
  z-index: 2;
  margin-top: 42px;
  display: flex;
  justify-content: space-between;
}
#moduller .hesaplama-sonuc .ickutu {
    display: flex;
    flex-direction: column;
    width: 140px;
    border-radius: 20px;
    background: #FBFBFB;
    padding: 33.5px 25px 33.5px 26px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}
#moduller .hesaplama-sonuc .ickutu h6{
  position: relative;
  z-index: 2;
  color: var(--text-black-60, rgba(45, 45, 45, 0.60));
  text-align: center;
  font-family: var(--figtree);
  margin-bottom: 2px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
#moduller .hesaplama-sonuc .altbutonlarr{
    display: flex;
    margin-top: 36px;
}
#moduller .hesaplama-sonuc .altbutonlarr button{
    display: flex;
    padding: 15px 40px;
    margin: 0 10px;
    border: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    position: relative;
    z-index: 3;
    color: #FFF;
    font-family: var(--figtree);
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background: #E2EAE8;
    color: #000;
    transition: .3s;
}
#moduller .hesaplama-sonuc .altbutonlarr .btn.btn-hesapla{
    padding: 15px 65px;
    background: #48BEA6;
    color: #fff;
}
#moduller .hesaplama-sonuc .altbutonlarr button:hover{
    transform: scale(1.1);
}
#moduller .hesaplama-sonuc .ickutu p{
   color: var(--text-black-60, rgba(45, 45, 45, 0.60));
   text-align: center;
   font-family: var(--figtree);
   font-size: 24px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
}

#moduller .hesaplama-sonuc button:hover {
    background-color: #d6d8db;
}
#moduller .gecmis-hesaplamalar {
    position: relative;
}
.entegrekart.faturalar{
    background: #B845DF;
    padding: 14px;
    margin-top: 0;
}
.entegrekart.faturalar::after{
    content: '';
    width: 100%;
    z-index: 1;
    height: 100%;
    transform: scale(1);
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../img/faturalarentegre.svg) no-repeat right center;
}
.entegrekart.bildirims{
    background: #F2CF20;
    padding: 14px;
    margin-top: 0;
}
.entegrekart.bildirims::after{
    content: '';
    width: 100%;
    z-index: 1;
    height: 100%;
    transform: scale(1);
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../img/bildirimicons.svg) no-repeat right center;
}
#moduller .kayitlihesapbaslik{
   color: var(--TextBlack, #2B2828);
   font-family: var(--figtree);
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
}
#moduller .kayitlihesap .karthesap{
    background: #FFF;
    box-shadow: 0px 79px 22px 0px rgba(120, 120, 120, 0.00), 0px 51px 20px 0px rgba(120, 120, 120, 0.01), 0px 28px 17px 0px rgba(120, 120, 120, 0.05), 0px 13px 13px 0px rgba(120, 120, 120, 0.09), 0px 3px 7px 0px rgba(120, 120, 120, 0.10);
    padding: 10px;
    margin-bottom: 24px;
}
#moduller .kayitlihesap .karthesap p{
    margin-bottom: 0;
}
#moduller .kayitlihesap .karthesap h4{
    color: var(--TextBlack, #2B2828);
    text-align: center;
    font-family: var(--figtree);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
}
#moduller .kayitlihesap .karthesap h6{
    color: var(--TextBlack, #2B2828);
    text-align: center;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 18px;
}

#moduller .kayitlihesap .karthesap .item-1{
    display: flex;
    width: 80px;
    height: 78px;
    padding: 10px 4px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #48BEA6;
    background: #FBFBFB;
    flex-direction: column;
    text-align: center;
}
#moduller .kayitlihesap .karthesap .item-1 h5{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    text-align: center;
    font-family: var(--figtree);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
} 
#moduller .kayitlihesap .karthesap .item-1 p{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    text-align: center;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    margin-bottom: 0;
    font-weight: 400;
    line-height: normal;
}
#moduller .kayitlihesap .karthesap .altitem1{
    padding: 0 10px;
    margin-top: 30px;
}
#moduller .kayitlihesap .karthesap  .bas1{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: var(--figtree);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 9px;
}
#moduller .kayitlihesap .karthesap  .bas2{
    color: #000;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#moduller .kayitlihesap .karthesap .alitem2{
    display: flex;
    padding: 0 10px;
}
#moduller .kayitlihesap .karthesap .alitem2 .divic{
    width: 100%;
}
#moduller .kayitlihesap .karthesap .date{
    color: #B4B4B4;
    text-align: center;
    font-family: var(--figtree);
    margin-top: 11px;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
#moduller .kayitlihesap .karthesap .date > span{
    margin-left: 10px;
}
#modullertbody, td, tfoot, th, thead, tr{
    border-bottom: 5px solid #f6f6f6;
}
#moduller .gecmis-hesaplamalar .table tr th{
    color: #929292;
    text-align: center;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background: transparent !important;
}
#moduller  .gecmis-hesaplamalar table tbody tr td {
    vertical-align: middle;

}
#moduller  .gecmis-hesaplamalar table tbody tr td a{
    color: #000;
    text-decoration: none;
    display: flex;
    width: 39px;
    height: 39px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 3px;
    background: #B3F1C3;
}
#moduller .gecmis-hesaplamalar table tbody tr td a > span{
    display: none;
}

.faturaid#moduller hr{
    margin:10px 0;
}

.faturaid#moduller  .resimler {
    display: flex;
    gap: 5px;
    width: auto; 
    align-content: center;
}

.faturaid#moduller .resimler img {
    width: 35px; 
    height: auto;
    object-fit: cover;
}
#moduller .faturalar table tbody tr td{
    padding: 10px;
    color: var(--TextBlack, #2B2828);
    text-align: center;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background: transparent;
}
#moduller .faturalar table tbody tr {
    border-bottom: 5px solid transparent;
}
#moduller .faturalar table tbody tr:nth-child(odd){
    background: rgba(255, 255, 255, 0.50);
}
.faturaid#moduller .resimler .sayi {
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: var(--figtree);
    margin-top: 5px;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.faturaid#moduller .basliklar{
    background-color:#F2F2F2 ;
    overflow-y: auto;
    scrollbar-color: #878787 #F1F1F1;
    padding: 0px 2px 0px 4px;
    max-height: 75px;
}
.faturaid#moduller .ustbas h2{
    color: #000;
    font-family: var(--figtree);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0;
    line-height: normal;
}
.faturaid#moduller .ustbas .btn{
    background: transparent;
    color: #000;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
}
/* Ana Konteyner date-picker */
.faturatarihsec{
    position: relative;
}
.date-picker-container {
    display: flex;
    padding: 5px 10px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: 50px;
    background: #EFECEC;
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.calendar-icon {
    font-size: 20px;
}

.date-display {
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.dropdown-icon {
    font-size: 14px;
    cursor: pointer;
}

.date-picker-popup {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 0;
    z-index: 2;
    right: 0;
    gap: 10px;
    margin-top: 10px;
    background: #fcf8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-width: 320px;
}

.date-picker-popup label {
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 4px;
}

.date-picker-popup input {
    display: flex;
    border: none;
    background-color: transparent;
    border-radius: 0;
    padding: 9px 6px 9px 0px;
    align-items: center;
    align-self: stretch;
    color: #000;
    font-family: var(--figtree);
    border-bottom: 1px solid #C9C9C9;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#applyDateRange {
   display: flex;
   padding: 10px;
   margin: 0 10px;
   border: none;
   justify-content: center;
   align-items: center;
   gap: 8px;
   border-radius: 50px;
   position: relative;
   z-index: 3;
   color: #FFF;
   font-family: var(--figtree);
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
   background: #E2EAE8;
   color: #000;
   transition: .3s;
   cursor: pointer;
}

.faturaid#moduller .ustbas .dropdown-menu .dropdown-item {
 color: #000;
 font-family: Poppins;
 font-size: 12px;
 font-style: normal;
 font-weight: 500;
 line-height: normal;
 border: none;
}
.faturaid#moduller .basliklar p{
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    margin-bottom:1.5px;
}

.faturaid#moduller .modal-body input{
    display: flex;
    width: 170px;
    padding: 5px;
    align-items: center;
    border-radius: 3px;
    background: #EBEBEB;
    color:  rgba(45, 45, 45, 0.60);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.faturaid#moduller .modal-body .form-label{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin-left: 5px;
    margin-bottom: 0;
}
.faturaid#moduller .modal-body .gelirmodal{
    display: none;
}
.faturaid#moduller .modal-body .modalcard{
    height: 96px;
    border-radius: 20px;
    background: #EFEFEF;
    padding: 9px 3px;
    text-align: center;
}
.faturaid#moduller .modal-body .modalcard h5{
    color: var(--Grey, #3D3D3D);
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin-top: 5px;
    line-height: normal;
}
.faturaid#moduller .modal-header .gelirclose{
    display: flex;
    padding: 5px;
    align-items: center;
    gap: 7px;
    border-radius: 5px;
    border: 1px solid #635D5D;
    text-decoration: none;
    color: #635D5D;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
#moduller.faturaid .modal-header .btn-close{
    border-radius: 3px;
    background-color: #E5E5E5;
    margin-left: 10px;
}
.faturaid#moduller .modal-content
.faturaid#moduller .modal-body .modalcard p{
    margin-top: 3px;
    color: var(--Grey, #3D3D3D);
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.faturaid#moduller  .modal-body .modalcard.bgred{
    background: #BD1414;
    border-radius: 20px;
    box-shadow: 0px 32px 9px 0px rgba(0, 0, 0, 0.00), 0px 20px 8px 0px rgba(0, 0, 0, 0.01), 0px 12px 7px 0px rgba(0, 0, 0, 0.05), 0px 5px 5px 0px rgba(0, 0, 0, 0.09), 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
}
.faturaid#moduller .modal-body .modalcard.bgred p:nth-child(4){
    font-size: 12px;
    font-weight: 600;
}
.faturaid#moduller  .modal-body .modalcard.bgred h5{
    color: var(--White, #FFF);
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.faturaid#moduller  .modal-body .modalcard.bgred p{
    color: var(--White, #FFF);
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.faturaid#moduller  .modal-body .modalcard.bgred span{
    color: var(--White, #FFF);
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
#productCarousel .carousel-control-prev,
#productCarousel .carousel-control-next {
    position: absolute;
    font-size: 1.5rem;
    height: 20px;
    z-index: 5;
    width: 20px;
    opacity: 1;
}

#productCarousel .carousel-control-prev {
    left: 30%; 
    background: #ccc;
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    background:  #55BCA7;
    border-radius:25px ;
}

#productCarousel .carousel-control-next {
    border-radius:25px ;
    right: 30%;
    background: #ccc;
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    background:  #55BCA7;
}
.carousel-control-next-icon, .carousel-control-prev-icon{
 width: 1rem;
}
#productCarousel .d-flex h5 {
    color: var(--TextBlack, #2D2D2D);
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#productCarousel .baslikimg{
    width: 35px;
}

/* İkon Hover Durumu */
#productCarousel .carousel-control-prev:hover,
#productCarousel .carousel-control-next:hover {
    color: #333; /* Daha koyu siyah */
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.faturaid#moduller  .modal-body .modalcard hr{
    margin: 0;
    margin: 0 5px;
}


#moduller .faturalar .kardurumu{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5;
}
#moduller .faturalar .kardurumu .kar1{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: var(--ProfitGreen, #4BC42A);
    color: var(--White, #FFF);
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 32px;
}
#moduller .faturalar .kardurumu .kar1.red{
    background: #BD1414;
}
#moduller .faturalar .inceleme{
    display: flex;
}
#moduller .faturalar table tbody tr td.teslimtiade{
    color: #E75147;
}
#moduller .faturalar table tbody tr td.teslimtkargo{
    color: #A848BE;
}
#moduller .faturalar table tbody tr td.teslimtrue{
    color: #48BEA6;
}
#moduller .faturalar table tbody tr .kardurum-0 {
    display: flex;
    align-items: center;
    justify-content: center;
}
#moduller .faturalar table tbody tr .kardurumutrue .kar1{
    color: #33A833;
}
#moduller .faturalar table tbody tr .kardurumutrue .kar2{
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #fff;
    border-radius: 3px;
    margin-left: 2px;
    background: #33A833;
}
#moduller .faturalar table tbody tr .kardurumufalse .kar1{
    color: #BE1515;
}
#moduller .faturalar table tbody tr .kardurumufalse .kar2{
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #fff;
    border-radius: 3px;
    margin-left: 2px;
    background: #BE1515;
}

#moduller .faturalar .inceleme .incele{
    display: flex;
    padding: 10px;
    width: auto;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    border: 1px solid var(--TextBlack, #2B2828);
    color: var(--TextBlack, #2B2828);
    text-align: center;
    font-family: var(--figtree);
    background: transparent;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-left: 5px;
    transition: .3s;
}
#moduller .faturalar  .inceleme .incele:hover{
    background:#FFF ;
    color: #55BCA7;
}
#moduller .faturalar .inceleme .gelirid{

    transition: .3s;
    border-radius: 5px;
    background: #F9F9F9;
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: var(--TextBlack, #2B2828);
    text-align: center;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: auto;
}
#moduller .faturalar  .inceleme .gelirid:hover{
    background:#fff ;
}
#moduller .faturalar  .inceleme .incele > i{
    margin-right: 5px;
}
#moduller .faturalar  .inceleme .gelirid > img{
    margin-right: 5px;
}
#moduller.faturaid  .modal-header .modal-title{
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#moduller.faturaid .modal-header {
    border-bottom: none;
    padding: 0px 10px;
}
#moduller.faturaid .modal-content{
    background: #EDECEC;
    padding: 15px 10px;
}
#moduller.faturaid  .modal-footer{
    display: none;
    padding: 0 10px;
}
.faturaid#moduller .modal-body .basliklar {
    width: 100%;
}
.faturaid#moduller .modal-body .gecmis-hesaplamalar .table tr th{
    text-align: start;
}
.faturaid#moduller .modal-body .gecmis-hesaplamalar .resimler{
    display: flex;
    align-items: center;
}
.faturaid#moduller .modal-body .gecmis-hesaplamalar .basliklar {
    height: auto;
}
.faturaid#moduller .modal-body .gecmis-hesaplamalar .basliklar p{
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 12px;
    text-align: start;
    font-style: normal;
    font-weight: 600;
    line-height: 160%; /* 19.2px */
}
.faturaid#moduller .modal-content .row.analiz{
    border-radius: 5px;
    margin-top: 15px;
    padding: 15px 0;
    box-shadow: 0px 41px 12px 0px rgba(133, 133, 133, 0.00), 0px 26px 11px 0px rgba(133, 133, 133, 0.01), 0px 15px 9px 0px rgba(133, 133, 133, 0.05), 0px 7px 7px 0px rgba(133, 133, 133, 0.09), 0px 2px 4px 0px rgba(133, 133, 133, 0.10);
}
.faturaid#moduller .modal-content .row.analiz.bgyesil{
    background: #EDF3E9;
}
.faturaid#moduller .modal-content .row.analiz.bgred{
    background: #FCF2F2;
}
.faturaid#moduller .modal-dialog.modal-lg{
    max-width: 1000px;
}
.faturaid#moduller .modal-content .row.analiz h6{
    margin-bottom: 8px;
    color: #000;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    padding: 0;
    line-height: normal;
}
.faturaid#moduller .modal-content .row.analiz .icerik {
    position: relative;
    padding-left: 15px;
}
.faturaid#moduller .modal-content .row.analiz .icerik::before{
    content: '';
    position: absolute;
    left: 0;
    width: 8px;
    height: 49px;
    border-radius: 50px;
    background: #D3E5E2;
}
.faturaid#moduller .modal-content .row.analiz .icerik h4{
    color: #606060;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.faturaid#moduller .modal-content .row.analiz .icerik p{
    color: var(--TextBlack, #2B2828);
    margin-bottom: 0;
    font-family: var(--figtree);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.faturaid#moduller .modal-content .row.analiz .icerik.karzarar::before{
    border-radius: 50px;
    background: #33A833;
    width: 14px;
}
.faturaid#moduller .modal-content .row.analiz.bgred .icerik.karzarar::before{
    background: #BE1515;
}
.faturaid#moduller .modal-content .row.analiz .icerik.karzarar{
    padding-left: 20px;
}
.faturaid#moduller .modal-content .row.analiz .icerik.karzarar p{
    display: flex;
}
.faturaid#moduller .modal-content .row.analiz .icerik.karzarar p > span{
    display: flex;
    padding: 5px;
    margin-left: 5px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    background: #33A833;
    color: #FFF;
    text-align: center;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.faturaid#moduller .modal-content .row.analiz.bgred .icerik.karzarar p > span{
    background: #BE1515;
}
.faturaid#moduller .modal-dialog.modal-lg .gecmis-hesaplamalar{
    overflow-y: auto;
    height: 50vh;
    margin-top: 15px;
}
.faturaid#moduller .modal-body .kutu2 .sol p{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: var(--figtree);
    margin-bottom: 5px;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.faturaid#moduller .modal-body .kutu2 .sag p{
    color: var(--TextBlack, #2D2D2D);
    text-align: right;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    margin-bottom: 3px;
    font-weight: 500;
    line-height: normal;
}
.faturaid#moduller .modal-body .kutu2 .sag > .teslimedildi{
    color: #48BEA6;
}
.faturaid#moduller .modal-body .kutu2 .sag > .teslimedilmedi{
    color: #BE1515;
}
.faturaid#moduller .modal-body .kardurumu{
    height: 97px;
    margin: 5px;
    height: 97px;
    border-radius: 5px;
    border: 2px solid var(--LostRed, #BD1414);
    background: var(--BackGround, #F6F6F6);
}
.faturaid#moduller .modal-body .kardurumu h6{
    color: var(--TextBlack, #2D2D2D);
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.faturaid#moduller .modal-body .urunbazli h4{
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 20px;
}
.faturaid#moduller .modal-body .kardurumu p{
    color: #000;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}
.faturaid#moduller .modal-body .faturamodalrow1{
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 41px 12px 0px rgba(133, 133, 133, 0.00), 0px 26px 11px 0px rgba(133, 133, 133, 0.01), 0px 15px 9px 0px rgba(133, 133, 133, 0.05), 0px 7px 7px 0px rgba(133, 133, 133, 0.09), 0px 2px 4px 0px rgba(133, 133, 133, 0.10);
}
.faturaid#moduller .modal-body .faturamodalrow1 h6{
    margin-bottom: 0;
    color: #000;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    padding: 0;
    margin-top: 5px;
    line-height: normal;
}
.faturaid#moduller .modal-body .kardurumu span{
    display: inline-flex;
    padding: 5px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: var(--LostRed, #BD1414);
    color: var(--White, #FFF);
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#urunler hr{
    margin: 20px 0;
}
#urunler .excelaktar{
    display: flex;
}
#urunler .excelaktar .btn{
    display: flex;
    padding: 10px;
    align-items: center;
    gap: 3px;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #33C481;
    background: #F5F5F5;
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    margin-left: 5px;
    transition: .3s;
}
#urunler .excelaktar .btn > span{
    font-weight: 600;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    transition: .3s;
}
#urunler .excelaktar .btn:hover{
    background:#2D2D2D ;
    color:rgba(196, 235, 188, 0.65) ;
}
#urunler .excelaktar .btn:hover > span{
    background:#2D2D2D ;
    color:rgba(196, 235, 188, 0.65) ;
}
#urunler .col-lg-12 h3{
    margin-bottom: 0px;
    color: #000;
    font-family: var(--figtree);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#urunler .arama {
    position: relative;
}
#urunler .arama input{
    display: flex;
    padding: 10px 14px 10px 17px;
    justify-content: center;
    align-items: flex-start;
    gap: 316px;
    border-radius: 50px;
    border: 1px solid #D0D0D0;
    background: rgba(255, 255, 255, 0.65);
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: var(--steviesans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    width: 400px;
    line-height: normal;
}
#urunler .arama a{
    position: relative;
    top: 10px;
    right: 27px;
    color: #2D2D2D99;
}
#urunler .filter .btn{
    display: flex;
    padding: 5px 10px;
    align-items: center;
    gap: 3px;
    border-radius: 5px;
    border: 1px solid #D0D0D0;
    background: #F1F1F1;
    color: rgba(43, 40, 40, 0.65);
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#urunler .filter .dropdown-menu.show{
    padding: 5px;
    gap: 3px;
    border-radius: 5px;
    border: 1px solid #D0D0D0;
    background: #F1F1F1;
}
#urunler .filter .dropdown-menu > li > a{
    width: 100%;
    color: rgba(43, 40, 40, 0.65);
    font-family: var(--figtree);
    font-size: 12px;
    font-weight: 500;
}
#urunler .filter .dropdown-menu > li > a:hover {
    color: #000;
    opacity: .3;
}
#urunler .yenideneski .btn{
    border: none;
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background: transparent;
}
#urunler > div > div.col-lg-12.p-2 > div > div.filter > ul > li:hover{
    background:#f6f6f6 ;
}
#urunler #filterMenu label{
    color: var(--Grey, #3D3D3D);
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#urunler .card{
    margin-bottom: 40px;
    border-radius: 5px;
    border: none;
    text-align: center;
    transition: .3s;
    width: 174px;
    background: #F1F1F1;
    box-shadow: 0px 49px 14px 0px rgba(0, 0, 0, 0.00), 0px 31px 13px 0px rgba(0, 0, 0, 0.01), 0px 18px 11px 0px rgba(0, 0, 0, 0.03), 0px 8px 8px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}
#urunler .card .card-img-top{
    padding: 5px;
    width: 100%;
}
#urunler .card .card-body{
    padding:0px 10px;

}
#urunler .card .card-title{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#urunler .card .card-text{
    color: #000;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#urunler .card .span1 {
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 10px;
}
#urunler .card .span2 {
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    background:  #4BC42A;
    stroke-width: 1px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 10px;
}
#urunler .card .span2.red{
 background:  #BD1414;
}
#urunler .card .kapsayici {
    display: none ;
    transition: .3s;
}
#urunler .card:hover .kapsayici{
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    background: #2D2D2D99;
    align-items: center;
    justify-content: center;
}
#urunler .card:hover .kapsayici .btn{
   display: block !important;
   border-radius: 10px;
   border: 1px solid var(--White, #FFF);
   background: rgba(255, 255, 255, 0.20);
   display: inline-flex;
   padding: 10px 20px;
   align-items: center;
   gap: 7px;
   color: #FFF;
   font-family: Poppins;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
}
#urunler .modal-header{
    border-bottom: none;
    padding: 10px;
    right: 10px;
    top: 10px;
    position: absolute;
    z-index: 2;
}
#urunler .modal-body .ozelrow2 .col-md-6{
    padding-right: 5px;
    padding-left: 5px;
}
#urunler .modal-header .btn-close{
    border-radius: 3px;
    opacity: 1;
    background-color: #E5E5E5;
}
#productModal1 > div > div > div.modal-body > form > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(1){
    justify-content: center;
    display: flex;
}
#urunler .modal-header .modal-title{
    color: #C9C9C9;
    font-family: Figtree;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#urunler .modal-body .form-label{
    color: #C9C9C9;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
}
#urunler .modal-content{
    border: none;
    border-radius: 5px;
    background: var(--BackGround, #F6F6F6);
}
#urunler .modal-body input{
    display: flex;
    padding: 9px 6px 10px 0px;
    align-items: center;
    align-self: stretch;
    border: none;
    border-radius: 0;
    width: 173.5px;
    background: transparent;
    border-bottom: 1px solid #C9C9C9;
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);

    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#urunler .modal-body{
    border-radius: 5px;
    padding: 0;
    border-bottom: 13px solid #33A833;
    background: #F3F3F3;
    box-shadow: 0px 38px 11px 0px rgba(196, 196, 196, 0.00) inset, 0px 24px 10px 0px rgba(196, 196, 196, 0.03) inset, 0px 14px 8px 0px rgba(196, 196, 196, 0.11) inset, 0px 6px 6px 0px rgba(196, 196, 196, 0.19) inset, 0px 2px 3px 0px rgba(196, 196, 196, 0.22) inset;
}
#urunler .modal-body.kirmizi{
    border-bottom: 13px solid #BE1515;
}
#urunler .modal-body .ozelbod{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #FBF8F8;
    width: 100%;
    padding: 12px 20px;
    margin: auto;
    box-shadow: 0px 49px 14px 0px rgba(138, 138, 138, 0.00), 0px 31px 13px 0px rgba(138, 138, 138, 0.01), 0px 18px 11px 0px rgba(138, 138, 138, 0.03), 0px 8px 8px 0px rgba(138, 138, 138, 0.05), 0px 2px 4px 0px rgba(138, 138, 138, 0.06);
}
#productModal1 > div > div > form > div > div.row.ozelbod > div.col-lg-6{
    padding-left: 20px;
}
#urunler .modal-body .form-select{
    background-color: transparent;
    width: 70%;
}
#urunler .modal-body .modalcard{
    margin: 20px 0;
}
#urunler .modal-body .modalcard h5{
    color: #606060;
    text-align: center;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#urunler .modal-body .modalcard p{
    color: var(--TextBlack, #2B2828);
    text-align: center;
    font-family: var(--figtree);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
#urunler .modal-body .modalcard.bgred{
    background: #BD1414;
    border-radius: 20px;
    box-shadow: 0px 32px 9px 0px rgba(0, 0, 0, 0.00), 0px 20px 8px 0px rgba(0, 0, 0, 0.01), 0px 12px 7px 0px rgba(0, 0, 0, 0.05), 0px 5px 5px 0px rgba(0, 0, 0, 0.09), 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
}
#urunler .modal-body .modalcard.bgred p:nth-child(4){
    font-size: 12px;
    font-weight: 600;
}
#urunler .modal-body .modalcard h4{
    color: #606060;
    text-align: center;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#urunler .modal-body .modalcard .karr {
    color: #33A833;
    text-align: center;
    font-family: var(--figtree);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
}
#urunler .modal-body.kirmizi .modalcard .karr{
    color:#BE1515;
}
#urunler .modal-body .modalcard .karr > span{
    border-radius: 3px;
    font-size: 14px;
    color: #fff;
    background: #33A833;
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
}
#urunler .modal-body.kirmizi .modalcard .karr > span{
    background:#BE1515;
}
#urunler .modal-body .modalcard hr{
    margin: 0;
    margin: 0 5px;
}
#urunler .modal-body .btn.guncelle{
    margin:30px 0px;
    color: #FFF;
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 213px;
    padding: 10px 0px;
    gap: 6px;
    border-radius: 10px;
    background: #A7A7A7;
    box-shadow: 0px 63px 18px 0px rgba(0, 0, 0, 0.00), 0px 40px 16px 0px rgba(0, 0, 0, 0.01), 0px 23px 14px 0px rgba(0, 0, 0, 0.05), 0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 3px 6px 0px rgba(0, 0, 0, 0.10);
}
#urunler .modal-content .modal-footer{
    display: none;
}
#urunler .modal-body .modalcard.bgred hr{
    color: #fff;
}
#urunler .modal-body .modalcard.bgred h5, #urunler .modal-body .modalcard.bgred p{
    color: #fff;
}
#urunler .entegrekart{
    background: #457BDF;
    margin-top: 0;
}
#urunler .entegrekart::after{
    content: '';
    width: 100%;
    z-index: 1;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../img/uruncircles.svg) no-repeat right bottom;
}
.entegrekart.giderler{
    background: #DAD3DC;
}
.entegrekart.giderler h4, .entegrekart.giderler p{
    color: var(--TextBlack, #2B2828);
}
.entegrekart.giderler::after{
    content: '';
    width: 100%;
    z-index: 1;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../img/giderlercir.svg) no-repeat right bottom;
}
.entegrekart.destektal{
    background: #BAEC3C;
    margin-top: 0;
}
.entegrekart.destektal::after{
    content: '';
    width: 100%;
    z-index: 1;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../img/material-symbols_contact-support-rounded.svg) no-repeat right center;
}
#urunler .row.urunrow{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    padding: 12px;
    grid-row-gap: 0px;
}
#urunler .row.urunrow .col-urun{
    display: flex;
    padding:15px 10px;
    flex-direction: column;
    transition: .3s ;
    align-items: center;
    gap: 24px;
    position: relative;
    background: #F5F5F5;
    margin-bottom: 10px;
    box-shadow: 0px 49px 14px 0px rgba(138, 138, 138, 0.00), 0px 31px 13px 0px rgba(138, 138, 138, 0.01), 0px 18px 11px 0px rgba(138, 138, 138, 0.03), 0px 8px 8px 0px rgba(138, 138, 138, 0.05), 0px 2px 4px 0px rgba(138, 138, 138, 0.06);
}
#urunler .row.urunrow .col-urun .ust{
    display: flex;
    align-items: flex-start;
}
#urunler .row.urunrow .col-urun .ust img{
    width: 37px;
    height: 37px;
}
#urunler .row.urunrow .col-urun .ust h5{
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#urunler .row.urunrow .col-urun hr{
    margin:10px 20px;
}
#urunler .row.urunrow .col-urun .ust p{
    color: #A7A7A7;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
#urunler .row.urunrow .col-urun .alt p{
    margin-bottom: 0;
}
#urunler .row.urunrow .col-urun .alt{
    display: flex;
    justify-content: space-between;
    margin: 0 10px;
}
#urunler .row.urunrow .col-urun .alt .ozellik{ 
    margin-bottom: 10px;
}
#urunler .row.urunrow .col-urun .alt .bir{ 
    color: #B9B9B9;
    font-family: var(--figtree);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
#urunler .row.urunrow .col-urun .alt .iki{ 
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
#urunler .row.urunrow .col-urun .alt .ozellik.kar{ 
    border-radius: 5px;
    background: #33A833;
    display: flex;
    width: 70px;
    padding: 0px 5px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
#urunler .row.urunrow .col-urun .alt .ozellik.kar.zarar{
    background: #BE1515;
}
#urunler .row.urunrow .col-urun .alt .ozellik.kar p{
    color: #FFF;
}
#urunler .row.urunrow .col-urun .kapsayici{
    display: none;
    transition: .3s;
}
#urunler .row.urunrow .col-urun:hover .kapsayici{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    background: #00000051;
    align-items: center;
    justify-content: center;
}
#urunler .row.urunrow .col-urun .kapsayici .btn{
    border-radius: 50px;
    border: none;
    background: #E2EAE8;
    color: #444;
    width: 100px;
    font-family: var(--figtree);
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    transition: .3s;
    line-height: normal;
}
#urunler .row.urunrow .col-urun .kapsayici .btn:hover{
    transform: scale(1.2);
}
#urunler .row.urunrow .modal-product-img{
    width: 123px;
    height: 123px;
}
#productModal1 > div > div > div.modal-body > div.row.mt-4 > div.col-lg-3{
    margin-top: 5px;
}
/* Menü */
#mobileMenu {
    position: fixed;
    top: 70px;
    right: 0;
    width: 100%;
    background-color: #55BCA7;
    color: white;
    padding: 10px;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 1000;
    overflow: hidden;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: translateY(-10%);
}

#mobileMenu .close-menu {
    display: block;
    justify-content: flex-end;

    cursor: pointer;
    font-size: 24px;
}

#mobileMenu .logo {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Menü Iconları */
#mobileMenu .menu-icons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

#mobileMenu .icon {
    font-size: 24px;
    cursor: pointer;
}

#mobileMenu .menu-list {
    display: flex;
    flex-direction: column;
}

#mobileMenu .menu-item {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #fff;
    cursor: pointer;
}

.menu-item:hover {
    background-color: #ff7f50;
}

.overlay {
    position: fixed;
    top: 84px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 500;
}

.mobilacik{
    display: none !important;
}


.mobile-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu li {
  width: 49%; 
  margin-bottom: 10px;
  display: inline-block; 
  border: none !important;
  padding: 0px !important;
}

.mobile-menu .menu-item a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding:5px;
  background: #fff;
  text-decoration: none;
  font-size: 14px;
  color: var(--Grey, #3D3D3D);
  font-weight: 500;
  border-radius: 25px;
  border:1px solid transparent;
  transition: background-color 0.3s, color 0.3s;
}
.mobile-menu .menu-item a.active{
    background: rgba(255, 255, 255, 0.3);
}

.mobile-menu .menu-item i {
  margin-right: 5px;
  font-size: 21px;
  border-radius: 25px;
  padding: 6px;
  color: #787676;
}

.mobile-menu .menu-item span {
  font-size: 16px;
}
#giderler .card h4{
    color: var(--TextBlack, #2D2D2D);
    font-family: var(--figtree);
    font-size: 16px;
    font-style: normal;
    margin-bottom: 0;
    font-weight: 700;
    line-height: normal;
}
#giderler .card {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 138px 39px 0px rgba(156, 156, 156, 0.00), 0px 88px 35px 0px rgba(156, 156, 156, 0.01), 0px 50px 30px 0px rgba(156, 156, 156, 0.05), 0px 22px 22px 0px rgba(156, 156, 156, 0.09), 0px 6px 12px 0px rgba(156, 156, 156, 0.10);
    padding: 10px;
}
#giderler .altcard .card{
    margin-top: 20px;
    box-shadow: none;
}
#giderler .altcard .card{
    margin-top: 20px;
    box-shadow: none;
}
#giderler .sagkart  h4{
    margin-bottom: 0;
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-right: 5px;
}
#giderler .sagkart .btn.btn-outline-primary{
    display: inline-flex;
    border: none;
    padding: 2px 10px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 50px;
    background: #EAEAEA;
    color: var(--Grey, #3D3D3D);
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#giderler .sagkart .btn.btn-primary{
    border: none;
    display: flex;
    width: 530px;
    padding: 10px 0px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    background: #6F9DC0;
    color: var(--White, #FFF);
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    box-shadow: 0px 63px 18px 0px rgba(0, 0, 0, 0.00), 0px 40px 16px 0px rgba(0, 0, 0, 0.01), 0px 23px 14px 0px rgba(0, 0, 0, 0.05), 0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 3px 6px 0px rgba(0, 0, 0, 0.10);
}
#giderler .sagkart .labeltext{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin-left: 5px;
}
#giderler .sagkart input{
    display: flex;
    width: 255px;
    padding: 9px 10px 10px 11px;
    align-items: center;
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 3px;
    background: #EBEBEB;
    margin-bottom: 28px;
}
#giderler .modal-header{
    border: none;
}
#giderler .modal-header .modal-title{
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#giderler .modal-header .modal-title > p{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#giderler .modal-header .btn-close{
    width: 24px;
    height: 24px;
    background-color: #E5E5E5;
    border-radius: 3px;
}
#giderler .modal-body .form-label{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin-left: 5px;
}
#giderler .modal-body input{
    display: flex;
    width: 100%;
    padding: 9px 10px 10px 11px;
    align-items: center;
    border-radius: 3px;
    background: #EBEBEB;
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#giderler .modal-footer{
    border: none;
    display: flex;
    justify-content: center;
}
#giderler .modal-footer .btn{
    display: flex;
    width: 281px;
    padding: 10px 0px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    background: var(--PrimaryColor, #55BCA7);
    box-shadow: 0px 63px 18px 0px rgba(0, 0, 0, 0.00), 0px 40px 16px 0px rgba(0, 0, 0, 0.01), 0px 23px 14px 0px rgba(0, 0, 0, 0.05), 0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 3px 6px 0px rgba(0, 0, 0, 0.10);
    color: var(--White, #FFF);
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#destektalebi .destekkutu {
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #FFF;
    box-shadow: 0px 50px 14px 0px rgba(0, 0, 0, 0.00), 0px 32px 13px 0px rgba(0, 0, 0, 0.01), 0px 18px 11px 0px rgba(0, 0, 0, 0.05), 0px 8px 8px 0px rgba(0, 0, 0, 0.09), 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
    height: 500px;
    margin-bottom: 50px;
    padding: 20px;
    z-index: 2;
    overflow: hidden;
}

#destektalebi .destekkutu::before {
    content: '';
    position: absolute;
    bottom: -120px;
    left: -100px;
    width: 872.12px;
    height: 316.069px;
    transform: rotate(16.244deg);
    background: #0B8297;
    z-index: -1; /* Bu sayede pseudo-element contentin altına yerleşir */
}

#destektalebi .destekkutu h1{
    color: #000;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#destektalebi .destekkutu p{
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; 
}
#destektalebi .destekkutu .resim1{
    position: relative;
    width: 100%;
}
#destektalebi .destekkutu .resim2{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 70px;
}
#destektalebi .labeltext{
    color: #C9C9C9;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#destektalebi input, select{
    display: flex;
    padding: 9px 6px 10px 0px;
    align-items: center;
    align-self: stretch;
    border: none;
    background: transparent;
    border-bottom: 1px solid #C9C9C9;
    border-radius: 0px;
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#destektalebi  .form-select{
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
}
#destektalebi textarea{
    border: 1px solid #E9E9E9;
    background: #F6F6F6;
    box-shadow: 0px 125px 35px 0px rgba(176, 176, 176, 0.00), 0px 80px 32px 0px rgba(176, 176, 176, 0.01), 0px 45px 27px 0px rgba(176, 176, 176, 0.05), 0px 20px 20px 0px rgba(176, 176, 176, 0.09), 0px 5px 11px 0px rgba(176, 176, 176, 0.10);
    display: flex;
    height: 385px;
    padding: 15px 17px;
    justify-content: center;
    align-items: center;
    color: #7A7A7A;
    font-family: var(--figtree);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#destektalebi .btn{
    display: flex;
    padding: 15px 70px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    background: #48BEA6;
    border: none;
    margin-top: 125px;
    align-self: stretch;
}
#destektalebi .btn:hover{
    color: #48BEA6;
    background: #fff;
}
#profilim .nav .nav-item .nav-link{
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    border: 1px solid var(--text-black-60, rgba(45, 45, 45, 0.60));
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-right: 5px;

}
#profilim .nav .nav-item .nav-link.active{
    border-radius: 3px;
    border: 1px solid var(--PrimaryColor, #55BCA7);
    background: var(--PrimaryColor, #55BCA7);
    color: #fff;

}
#profilim .card.demohesap{
    border-radius: 20px;
    border: 1px solid var(--Grey, #3D3D3D);
    background: #EDEDED;
    padding: 20px;
}
#profilim .card.demohesap h4{
    color: var(--Grey, #3D3D3D);
    text-align: center;
    font-family: Poppins;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0;
}
#profilim .card.demohesap .text-hesap{
    color: var(--Grey, #3D3D3D);
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}
#profilim .card.demohesap .btn{
    border:none;
    margin-top: 35px;
    padding: 10px ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4BB0B6 5.64%, #6518B4 100%);
    color: var(--White, #FFF);
    font-family: Poppins;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#profilim .card.demohesap .btn > small{
    color: rgba(255, 255, 255, 0.50) !important;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#profilim .card.demohesap ul{
    margin-bottom: 0;
}
#profilim .card.demohesap ul li{
    color: var(--Grey, #3D3D3D);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: .5;
}
#profilim .card.demohesap ul li.active{
    opacity: 1;
}
#profilim  .profilyan .btn{
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    background: #DFDFDF;
    box-shadow: 0px 63px 18px 0px rgba(0, 0, 0, 0.00), 0px 40px 16px 0px rgba(0, 0, 0, 0.01), 0px 23px 14px 0px rgba(0, 0, 0, 0.05), 0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 3px 6px 0px rgba(0, 0, 0, 0.10);
    color: var(--Grey, #3D3D3D);
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    transition: .3s;
}
#profilim  .profilyan .btn:hover{
    color: #DFDFDF;
    background: #3D3D3D;
}
#profilim .profilyan .form-label{
    color: #C9C9C9;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#profilim .profilyan form input{
    display: flex;
    padding: 9px 6px 10px 0px;
    align-items: center;
    align-self: stretch;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #C9C9C9;
    background: transparent;
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

}
.credikarti .card-container {
    height: 250px;
    perspective: 1000px;
    position: relative;
}
.credikarti .profilyan .btn-kart{
    border: none;
    border-radius: 50px;
    display: flex;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    width: 100%;
    background: #093437;
    color: #FFF;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    margin-top: 20px;
}
.credikarti .profilyan .btn-kart > .fa-credit-card{
    margin-top: -3px;
}
.credikarti .card-face {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    overflow: hidden;
}
/*.credikarti .card-face::after{
    content:'';
    border-radius: 406.6px;
    opacity: 0.1;
    background: #000;
    width: 406.6px;
    height: 311.378px;
    flex-shrink: 0;
    position: absolute;
    left: -180px;
    top: 130px;
}
.credikarti .card-face::before{
    content:'';
    border-radius: 406.6px;
    opacity: 0.1;
    background: #000;
    width: 406.6px;
    height: 311.378px;
    flex-shrink: 0;
    position: absolute;
    left: 200px;
    top: -200px;
}*/
.credikarti .expiration-date{
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 23px;
    color: #FFF;
    text-align: right;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.5px;
}
.credikarti .expiration-date::before{
    content: 'S.K.T';
    top: -20px;
    position: absolute;
    opacity: 0.5;
    left: 5px;
}
.credikarti h4{
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: 0.54;
    position: relative;
    z-index: 2;
}
.credikarti .card-holder{
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    position: relative;
    z-index: 2;
    letter-spacing: 0.5px;
}
.credikarti .card-number {
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
}
.credikarti .front {
    border-radius: 30px;
/*    background: linear-gradient(177deg, #9C2CF3 -13.49%, #3A49F9 109.75%);*/
background: url(../img/cardbg.svg) no-repeat center center;
background-size: cover;
color: white;
}

.credikarti .back {
    color: white;
    transform: rotateY(180deg);
    align-items: center;
    justify-content: center;
    background: url(../img/cardbg.svg) no-repeat center center;
    background-size: cover;

}
.credikarti .back .cvv-area{
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
}

.credikarti .card-container.flip .front {
    transform: rotateY(180deg);
}

.credikarti .card-container.flip .back {
    transform: rotateY(0deg);
}
#kredikart-2.credikarti .form-control{
    display: inline-flex;
    border: none;
    color: #fff;
    padding: 9px 11px 10px 11px;
    border-radius: 3px;
    background: #5D5D5D;
    align-items: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#kredikart-2.credikarti .form-control::placeholder{
    color: #fff;
    color: var(--white-50, rgba(255, 255, 255, 0.50));
}
#kredikart-2.credikarti .form-label{
    color: var(--white-50, rgba(255, 255, 255, 0.50));
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin-left: 5px;
}
#profilim .gecmisfatura h4{
    color: var(--TextBlack, #2D2D2D);
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#profilim .gecmisfatura .table td .p1{
    color: var(--TextBlack, #2D2D2D);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#Profilim .gecmisfatura  .fiyat{
    text-align: end;
}
#profilim .gecmisfatura .table>:not(caption)>*>*{
    background:  #F2F2F2;
    border-bottom: 5px solid #F6F6F6;
    padding: 20px;
}
#profilim .gecmisfatura .p1 > i{
    margin-left: 20px;
}
#profilim .gecmisfatura .table td .p2{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#profilim .modal-content {
    width: 621px;
    height: 484px;
    flex-shrink: 0;
    border-radius: 5px;
    background: var(--BackGround, #F6F6F6);
}
#profilim .modal-header{
    border:none ;
}
#profilim .modal-header .modal-title{
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
#profilim .modal-header .btn-close {
    width: 24px;
    height: 24px;
    background-color: #E5E5E5;
}
#profilim .modal-body .form-label{
    color: #C9C9C9;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#profilim .modal-body .text-danger{
    font-family: var(--figtree);
    position: absolute;
    bottom: ;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin-left: 5px;
}
#profilim .modal-body .label1{
    color: var(--Grey, #3D3D3D);
    margin-top: 30px;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#profilim .modal-body .label{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}
#profilim .modal-body .step2 p{
    color: var(--Grey, #3D3D3D);
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#profilim .modal-content{
    width: 100%;
    height: auto;
}
#profilim .modal-body .btn{
    margin-top:50px ;
    display: flex;
    height: 46px;
    padding: 9px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 50px;
    background: #55BCA7;
    color: #FFF;
    font-family: var(--figtree);
    font-size: 14px;
    width: 50%;
    justify-content: center;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
}
#profilim .modal-body .form-control{
    display: flex;
    padding: 9px 6px 10px 0px;
    align-items: center;
    align-self: stretch;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #C9C9C9;
    background: transparent;
    position: relative;
    color: #000;
    font-family: var(--figtree);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#profilim .modal-body .position-relative {
  position: relative;
}

#profilim .modal-body .toggle-password {
  position: absolute;
  top: 70%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 14px;
  color: rgba(45, 45, 45, 0.60);
}
#profilim .modal-body .steppa .p1{
    margin-top: 50px;
    margin-bottom: 30px;
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#profilim .modal-body .steppa .p2{
    margin-top: 100px;
    margin-bottom: 20px;
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    text-align: center;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#profilim .modal-body .steppa .p2 > a{
    font-weight: 600;
    color: var(--TextBlack, #2D2D2D);
}
#profilim .modal-body .steppa div > input{
    padding: 15px;
    border-radius: 3px;
    background: rgba(232, 232, 232, 0.51);
    border-bottom: 1px solid transparent;
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#satinalma{
    background:#282828;
    height: 100vh;
    padding-bottom: 50px;
}
#satinalma .btngerigit:nth-child(1){
    border-radius: 50px;
    border: 1px solid #A1A1A1;
    background: rgba(255, 255, 255, 0.37);
}
#satinalma .btngerigit{
    margin-top: 60px;
    text-decoration: none;
    display: inline-flex;
    padding: 10px;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #A1A1A1;
    color: var(--White, #FFF);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: .3s;
    margin-left: 5px;
}
#satinalma .btngerigit:hover{
    color: #55BCA7;
    border: 1px solid #55BCA7;
    background: #fff;
}
#satinalma .card.ust{
    margin-top: 50px;
    position: relative;
    border-radius: 20px 20px 0px 0px;
    background: linear-gradient(180deg, #55BCA7 0.34%, #041E31 103.72%);
}
#satinalma .card.ust, .card.alt .card-body{
  width: 612px;
}
#satinalma .card.ust .diamond{
    position: absolute;
    top: -40px;
}
#satinalma .card.ust h1{
    margin-top: 50px;
    color: #FFF;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-shadow: 3px -2px 0px #579ACB;
    margin-bottom: 0;
}
#satinalma .card.ust h1 > .altsag{
    color: rgba(255, 255, 255, 0.50);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-shadow:none;
}
#satinalma .card.ust .premiumuye{
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom:20px ;
}
#satinalma .card.alt{
    border-radius: 20px 20px 0px 0px;
    background: var(--PrimaryColor, #55BCA7);
    margin-top: -20px;
}
#satinalma .card.alt ul{
    margin-top: 6px;
    margin-bottom: 0;
}
#satinalma .card.alt ul li{
    color: #FFF;
    margin-bottom: 6px;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    line-height: normal;
}
#satinalma .dahafiyat{
    margin-top: 30px;
}
#satinalma .dahafiyat .card{
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid #FFF;
    background: transparent;
    transition: .3s ease all;
}

#satinalma .dahafiyat .card-body{
    width: 293px;
    padding: 10px;
}
#satinalma .dahafiyat .kutu-title{
    color: #FFF;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: left;
}
#satinalma .dahafiyat .kutu-title > span{
    color: #FFF;
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#satinalma .dahafiyat .kutu-text{
    color: var(--white-50, rgba(255, 255, 255, 0.50));
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
}
#satinalma .dahafiyat a{
    text-decoration: none;
    transition: .3s;
}


#satinalma .dahafiyat .card-body i{
    color: #fff;
}
#satinalma .dahafiyat .card:hover {
    transform: scale(1.1);
    border: 1px solid #FFF;
}
#satinalma .degerli p{
    color: #FFF;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 50px;
    margin-bottom: 0;
}
#satinalma .degerli a{
    margin-top: 20p;
    color: #FFF;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
#satinalma .odemefiyat .card{
    border-radius: 4px;
    border: 1px solid #FFF;
    background: rgba(255, 255, 255, 0.29);
}
#satinalma .odemefiyat h2{
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#satinalma .odemefiyat ul{
    margin-bottom: 0;
}
#satinalma .odemefiyat ul li input {
    width: 15px; 
    height: 15px; 
    border-radius: 25px;
    border: 2px solid #fff; 
    background-color: transparent; 
    cursor: pointer;

}

#satinalma .odemefiyat ul li input[type="checkbox"] {
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none;
    margin-right: 5px;
}

#satinalma .odemefiyat ul li input[type="checkbox"]:checked {
    background-color: #4CAF50;
    border-color: #4CAF50; 
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); 
}

#satinalma .odemefiyat ul li > label{
    display: flex;
    align-items: center;
}
#satinalma .odemefiyat ul li > label, a{
    color: #FFF;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

}
#satinalma .premuyebas{
    display: inline-flex;
    padding: 9px 9px 8px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 3px;
    background: #E2E2E2;
    width: 100%;
    margin-top: 40px;
    transition: .3s;
    border: none;
}
#satinalma .premuyebas:hover{
    transform: scale(1.1);
    background:#fff;
    color: #E2E2E2;
}
#satinalma .premuyebas > .p1{
    margin-bottom: 0;
    color: var(--TextBlack, #2D2D2D);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
#satinalma .premuyebas > .p2{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}
#satinalma .paketmobilacik{
    display: none;

}
#satinalma .paketmobilacik .card{
    border-radius: 4px;
    border: 1px solid #FFF;
    background: rgba(255, 255, 255, 0.29);
}
#satinalma .paketmobilacik h2{
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#satinalma .paketmobilacik .kutu-title{
    color: #FFF;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
}
#satinalma .paketmobilacik  .fa-solid{
    color: #fff;
}
#satinalma .paketmobilacik .kutu-title > span{
 color: #FFF;
 font-family: Poppins;
 font-size: 10px;
 font-style: normal;
 font-weight: 400;
 line-height: normal;
}
#satinalma .paketmobilacik .kutu .kutu-text{
    margin-bottom: 0;
    color: var(--white-50, rgba(255, 255, 255, 0.50));
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#Ayarlar.content{
    overflow: visible;
}
#Ayarlar .switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 20px;
    border-radius: 50px;
    margin-right: 50px;

}
#Ayarlar .list-unstyled li{
    color: var(--Grey, #3D3D3D);
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#Ayarlar  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#Ayarlar  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    width: 46px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #eeeeee;
    box-shadow: 1px 1px 1px 1px #ccc;
    transition: 0.4s;
    border-radius: 50px;
}

#Ayarlar .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    border-radius: 50px;
    left: 1px;
    bottom: 1px;
    background-color: #3D3D3D;
    transition: 0.4s;
}

#Ayarlar input:checked + .slider {
    background-color: #4CAF50;
    border-color: #4CAF50; 
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); 
}

#Ayarlar input:checked + .slider:before {
    transform: translateX(26px);
}
#bildirimler .ustbas{
    margin-bottom: 10px;
}
#bildirimler .ustbas h2{
    color: #000;
    font-family: var(--figtree);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0;
}
#bildirimler h5 > span{
    padding: 7.5px 5px;
    border-radius: 25px;
    flex-shrink: 0;
    background: #FAED98;
    color: #000;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: none;
}
#bildirimler .bildirimm .resim {
    width: 47px;
    height: 47px;
    background: ;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
#bildirimler a{
    text-decoration: none;
}
#bildirimler .bildirimm {
    border-radius: 3px;
    background: #FFF;
    padding:10px;
    position: relative;
    transition: .3s;
}
#bildirimler .bildirimm .resim.gri{
    border-radius: 3px;
    background: #F8F8F8;
}
#bildirimler .bildirimm .resim.kirmizi{
    background: #BD1414;
}
#bildirimler .bildirimm .resim.yesil{
    background: #DCF4D3;
}
#bildirimler .modal-header{
    border: none;
    padding: 15px 20px;
    padding-bottom: 0;
}
#bildirimler .modal-header .btn-close{
    background-color:#E5E5E5;
    border-radius: 3px;
}
#bildirimler .modal-body .altaciklama{
    padding: 15px;
    background: #FAFAFA;
    color: rgba(43, 40, 40, 0.80);
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 19.6px */
    margin: 10px;
    overflow: auto;
    max-height: 300px;
}

#bildirimler .modal-body .baslikacik h5{
    color: var(--Grey, #3D3D3D);
    font-family: var(--figtree);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
#bildirimler .bildirimm:hover{
   background:  rgba(45, 45, 45, 0.10);
   border-radius: 0px;
}
#bildirimler .bildirimm .fa-solid{
    color: #000;
    position: absolute;
    right: 10px;
}
#bildirimler .bildirimm h4{
    color: var(--Grey, #3D3D3D);
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0px;
}
#bildirimler .bildirimm p{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0px;
}
.entegrekart{
    background: #FC994D;
    padding: 20px;
    margin-top: 30px;
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
}
.entegrekart h4{
    color: #FFF;
    font-family: var(--basicsans);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
    position: relative;
    z-index: 3;
}
.entegrekart h4 > span{
    font-weight: 700;
}
.entegrekart p{
    color: #FFF;
    font-family: var(--basicsans);
    width: 70%;
    margin-bottom: 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    position: relative;
    z-index: 3;
    line-height: 160%; /* 25.6px */
}
.entegrekart::after{
    content: '';
    width: 100%;
    z-index: 1;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../img/rectangles1.svg) no-repeat right bottom;
}

.entegrasyonsol h4{
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.entegrasyonsol .form-label{
    color: #C9C9C9;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.entegrasyonsol .form-control, .form-select {
    display: flex;
    border: none;
    background-color: transparent;
    border-radius: 0;
    padding: 9px 6px 9px 0px;
    align-items: center;
    align-self: stretch;
    color: #000;
    font-family: var(--figtree);
    border-bottom: 1px solid #C9C9C9;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.entegrasyonsol .aciklamabas{
    color: rgba(61, 61, 61, 0.60);
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 19.2px */
}
.entegrasyonsol .btn.btn-entegrasyon{
    display: flex;
    padding: 15px 70px;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    background: #48BEA6;
    color: #FFF;
    font-family: var(--figtree);
    margin-top: 40px;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    transition: .3s;
    line-height: normal;
}
.entegrasyonsol .btn.btn-entegrasyon:hover{
    background:#FFF ;
    color:#48BEA6;
}
.content.Entegrasyon{
    height: auto;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 122px 34px 0px rgba(176, 176, 176, 0.00), 0px 78px 31px 0px rgba(176, 176, 176, 0.01), 0px 44px 26px 0px rgba(176, 176, 176, 0.05), 0px 19px 19px 0px rgba(176, 176, 176, 0.09), 0px 5px 11px 0px rgba(176, 176, 176, 0.10);
    padding: 20px;
}
.content.Entegrasyon h5{
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.content.Entegrasyon p{
    color: rgba(61, 61, 61, 0.60);
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.content.Entegrasyon#moduller .nav-tabs .nav-item{
    width: 100%;
    margin-right: 10px;
}
.content.Entegrasyon#moduller .nav-tabs li:nth-child(4){
    margin-right: 0;
}
.content.Entegrasyon#moduller .nav-tabs .nav-link{
    height: 70px;
    padding: 20px;
    width: 100%;
}
.content.Entegrasyon .nav-tabs .nav-link img{
    width: 100%;
}
.content.Entegrasyon#moduller .nav-tabs{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.content.Entegrasyon#moduller .hesaplama-card{
    margin:25px 0;
}
/* Maliyet Öğeleri */
.maliyetekle .card h5{
    margin-bottom: 12px;
    color: var(--TextBlack, #2D2D2D);
    font-family: var(--figtree);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.maliyetekle .card label{
    color: #C9C9C9;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.maliyetekle .cost-item {

   border-bottom: 1px solid #C9C9C9;
   margin-bottom: 5px;
}

.maliyetekle .cost-label {
    color: #C9C9C9;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.maliyetekle .card input{
    margin-bottom: 10px;
    border: none;
    display: flex;
    padding: 9px 6px 10px 0px;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid #C9C9C9;
    border-radius: 0px;
    color: #7A7A7A;
    font-family: var(--figtree);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.maliyetekle .card .btn{
    display: flex;
    padding: 15px 70px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 50px;
    background: #48BEA6;
    color: #FFF;
    font-family: var(--figtree);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    margin-top: 20px;
    line-height: normal;
    transition: .3s;
}
.maliyetekle .card .btn:hover{
    background:#ebebeb ;
    color: #48BEA6;
}
.maliyetekle .cost-input {
    border: none;
    background: transparent;
    display: flex;
    padding: 9px 6px 9px 0px;
    align-items: center;
    align-self: stretch;
    width: 80%;
    color: #7A7A7A;
    font-family: var(--figtree);
    font-size: 15px;
    font-style: normal;
    border-bottom: 1px solid transparent;
    font-weight: 400;
    line-height: normal;
}

.maliyetekle .cost-input:focus {
  outline: none;
  border-bottom: 1px solid #28a745;
}

/* İkon Butonları */
.maliyetekle .icon-group {
  display: flex;
  gap: 5px;
}

.maliyetekle .icon-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
}

.maliyetekle .icon-btn.edit { color: #0078ff; }
.maliyetekle .icon-btn.delete { color: #dc3545; }
.maliyetekle .icon-btn.save { color: #28a745; }
.maliyetekle h4{
    color: var(--TextBlack, #2D2D2D);
    font-family: var(--figtree);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.expense-card-container-2 {
    display: flex;
    gap: 10px;
    align-items: start;
    justify-content: space-between;
    padding-bottom: 16px;
}

.expense-card-container-2 .expense-list-2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
}

.expense-card-container-2 .expense-item-2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.expense-card-container-2 .expense-color {
    width: 29px;
    height: 11px;
    border-radius: 50px;

}

.expense-card-container-2 .expense-label {
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.expense-card-container-2 .expense-percentage {
    margin-left: auto;
    font-size: 12px;
    color: #666;
}

.expense-card-container-2 .chart-container-2 {
    position: relative;
    width: 300px;
    height: 300px;
}

.expense-card-container-2 .total-cost-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    z-index: 10;
    color: #2E2E30;
    font-family: var(--figtree);
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.expense-card-container-2 .total-label-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,100%);
    z-index: 10;
    color: #787878;
    text-align: center;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.expense-card-container-2 #expenseChart2{
    position: relative;
}
#profilim .yeniprofilim .kart{
    padding: 15px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 154px 43px 0px rgba(130, 130, 130, 0.00), 0px 98px 39px 0px rgba(130, 130, 130, 0.01), 0px 55px 33px 0px rgba(130, 130, 130, 0.05), 0px 25px 25px 0px rgba(130, 130, 130, 0.09), 0px 6px 14px 0px rgba(130, 130, 130, 0.10);

}
#profilim .yeniprofilim h2{
    margin-bottom: 0;
    color: #000;
    margin-top: 12px;
    font-family: var(--figtree);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
#profilim .yeniprofilim .kart .ust{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#profilim .yeniprofilim td{
    background: transparent;
}
#profilim .yeniprofilim tr{
    background: #fff;
}
#profilim .yeniprofilim .tabloo .p1{
    color: var(--TextBlack, #2D2D2D);
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#profilim .yeniprofilim .tabloo .p2{
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#profilim .yeniprofilim tr:nth-child(even){
    background: rgba(233, 233, 233, 0.50);
}
#profilim .yeniprofilim .kart .ust i{
    color: #fff;
    width: 64px;
    height: 64px;
    background: #55BCA7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    border:5px solid #D6FFF7;
}
#profilim .yeniprofilim .kart .ust p{
    color: var(--TextBlack, #2B2828);
    font-family: var(--figtree);
    margin-top:10px ;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
#profilim .yeniprofilim .kart .form-label{
    color: #C9C9C9;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#profilim .yeniprofilim .kart .form-control{
    display: flex;
    padding: 9px 6px 10px 0px;
    align-items: center;
    align-self: stretch;
    border-radius: 0;
    border: none;
    background: transparent;
    border-bottom: 1px solid #C9C9C9;
    color: #7A7A7A;
    font-family: var(--figtree);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#profilim .yeniprofilim .kart .alt{
    display: flex;
    flex-direction: column;
}
#profilim .yeniprofilim .kart .alt .btn{ 
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 50px;
    background: #55BCA7;
    color: #FFF;
    margin: 0 10px;
    margin-top: 10px;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#profilim .yeniprofilim .kart .alt .btn.ciki{ 
    color: #000;
    background: #C3D7D3;
    justify-content: center;
}
.yeniprofilim .premiumcard .ust{
    padding: 10px;
    background: linear-gradient(83deg, #4ACF8C 0%, #75EDA6 100%);
    position: relative;
    text-align: center;
    overflow: hidden;
}
.yeniprofilim .premiumcard{
    height: 100%;
    border-radius: 50px;
    box-shadow: 0px 179px 50px 0px rgba(130, 130, 130, 0.00), 0px 114px 46px 0px rgba(130, 130, 130, 0.01), 0px 64px 39px 0px rgba(130, 130, 130, 0.05), 0px 29px 29px 0px rgba(130, 130, 130, 0.09), 0px 7px 16px 0px rgba(130, 130, 130, 0.10);
}
.yeniprofilim .premiumcard .ust{
    height: 80%;
}
.yeniprofilim .premiumcard .alt{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20%;
    background: #fff;
}
.yeniprofilim .premiumcard .alt .premlink{
    border-radius: 50px;
    background: linear-gradient(83deg, #4ACF8C 0%, #75EDA6 100%);
    box-shadow: 0px 40px 11px 0px rgba(102, 102, 102, 0.00), 0px 26px 10px 0px rgba(102, 102, 102, 0.01), 0px 15px 9px 0px rgba(102, 102, 102, 0.05), 0px 6px 6px 0px rgba(102, 102, 102, 0.09), 0px 2px 4px 0px rgba(102, 102, 102, 0.10);
    display: inline-flex;
    height: 54px;
    padding: 10px 50px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: #FFF;
    font-family: var(--figtree);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    transition: .3s;
}
.yeniprofilim .premiumcard .alt .premlink:hover{
    transform: scale(1.2);
}
.yeniprofilim .premiumcard .ust h3{
    color: #FFF;
    font-family: var(--figtree);
    font-size: 24px;
    margin: 50px 0;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.yeniprofilim .premiumcard .ust ul li{
    color: rgba(255, 255, 255, 0.80);
    font-family: var(--figtree);
    margin-bottom: 10px;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;


}
.yeniprofilim .premiumcard .ust ul li > i{
    font-size: 17px;
    position: relative;
    bottom: -2px;
    margin-right: 10px;
}
.yeniprofilim .premiumcard .ust .kutu h5{
    color: #FFF;
    margin-top: 50px;
    font-family: var(--figtree);
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

}
.yeniprofilim .premiumcard .ust .kutu h5 >span{
    color: #FFF;
    font-family: var(--figtree);
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.yeniprofilim .premiumcard .ust .kutu p{
    color: #FFF;
    text-align: center;
    font-family: var(--figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.yeniprofilim .premiumcard .ust::after{
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    left:-50px;
    top: 20px;
}
.yeniprofilim .premiumcard .ust::before{
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    right:-80px;
    top: 80px;
}
@media (max-width: 1300px) {
    #urunler .arama input{
        width: 100%;
    }
    .anaustcard .card{
        height: auto;
    }
    #moduller .hesaplama-sonuc{
        padding: 5px;
    }
    #satinalma .dahafiyat .card-body{
        width: 100%;
    }
    #moduller .hesaplama-sonuc svg{
        height: 100px !important;
    }
    #moduller .hesaplama-sonuc button{
        width: 200px;
    }
    .sidebar a{
        margin-left: 40px;
    }
}
@media (max-width: 1200px) {
    #moduller .hesaplama-sonuc .ickutu{
        width: 100%;
        padding: 10px;
    }
    #moduller .hesaplama-sonuc .ickutu p {
        font-size: 16px;
    }
    #moduller .hesaplama-sonuc .altbutonlarr button{
        padding: 10px 20px;
    }
    #moduller .hesaplama-sonuc .altbutonlarr .btn.btn-hesapla{
       padding: 10px 20px;
   }
}

@media (max-width: 1024px) {
    #urunler .card{
        width: auto;
    }
}
@media (max-width: 992px) {
    #urunler .arama{
        width: 100%;
    }
    #urunler .excelaktar .btn{
        font-size: 0;
    }
    #urunler > form > div > div.col-lg-6.d-flex.justify-content-end{
        justify-content: center !important;
        margin-top: 10px;
    }
    #urunler .arama input{
        width: 100%;
    }
    .menu-item:hover{
        background: transparent;
    }
    .entegrekart h4{
        font-size: 20px;
    }
    .entegrekart p{
        font-size: 14px;
    }
    .entegrekart.bildirims::after{
        background: url(../img/bildirimicons.svg) no-repeat right bottom;
        opacity: .6;
    }
    .entegrekart.faturalar::after{
        background: url(../img/faturalarentegre.svg) no-repeat right bottom;
    }
    #moduller .faturalar table tbody tr{
        margin-bottom: 20px;
    }
    .faturaid#moduller .modal-dialog.modal-lg .gecmis-hesaplamalar{
        padding: 0;
        margin-top:15px;
    }
    .faturaid#moduller .modal-dialog.modal-lg .gecmis-hesaplamalar .table{
        padding: 10px;
    }
    .faturaid#moduller .modal-dialog.modal-lg .gecmis-hesaplamalar .table td::before{
        left:10px;
    }
    #urunler .row.urunrow{
        grid-template-columns: repeat(4, 1fr);
    }
    #moduller .faturalar .kardurumu{
        align-items: baseline;
    }
    #moduller .table {
        display: grid;
        grid-template-columns: repeat(1, 1fr); 
        background: #fff;
        padding: 5px;
    }

    #moduller  .table thead {
        display: none; 
    }

    #moduller  .table tbody {
        display: contents; 
    }

    #moduller  .table tr {
        display: contents; 
    }

    #moduller .table td {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 5px;
    }

    #moduller .table td::before {
        content: attr(data-label); 
        margin-bottom: 5px;
        color: var(--text-black-60, rgba(45, 45, 45, 0.60));
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        position: absolute;
        left: 0;
        line-height: normal;
    }
    
    #moduller .hesaplama-sonuc .hesapic{
        margin-top: 50px;
        justify-content: center;
    }
    #moduller .gecmis-hesaplamalar table tbody tr td{
        text-align: left;
        padding: 5px 0px;
    }
    #moduller .gecmis-hesaplamalar table tbody tr td a{
        width: 97.5%;
        position: absolute;
        margin-top: -10px;
    }
    #moduller .gecmis-hesaplamalar table tbody tr td{
        margin-bottom: 10px;
    }
    #moduller .faturalar table tbody tr td{
        background: transparent;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        border:none;
    }
    #moduller .faturalar table tbody tr td.teslimtrue{
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
    }
    #moduller .faturalar table tbody tr td:nth-child(1){
        align-items: flex-start;
    }
    #moduller .faturalar table tbody tr td:nth-child(7){
        align-items: flex-start;
    }
    #moduller .faturalar table tbody tr td img{
        width: 23px;

    }
    #moduller .gecmis-hesaplamalar table tbody tr td a > span{
        display: block;
        color: var(--Grey, #3D3D3D);
        text-align: center;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-left: 5px;
    }
    #urunler .card{
        display: flex;
        flex-direction: row;
        padding: 5px;
        border-radius: 5px;
        background: #F1F1F1;
        box-shadow: 0px 49px 14px 0px rgba(0, 0, 0, 0.00), 0px 31px 13px 0px rgba(0, 0, 0, 0.01), 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
        margin-bottom: 10px;
    }
    #urunler .card .card-img-top{
        width: 51px;
        height: 51px;
        padding: 0;
    }
    #urunler .col-lg-12 h3{
        margin-bottom: 0px;
        color: #000;
        font-family: var(--figtree);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    #urunler > div > div.col-lg-12 > div{
        margin: 10px 0px;
    }
    #urunler .card .card-body{
        display: flex;
        justify-content: space-between;
    }
    #urunler .card .card-body .card-ustduz{
        text-align: left;
    }
    #urunler .card .card-title{
        margin-bottom: 0;
    }
    #urunler .card-body > div.d-flex.justify-content-between{
        display: flex;
        flex-direction: column;
    }
    #urunler .card .span2{
        width: 52px;
        height: 22px;
        margin-bottom: 0;
        border-radius: 5px;
    }
    #urunler .col-lg-12 .excelaktar .btn >font{
        display: none;
    } 
    #urunler #filterMenu label{
        margin:20px 0px;
    }
    .content#urunler{
        overflow: hidden;
        overflow-y: auto;
    }
    #urunler .modal-content .ozelrow1{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    #urunler .ozelrow3{
        display: flex;
        flex-direction: row;
    }
    .faturaid#moduller .modal-body .modalcard{
        height: auto;
    }
    .faturaid#moduller .modal-body .ozelrow3x .col-lg-2{
        text-align: center;
        width: 50%;
    }
    .faturaid#moduller .modal-body .ozelrow3x > div:last-child {
        order: -1; 
    }
    .faturaid#moduller .modal-body .basliklar{
        margin-left: 5px;
    }
    .faturaid#moduller .modal-body .gecmis-hesaplamalar .basliklar {
        background: transparent;
    }
    #urunler .modal > div > div > form > div > div.row.mt-4.ozelrow3 > div:nth-child(1){
        display: none;
    }
    #urunler .modal > div > div > form > div > div.row.mt-4.ozelrow3 > div:nth-child(8){
        margin: auto;
    }
    #urunler .ozelrow3 .col-lg-2{
        width: 50%;
    }
    #urunler .modal-body .modalcard.bgred{
        margin-bottom: 10px;
    }
    #urunler .modal-content .ozelrow2 .col-md-6{
       width: 50%;
   }

   #urunler .modal-content .ozelrow1 .col-lg-5{
       width: 30%;
   }
   #urunler .modal-content .ozelrow1 .col-lg-6{
       width: 70%;
   }
   #urunler .modal-body .btn.guncelle{
    width: 100%;
}
#moduller .faturalar .inceleme{
    height: 25px;
    display: flex;
    justify-content: space-between;
}
#moduller .faturalar .inceleme .incele{
    width: 50%;
    left: 0;
}
#moduller .faturalar .inceleme .gelirid{
    width: 50%;
    right: 0;
}
.faturaid#moduller .ustbas{
    margin-top: 12.5px;
}
.faturaid#moduller .modal-body .kutu2 .d-flex{
    display: flex;
    justify-content: space-between;
}

.faturaid#moduller .modal-body .gelirmodal{
    display: block;
}
.faturaid#moduller .modal-body .gelirmodal .gelirid{
    display: flex;
    width: 100;
    padding: 5px;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: #FEE9E9;
    color: var(--Grey, #3D3D3D);
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 10px;
}

#productCarousel .carousel-control-prev {
    left: 5%; 
}

#productCarousel .carousel-control-next {
    right: 5%;
}
.faturaid#moduller .modal-body input{
    width: 100%;
}
#giderler .sagkart input{
    width: 100%;
    padding: 2px;
}
#destektalebi .destekkutu{
    display: none;
}
#profilim .modal-content{
    width: 100%;
}
#profilim .modal-body .btn{
    margin-bottom: 20px;
    margin-top: 20px;
}
#profilim .modal-header .modal-title{
    font-size: 16px;
    font-weight: 500;
}
#profilim .nav .nav-item .nav-link{
    margin-top: 10px;
}
#profilim .profilyan {
    display: flex;
    flex-direction: column-reverse;
}
#profilim .profilyan .gap-2{
    display: block !important;
}
#profilim .profilyan .btn{
    width: 100%;
    margin-top:20px ;
    box-shadow: none;
}
#profilim .ozelwor1 .col-md-6{
    width: 50%;
    margin-top: 0;
}
#Profilim > div > div.col-md-7.profilyan > form > div > div:nth-child(5){
    width: 100%;
}
#Profilim > div > div.col-md-7.profilyan > form > div > div:nth-child(6){
    width: 100%;
}
#Profilim .table{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: #fff;
    margin-bottom: 10px;
}
#Profilim .table tbody{
    display: contents;
}
#Profilim .table tr{
    display: contents;
}
#Profilim .table table tbody tr td {
    margin-bottom: 20px;
}
#profilim .gecmisfatura .table>:not(caption)>*>*{
    padding: 5px;
}
#profilim .gecmisfatura .table .tarih{
    text-align: center;
}
#profilim .gecmisfatura .p1 > i{
    margin-left: 5px;
}
#profilim .gecmisfatura .table .fiyat{
    text-align: center;
}
.credikarti .card-container{
    height: 310px;
    width: 500px;
    margin: auto;
}
.credikarti .cardcrediozel .col-md-6{
    width: 50%;
}

#satinalma .card.ust, .card.alt .card-body{
    width: 100%;
}
#satinalma .card.alt .card-body .col-6{
    width: 100%;
}
#satinalma .card.alt ul{
    text-align: center;
    margin-top: 0;
}
#satinalma .dahafiyat .col-auto{
    width: 100%;
}
#satinalma .dahafiyat .card-body{
    width: 100%;
}
#satinalma .dahafiyat .card-body{
    padding: 16px;
}
#satinalma .dahafiyat .card{
    margin-bottom: 20px;
}
#satinalma .odemefiyat ul{
    padding-left: 0;
}
#satinalma .paketmobilkapali{
    display: none;
}
#satinalma .paketmobilacik{
    display: block;
}
.topbar .fullscreen-btn{
    display: none;
}
.topbar{
    border-radius: 0;
    background-color: transparent;
    padding: 10px;
}
.topbar .topictbar{
    justify-content: flex-end;
}
.topbar .topictbar .kutubaslik {
    margin-right: auto;
}
.topbar .user-menu.mobilkapali{
    display: none;
}
.topbar .search-box form{
    display: none;
}
.navbar-toggler {
    display: block;
}
.navbar-toggler{
    padding:10px;
    margin-left: 15px;
}
.sidebar{
    display: none;
}
.sagbar{
    width: 100%;
    margin-left: 0;
}
.mobilkapali{
    display: none !important;
}
.mobilacik{
    display: block !important;
}
.topbar .user-menu .btn.btn-primary.dropdown-toggle{
    width: 100%;
    background:  rgba(255, 255, 255, 0.50);
    margin-bottom: 30px;
}
.topbar .user-menu #icon2{
    margin-left: auto;
}
.topbar .user-menu .dropdown-menu{
    width: 100%;
    background-color: #14705d;
}
.topbar .user-menu .btn i{
    color: #000;
}
.mobile-menu .menu-item a > span{
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.topbar .user-menu .btn.btn-primary.show.dropdown-toggle{
    background-color: #14705d;
}
#mobileMenu .logo{
    padding: 0 5px;
}
.topbar .topictbar .kutubaslik h5{
    font-size: 20px;
    font-weight: 500;
}
.topbar .notification-btn{
    background-color: #F5F3F3;
}
.navbar-toggler i{
    font-size: 24px;
}
.anasayfacont .anaustcard .yeslicard{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.yuzdeelli{
    width: 50%;
}
.anasayfacont .row.karperformans{
    display: flex;
}


.tablee > table {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    background: #fff;
}

.tablee thead {
    display: none; 
}

.tablee tbody {
    display: contents; 
}

.tablee tr {
    display: contents; 
    position: relative;
    margin-bottom: 10px;
}

.tablee td {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
}
.tablee td:nth-child(6n+0){
    margin-bottom: 20px;
}
.anasayfacont .row.karperformans .item-1 .tablee{
    margin-top: 30px;
}
.tablee td::before {
    content: attr(data-label); 
    margin-bottom: 5px;
    color: var(--text-black-60, rgba(45, 45, 45, 0.60));
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.tablee tr:nth-child(even) td::before {
    background: #f7f7f7;
}

.tablee .ilkk{
    align-items: flex-start;
    padding-bottom: 0;
    grid-column: span 3;
}
.anasayfacont .row.karperformans .bgyesil > span{
    margin-left:0 ;
}
.anasayfacont .row.karperformans .item-1 .tablee td >div >.ictd{
    width: 80%;
}
.tablee td[data-label="Kâr/Zarar"] {

}
.anasayfacont .row.karperformans .bgkirmizi > span{
    margin-left: 0;
}
.hesaplama-card h5{
    font-size: 16px;
}
#moduller .hesaplama-card .btn{
    display: flex;
    padding: 15px 40px;
    width: 100%;
    background: #48BEA6;
    color: #fff;
    margin: 10px 0px;
    border: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    position: relative;
    z-index: 3;
    color: #FFF;
    font-family: var(--figtree);
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    box-shadow: none;
}
#moduller .hesaplama-sonuc{
    margin-top: 30px;
}
#moduller .hesaplama-sonuc h2{
    font-size: 32px;
}
#moduller .hesaplama-sonuc .tavsiyee{
    font-size: 12px;
}
#moduller .hesaplama-sonuc .ickutu p{
    font-size: 16px;
}
#moduller .hesaplama-sonuc .altbutonlarr .btn.btn-hesapla{
    display: none;
}
#moduller .hesaplama-sonuc .altbutonlarr button{
    width: 70%;
    margin: auto;
    margin-bottom: 20px;
}
#moduller .hesaplama-sonuc .ickutu{
    width: 100%;
    margin: 10px;
}
#moduller .nav-tabs .nav-link{
    width: 290px;
}
#moduller .nav-tabs .nav-item{
    margin: 10px 0px;
}
#moduller .nav-tabs{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
}
#moduller .kayitlihesap .karthesap h4{
    font-size: 32px;
}
.content.Entegrasyon{
    margin-top: 30px;
}
.maliyetekle  .card{
    margin-top: 30px;
}
.maliyetekle .row .col-lg-3{
    width: 50%;
}
.expense-card-container-2{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    flex-direction: column-reverse;
}
#giderler .altcard .card{
    margin: 10px 0;
}
#destektalebi .btn{
    margin-top: 30px;
}
#destektalebi textarea{
    margin-top: 20px;
}
#profilim .yeniprofilim h2{
    margin-top: 50px;
}

}

/* Menü Butonu (Mobil) */

@media (max-width: 768px) {
    .credikarti .card-container{
        height: 310px;
        width: auto;
        margin: auto;
    }
    .credikarti  .col-md-6{
        width: 50%;
    }
    #urunler .modal-body input{
        width: 100%;
    }
    .anasayfacont .anaustcard .yeslicard h2{
        font-size: 24px;
    }
    .anasayfacont .anaustcard .yeslicard p{
        font-size: 14px;
        margin: 7px 0;
    }
    .anasayfacont .anaustcard .yeslicard a{
        padding: 10px 15px;
    }
    .mobile-menu {
        padding-left: 0; }

        .sidebar {
            display: none;
        }

        .sagbar{
            width: 100%;
            border-top: 0px ;
        }
        .logo .imgmobil{
            margin-right: auto;
        }
        .logo.mobil .notification-btn i{
            font-size: 16px;
        }
        .logo.mobil .close-menu i{
            padding: 8px 11px;
            font-size: 20px;
            margin-right:6px;
            margin-left: 8px;
            transform: rotate(90deg);
            color: #000;
            opacity: .5;
            background-color: #fff;
        }

        .topbarucuncu{
            margin-left: 0;
        }
        .topbaricon.d-flex{
            margin-left: auto;
        }
        .topbar .topictbar{
            background-color: transparent;
        }


        .anaustcard .card h5{
            font-size: 16px;
        }
        .anaustcard .card h2{
            font-size: 20px;
        }
        .anaustcard .card p{
            font-size: 13px;
        }
        .anaustcard .card{
            height: 145px;
        }
        .karediyormuyum .card h5{
            font-size: 24px;
        }
        .karediyormuyum .card{
            height: auto;
        }
        .karediyormuyum .karediyormuyumimg{
            width: 120px;
        }
        .content{
            padding: 0;
            overflow-y: visible;
        }
        .karediyormuyum .card p{
            margin-bottom: 20px;
        }
        .encoksatanlar .card .nav.nav-tabs {
            position: absolute;
            right: 50%;
            bottom: 0;
            transform: translatex(50%);
            display: flex;
            top: inherit;
            align-items: normal;
            justify-content: center;
            flex-direction: row;
            border: none;
            align-content: center;
        }
        .encoksatanlar .card{
            padding-bottom: 40px;
        }

        #moduller .hesaplama-card .col-lg-3{
            width: 49%;
        }
        #moduller .hesaplama-card .col-lg-4 {
            width: 49%;
        }
        #moduller .hesaplama-card .col-lg-2 {
            width: 49%;
        }
        #moduller .hesaplama-card .btn{
            margin: 20px 0px;
        }
        #moduller .hesapsonuccol{
            width: auto;
        }


        #moduller .hesaplama-sonuc button{
            width: 250px;
        }

        #moduller .link-search {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #007bff;
            color: #fff;
            border-radius: 5px;
            padding: 5px 10px;
            text-decoration: none;
            transition: 0.3s ease;
        }

        #moduller .link-search:hover {
            background: #0056b3;
        }

        #moduller  .table td:nth-child(7) {
            grid-column: 1 / -1; 
        }
        #moduller.Entegrasyon .hesaplama-card .col-lg-3, .col-lg-4, .col-lg-2
        {
            width: 49%;
        }
        .faturaid#moduller .modal-body .faturamodalrow1 .col-lg-3, .col-lg-4, .col-lg-2{
            width: 100%;
        }
        .faturaid#moduller .modal-content .row.analiz  .col-lg-2{
            width: 50%;
        }
        .faturaid#moduller .modal-content .row.analiz .icerik{
            margin-bottom: 20px;
        }
        .faturaid#moduller .modal-content .row.analiz .col-lg-3{
            display: flex;
            justify-content: center;
        }
        #moduller .hesaplama-card .btn.btn-entegrasyon{
            width: 100%;
        }
        #urunler .filter .btn span{
            display: none;
        }
/*    #moduller  .table {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        background: #fff;
        padding: 5px;
    }*/
    .content.Entegrasyon#moduller .nav-tabs{
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, 1fr);
     grid-column-gap: 10px;
     grid-row-gap: 10px;
 }
 .content.Entegrasyon h5{
    font-size: 16px;
}
#urunler .row.urunrow{
    display: flex;
    columns: ;
}
}