/* ═══ HOME INDEX ═══ */
:root{--or:#ff6b2b;--or2:#ff3d00;--gold:#f59e0b;--gold2:#d97706;}

/* ═══ FILTER BAR ═══ */
.hf-bar{
    display:flex;align-items:center;gap:0;flex-wrap:nowrap;
    background:rgba(10,10,14,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.07);
    position:sticky;top:64px;z-index:10;
    overflow-x:auto;scrollbar-width:none;
}
.hf-bar::-webkit-scrollbar{display:none;}

.hf-section{
    display:flex;align-items:center;gap:.35rem;
    padding:.6rem 1rem;
    flex-shrink:0;
}
.hf-section:first-child{padding-left:1.25rem;}

.hf-sep{
    width:1px;height:28px;flex-shrink:0;
    background:rgba(255,255,255,.07);
    align-self:center;
}

.hf-label{
    font-size:.62rem;font-weight:700;color:#4b5563;
    white-space:nowrap;text-transform:uppercase;letter-spacing:.07em;
    flex-shrink:0;
}

/* Sort / Type pill buttons */
.hf-pill{
    display:inline-flex;align-items:center;gap:.3rem;
    padding:.3rem .65rem;border-radius:20px;
    font-size:.72rem;font-weight:600;
    text-decoration:none;white-space:nowrap;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:#9ca3af;
    transition:all .18s;
    flex-shrink:0;
}
.hf-pill:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.15);}
.hf-pill.active{
    background:linear-gradient(135deg,var(--or),var(--or2));
    border-color:transparent;color:#fff;
    box-shadow:0 2px 10px rgba(255,107,43,.35);
}
.hf-pill.active-vip{
    background:linear-gradient(135deg,rgba(245,158,11,.9),rgba(180,83,9,.85));
    border-color:transparent;color:#000;font-weight:700;
    box-shadow:0 2px 10px rgba(245,158,11,.35);
}

/* Location form */
.hf-loc-form{
    display:flex;align-items:center;gap:.35rem;
    padding:.6rem 1rem;flex-shrink:0;
}
.hf-select{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
    border-radius:8px;color:#d1d5db;font-size:.75rem;font-weight:600;
    padding:.32rem .7rem;outline:none;cursor:pointer;
    max-width:140px;
    transition:border-color .18s;
}
.hf-select:focus{border-color:rgba(255,107,43,.4);}

/* Şehir select — koyu dropdown */
#hf-city-sel{
    background-color:#111117!important;
    color:#e5e7eb;
    -webkit-appearance:auto;
}
#hf-city-sel option{
    background-color:#1a1a2e;
    color:#e5e7eb;
}
#hf-city-sel option:checked,
#hf-city-sel option:hover{
    background-color:#ff6b2b;
    color:#fff;
}
.hf-district{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
    border-radius:8px;color:#d1d5db;font-size:.75rem;
    padding:.32rem .7rem;outline:none;width:110px;
    transition:border-color .18s,width .25s;
}
.hf-district:focus{border-color:rgba(255,107,43,.4);width:140px;}
.hf-district::placeholder{color:#374151;}
.hf-btn{
    background:linear-gradient(135deg,var(--or),var(--or2));color:#fff;border:none;
    padding:.32rem .9rem;border-radius:8px;font-size:.73rem;font-weight:700;cursor:pointer;
    white-space:nowrap;transition:opacity .18s;
    box-shadow:0 2px 8px rgba(255,107,43,.3);
}
.hf-btn:hover{opacity:.88;}

/* Active filter chips */
.hf-chips{display:flex;align-items:center;gap:.3rem;flex-shrink:0;}
.hf-chip{
    display:inline-flex;align-items:center;gap:.25rem;
    padding:.22rem .55rem;border-radius:20px;
    background:rgba(255,107,43,.12);border:1px solid rgba(255,107,43,.3);
    color:#ff6b2b;font-size:.65rem;font-weight:700;
    text-decoration:none;white-space:nowrap;
    transition:all .15s;
}
.hf-chip:hover{background:rgba(255,107,43,.2);}
.hf-chip-close{opacity:.7;font-size:.8rem;line-height:1;}

/* Right: total count */
.hf-total-wrap{
    margin-left:auto;padding:.6rem 1.25rem .6rem .5rem;
    display:flex;align-items:center;gap:.4rem;
    flex-shrink:0;
}
.hf-total{font-size:.72rem;color:#374151;white-space:nowrap;}
.hf-total strong{color:#6b7280;font-weight:700;}

/* Desktop: transparent wrappers — flex children flow directly into hf-bar */
.hf-pills-row{display:contents;}
#hf-panel{display:contents;}
.hf-sep-desktop{display:flex;}

/* ── Mobil toggle butonu (yalnız mobilde görünür) ─ */
#hf-mb{display:none;}

/* Mobile layout */
@media(max-width:640px){
    /* Toggle butonu */
    #hf-mb{
        display:flex;align-items:center;justify-content:space-between;
        padding:.55rem .95rem;cursor:pointer;
        -webkit-tap-highlight-color:transparent;
        user-select:none;
    }
    #hf-mb-left{
        display:flex;align-items:center;gap:.38rem;
        font-size:.78rem;font-weight:700;color:#d1d5db;
    }
    #hf-mb-left svg{color:#9ca3af;flex-shrink:0;}
    #hf-mb-dot{
        width:6px;height:6px;border-radius:50%;background:var(--or);
        margin-left:2px;flex-shrink:0;
    }
    #hf-mb-right{
        display:flex;align-items:center;gap:.5rem;
    }
    #hf-mb-count{font-size:.7rem;color:#4b5563;}
    #hf-mb-arrow{
        transition:transform .22s;color:#4b5563;flex-shrink:0;
    }
    #hf-mb-arrow.open{transform:rotate(180deg);}

    /* Panel: kapalıyken gizli */
    #hf-panel{
        display:none;
        flex-direction:column;
        border-top:1px solid rgba(255,255,255,.06);
    }
    #hf-panel.open{display:flex;}

    /* Desktop count → mobilde gizle */
    .hf-total-wrap{display:none!important;}

    /* Panel içi */
    .hf-bar{flex-direction:column;align-items:stretch;overflow-x:hidden;}
    .hf-sep-desktop{display:none;}
    .hf-pills-row{
        display:flex;align-items:center;overflow-x:auto;
        scrollbar-width:none;padding:.5rem .9rem;gap:.3rem;flex-shrink:0;
    }
    .hf-pills-row::-webkit-scrollbar{display:none;}
    .hf-section{padding:0;flex-shrink:0;gap:.28rem;}
    .hf-section:first-child{padding-left:0;}
    .hf-label{display:none;}
    .hf-sep{width:1px;height:18px;flex-shrink:0;}
    .hf-loc-form{
        display:flex;align-items:center;gap:.4rem;
        padding:.4rem .9rem .55rem;
        border-top:1px solid rgba(255,255,255,.055);
        overflow-x:auto;scrollbar-width:none;
    }
    .hf-loc-form::-webkit-scrollbar{display:none;}
    #hf-city-wrap{flex:1;min-width:0;}
    #hf-city-sel{max-width:none!important;width:100%;}
    #hf-dist-wrap{flex:1;min-width:0;}
    #hf-dist-input,#hf-dist-input.hf-district{width:100%!important;}
    .hf-district:focus{width:100%!important;}

    /* ── Mobil: Story üstte, Filtre altta ── */
    .hf-top-wrap{
        display:flex;
        flex-direction:column;
    }
    .hf-top-wrap .hf-bar{
        order:2;
        position:static; /* mobilde sticky gerekmez, toggle var */
    }
    .hf-top-wrap .story-section{
        order:1;
    }
}

/* ═══ SECTION HEADERS ═══ */
.pm-section{padding:1.5rem 0 .5rem;}
.pm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.pm-title{display:flex;align-items:center;gap:.55rem;font-size:.95rem;font-weight:800;color:#fff;}
.pm-icon{
    width:26px;height:26px;border-radius:8px;flex-shrink:0;
    background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(217,119,6,.08));
    border:1px solid rgba(245,158,11,.3);
    display:flex;align-items:center;justify-content:center;
}
.pm-see-all{font-size:.75rem;font-weight:600;color:var(--gold);text-decoration:none;opacity:.8;}
.pm-see-all:hover{opacity:1;}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:.5rem 0 .9rem;}
.sec-title{display:flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:800;color:#d1d5db;}
.sec-icon{width:22px;height:22px;border-radius:7px;background:rgba(255,107,43,.1);border:1px solid rgba(255,107,43,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* ═══ SHARED GRID ═══ */
.mc-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:.75rem;
}
@media(min-width:480px){.mc-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:768px){.mc-grid{grid-template-columns:repeat(4,1fr);gap:.9rem;}}
@media(min-width:1024px){.mc-grid{grid-template-columns:repeat(5,1fr);}}
@media(min-width:1280px){.mc-grid{grid-template-columns:repeat(6,1fr);}}

/* ═══ MODEL CARD ═══ */
.mc-card{
    border-radius:14px;overflow:hidden;
    background:#111113;
    border:1px solid rgba(255,255,255,.07);
    text-decoration:none;display:flex;flex-direction:column;
    transition:transform .22s,box-shadow .22s,border-color .22s;
    position:relative;
}
.mc-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 40px rgba(0,0,0,.55);
    border-color:rgba(255,107,43,.3);
}

/* Premium varyant */
.mc-card.is-premium{
    border:1.5px solid rgba(245,158,11,.4);
    box-shadow:inset 0 0 28px rgba(245,158,11,.04);
}
.mc-card.is-premium::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    opacity:.8;z-index:3;pointer-events:none;
}
.mc-card.is-premium:hover{
    border-color:rgba(245,158,11,.7);
    box-shadow:0 0 22px rgba(245,158,11,.2),0 16px 40px rgba(0,0,0,.55);
}

/* Fotoğraf — kare */
.mc-img{
    position:relative;
    width:100%;
    padding-bottom:100%;
    overflow:hidden;
    background:#0a0a0c;
    flex-shrink:0;
}
.mc-img img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .38s ease;
}
.mc-card:hover .mc-img img{transform:scale(1.06);}

/* Gradient overlay — altta bilgilere geçiş */
.mc-img-overlay{
    position:absolute;bottom:0;left:0;right:0;
    height:50%;
    background:linear-gradient(to top,rgba(0,0,0,.72) 0%,transparent 100%);
    pointer-events:none;
}

/* Placeholder harf */
.mc-img-ph{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-size:2.8rem;font-weight:900;
    background:linear-gradient(135deg,#1a1a2e,#16213e);
}
.mc-img-ph span{
    background:linear-gradient(135deg,var(--or),var(--or2));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Sağ üst badges */
.mc-badges{
    position:absolute;top:.5rem;right:.5rem;
    display:flex;flex-direction:column;gap:.25rem;align-items:flex-end;
    z-index:3;
}
/* Sarmalayıcı içindeyken bireysel konumlandırmayı sıfırla */
.mc-badges .mc-badge-crown,
.mc-badges .mc-badge-show{
    position:relative;top:auto;right:auto;
}
.mc-badge-crown{
    position:absolute;top:.5rem;right:.5rem;z-index:2;
    display:flex;align-items:center;gap:3px;
    background:linear-gradient(135deg,rgba(245,158,11,.92),rgba(180,83,9,.88));
    backdrop-filter:blur(6px);
    border-radius:7px;padding:3px 8px;
    font-size:.52rem;font-weight:800;color:#000;letter-spacing:.05em;
    box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.mc-badge-ver{
    display:flex;align-items:center;justify-content:center;
    width:18px;height:18px;border-radius:50%;
    background:linear-gradient(145deg,#5aabff 0%,#2b87e8 45%,#1565c0 100%);
    box-shadow:0 0 0 1.5px rgba(91,171,255,.22),0 2px 8px rgba(21,101,192,.45);
}
.mc-city-row{
    display:flex;align-items:center;gap:4px;
    font-size:.76rem;color:#9ca3af;font-weight:500;margin-top:.1rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mc-city-row svg{flex-shrink:0;color:#6b7280;}

/* Sol alt — şehir overlay */
.mc-city-overlay{
    position:absolute;bottom:.45rem;left:.5rem;
    display:flex;align-items:center;gap:3px;
    font-size:.57rem;color:rgba(255,255,255,.75);font-weight:500;
    z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.mc-city-overlay svg{flex-shrink:0;opacity:.8;}

/* Sağ alt — çevrimiçi badge */
.mc-online-badge{
    position:absolute;bottom:.42rem;right:.45rem;z-index:3;
    display:inline-flex;align-items:center;gap:3px;
    background:rgba(6,20,10,.78);
    border:1px solid rgba(34,197,94,.35);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border-radius:20px;padding:2px 6px 2px 5px;
    font-size:.52rem;font-weight:700;letter-spacing:.03em;
    color:#4ade80;line-height:1;
    box-shadow:0 0 0 1px rgba(34,197,94,.12),0 2px 8px rgba(0,0,0,.5);
    animation:mc-pulse 2.4s ease-in-out infinite;
}
.mc-online-dot{
    width:5px;height:5px;border-radius:50%;
    background:#22c55e;flex-shrink:0;
    box-shadow:0 0 4px rgba(34,197,94,.8);
}
@keyframes mc-pulse{0%,100%{box-shadow:0 0 0 1px rgba(34,197,94,.12),0 2px 8px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 2px rgba(34,197,94,.2),0 0 8px rgba(34,197,94,.15),0 2px 8px rgba(0,0,0,.5)}}

/* ── Yıldız Show rozeti ─────────────────────────────────────── */
.mc-badge-show{
    position:absolute;top:.5rem;right:.5rem;z-index:3;
    display:inline-flex;align-items:center;gap:4px;
    background:rgba(8,3,18,.88);
    border:1px solid rgba(255,80,30,.55);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-radius:8px;padding:3px 8px 3px 6px;
    font-size:.53rem;font-weight:800;color:#ff7a45;
    letter-spacing:.09em;line-height:1;
    box-shadow:0 0 0 1px rgba(255,80,30,.12),0 2px 12px rgba(255,61,0,.35);
    animation:show-badge-flare 2.2s ease-in-out infinite;
}
/* Kırmızı "canlı yayın" noktası */
.mc-badge-show-dot{
    width:5px;height:5px;border-radius:50%;flex-shrink:0;
    background:radial-gradient(circle,#ff5c30 0%,#ff2800 100%);
    box-shadow:0 0 5px rgba(255,61,0,.9);
    animation:show-dot-blink 1.1s ease-in-out infinite;
}
@keyframes show-badge-flare{
    0%,100%{box-shadow:0 0 0 1px rgba(255,80,30,.12),0 2px 12px rgba(255,61,0,.35);}
    50%   {box-shadow:0 0 0 2px rgba(255,80,30,.22),0 0 18px rgba(255,61,0,.55),0 2px 12px rgba(0,0,0,.5);}
}
@keyframes show-dot-blink{
    0%,100%{opacity:1;transform:scale(1);}
    50%    {opacity:.5;transform:scale(.75);}
}

/* Body */
.mc-body{
    padding:.7rem .8rem .85rem;
    display:flex;flex-direction:column;gap:.25rem;
}
.mc-name{
    font-size:.92rem;font-weight:700;color:#f3f4f6;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:flex;align-items:center;gap:.32rem;
}
.mc-stats{
    display:flex;gap:.6rem;flex-wrap:wrap;
    margin-top:.1rem;
}
.mc-stat{
    display:flex;align-items:center;gap:.22rem;
    font-size:.72rem;color:#6b7280;
}
.mc-stat svg{width:11px;height:11px;flex-shrink:0;}

/* ═══ PAGINATION ═══ */
.hm-pager{display:flex;gap:.35rem;justify-content:center;margin-top:2rem;flex-wrap:wrap;}
.hm-pg{min-width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;border:1.5px solid rgba(255,255,255,.07);color:#9ca3af;background:rgba(255,255,255,.02);text-decoration:none;transition:all .18s;padding:0 .6rem;}
.hm-pg:hover{border-color:rgba(255,107,43,.4);color:#fff;}
.hm-pg.active{background:linear-gradient(135deg,var(--or),var(--or2));border-color:transparent;color:#fff;box-shadow:0 3px 12px rgba(255,107,43,.3);}
.hm-pg.disabled{opacity:.2;pointer-events:none;}

/* ═══ EMPTY ═══ */
.hm-empty{text-align:center;padding:3rem 1rem;color:#6b7280;}

/* ══════════════════════════════════════
   STORY BAR
══════════════════════════════════════ */
.story-section{padding:.85rem 0 .6rem;position:relative;}
.story-bar{
    display:flex;gap:.85rem;overflow-x:auto;
    padding:.2rem .9rem .5rem;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    scroll-snap-type:x mandatory;
    will-change:scroll-position;
}
.story-bar::-webkit-scrollbar{display:none;}
.story-bubble{
    display:flex;flex-direction:column;align-items:center;gap:.3rem;
    cursor:pointer;flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
    scroll-snap-align:start;
}
.story-ring{
    width:68px;height:68px;border-radius:50%;
    padding:2.5px;
    background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    box-shadow:0 0 0 2px rgba(255,255,255,.06);
    flex-shrink:0;
}
.story-ring.seen{
    background:linear-gradient(135deg,#374151,#1f2937);
}
.story-ring-inner{
    width:100%;height:100%;border-radius:50%;
    border:2.5px solid #0a0a0c;
    overflow:hidden;background:#111;
}
.story-ring-inner img{
    width:100%;height:100%;object-fit:cover;
    border-radius:50%;
}
.story-ring-ph{
    width:100%;height:100%;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#1e1e2e,#2d2d3d);
    font-size:1.2rem;font-weight:700;color:#d1d5db;
}
.story-uname{
    font-size:.6rem;font-weight:600;color:#9ca3af;
    max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
}
/* Kendi story yükleme butonu */
.story-add-btn{
    width:68px;height:68px;border-radius:50%;
    border:2px dashed rgba(255,107,43,.45);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;background:rgba(255,107,43,.05);
    transition:all .18s;flex-shrink:0;
}
.story-add-btn:hover{border-color:var(--or);background:rgba(255,107,43,.12);}
.story-add-btn svg{color:var(--or);}
/* Profil fotoğrafı ring (public profil sayfasında da kullanılır) */
.has-story-ring{
    outline:3px solid transparent;
    outline-offset:2px;
    background:linear-gradient(#0a0a0c,#0a0a0c) padding-box,
               linear-gradient(135deg,#f09433,#dc2743,#bc1888) border-box;
    border:3px solid transparent;
}

/* ═══ HOME MEMBERS FILTER ═══ */
#members-result{transition:opacity .18s,filter .18s;}
#members-result.hf-loading{opacity:.35;filter:blur(1px);pointer-events:none;}