:root {
    --main-color: #e93f69; /* Vişne Çürüğü */
    --bagroundColor: rgb(241, 248, 247);
    --active-color: #00e676;
    --passive-color: #968d96; /*#b0bec5*/
    --selected-color: #e93f69;
    --un-selected-color: #968d96; /*#b0bec5*/
    --white-color: #ffffff;
    /*#667eea; menu-item:hover???*/
    --accent: #e93f69;
    --cancel-color: #ff4757;
    --glass-bg: rgba(255, 255, 255, 0.15); /*Kart arka planı (daha saydam) */
    --glass-border: rgba(255, 255, 255, 0.4);
    --text-color: #0d0d0d;
    --textLight-color: #f0f0f0;
    --input-bg: rgba(255, 255, 255, 0.7); /*Input arka planı */
    --rose: #e93f69;
    --rose-light: rgba(233, 63, 105, 0.18);
    --rose-mid: rgba(233, 63, 105, 0.35);
    --glass: rgba(255, 255, 255, 0.22);
    --glass-border: rgba(255, 255, 255, 0.30);
    --glass-strong: rgba(255, 255, 255, 0.42);
    --text-dark: #1e1e2e;
    --text-mid: #555;
    --text-light: #999;
    --online: #00c853;
    --offline: #ff4757;
    --blur: blur(14px);
    /* yayınlanmayan ton */
    --draft-bg: rgba(180,180,200,0.18);
    --draft-border: rgba(160,160,185,0.38);
    --marker-map: rgba(43,130,203,0.9);
    --draft-text: #7a7a8e;
}
/*--primary-color: #f71b1b; --secondary-color: #e70953; --accent-color: #ff6b9d;*/
body {
    position: relative;
    height: 100vh;
    min-height: 100vh;
    background: var(--bagroundColor); /* Görsel yüklenene kadar yedek #e0e0e0*/  
    background-image: url('Media/img/12.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: background-image 1.5s ease-in-out;
    /* İlk arka plan resmi */
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: var(--text-color);
    /*overflow-y: auto;*/ /*Bu satırı ekle*/
    /*overflow: hidden;*/ /* Ekran kaydırmayı engeller */
    box-sizing: border-box;
    text-decoration: none;	 
}
    /* Blur efekti için overlay */
    body::before {
        /*content: '';*/
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
       filter: blur(4px);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: -1;
        transform: scale(1.05); /* Blur etkisini dengelemek için */
    }
/* Glassmorphism Etkisi Verilen Giriş Kartı */
.login-container {
    width: 90%;  
    height:auto;
    max-width: 650px;
    /* GLASSMORHPISM UYGULAMASI */
    background: var(--glass-bg);
    backdrop-filter: blur(20px); /* Yüksek bulanıklık */
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); /* Derin gölge */
    padding-left: 40px;
    padding-right: 40px;
    text-align: center;
    /* İçerik sığmazsa kaydırma (mobil için kritik) */
    /*max-height: 95vh;*/
    padding-top: 25px; /* Üstten boşluk */
    padding-bottom:25px;
    margin: auto;    
}
.empty80{
    position:relative;
    width:100%;
    height:71px;
}
/*******************BURADA GLASSMORPHISM ETKISI glass CLASS INA ALINABİLİR*******************************/
.glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /*border-radius: 24px;*/
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}



/*.notification-wrapper {
    @extend .glass;
}*/
/*yada <div class="notification-wrapper glass" > </div >*/

/**************MODAL******************/
.modal-backdrop{
    background: rgba(255, 255, 255, 0.5);
}
.modal-dialog {
    display: flex;
    justify-content: center;
    margin: auto;   
}
.modal-content {    
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    position: relative;
    justify-content: center;
    margin-top: 50px;
    backdrop-filter: blur(10px);       
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);   
}
    .glass-modal{       
        max-width: 750px;
        height:auto;
        margin:auto;      
        border-radius: 16px;
        padding: 20px;        
    }


.modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 30px;
    color: #666;
    cursor: pointer;
    transition: color 0.2s;
    border:none;
    background-color:transparent;
}
/********************************İNFO SAYFASI*********************************/
.erorMessage {
    position: relative;
    text-align: left;
    display: block;
    visibility: visible;
    z-index: 1000;
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/* Başlıklar */
h2 {
    margin-bottom: 25px;
    font-size: 2.5em;
    font-weight: 900;
    color: var(--main-color);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
}
p.intro {
    font-size: 15px;
    color: var(--text-color);
    line-height: 1.6;
    text-align: center;
    margin-bottom: 25px;
    font-style: italic;
}
/* Özellik Listesi */
.features-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    list-style: none;
    padding: 0 10px;
}

.feature-item {
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #222;
}
    .feature-item i{
        color: var(--main-color);
        font-size: 1.2em;
        margin-top: 2px;
        flex-shrink: 0;
    }

form {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
/* Input Alanları (Glassmorphism uyumu) */
.form-control-text,
.form-control-password {
    padding: 8px 10px;
    border-radius: 10px;
    /* Yarı saydam arka plan, belirgin kenarlık */
    background: var(--input-bg);
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 16px;
    color: #333;
    transition: all 0.3s;
}

    .form-control-text:focus,
    .form-control-password:focus {
        outline: none;
        background: #fff;
        border-color: var(--main-color);
        box-shadow: 0 0 0 3px rgba(233, 63, 105, 0.3);
    }

.login-btn {
    background: var(--main-color);   
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .login-btn:hover {
        background: #fff;
        color: var(--main-color);
    }

/* Bağlantılar (Auxiliary Links) */
.links {
    display: flex;
    justify-content: space-around;
    font-size: 15px;
    margin-top: 20px;
}

    .links a {
        color: var(--main-color);
        text-decoration: none;
        font-weight: 600;
    }

.links a:hover {
           text-decoration: underline;
        }

.form-controlTxT {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    color: #333;
    outline: none;
    transition: all 0.2s;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}
.InfoLogo {
    position: relative;
    text-align: center;
    width: 100%;
    height: auto;
    margin: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    padding:15px;
}
    .InfoLogo > img {
        width: 200px;       
        height: auto;
    }
.validate{
    position:relative;
    width:100%;
    height:auto;
    background-color:yellow;
    font-size:12pt;
    /*margin:1px;*/
} 

#loading {
    position: relative;
    width: 70px;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    display: none;
}

    #loading > img {
        width: 70px;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }
    /************************************************CREATE MEMBER*****************************************************/
.infoFooter {
    position: fixed;
   bottom:-5px;
    height: 20px;
    width: 100%;
    text-align: left;   
    color:#fff;
    font-size:12px;
    margin-bottom:10px;
}
    .infoFooter >a{
        color:#fff;

    }.tb {
        width: 78px;
        height: 50px;
        border-radius: 35px;
        text-align: center;
        font-size: 16pt;
        color: var(--main-color);
        background-color: #fff;
    }
.active a, .active li {
    text-decoration: none;
    color: #fff;
    /*background-color: var(--main-color);*/
    font-weight: bold;
}
strong>i {
    color: var(--main-color);   
    font-size: 1.2em;
    margin-top: 2px;
    /*flex-shrink: 0;*/   
}

.glass-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    margin:10px auto;
}

.glass-modal .modal-content {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    color: white;
}

.step-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.step-tab {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--main-color);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

    .step-tab.active {
        background: #e91e63;
        transform: scale(1.15);
        border-color: white;
        color:white;
    }

    .step-tab:hover:not(.active) {
        background: rgba(255, 255, 255, 0.35);
    }

.step-content {
    display: none;
}

    .step-content.active {
        display: block;
    }

.btn-prev, .btn-next, .btn-save {
    margin-top: 16px;
}

.forgotPass, .registerInfo {
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
    margin-top: 10px;
    display: inline-block;
}

@media (max-width: 768px) {
    .glass-card {
        padding: 16px;
    }
}
/************************************************LAYOUTPAGE- MASTER PAGE************************************************/
.main-header {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    height: 70px;
    position: fixed;
    z-index: 2;   
    width: 100%;
    margin: auto;
}
.containerLayout {
    position:relative;
    max-width:900px;
    margin:auto;
}
.LayoutRenderBody {
    /*position: absolute;*/
    position: fixed;
    top: 145px;
    width: 100vw;
    height: 100vh;
    min-height: calc(100vh - 140px); /* height:100vh --> min-height: calc */
    overflow-y: scroll;
}
    .logo > img{
        position:relative;
        height:60px;
        width:auto;
    }
.notification-wrapper {
    position: relative;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 6px 4px;
    transition: all 0.3s ease;
}

    .notification-wrapper:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.notification-icon {
    font-size: 36px;  
    color: var(--white-color);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: -4px;
    background: linear-gradient(135deg, #ff4757 0%, #ff4757 100%);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 50%;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.dropdown-menu {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0;
    overflow: hidden;
}
  
    .notification-dropdown {
        width: 320px;
    }

.notification-header {
    position:relative;
    z-index:10;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.1) 0%, rgba(196, 69, 105, 0.1) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    color: #333;
    font-size: 15px;  
}

.notification-item {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

    .notification-item:hover {
        background: rgba(255, 107, 157, 0.08);
        transform: translateX(4px);
    }

    .notification-item:last-child {
        border-bottom: none;
    }

    .notification-item > a > img {
        float: left;
        margin: 5px;
    }

    .notification-item > a {
        text-decoration: none;
        font-size: 12px;
        color: var(--main-color);
    }

    .notification-item .title {
        font-size: 14px;
        color: #333;
        margin-bottom: 4px;
        font-weight: 500;
    }

    .notification-item .time {
        font-size: 12px;
        color: #666;
        float: right;
        margin-right: 2px;
    }

.menu-dropdown {
    max-width: 220px;
}
.dropdown {
z-index:150;
}
/*.dropdown-menu.show {
    z-index:9999 !important;
    position:relative;
}
.row {
    overflow: visible !important;
}*/
.IsOnlineDrop {
    max-width: 70px;
    padding: 5px;
    text-decoration:none;
    color:var(--text-color);
    /*z-index:10;*/
}
.IsOnlineDrop > div > a{   
    text-decoration: none;
    color: var(--text-color);
}


.menu-item {
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #333;
    text-decoration: none;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

    .menu-item:last-child {
        border-bottom: none;
        color: var(--cancel-color);
    }
.notification-dropdown > a {
    text-decoration: none;
    color:var(--active-color);
    /*font-weight:bold;*/
}
.menu-item:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    transform: translateX(4px);
    /*transform: scale(1.1);*/
    text-decoration: none;
}

    .menu-item .material-symbols-outlined {
        font-size: 20px;
        transition: transform 0.2s ease;
    }

   
   
.menu-toggle {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 10px 12px;
    transition: all 0.3s ease;
}

    .menu-toggle > span {
        color: var(--white-color);
    }

    .menu-toggle:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.menu-icon {
    font-size: 20px;
    color: var(--white-color);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.user-info-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 6px 16px 6px 6px;
    transition: all 0.3s ease;
    z-index:5;
}

    .user-info-card:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(31, 38, 135, 0.2);
    }

.avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

    .avatar:hover {
        transform: scale(1.05);
        border-color: rgba(255, 255, 255, 0.6);
    }

.username {
    font-weight: 600;
    color: var(--white-color);
    font-size: 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.status-ico {
    cursor: pointer;
    font-size: 18px;
    position: relative;
    width:26px;
    height:26px;  
    align-items:center;
    text-align:center;
}
    .status-ico > a {
        text-decoration: none;
        margin: auto;
        border-radius: 13px 13px;
        border: solid, 5px, #fff;
    }
    .status-ico:hover {
        transform: scale(1.2);
    }

.active-color {
    color: var(--active-color);
}
.cancel-color {
    color: var(--cancel-color);
}
.online {
    color: var(--active-color);
    background: var(--online);
}
.offline {
    color: var(--cancel-color);
    background: var(--cancel-color);
} 

.selected {
    color: var(--selected-color);
}
.un-selected {
    color: var(--un-selected-color);
}

.wrpMainPrf {
    position:absolute;
    right:0px;
    padding:2px 0;
   align-items:center;
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 10px;    
}
.footerWrapper {
    /*position:fixed;
    bottom:0px;
    width:100%;
    height:70px;
    background-color:aqua;*/
}
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    /*padding: 12px 20px;*/
    display: flex;
    justify-content: center;
    gap: 20px;
    z-index: 100;
}

.footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--main-color);
    text-decoration: none;
    font-size: 20px;
    transition: all 0.3s;
    padding: 2px 22px;
}

    .footer-item span {
        font-size: 12px;
    }

    .footer-item:hover {
        transform: translateY(-3px);
        text-shadow: 0 0 10px rgba(255,255,255,0.5);
        color: var(--white-color);
        text-decoration: none;
    }
.footer-item-wrapper {
    position: relative;
    cursor: pointer;
    margin: 5px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    padding: 4px 2px;
    transition: all 0.3s ease;
    flex-shrink: 1;
    min-width: 0;
}

    .footer-item-wrapper:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
/*********************************************HOME-HOME SAYFASI FAVORİ LİSTESİ*****************************************************/
.favoriListWrepper {
    background: rgba(255,255,255, 0.3);
    height: 70px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    position: fixed;
    top:70px;
    left:0;
    justify-content: center;
    z-index:1;
    /*text-align:center;*/
}
.HomeFavori {
    position:relative;       
    max-width:500px;  
   height:auto;
   margin:auto;
}
.HomeFavoriItem{
    position:relative;
    float:left;
    width:50px;
    height:50px;
    margin-left:5px;  
    top:4px; 
}
/*online ikonu*/
    .HomeFavoriItem > span {
        position: absolute;       
        background: #fff;
        border-radius:50%;
        top:0px;
        font-size:12px;
    }
.img-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    margin: 0px;
    /*box-shadow:0px 5px 5px grey;*/
}
.FavoriLnick {
    position:relative;
    bottom:10px;
    font-weight: 600;
    color: #333;
    font-size: 12px;
}
/* shareRouter ikonu*/
.HomeFavori > a {
    position: relative;
    float: left;
    width: 48px;
    height: 48px;
    font-size: 26px;
    padding-top: 7px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--textLight-color);
    top: 10px;
}

.emptyBottom{
    position:relative;
    height:70px;
    width:100%;
    bottom:0px;
}
.ShareObjectDetailsBannerEmpty {
    position:relative;
    width:100%;
    height:70px;
}
/********************HOME-HOME SAYFASI PAYLAŞIM ARACI VE PAYLAŞIM LİSTESİ**********************************/
.SSContainer {
    position: relative;
    padding: 0;
    max-width: 500px;
    margin: auto;
    height: auto;
}
/* Ana Container */
.containerShareR {
   
}
.shareStreemContent {
    /*width: var(--post-w);*/
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.card {
    overflow: visible !important;
}
.post-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: visible !important;
}
.card-body {
    overflow: visible !important;
    padding-bottom:2px;
}
.SharePostCardInside {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
}
.post-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.post-author {
    font-weight: 600;
    color: #333;
    font-size: 12px;   
}
.postInfo {
    font-weight: 600;
    color: #333;
    font-size: 12px;
    margin:5px;
    float:left;
}
.post-time {
    position:relative;
    font-size: 12px;
    color: rgba(107, 114, 128, 0.8);
    float:right;
}

.post-img {
    border-radius: 12px;
    width: 100%;
    height: auto;
}

.post-text {
    color: #112233;
    font-size: 14px;
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.18);
    /*border: dashed 1px rgba(255, 255, 255, 0.3);*/
    border-radius: 5px 5px;
    padding: 5px 15px;
    text-transform:lowercase;
}
/* Action Buttons */
.action-btn {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(107, 114, 128, 0.8);
    font-weight: 600;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    vertical-align: middle;
    margin-right: 4px;
}

    .action-btn:hover {
        background: rgba(255, 255, 255, 0.5);
    }

    .action-btn.active {
        color: var(--accent);
        border-color: rgba(233, 63, 105, 0.3);
        background: rgba(233, 63, 105, 0.1);
    }

 
.actionW >span {
    position:relative;
    font-size:25px;

}
.actionWr {
    width:100%;
    height: 45px;
    position: relative;
    /*background-color: coral;*/
    display: flex;
    /*padding-left: 55px;*/
}
.glyphicon-outlined {
    font-size: 22px;
    vertical-align: middle;
    margin: 10px;
    text-decoration: none;
}
    .glyphicon-outlined :hover {
        text-decoration: none;
        color: var(--passive-color);
        cursor:pointer;
    }
.glyphicon-outlined >i {
    font-size: 14px;
   color:var(--text-color);
    text-decoration: none;
}
.tdnone {
    text-decoration: none;
} 
.like {
    color: var(--active-color);
    cursor:pointer;
}
.dislike {
    color: var(--passive-color);
    cursor: pointer;
}
/* Comments */
.comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.comment-body {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 8px;
    backdrop-filter: blur(5px);
    flex: 1;
}
    .comment-body > div {
        font-size: 12px;
    }
.comment-author {
    font-weight: 700;
    font-size: 13px;
    color: #112233;
}

.comment-time {
    font-size: 11px;
    color: rgba(107, 114, 128, 0.8);
    margin-top: 4px;
}
.ShareCommentIco {
    position: relative;
    width:50px;   
    border: 1px blue solid;
}
.ShareCommentIco > span {
    position: relative;
    /*top:-70px;*/
    /*float:right;*/
    border: 1px red solid;
}
.btn-send {
    background: var(--accent);
    border: none;
    border-radius:25px 25px;
    color: white;
    font-weight: 700;   
    flex-shrink: 0; /* Butonun daralmasını engeller */
    white-space: nowrap; /* Metin uzunsa butonun şeklinin bozulmasını önler */
    padding: 8px 10px;

}
.commentList {
 
    padding: 0px;
    margin: 5px 0px;
}
.commentList > form {
    padding: 0px;
    margin: 0px;
    width: 100%;
}

.input-group {
    display: flex; /* Yan yana dizilimi sağlar */
    /*gap: 10px;*/ /* Aralarındaki boşluk (isteğe bağlı) */
    width: 100%; /* Div'in genişliği (test için %100) */
    box-sizing: border-box;
} 
.btn-send:hover {
    background: #d42a5a;
}
.comment-input {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(7px);
    border-radius: 25px;
    flex-grow: 1; /* Kalan tüm boşluğu bu eleman doldurur */
    padding: 8px;
}

    .comment-input:focus {
        border-color: rgba(233, 63, 105, 0.5);
        box-shadow: none;
        flex-grow:1;
    }

.deleteCommenthide {
    display: none;
}
.commentDeleteClose > a{
    text-decoration:none;
    color:red;
}
.commentDelete > a {
    text-decoration: none;
    color: red;
}
    .ComplaintDelete {
    color: red;
    }
li > a{
    text-decoration:none;
    /*margin:5px, 5px;*/
    margin-left:10px;
    color:var(--text-color);
}

/* ── shareStreemSurveyIcon ── */
.shareStreemSurveyIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 28px 0 20px;
    background: linear-gradient(160deg, rgba(233,63,105,0.10) 0%, rgba(255,255,255,0.04) 100%);
    border-bottom: 0.5px solid rgba(233,63,105,0.18);
}
.Surveycard {
    width: 100%;
    background: rgba(255,255,255,0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(233,63,105,0.10);
    overflow: hidden;
}
.survey-icon-circle {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    border: 1.5px solid var(--rose-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(233,63,105,0.18);
}

    .survey-icon-circle a {
        font-size: 36px;
        color: var(--rose);
    }

/* ── shareStreemSurveyFooter ── */
.shareStreemSurveyFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    /*background: rgba(255,255,255,0.18);*/
    border-top: 0.5px solid rgba(255,255,255,0.45);
}

    .shareStreemSurveyFooter i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: rgba(255,255,255,0.35);
        border: 0.5px solid rgba(255,255,255,0.5);
        text-decoration: none;
        transition: all 0.18s;
    }

        .shareStreemSurveyFooter a i {
            font-size: 15px;
            color: #bbb;
            transition: color 0.18s;
        }

        .shareStreemSurveyFooter a:hover {
            background: var(--rose-light);
            border-color: var(--rose-mid);
        }

            .shareStreemSurveyFooter a:hover i {
                color: var(--rose);
            }

/* ── post-text ── */
.shareStreemSurvey-post-text {
    color: #112233;
    font-size: 14px;
    line-height: 1.45;
    padding: 12px 16px 16px;
    font-weight: 600;
}

/***************************************SHARE ROUTER PAYLAŞIM ARACI**************************************************/
/*******************************************************************************************************************/
/* Glassmorphism Base */

/* Başlık */
.page-title {
    text-align: center;
    margin-bottom: 32px;
}

    .page-title h1 {
        font-size: 28px;
        font-weight: 700;
        background: linear-gradient(135deg, #fff, #f0f0f0);
        -webkit-background-clip: text;
        background-clip: text;
        /*color: transparent;*/
        color:var(--main-color);
        letter-spacing: -0.5px;
    }

    .page-title p {
        /*color: rgba(255, 255, 255, 0.8);*/
        color: var(--main-color);
        font-size: 14px;
        margin-top: 8px;
    }
/* Tab Menüsü */
.tabs-container {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border-radius: 60px;
    padding: 6px;
    margin-bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.tab-btn {
    flex: 1;
    min-width: 100px;
    padding: 14px 18px;
    border: none;
    background: transparent;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    /*color: rgba(255, 255, 255, 0.8);*/
    color: var(--main-color);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration:none;
}

    .tab-btn i {
        font-size: 16px;
    }
    .tab-btn > a {
        font-size: 26px;
        text-decoration: none;
        color: var(--main-color);       
    }

    .tab-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        /*color: white;*/
        color: var(--main-color);
    }

    .tab-btn.active {
        background: rgba(255, 255, 255, 0.35);
        /*color: white;*/
        color: var(--main-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.4);
    }

.tab-content{
    position:relative;
    width:100%;
    display:none;
}
.tab-content.visible {
   display:block;
}
    .tab-content.active {
        display: block;
    }
/* Paylaşım Kartı */
.share-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    overflow: hidden;
    transition: all 0.3s;
    animation: fadeInUp 0.4s ease;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Upload Alanı */
.upload-section {
    padding: 40px 30px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.upload-area {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.upload-icon {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    /*color: white;*/
    color:var(--main-color);
    transition: all 0.3s;
    /*border: 2px dashed rgba(255, 255, 255, 0.5);*/
    border: 2px dashed var(--main-color);
}

.upload-area:hover .upload-icon {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.8);
}

.upload-text {
    /*color: white;*/
    color:var(--main-color);
    font-weight: 600;
    font-size: 18px;
}

.upload-hint {
    font-size: 12px;
    /*color: rgba(255, 255, 255, 0.7);*/
    color: var(--main-color);
}

/* Önizleme Alanı */
.preview-section {
    padding: 30px;
    display: none;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.preview-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 24px;
    padding: 2px;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .preview-container img {
        max-width: 100%;
        border-radius: 16px;
        /*max-height: 320px;*/
        object-fit: contain;
    }

    .preview-container video {
        max-width: 100%;
        border-radius: 16px;
        max-height: 320px;
    }

    .preview-container audio {
        width: 100%;
        max-width: 400px;
    }

/* Konum Önizleme */
.location-preview {
    text-align: center;
    width: 100%;
}

    .location-preview i {
        font-size: 56px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 16px;
    }

.location-coords {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 20px;
    border-radius: 40px;
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    color: white;
}

.map-button {
    background: rgba(255, 255, 255, 0.25);
    border: none;
    padding: 10px 24px;
    border-radius: 40px;
    color: white;
    margin-top: 16px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s;
}

    .map-button:hover {
        background: rgba(255, 255, 255, 0.4);
    }

/* Metin Alanı */
.text-section {
    padding: 24px 28px;

}

.share-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 16px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    /*color: white;*/
    color: var(--main-color);
    resize: vertical;
    transition: all 0.3s;
}

    .share-textarea:focus {
        outline: none;
        background: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .share-textarea::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

/* Karakter Sayacı */
.char-counter {
    text-align: right;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
}

/* Gönder Butonu */
.send-section {
    padding: 0 28px 28px 28px;
    display: flex;
    justify-content: flex-end;
}

.send-btn {
    /*background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.2));*/
    background-color:var(--main-color);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 14px 36px;
    border-radius: 50px;
    color: white;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
}

    .send-btn:hover {
        background: rgba(255, 255, 255, 0.4);
        color:var(--main-color);
        transform: scale(1.02);
        gap: 16px;
    }

/* Alt Bilgi */
.info-note {
    text-align: center;
    margin-top: 24px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}
/********************************************PROFİL SAYFASI*********************************************************/

.topMargin{
    position:relative;
    height:75px;
    width:100%;
}
.profile-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;   
}

.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
}

.profile-image-wrapper {
    position: relative;
    margin-bottom: 4px;
}
.profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.3s;
}

    .profile-image:hover {
        transform: scale(1.05);
    }

.profile-settings {
    position: absolute;
    top: 0;
    right: 5px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

    .profile-settings:hover {
        background: rgba(255, 255, 255, 1);
        /*transform: rotate(90deg);*/
    }

.profile-info {
    width: 100%;
}

.profile-name {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}
.profile-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 4px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    flex-wrap: wrap;
}
   
    
    .stat-item {
        display: flex;
        width:30px;
        height:50px;        
        flex-direction: column;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        transition: transform 0.2s;
    }
    .stat-item:hover {
        transform: translateY(-2px);
        text-decoration:none;
    }

.stat-icon {   
    font-size: 20px;
    text-decoration:none;
}

.stat-value {
    font-size: 10px;
    font-weight: 400;
    color: #333;
}

.stat-label {
    font-size: 12px;
    color: #666;
    text-decoration:none;
}
/* Profile Description */
.profile-description {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);    
}
    .profile-description > span {
        position: absolute;
        width:100%;
        height:50px;
        top:10px;
        text-align:center;
        font-weight: 600;
        font-size: 22px;
    }.description-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        color: #333;
        font-weight: 600;
        font-size: 16px;
    }

.description-text {
    color:var(--text-color);
    line-height: 1.6;
    font-size: 10pt;
    text-transform:lowercase;
}
.quote-section {
    margin-top: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    border-left: 4px solid #e93f69;
    font-style: italic;
    font-size: 10pt;
    color: var(--text-color);
    text-transform: lowercase;
}
.enterDate{
    position:relative;
    width:100%;
    height:20px;
    font-size:12px;
    text-align:right;
    color:var(--active-color);
    margin:5px;
    font-weight:bold;
}
/*****profil share*****/
.ProfilShareCaption{
    color:var(--text-color);
    font-size:12px;
}
/************************** Album Section **********************************/
.album-section {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #333;
    font-weight: 700;
    font-size: 18px;
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.album-item {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);      
}

    .album-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }
    .album-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.album-add {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #e93f69;
    background: rgba(255, 255, 255, 0.4);
}
    .album-add > a {
        position: relative;
        width: 48px;
        height: 48px;
        color: var(--main-color);
    }
.albinsertmodal{
    width:100%;
    max-width:600px;
}
/********************CHANGE PASSWORD*****************************/
.Pcard {
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* ── CARD HEADER ── */
.Pcard-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.Pcard-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #e93f69, #f07090);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 6px 16px rgba(233,63,105,0.35);
    flex-shrink: 0;
}

.Pcard-title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

.Pcard-subtitle {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}

/* ── DIVIDER ── */
.Pdivider {
    height: 1px;
    background: rgba(255,255,255,0.4);
    margin-bottom: 24px;
}

/* ── FORM ── */
.Pform-group {
    margin-bottom: 18px;
}

.Pform-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.Pinput-wrap {
    position: relative;
}

    .Pinput-wrap .Pinput-icon {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: #aaa;
        font-size: 15px;
        pointer-events: none;
        transition: color 0.2s;
    }

    .Pinput-wrap input {
        width: 100%;
        padding: 12px 42px 12px 38px;
        border-radius: 12px;
        border: 1.5px solid rgba(255,255,255,0.5);
        background: rgba(255,255,255,0.55);
        font-size: 14px;
        color: #222;
        outline: none;
        transition: all 0.25s;
        font-family: inherit;
    }

        .Pinput-wrap input::placeholder {
            color: #bbb;
        }

        .Pinput-wrap input:focus {
            border-color: rgba(233,63,105,0.55);
            background: rgba(255,255,255,0.8);
            box-shadow: 0 0 0 3px rgba(233,63,105,0.1);
        }

            .Pinput-wrap input:focus + .Pinput-icon,
            .Pinput-wrap:focus-within .Pinput-icon {
                color: #e93f69;
            }

.Ptoggle-pass {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #aaa;
    font-size: 14px;
    transition: color 0.2s;
}

    .Ptoggle-pass:hover {
        color: #e93f69;
    }

/* strength bar */

/* match hint */
.Pmatch-hint {
    font-size: 12px;
    margin-top: 6px;
    font-weight: 600;
    /*display: none;*/
}

    .Pmatch-hint.visible {
        display: block;
    }

    .Pmatch-hint.ok {
        color: #00c853;
    }

    .Pmatch-hint.err {
        color: #f44336;
    }

/* ── REQUIREMENTS ── */

/* ── SUBMIT ── */
.Pbtn-submit {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #e93f69, #d63460);
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(233,63,105,0.35);
    font-family: inherit;
}

    .Pbtn-submit:hover:not(:disabled) {
        background: linear-gradient(135deg, #d63460, #c02855);
        transform: translateY(-1px);
        box-shadow: 0 8px 22px rgba(233,63,105,0.45);
    }

    .Pbtn-submit:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
.modal-close{ text-decoration:none;}
.dropdown-item >a{
    text-decoration:none;
    color: var(--text-color);
}
/*********************************PROFİL FOTO CROP*******************************************************/
/* Container */
.Cr-container {
    max-width: 450px;
    margin: 0 auto;
    padding: 0 20px;
}
/* Crop Card */

.Cr-crop-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.Cr-upload-section {
    text-align: center;
    margin-bottom: 24px;
}

.Cr-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    background: rgba(233, 63, 105, 0.9);
    color: white;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(233, 63, 105, 0.3);
}

    .Cr-upload-button:hover {
        background: rgba(233, 63, 105, 1);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(233, 63, 105, 0.4);
    }

    .Cr-upload-button i {
        font-size: 20px;
    }

#fileInput {
    display: none;
}

/* Crop Area */
.Cr-crop-area {
    width: 100%;
    max-height: 400px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.3);
    margin-bottom: 20px;
    display: none;
}

    .Cr-crop-area.Cr-active {
        display: block;
    }

#cropImage {
    max-width: 100%;
    display: block;
}

/* Preview Section */
.Cr-preview-section {
    display: none;
    margin-bottom: 20px;
}

    .Cr-preview-section.Cr-active {
        display: block;
    }

.Cr-preview-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    text-align: center;
}

.Cr-preview-image-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

#previewImage {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    object-fit: cover;
}

/* Action Buttons */
.Cr-action-buttons {
    display: none;
    gap: 12px;
    justify-content: center;
}

    .Cr-action-buttons.Cr-active {
        display: flex;
    }

.Cr-action-btn {
    flex: 1;
    padding: 14px 24px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.Cr-btn-save {
    background: rgba(0, 200, 83, 0.9);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3);
}

    .Cr-btn-save:hover {
        background: rgba(0, 200, 83, 1);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 200, 83, 0.4);
    }

.Cr-btn-cancel {
    background: rgba(255, 255, 255, 0.5);
    color: #666;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    .Cr-btn-cancel:hover {
        background: rgba(255, 255, 255, 0.7);
        transform: translateY(-2px);
    }

/* Instructions */
.Cr-instructions {
    background: rgba(255, 255, 255, 0.3);
    padding: 16px;
    border-radius: 12px;
    margin-top: 20px;
    display: none;
}

    .Cr-instructions.Cr-active {
        display: block;
    }

    .Cr-instructions h3 {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .Cr-instructions ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .Cr-instructions li {
        font-size: 13px;
        color: #555;
        padding: 4px 0;
        padding-left: 20px;
        position: relative;
    }

        .Cr-instructions li:before {
            content: "•";
            position: absolute;
            left: 8px;
            color: #e93f69;
        }

/* Success Message */
.Cr-success-message {
    background: rgba(0, 200, 83, 0.1);
    border: 1px solid rgba(0, 200, 83, 0.3);
    color: #00a854;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    display: none;
    margin-top: 16px;
}

    .Cr-success-message.Cr-active {
        display: block;
    }

    .Cr-success-message i {
        margin-right: 8px;
    }

@media (max-width: 480px) {
    .Cr-container {
        max-width: 100%;
        padding: 0 15px;
    }

    .Cr-crop-card {
        padding: 20px;
    }

    .Cr-action-buttons {
        flex-direction: column;
    }

    .Cr-action-btn {
        width: 100%;
    }
}
/*********************************PAYLAŞIMIMIN DETAYI ETİKETLEME VE BEĞENEN LİSTESİNİ GÖRME PAYLAŞIMI SİLME***********************************************/
.PDglass {
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.PDpost-text {
    color: #444;
    font-size: 14px;
    line-height: 1.65;
    padding: 12px 14px;
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
    border-left: 3px solid #e93f69;
    margin-bottom: 14px;
}

    .PDpost-text i {
        color: #e93f69;
        font-size: 12px;
    }
/* ══════════════════════════════
       LIKES PANEL
    ══════════════════════════════ */
.panel {
    margin-bottom: 16px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    border-radius: 16px;
    transition: background .2s;
}

    .panel-header:hover {
        /*background: rgba(255,255,255,0.32);*/
    }

.panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

    .panel-title i {
        color: #e93f69;
    }

.panel-badge {
    background: linear-gradient(135deg,#e93f69,#f07090);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.panel-chevron {
    color: #999;
    font-size: 13px;
    transition: transform .3s;
}

    .panel-chevron.open {
        transform: rotate(180deg);
    }

.panel-body {
    padding: 0 16px 16px;
    display: none;
}

    .panel-body.open {
        display: block;
    }

/* likes grid */
.likes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

.like-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    transition: transform .2s;
}

    .like-item:hover {
        transform: translateY(-2px);
    }

.like-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    object-fit: cover;
}

.like-nick {
    font-size: 11px;
    /*font-weight: 600;*/
    color: #333;
}

.like-age {
    font-size: 10px;
    color: #888;
}

/* ══════════════════════════════
       TAG PANEL
    ══════════════════════════════ */
.tag-columns {
    display: flex;
    gap: 12px;
    padding-top: 4px;
}

/* favorites column */
.tag-fav-col {
    flex: 1;
}

.tag-col-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    /*text-transform: uppercase;*/
    letter-spacing: .5px;
    margin-bottom: 10px;
}

    .tag-col-title i {
        color: #e93f69;
    }

.fav-member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: rgba(255,255,255,0.3);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all .2s;
    position: relative;
    margin-bottom: 8px;
}

    .fav-member-card:hover {
        background: rgba(255,255,255,0.5);
        transform: translateY(-1px);
    }

    .fav-member-card .fav-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,0.6);
        box-shadow: 0 3px 10px rgba(0,0,0,0.12);
        object-fit: cover;
    }

.fav-nick {
    font-size: 12px;
    font-weight: 700;
    color: #333;
}

.fav-age {
    font-size: 11px;
    color: #888;
}

.fav-tag-btn {
    width: 100%;
    padding: 7px;
    border-radius: 8px;
    border: none;
    background-color:var(--active-color);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 3px 10px rgba(233,63,105,0.3);
    text-align:center;
    text-decoration:none;
}

    .fav-tag-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(233,63,105,0.4);
    }

    .fav-tag-btn.tagged {
        background: linear-gradient(135deg,#1d9e75,#0f6e56);
        box-shadow: 0 3px 10px rgba(29,158,117,0.3);
    }

/* tagged column */
.tag-list-col {
    flex: 1;
}

.tag-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
    color: #aaa;
    font-size: 13px;
    gap: 8px;
}

    .tag-list-empty i {
        font-size: 24px;
        color: rgba(233,63,105,0.3);
    }

.tagged-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.4);
    margin-bottom: 8px;
    position: relative;
}

    .tagged-item img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1.5px solid rgba(255,255,255,0.5);
        object-fit: cover;
    }

.tagged-nick {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    flex: 1;
}

.untag-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--cancel-color);
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    padding: 0; /* 🔥 önemli */
    line-height: 1;
}

    .untag-btn:hover {
        background: rgba(244,67,54,0.25);
    }
    .untag-btn > a {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        color:#fff;
        text-decoration:none;
    }
.commentCaption {
    margin: 0px;
    padding: 0px;
    display: block;
    /*border-top: 1px solid rgba(255,255,255,0.35);*/
}.commentMember {
     position:relative;
     width:100%;
     height:80px;
    background: rgba(255,255,255,0.3);
    border: 1.5px solid rgba(255,255,255,0.5);
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    border-radius: 25px;
    padding: 10px;
    margin: 16px 0px;
   
}
.PdSlider {
    position: absolute;
    display:none;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 80px;
    color: var(--text-color);
    text-align:center;
    align-items:center;
    padding: 5px 0px;
    margin:0px;
    border-radius: 20px;
    z-index: 1;
    background: rgba(255,255,255,0.9);
    border: 1.5px solid rgba(255,255,255,0.5);
}
.PdSlider > div > a {
   text-decoration:none;
    color: var(--cancel-color);
   
}
.TrashRight {
    position: relative;
    float: right;
    width: 30px;
    height: 30px;
    font-size: 14px;
    background-color: var(--main-color);
    color: #fff;
    margin: 0px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;   
    text-decoration: none;
}
.IdentityPhoto {
    position: relative;
    float: left;
    margin-right:10px;
}
.Identity{ 
    position:relative;
    font-size:9pt;
    float:left;
}
.IdentityNick{
    font-weight:bold;
}
figure{
    margin:0 0 0.5rem;
}
.comment-time {
    position: relative;
    float: right;
    top: 3px;
    right: 3px;
    font-size: 7pt !important;
}
.PdDeleteicon {
    position: absolute;
    z-index: 1;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--main-color);
    float: left;
    top:0px;
    margin: 15px 10px;
    font-size: 22px;
    color: #fff;
    align-items: center;
    text-align: center;
}
.MsdDelete {
    position: absolute;
    width: 100%;
    height: 100%;
    color: var(--text-color);
    padding:20px 0;
    margin: 0px;
    border-radius: 20px;
    z-index: 1;
    background: rgba(255,255,255,0.9);   
    left: 0px;
    top: 0px;
    display: none;
    flex-direction: column;
    text-align: center;
    align-items: center;
}
.PdDeleteCenter{
    width:100%;
    margin:50% 0px;
    text-align:center;
    align-items:center;
    color:var(--text-color);
    font-size:12pt;
    left:0px;
}
.PdDeleteAction {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 30px;
}
.MsdDelete > div > a {
    color: var(--cancel-color);
    text-decoration: none;
}
/******************************MESSAGE***********************************/
.SliderM {
    display: none;
}
.message-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /*max-height: 600px;*/
    /*overflow-y: auto;*/
    padding-right: 8px;
}

    .message-list::-webkit-scrollbar {
        width: 8px;
    }

    .message-list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
    }

    .message-list::-webkit-scrollbar-thumb {
        background: rgba(233, 63, 105, 0.6);
        border-radius: 10px;
    }

        .message-list::-webkit-scrollbar-thumb:hover {
            background: rgba(233, 63, 105, 0.8);
        }

.message-item {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    position: relative;
    display:block;
}

    .message-item:hover {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        background: rgba(255, 255, 255, 0.35);
    }

    .message-item.unread {
        border-left: 4px solid #e93f69;
        margin-bottom:16px;
    }

.message-header-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.message-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.message-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    object-fit: cover;
}

.online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #00c853;
    border-radius: 50%;
    border: 2px solid white;
}

.offline-indicator {
    background: #b0bec5;
}

.message-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.message-name {
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

.message-time {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

.message-item.unread {
    font-weight: 600;
    color: #333;
}

.message-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    /*align-items: center;*/
}

.message-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #999;
}

    .message-meta-item i {
        font-size: 10px;
    }

.unread-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background:var(--main-color);
    color: white;
    font-size: 14px;
    /*font-weight: 700;*/
    width:30px;
    height:30px;
    padding: 7px 7px;
    border-radius: 50%;
    /*min-width: 30px;*/
    text-align: center;
    align-items:center;
}

/* Conversation Area */
.conversation-area {
    /*display: none;*/
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

    .conversation-area.active {
        display: block;
    }

.conversation-messages {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 12px;
    padding-right: 8px;
}

    .conversation-messages::-webkit-scrollbar {
        width: 6px;
    }

    .conversation-messages::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }

    .conversation-messages::-webkit-scrollbar-thumb {
        background: rgba(233, 63, 105, 0.5);
        border-radius: 10px;
    }
.Chat-wrapper {
position:fixed;
top:80px;
width:auto;
max-width:650px;
height:auto;
z-index:3;
display:block;
}
.chat-message {
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
    position: relative;
}

    .chat-message.sent {
        flex-direction: row-reverse;
    }

.chat-message-content {
    max-width: 75%;
    position: relative;
}

.chat-bubble {
    background: rgba(255, 255, 255, 0.5);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    word-wrap: break-word;
    position: relative;
}

.chat-message.sent .chat-bubble {
    background: rgba(233, 63, 105, 0.15);
    border: 1px solid rgba(233, 63, 105, 0.2);
}

.chat-time {
    font-size: 10px;
    color: #999;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-message.sent .chat-time {
    justify-content: flex-end;
}

.delete-message-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(244, 67, 54, 0.9);
    border: none;
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}

.chat-message:hover .delete-message-btn {
    display: flex;
}

.chat-message.sent .delete-message-btn {
    left: -30px;
}

.chat-message.received .delete-message-btn {
    right: -30px;
}

.delete-message-btn:hover {
    background: rgba(244, 67, 54, 1);
    transform: translateY(-50%) scale(1.1);
}
.delete-message-btn > a{
    color:#fff;
    text-decoration:none;
}

.MSlider {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 100%;
    height:140px;
    color: #fff;
    padding: 10px 20px;
    margin: 0px;
    border-radius: 20px;
    z-index: 1;
    background: rgba(0,0,0,0.7);
    border: 1.5px solid rgba(0,0,0,0.5);
}

    .MSlider > div > a {
        text-decoration: none;
        color: var(--cancel-color);
        background-color:transparent;
    }
    /************************FAVORİ - PROFİL İNCELEME - GÜLÜMSEME İÇİN *****************************/
/* Zaman Tüneli Orta Çizgi */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-50%);
    z-index: 1;
}

/* Başlıklar */
.timeline-headers {
    position: fixed;
    top: 75px;
    width: 100%;
    max-width: 480px;
    /*left:50%;*/
    /*transform:translateX(50%);*/
    display: flex;
    justify-content: space-between;
    /*margin-bottom: 30px;*/
    /*position: relative;*/
    z-index: 1;
}

.header-tag {
    background: rgba(233, 63, 105, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(233, 63, 105, 0.3);
    width: 40%;
    text-align: center;
   
}

/* Kişi Kartları */
.timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 25px;
    position: relative;    
}

.Tcard-wrapper {
    width: 44%; /* Mobil uyum için daraltıldı */
}

/* Zaman Noktası */
.timeline-dot {
    width: auto;
    height: 22px;
    border-radius: 12px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 8pt;
    align-content: center;
    align-items: center;
}

    .timeline-dot > i {
        font-size: 16pt;
        color: #e93f69;
    }

    .timeline-dot > div {
        font-size: 8pt;
        color: #333;
        position: absolute;       
    }

.RightT {
    right: 100%;
}

.LeftT {
    left: 100%;
}

.Tprofile-item {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    text-align: center;
}

    .Tprofile-item:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.02);
    }

.Tprofile-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid white;
    margin-bottom: 5px;
    object-fit: cover;
}

.Tprofile-name {
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tarih ve Saat Vurgusu */
.time-stamp {
    font-size: 10px;
    color: #333;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.5);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 4px;
}

    .time-stamp i {
        color: #e93f69;
        margin-right: 3px;
    }

.empty-side {
    width: 44%;
}

/* Sağ taraf (Beni favori yapanlar) için özel stil gerekirse */
.right-card .Tprofile-item {
    border-left: 3px solid #e93f69;
}

.left-card .Tprofile-item {
    border-right: 3px solid #e93f69;
}

@media (max-width: 480px) {
    .header-tag {
        font-size: 9px;
    }

    .Tprofile-name {
        font-size: 11px;
    }

    .time-stamp {
        font-size: 9px;
    }
}
.siteNot {
    /*background: rgba(255, 255, 255, 0.15);*/
    backdrop-filter: blur(12px);
    border-radius: 60px;
    padding: 6px;
    margin-bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
/**************************************CHAT SAYFASI**********************************************/
.chat-container {
    width: 600px;
    max-width: 100%;
    height: 700px;
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}

/* ── Contacts strip ── */
.contacts-strip {
    display: flex;
    gap: 0;
    padding: 12px 16px;
    overflow-x: auto;
    flex-shrink: 0;
    border-bottom: 1px solid var(--glass-border);
    scrollbar-width: none;
}

    .contacts-strip::-webkit-scrollbar {
        display: none;
    }

.contact-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    position: relative;
    margin:1px;
}
.contact-chip:hover {
        background: rgba(255,255,255,0.28);
    }

    .contact-chip.Cactive {
        background: var(--rose-light);
    }

.chip-avatar-wrap {
    position: relative;
}

.chip-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid rgba(255,255,255,0.55);
    transition: all 0.3s;
    display: block;
}

.contact-chip.Cactive .chip-avatar {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px var(--rose-light);
}

.contact-chip.has-new .chip-avatar {
    border-color: var(--online);
    animation: chipPulse 2s infinite;
}

@keyframes chipPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(0,200,83,0.25);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(0,200,83,0.45);
    }
}

.status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
}

    .status-dot.Conline {
        background: var(--active-color);
    }

    .status-dot.Coffline {
        background: var(--cancel-color);
    }

.chip-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.2px;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.Cunread-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    background: var(--rose);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    min-width: 17px;
    text-align: center;
    line-height: 1.4;
}

/* ── Chat header (active contact) ── */
.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.10);
    flex-shrink: 0;
    min-height:75px;
}

.chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.5);
}

.chat-header-info {
    flex: 1;
}

.chat-header-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1px;
    letter-spacing: -0.2px;
}

.chat-header-status {
    font-size: 11px;
    color: var(--online);
    display: flex;
    align-items: center;
    gap: 4px;
}

    .chat-header-status i {
        font-size: 7px;
    }

.chat-header-actions {
    display: flex;
    gap: 6px;
}
/* ── Messages ── */
.messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width:100%;
}

    .messages-area::-webkit-scrollbar {
        width: 5px;
    }

    .messages-area::-webkit-scrollbar-track {
        background: transparent;
    }

    .messages-area::-webkit-scrollbar-thumb {
        background: var(--rose-mid);
        border-radius: 8px;
    }

.message {
    display: flex;
    gap: 8px;
    max-width: 100%;
    animation: msgIn 0.28s ease-out;
}

@keyframes msgIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.sent {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message.received {
    align-self: flex-start;
}

.Cmessage-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255,255,255,0.6);
    flex-shrink: 0;
    align-self: flex-end;
}

.message-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.message-sender {
    font-size: 10px;
    font-weight: 700;
    color: var(--rose);
    padding: 0 4px;
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.3px;
}

.message-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.45;
    word-wrap: break-word;
}

.message.received .message-bubble {
    background: var(--glass-strong);
    color: var(--text-dark);
    border-top-left-radius: 4px;
    border: 1px solid var(--glass-border);
}

.message.sent .message-bubble {
    background: var(--rose-light);
    border: 1px solid var(--rose-mid);
    color: var(--text-dark);
    border-top-right-radius: 4px;
}

.Cmessage-time {
    font-size: 9.5px;
    color: var(--text-light);
    padding: 0 4px;
    font-family: 'DM Mono', monospace;
}

.message.sent .Cmessage-time {
    text-align: right;
}
/* ── Input area ── */
.message-input-area {
    padding: 14px 18px;
    border-top: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.18);
    flex-shrink: 0;
}

.message-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-end;    
}
.message-input-wrapper > div > input ,button{
   height:40px;
}
.chatIcon {
 background-color:var(--active-color);
 width:46px;
 height:46px;
 border-radius:50%;
 color:#fff;
}
/* ── Empty state ── */
.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 40px;
}

.empty-icon {
    font-size: 52px;
    color: var(--rose);
    opacity: 0.45;
}

.empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
}

.empty-text {
    font-size: 13px;
    color: var(--text-mid);
}
.ChatSearchNickName {
    position: absolute;
    right: 5px;
    width:auto;    
    flex: 1;
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom:25px;
}    
    .ButtonHiden {
        display: none;
    }

.Get_nickName {
    border-radius: 19px 0px 0px 19px;
    width: 75px;
    height: 38px;
    border: 1px solid var(--glass-border);
    font-size:10pt;
}
.Get_NickNameBtn {
    font-size: 18px;
    padding:10px;
    color: #fff;
    background-color: var(--main-color);
    border-radius: 0px 19px 19px 0px;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    text-align: center;
    align-items: center;
}
/**************************************MYPROFIL SURVEY ********************************************************************/
/* ----- ana konteyner ----- */
.page-wrap {
    max-width: 700px;
    /*margin: 28px auto;*/
    margin:auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
/* ----- bölüm başlıkları ----- */
.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
}

.Ssection-title {
    font-size: 15px;
    font-weight: 700;
    color: #2a2a35;
    letter-spacing: -0.2px;
}

.section-badge {
    margin-left: auto;
    background: var(--rose-light);
    border: 1px solid var(--rose-mid);
    color: var(--rose);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 40px;
    font-family: 'DM Mono', monospace;
}
/********yeni anket yönlendirme butonu********/
.surveybtn {
    background: var(--main-color);
    color: white;
    border: none;
    padding: 10px;
    width:100%;
    text-decoration:none;
    border-radius: 24px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
}
    .surveybtn > a {
        color: white;
        text-decoration: none;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
    }
    .surveybtn > span {
        width: 16px;
        height: 16px;
        display: inline-block;   
        font-size: 16px; 
    }
    /* ----- anket listesi (sorduklarım / cevapladıklarım) ----- */
    .survey-item {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 16px 18px;
    margin:8px 12px;
    transition: all 0.2s;
    animation: fadeUp 0.3s ease-out both;
}

    .survey-item:last-child {
        margin-bottom: 0;
    }
    .survey-item.draft {
        background: var(--draft-bg);
        border: 1px dashed var(--draft-border);
        position: relative;
    }

        .survey-item.draft::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 20px;
            background: repeating-linear-gradient( -45deg, transparent, transparent 18px, rgba(160,160,185,0.06) 18px, rgba(160,160,185,0.06) 36px );
            pointer-events: none;
        }

        .survey-item.draft:hover {
            background: rgba(200,200,220,0.26);
        }
        /* draft anket başlık soluk */
        .survey-item.draft .survey-quote a {
            text-transform:capitalize !important;
            color: var(--draft-text);
        }

        .survey-item.draft .survey-quote i {
            color: var(--draft-text);
            opacity: .7;
        }
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.survey-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 10px;   
}

.survey-quote {
    font-size: 14px;
    font-weight: 600;
    color: #2c2c3a;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;   
}

    .survey-quote i {
        color: var(--rose);
        font-size: 14px;
    }

    .survey-quote > a {
        text-decoration: none;
        color: #1f1f2b;
        font-weight: 600;
        transition: color 0.2s;
        text-transform: uppercase;
        font-size: 9pt;
    }

        .survey-quote a:hover {
            color: var(--rose);
        }

.survey-date {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 10px;
    border-radius: 40px;
    color: var(--text-mid);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .survey-date i {
        font-size: 11px;
    }

.survey-stats {
    display: flex;
    gap: 16px;
    margin: 12px 0 10px 0;
    flex-wrap: wrap;
}
.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding: 4px 12px;
    color: #3c3c4a;
    font-weight: 500;
}

    .stat-badge i {
        font-size: 13px;
        color: var(--rose);
    }
.delete-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.delete-btn-pill {
    background: rgba(200, 60, 60, 0.15);
    border: 1px solid rgba(200, 70, 70, 0.3);
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    color: #c0392b;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .delete-btn-pill:hover {
        background: rgba(200, 60, 60, 0.35);
        transform: scale(1.02);
    }
    
.stat-row {
    display: flex;
    gap: 10px;
    margin: 12px 0 10px;
    flex-wrap: wrap;
}
.action-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #3c3c4a;
    /*background: rgba(255,255,255,0.30);*/
    border-radius: 30px;
    padding: 4px 12px;
    cursor: pointer;
    transition: .2s;
}

    .action-badge:hover {
        background: rgba(255,255,255,0.52);
    }
    /**************************************MYSURVEYDETAILS anket oluşturma sayfası**************************************************************/
/* ── Page wrap ── */
.sc-page {
    width: 600px;
    max-width: calc(100% - 32px);
    margin: 32px auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@keyframes sc-fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ══════════════════════════════════════
     KART  — a.css'deki .glass-card max-width:500px
     ve margin:auto tanımına sahip, bu sayfada
     daha esnek lazım → sc-card kullandık,
     .glass ile birlikte kullanılıyor
  ══════════════════════════════════════ */
.sc-card {
    border-radius: 20px;
    padding: 20px;
    margin-bottom:15px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    animation: sc-fadeUp 0.3s ease-out both;
}

/* ══════════════════════════════════════
     SECTION HEADER
  ══════════════════════════════════════ */
.sc-section-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.sc-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    text-transform: capitalize;
}

.sc-badge {
    margin-left: auto;
    background: var(--rose-light);
    border: 1px solid var(--rose-mid);
    color: var(--rose);
    font-size: 16px;
    /*font-weight: 700;*/
    padding: 3px 9px;
    border-radius: 20px;
    cursor:pointer;
   
}
.sc-badge > a {
    text-decoration:none;
    color:var(--main-color);
}
/* ══════════════════════════════════════
     ADIM GÖSTERGESİ
     a.css'de .step-tab ve .step-content var →
     biz sc-step-dot / sc-step-line kullandık
  ══════════════════════════════════════ */
.sc-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 18px;
}

.sc-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    font-family: 'DM Mono', monospace;
    border: 1.5px solid var(--glass-border);
    background: rgba(255,255,255,0.25);
    color: #888;
    transition: all 0.3s;
    flex-shrink: 0;
}

    .sc-step-dot.sc-active {
        background: var(--rose);
        border-color: var(--rose);
        color: #fff;
        box-shadow: 0 0 12px rgba(233,63,105,0.4);
    }

    .sc-step-dot.sc-done {
        background: rgba(233,63,105,0.18);
        border-color: var(--rose-mid);
        color: var(--rose);
    }

.sc-step-line {
    flex: 1;
    height: 2px;
    background: var(--glass-border);
    transition: background 0.3s;
}

    .sc-step-line.sc-done {
        background: var(--rose-mid);
    }

/* ══════════════════════════════════════
     INPUT  — a.css'de .form-control-text var →
     biz .sc-input kullandık
  ══════════════════════════════════════ */
.sc-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

    .sc-input-group:last-child {
        margin-bottom: 0;
    }

.sc-input-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--rose);
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sc-input {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255,255,255,0.35);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    color: #333;
    outline: none;
    transition: all 0.2s;
    resize: none;
}

    .sc-input::placeholder {
        color: #aaa;
    }

    .sc-input:focus {
        background: rgba(255,255,255,0.58);
        border-color: var(--rose-mid);
        box-shadow: 0 0 0 3px var(--rose-light);
    }

/* ══════════════════════════════════════
     ANKET ADI DISPLAY
  ══════════════════════════════════════ */
.sc-name-display {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--rose-light);
    border: 1px solid var(--rose-mid);
    border-radius: 14px;
    margin-top: 12px;
    animation: sc-fadeUp 0.25s ease-out;
}

    .sc-name-display.sc-visible {
        display: flex;
    }

    .sc-name-display > i {
        color: var(--rose);
        font-size: 18px;
        flex-shrink: 0;
    }

.sc-name-text {
    font-size: 15px;
    /*font-weight: 700;*/
    color: var(--text-color);
    flex: 1;
}

.sc-edit-btn {
    background: rgba(255,255,255,0.40);
    border: 1px solid var(--glass-border);
    color: var(--main-color);
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}
sc-edit-btn > a{
    text-decoration:none;
    color:var(--main-color);
}
.sc-edit-btn:hover {
    background: rgba(255,255,255,0.65);
}

/* ══════════════════════════════════════
     BUTONLAR
     a.css'de .login-btn var →
     sc-btn-primary / sc-btn-ghost / sc-btn-danger
  ══════════════════════════════════════ */
.sc-btn-primary {
    padding: 11px 20px;
    background: var(--main-color);
    border: none;
    color: #fff; 
    font-size: 13.5px;
    border-radius: 12px;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(233,63,105,0.3);
}
    .sc-btn-primary > a {
        text-decoration: none;
        color: #fff;
       font-size: 12px;
        cursor:pointer;
    }
.sc-btn-primary:hover {
        background: #d03560;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(233,63,105,0.4);
    }

    .sc-btn-primary:active {
        transform: translateY(0);
    }

.sc-btn-ghost {
    /*padding: 10px 18px;*/
    background: rgba(255,255,255,0.30);
    color: #555;    
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;    
    align-items: center;
    text-align:center;
    gap: 6px;
    /*transition: all 0.2s;*/
}

    .sc-btn-ghost:hover {
        background: rgba(255,255,255,0.55);
    }

.sc-btn-danger {
    padding: 6px 12px;
    background: rgba(255,255,255,0.35);
    color: #c0392b;
    border: 1px solid rgba(200,60,60,0.25);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    height:30px;
}

    .sc-btn-danger:hover {
        background: rgba(255,80,80,0.15);
    }

.sc-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════
     KİLİT / UNLOCK
  ══════════════════════════════════════ */
.sc-locked {
    opacity: 0.4;
    pointer-events: none;
    filter: blur(1px);
    transition: opacity 0.4s, filter 0.4s;
}

    .sc-locked.sc-unlocked {
        opacity: 1;
        pointer-events: all;
        filter: none;
    }

/* ══════════════════════════════════════
     SORU KARTI
  ══════════════════════════════════════ */
.sc-q-card {
    padding: 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.20);
    border: 1px solid var(--glass-border);
    margin-bottom: 12px;
    animation: sc-fadeUp 0.28s ease-out both;
    position: relative;
}

    .sc-q-card:last-child {
        margin-bottom: 0;
    }

.sc-q-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--rose);
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.sc-q-text {
    font-size: 14.5px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.4;
    text-transform:lowercase;
}

.sc-opts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-opt-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.30);
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    font-size: 13px;
    color: #444;
    text-transform: lowercase;
}

.sc-opt-letter {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--rose-light);
    border: 1px solid var(--rose-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--rose);
    font-family: 'DM Mono', monospace;
    flex-shrink: 0;
    text-transform:uppercase;
}

.sc-q-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
}

/* ── Yeni soru formu ── */
.sc-add-form {
    padding: 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.28);
    border: 1.5px dashed var(--rose-mid);
    margin-top: 12px;
}

.sc-opts-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.sc-opt-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-opt-badge {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--rose-light);
    border: 1px solid var(--rose-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--rose);
    font-family: 'DM Mono', monospace;
    flex-shrink: 0;
}

.sc-opt-row .sc-input {
    flex: 1;
    margin-bottom: 0;
}

.sc-remove-opt {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 16px;
    cursor: pointer;
    padding: 2px;
    transition: color 0.2s;
    flex-shrink: 0;
    display: block;
    align-items: center;
}

    .sc-remove-opt:hover {
        color:var(--cancel-color);
    }

.sc-add-opt-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rose);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-family: 'DM Sans', sans-serif;
    transition: opacity 0.2s;
}

    .sc-add-opt-btn:hover {
        opacity: 0.7;
    }

    .sc-add-opt-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

/* ── Empty state  (a.css'de .empty-icon, .empty-title, .empty-text var → sc-) ── */
.sc-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-mid);
    font-size: 13.5px;
}

    .sc-empty i {
        font-size: 34px;
        color: var(--rose);
        opacity: 0.4;
        display: block;
        margin-bottom: 8px;
    }

/* ── Uyarı bandı ── */
.sc-warning {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 15px;
    background: rgba(255,200,0,0.12);
    border: 1px solid rgba(200,150,0,0.3);
    border-radius: 12px;
    font-size: 12.5px;
    color: #7a6200;
    line-height: 1.5;
    margin-bottom: 16px;
}

    .sc-warning i {
        font-size: 16px;
        color: #c8a000;
        flex-shrink: 0;
        margin-top: 1px;
    }

/* ══════════════════════════════════════
     SİLME ONAY BANDI
  ══════════════════════════════════════ */
.sc-del-confirm {
    display: none;
    background: rgba(255,240,240,0.92);
    border: 1px solid rgba(200,60,60,0.3);
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 10px;
    font-size: 12.5px;
    color: #7a2020;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    backdrop-filter: blur(6px);
}

    .sc-del-confirm.sc-show {
        display: flex;
    }

.sc-del-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sc-confirm-yes {
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.2s;
    text-decoration:none;

}

    .sc-confirm-yes:hover {
        background: #a93226;
    }

.sc-confirm-no {
    background: rgba(255,255,255,0.5);
    border: 1px solid #ccc;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.2s;
    color: #555;
    height:30px;
}

    .sc-confirm-no:hover {
        background: rgba(255,255,255,0.85);
    }

/* ══════════════════════════════════════
     YAYINLA KARTI
  ══════════════════════════════════════ */
.sc-publish-card {
    border-radius: 20px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(233,63,105,0.15) 0%, rgba(255,255,255,0.20) 100%);
    border: 1px solid var(--rose-mid);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: 0 8px 32px rgba(233,63,105,0.12);
    text-align: center;
}

.sc-publish-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
}

.sc-publish-desc {
    font-size: 13px;
    color: var(--text-mid);
    margin-bottom: 20px;
    line-height: 1.5;
}

.sc-pub-summary {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.sc-pub-stat {
    background: rgba(255,255,255,0.30);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px 18px;
    min-width: 90px;
}

.sc-pub-num {
    font-family: 'DM Mono', monospace;
    font-size: 22px;
    font-weight: 500;
    color: var(--rose);
    margin-bottom: 2px;
}

.sc-pub-lbl {
    font-size: 11px;
    color: var(--text-mid);
    font-weight: 500;
}

.sc-btn-publish {
    padding: 14px 36px;
    background: var(--main-color);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s;
    box-shadow: 0 6px 24px rgba(233,63,105,0.35);
    width: 100%;
    justify-content: center;
}

    .sc-btn-publish:hover {
        background: #d03560;
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(233,63,105,0.45);
    }

    .sc-btn-publish:active {
        transform: translateY(0);
    }

/* ══════════════════════════════════════
     MODAL  — a.css'deki .modal-backdrop,
     .modal-content, .modal-title ile cakisır →
     sc-modal-* kullandık
  ══════════════════════════════════════ */

.sc-modal-box {
    /*background: rgba(255,255,255,0.7);*/
    background-color:transparent;
    border-radius: 22px;
    padding: 28px 24px;
    width: 340px;
    max-width: calc(100vw - 32px);
    text-align: center;
   margin:auto;
}

.sc-modal-icon {
    font-size: 40px;
    color: var(--rose);
    margin-bottom: 12px;
}

.sc-modal-heading {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.sc-modal-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.sc-modal-actions {
    display: flex;
    gap: 10px;
}

    .sc-modal-actions button {
        flex: 1;
    }

/* ══════════════════════════════════════
     TOAST
  ══════════════════════════════════════ */
.sc-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: rgba(30,30,46,0.92);
    color: #fff;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 300;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
    white-space: nowrap;
}

    .sc-toast.sc-show {
        transform: translateX(-50%) translateY(0);
    }

    .sc-toast i {
        color: var(--rose);
    }



.sv-member-card {
    display: flex;
    align-items: center;
    width:500px;
    gap: 16px;
    padding: 20px;
    border-radius: 20px;  
    margin:auto;
    animation: svFadeUp 0.35s ease-out both;
}

.sv-member-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.sv-member-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.55);
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.sv-online-dot {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 13px;
    height: 13px;
    background: var(--online);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
}
.sv-offline-dot {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 13px;
    height: 13px;
    background: var(--passive-color);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
}
.sv-member-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sv-member-nick {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 2px;
}

.sv-member-detail {
    font-size: 12px;
    color: var(--text-mid);
    /*display: flex;*/
    display:table-column;
    flex-wrap: wrap;
    gap: 6px 14px;
}

    .sv-member-detail span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .sv-member-detail i {
        color: var(--main-color);
        font-size: 11px;
    }
.sAsw-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}
.sAsw-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.sAsw-section-badge {
    margin-left: auto;
    background: var(--rose-light);
    border: 1px solid var(--rose-mid);
    color: var(--main-color);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    font-family: 'DM Mono', monospace;
}
.section-icon {
    color: var(--main-color);
    font-size: 17px;
}
.SurveyDetailsCaption {
    text-transform: capitalize;
    color: var(--rose);
    font-size: 15px;
    font-weight: 700;
}
/* ── Question card ── */
/* .glass class'ı a.css'te tanımlıdır; question-card bu class ile birlikte kullanılır */
.question-card {
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 12px !important;
    animation: fadeUp .28s ease-out both;
}

    .question-card:last-child {
        margin-bottom: 0;
    }

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.q-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--main-color);
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.question-text {
    font-size: 14px;
    font-weight: 500;
    color:var(--text-color);
    margin-bottom: 12px;
    line-height: 1.6;
    padding-top:5px;
}

/* ── Options ── */
.options {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .options > a {
        text-decoration: none;
        color: var(--text-color);
        font-size: 13.5px;
        padding: 10px 14px;
        background: rgba(255,255,255,0.35);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.22s;
        border: 1px solid var(--glass-border);
        display: flex;
        align-items: center;
        gap: 10px;
    }
.opt-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    flex-shrink: 0;
    transition: all 0.2s;
}

.options > a:hover {
    background: rgba(255,255,255,0.60);
    transform: translateX(4px);
    border-color: var(--rose-mid);
    color: #222;
}

    .option:hover .opt-dot {
        border-color: var(--main-color);
        background: var(--rose-light);
    }

/* ── Answered card ── */
/* .glass class'ı a.css'te tanımlıdır; answered-card bu class ile birlikte kullanılır */
.answered-card {
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 12px !important;
    position: relative;
    animation: fadeUp .28s ease-out both;
}

    .answered-card:last-child {
        margin-bottom: 0;
    }

.answered-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(233,63,105,0.14);
    border: 1px solid var(--rose-mid);
    border-radius: 10px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--main-color);
    margin-top: 6px;
}

.sAsw-delete-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.40);
    border: 1px solid rgba(200,60,60,0.3);
    color:var(--main-color);
    padding: 5px 11px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .sAsw-delete-btn:hover {
        background: rgba(255,80,80,0.15);
        transform: scale(1.04);
    }
    .sAsw-delete-btn > a {
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        color: var(--main-color);
    }
    /* ── Empty state ── */
    .sAsw-empty-state {
        text-align: center;
        padding: 24px;
        color: var(--text-mid);
        font-size: 13.5px;
    }

    .sAsw-empty-state i {
        font-size: 32px;
        color: var(--main-color);
        opacity: 0.45;
        display: block;
        margin-bottom: 8px;
    }

/* ── Profile grid ── */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.Ssectionbadge {
   
}
.BellSurvey{
   position: absolute;    
     right: 39px;
    top: 17px;
    width: 40px;  
    color: var(--main-color);
    font-size: 25px;
    font-weight: 700;
    cursor:pointer;
     
}
    .BellSurvey > a {
        display: none;
    }
    /**cevaplayanlar kısmı***/
/* ══════════════════════════════════════
     BEĞENENLer LİSTESİ — EnjoyMemberList
  ══════════════════════════════════════ */
.enjoy-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.enjoy-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    padding: 9px 12px;
    margin-bottom:3px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    cursor: pointer;
}

    .enjoy-card:hover {
        background: rgba(255, 255, 255, 0.26);
        transform: translateY(-1px);
    }

.enjoy-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.enjoy-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    object-fit: cover;
    display: block;
}

.enjoy-avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    background: var(--rose-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--main-color);
}

.enjoy-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.enjoy-info {
    flex: 1;
    min-width: 0;
}

.enjoy-nick {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--main-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.enjoy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.enjoy-tag {
    font-size: 11px;
    color: var(--main-color);
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .enjoy-card {
        padding: 8px 10px;
        gap: 8px;
    }

    .enjoy-avatar,
    .enjoy-avatar-placeholder {
        width: 40px;
        height: 40px;
    }

    .enjoy-nick {
        font-size: 12.5px;
    }

    .enjoy-tag {
        font-size: 10px;
    }
}

/**********************SuveyAnswerProfilList*************************************************************/
.SapLcard {
    background: rgba(255, 220, 230, 0.06);
    border: 0.5px solid rgba(220, 160, 180, 0.2);
    border-radius: 20px;
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    padding: 20px 15px;
    margin-bottom: 15px;
    position: relative;   
    transition: border-color 0.3s, background 0.3s;
}

    .SapLcard::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(230, 170, 190, 0.4), transparent);
    }

    .SapLcard:hover {
        background: rgba(255, 220, 230, 0.1);
        border-color: rgba(220, 160, 180, 0.35);
    }

.q-label {
    display: inline-flex;
    align-items: center;
    /*gap: 8px;*/
    /*margin-bottom:7px;*/
}

.q-num {
    /*font-family: 'Cormorant Garamond', serif;*/
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    text-transform:capitalize;
    color:var(--main-color);
    /*letter-spacing: 0.08em;*/
}

.q-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(200, 120, 145, 0.5);
}

.q-text {
    /*font-family: 'Cormorant Garamond', serif;*/
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color);
    font-style: italic;
    text-transform: capitalize;
    /*line-height: 1.45;*/
    /*letter-spacing: 0.01em;*/
    /*margin-bottom: 1.4rem;*/
}
.divider {
    width: 100%;
    height: 0.5px;
    background: linear-gradient(90deg, rgba(200, 120, 145, 0.35), rgba(200, 120, 145, 0.08));
    /*margin-bottom: 1px;*/
}

.a-label {   
    font-size: 12px;
    font-weight: 500;   
    /*letter-spacing: 0.22em;*/
    text-transform: uppercase;
    color:var(--offline);
    /*margin-bottom: 0.65rem;*/
}

.a-text {
    /*font-family: 'Jost', sans-serif;*/
    font-size: 14px;
    font-weight: 700;
    color: var(--main-color);
    font-style: italic;
    text-transform:capitalize;
    /*line-height: 1.85;*/
    /*letter-spacing: 0.015em;*/
}
    .a-text > i {
        text-transform: lowercase;
        position:relative;
        left:15px;
        width:50px;
        margin-right:15px;
    }
.card-num-bg {
    position: absolute;
    right: 1.8rem;
    /*bottom: 1rem;*/   
    font-size: 72px;
    font-weight: 300;
    font-style: italic;
    color: var(--rose-mid);
    line-height: 1;
    user-select: none;
    pointer-events: none;
}
.unSelectText {
    font-size: 14px;
    font-weight: 300;
    color: var(--un-selected-color);
    font-style: italic;
    text-transform: capitalize;
    /*line-height: 1.85;*/
    /*letter-spacing: 0.015em;*/
}
/****************************SEARCH ÜYE KODU*****************************************/
    .info-row .lbl {
        font-weight: 600;
        color: var(--main-color);
        white-space: nowrap;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .info-row .val {
        font-weight: 500;
        color:var(--text-color);
        font-size:9pt;
    }

.info-row-full {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    color: rgba(30,10,20,0.55);
    font-style: italic;
    padding-top: 2px;
}

.info-ico {
    font-size: 15px;
    color: var(--main-color);
    flex-shrink: 0;
    margin-top: 1px;
}
/***************************SEARCH KRİTERE GÖRE**********************************************/
.underline-select {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(255,255,255,0.50);
    border-radius: 0;
    padding: 8px 28px 7px 4px;
    font-size: 13.5px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    color: var(--text-color);
    outline: none;
    cursor: pointer;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    transition: border-color .2s;
}

    .underline-select:focus {
        border-bottom-color: #e93f69;
    }

    .underline-select option {
        background: #fff;
        color: #2a0f1a;
    }
    /**************KRİTERE GÖRE ARAMA İÇİNDE SLIDER YAŞ BOY KİLO ARALIĞI İÇİN*****************/
.sliders-wrap {
    max-width: 340px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.rs-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1.5px solid rgba(255,255,255,0.45);
}

.rs-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: .01em;
}

    .rs-title i {
        font-size: 16px;
        color: rgba(255,255,255,0.65);
    }

.rs-values {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rs-val {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(233,63,105,0.28);
    border: 1px solid rgba(233,63,105,0.35);
    border-radius: 8px;
    padding: 2px 9px;
    min-width: 40px;
    text-align: center;
    transition: background .15s;
}

.rs-sep {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
}

.rs-track-wrap {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
    padding: 0 6px;
}

.rs-track {
    position: absolute;
    left: 6px;
    right: 6px;
    height: 2px;
    background: rgba(255,255,255,0.28);
    border-radius: 2px;
}

.rs-fill {
    position: absolute;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    pointer-events: none;
}

input.rs-input {
    position: absolute;
    width: calc(100% - 12px);
    left: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    border: none;
    height: 2px;
    pointer-events: none;
}

    input.rs-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        pointer-events: all;
        cursor: grab;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        border: 2.5px solid var(--mc);
        transition: transform .15s,box-shadow .15s;
    }

        input.rs-input::-webkit-slider-thumb:active {
            cursor: grabbing;
            transform: scale(1.15);
        }

    input.rs-input:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 4px rgba(233,63,105,0.22);
    }

    input.rs-input::-moz-range-thumb {
        pointer-events: all;
        cursor: grab;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        border: 2.5px solid var(--mc);
    }

.rs-minmax {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    /*color: rgba(255,255,255,0.40);*/
    color:var(--text-color);
    padding: 0 6px;
}
.searchSub {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right:10px;
}
.searchSub > i{

    color:var(--main-color);
}
.searchSubWrp{
    border:1px solid var(--main-color);
    border-radius:24px;
    padding:20px;
    margin-top:15px;
}
/*****ARA BUTONU****/
.SearchBtn {
    flex: 1;
    text-align: center;
    padding: 12px 4px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s;
    color: var(--text-dark);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
}

    .SearchBtn i {
        font-size: 16px;
    }

    .SearchBtn.active {
        background: var(--main-color);
        color: white;
        box-shadow: 0 6px 14px rgba(233,63,105,0.3);
    }


.Srchmember-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.Srchmember-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 18px 12px 16px;
    text-align: center;
    border: 1px solid var(--glass-border);
    transition: all 0.25s;
    cursor: pointer;
}

.Srchmember-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.4);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}
.Srchmember-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.6);
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.Srchmember-nick {
    font-weight: 800;
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.Srchmember-age {
    font-size: 13px;
    color: var(--rose);
    font-weight: 600;
}

.Srchmember-city {
    font-size: 11px;
    color: var(--text-mid);
    margin-top: 6px;
}
@media (max-width: 680px) {
    /*.form-grid {
        grid-template-columns: 1fr;
    }

    .full-width {
        grid-column: span 1;
    }

    .glass-card-form {
        padding: 20px;
    }*/

    .Srchmember-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}
.badge-online {
    background: var(--online);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}
/*******GENEL ARAMA LİSTESİ******/
/* ══ VARYANT 1 — Underline liste ══ */
.ql-list {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 18px;
    overflow: hidden;
}

.ql-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    text-decoration: none;
    transition: background .18s;
    position: relative;
}

    .ql-item:last-child {
        border-bottom: none;
    }

    .ql-item:hover {
        background: rgba(255,255,255,0.14);
    }

        .ql-item:hover .ql-arrow {
            opacity: 1;
            transform: translateX(0);
        }

.ql-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform .18s;
}

.ql-item:hover .ql-icon {
    transform: scale(1.08);
}

.ql-body {
    flex: 1;
    min-width: 0;
}

.ql-name > a{
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 1px;
    text-decoration:none;
}

.ql-desc {
    font-size: 11.5px;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ic-green { background: rgba(29,164,98,0.20); color: var(--active-color);}
/* Renk setleri */
.ic-green { background: rgba(29,164,98,0.20); color: #1da462;}
.ic-pink {background: rgba(233,63,105,0.20); color: #e93f69;}
.ic-blue {background: rgba(56,139,253,0.20);color: #388bfd;}
.ic-amber {background: rgba(240,160,30,0.20);color: #f0a01e;}
.ic-purple {background: rgba(130,80,220,0.20);color: #8250dc;}
.ic-teal {background: rgba(20,180,170,0.20);color: #14b4aa;}
/***********************************KONUM İLE ARAMA SEARCH LOCATION**********************************/
.page-area {
    position: relative;
    width: 100%;
    min-height: 100vh;
}
.marker-map {
    color: var(--marker-map) !important;
}
/* Sol div */

.left-side {
    position: fixed;
    top: 75px;
    left: 0;
    width: calc((100% - 900px) / 2);
    height: 100vh;
    background-color:var(--rose-light);
}

/* Sağ div */

.right-side {
    position: fixed;
    top: 75px;
    right: 0;
    width: calc((100% - 900px) / 2);
    height: 100vh;
    background-color: var(--rose-light);
}

/* 900px altı */

@media(max-width:900px) {

    .left-side,
    .right-side {
        display: none;
    }
}
.tabWrpTop {
    position: fixed;
    /*max-width: 550px;*/
    width: 500px;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.radar-btn {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.45);
    backdrop-filter: blur(16px);
    transition: transform .2s;
    overflow: visible;
}

    .radar-btn:hover {
        transform: scale(1.06);
    }

    .radar-btn:active {
        transform: scale(0.97);
    }

/* Dönen tarama */
.sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,transparent 75%,var(--rose-light) 100%);
    animation: spin 3s linear infinite;
    z-index:4;
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* İç daireler */
.ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(233,63,105,0.30);
    pointer-events: none;
}

/* Parlayan merkez */


/* Yazı */
.km-label {
    /*position: absolute;
    z-index: 5;
    text-align: center;
    pointer-events: none;*/
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.km-num {
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.20);
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    font-weight: 300;
    font-style: italic;
    color: rgba(180, 80, 110, 0.7);
    line-height: 1;
    user-select: none;
    text-decoration: none;
    position: relative;
    z-index: 11;
}

.km-unit {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20pt;
    font-weight: 300;
}

/* Dış pulse halkalar */
.pulse-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(233,63,105,0.45);
    animation: pRing 2.4s ease-out infinite;
    pointer-events: none;
}

    .pulse-ring:nth-child(1) {
        animation-delay: 0s;
    }

    .pulse-ring:nth-child(2) {
        animation-delay: .8s;
    }

    .pulse-ring:nth-child(3) {
        animation-delay: 1.6s;
    }

@keyframes pRing {
    0% {
        width: 10px;
        height: 10px;
        top: 30px;
        left: 30px;
        opacity: .7
    }

    100% {
        width: 70px;
        height: 70px;
        top: 0px;
        left: 0px;
        opacity: 0
    }
}
.customMarker {
    background: none;
    border: none;
}

    .customMarker img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        object-fit: cover;
    }
.mapWrp {
    /*position: relative;
    width: 100%;
    height: 100vh;
    align-items: center;
    display: flex;*/
    /*align-content: center;*/
    /*flex-direction: row;*/
    /*justify-content:center;
    background-color: aqua;*/
}
.SearchLocationFrame {
    /*max-width: 900px;*/
    width: 100%;
    height: 100vh;
    z-index: 0;
    position: fixed;
    left: 50%;
    top:75px;
    transform: translateX(-50%);
}
.modalCloseicon {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    z-index: 10;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Arial, sans-serif;
    cursor: pointer;
    line-height: 30px;
}
/*************************************************NOTAICE PAGE*******************************/

.notice-chip {
    display: flex;
    flex-direction: row;
    /*align-items: center;*/
    gap: 5px;
    padding: 6px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    position: relative;
    margin: 1px;
    background: rgba(255,255,255,0.28);
}

    .notice-chip:hover {
        background: rgba(255,255,255,0.6);
    }

    .notice-chip.Cactive {
        background: var(--rose-light);       
    }

.chip-avatar-wrap {
    position: relative;
}

.chip-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid rgba(255,255,255,0.55);
    transition: all 0.3s;
    display: block;
}

.notice-chip.Cactive .chip-avatar {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px var(--rose-light);   
}
.NoticeList li{
    list-style:none;
    position:relative;
    padding:5px;
    margin:1px 5px;
}
.NoticePageDate {
    position:absolute;
    right:5px;
    bottom:2px;
    font-size:6pt;
}
.NoticePageText {
    text-transform: lowercase;
    color: var(--text-color) !important;
    font-style: italic !important;
    font-size: 10pt !important;
    margin-left:10px;
}

    .NoticePageText.Nactive {       
        color: var(--main-color) !important;       
    }


    /************************MAİL SAYFASI******************************************/
/* ── Sayfa sarmalayıcı ── */
.page-wrapMail {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 14px 60px;
}
/* ── Ana kart ── */
.mail-card {
    width: 100%;
    max-width: 520px;
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.20);
}

/* ── Kart üstü dekorasyon ── */
.mail-card-top {
    background: rgba(233,63,105,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.20);
    padding: 22px 24px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.mail-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(233,63,105,0.45);
}

    .mail-icon-wrap i {
        font-size: 24px;
        color: #fff;
    }

.mail-card-title {
    flex: 1;
}

    .mail-card-title h2 {
        font-size: 17px;
        font-weight: 800;
        color: #fff;
        text-shadow: 0 1px 4px rgba(0,0,0,0.15);
        margin-bottom: 3px;
        letter-spacing: -.2px;
    }

    .mail-card-title p {
        font-size: 12px;
        font-weight: 500;
        color: rgba(255,255,255,0.60);
    }

/* ── Başarı mesajı ── */
.success-toast {
    margin: 16px 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: rgba(0,200,83,0.18);
    border: 1px solid rgba(0,200,83,0.35);
    border-radius: 12px;
    animation: toastIn .4s ease-out both;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.success-toast i {
    font-size: 16px;
    color: var(--online);
    flex-shrink: 0;
}

.success-toast span {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

/* ── Form alanı ── */
.mail-form {
    padding: 20px 20px 22px;
}

/* ── Alan etiketi ── */
.field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 7px;
}

    .field-label i {
        font-size: 12px;
        color: var(--main-color);
    }

/* ── Input ── */
.mail-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--input-bg);
    border: 1px solid rgba(255,255,255,0.50);
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    color: #2a0f1a;
    outline: none;
    transition: all .2s;
    margin-bottom: 5px;
}

    .mail-input:focus {
        border-color: var(--main-color);
        box-shadow: 0 0 0 3px rgba(233,63,105,0.18);
        background: #fff;
    }

    .mail-input::placeholder {
        color: rgba(42,15,26,0.38);
    }

/* Hint satırı */
.field-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 18px;
}

    .field-hint i {
        font-size: 11px;
        color: var(--main-color);
    }

/* ── Textarea ── */
.mail-textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--input-bg);
    border: 1px solid rgba(255,255,255,0.50);
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.6;
    font-family: inherit;
    color: #2a0f1a;
    outline: none;
    transition: all .2s;
    resize: vertical;
    min-height: 180px;
    margin-bottom: 6px;
}

    .mail-textarea:focus {
        border-color: var(--main-color);
        box-shadow: 0 0 0 3px rgba(233,63,105,0.18);
        background: #fff;
    }

    .mail-textarea::placeholder {
        color: rgba(42,15,26,0.38);
    }

/* Karakter sayacı */
.char-countMail {
    text-align: right;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.38);
    margin-bottom: 18px;
    transition: color .2s;
}

    .char-countMail.warn {
        color: rgba(233,63,105,0.80);
    }

/* ── Alt çizgi / divider ── */
.form-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    margin-bottom: 18px;
}

/* ── Gönder butonu ── */
.send-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.SndMsg {
    flex: 1;
    padding: 12px 20px;
    background: var(--main-color);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(233,63,105,0.45);
    transition: all .2s;
}

.SndMsg:hover {
    background: #c02a52;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(233,63,105,0.55);
}

.SndMsg:active {
    transform: translateY(0);
}

.SndMsg i {
    font-size: 16px;
}

/* Temizle butonu */
.clear-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.30);
    color: rgba(255,255,255,0.60);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all .18s;
    flex-shrink: 0;
}

    .clear-btn:hover {
        background: rgba(255,255,255,0.28);
        color: #fff;
    }

/* ── Alt bilgi ── */
.mail-footer {
    padding: 12px 20px 16px;
    border-top: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: rgba(255,255,255,0.40);
}

    .mail-footer i {
        font-size: 13px;
        color: rgba(233,63,105,0.60);
    }
.mail-form {
    padding: 16px 14px 18px;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}
/* ── Responsive ── */
@media (max-width: 480px) {
    .page-wrap {
        padding: 16px 10px 50px;
    }

    .mail-card {
        border-radius: 18px;
    }

    .mail-card-top {
        padding: 18px 16px 16px;
    }

    .mail-form {
        padding: 16px 14px 18px;
    }
}