/* ─────────────────────────────────────────────────────────────
   posts.css  — Post Kartı, Yorumlar & Lightbox — v2 sosyal medya
   ─────────────────────────────────────────────────────────────*/

:root{
    --or:#ff6b2b;
    --or2:#ff3d00;
    --card-bg:#111117;
    --card-border:rgba(255,255,255,.07);
    --card-hover-border:rgba(255,255,255,.13);
    --text-primary:#f1f2f4;
    --text-secondary:#9ba3af;
    --text-muted:#4b5563;
    --like-color:#f43f5e;
    --cmt-color:#60a5fa;
}

/* ══ POST CARD ══ */
.post-card{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:18px;
    overflow:hidden;
    margin-bottom:1rem;
    transition:border-color .22s ease, box-shadow .22s ease;
    position:relative;
}
.post-card::before{
    content:'';
    position:absolute;inset:0;border-radius:18px;
    background:linear-gradient(160deg,rgba(255,107,43,.03) 0%,transparent 60%);
    pointer-events:none;
}
.post-card:hover{
    border-color:var(--card-hover-border);
    box-shadow:0 8px 32px rgba(0,0,0,.35), 0 0 0 0.5px rgba(255,107,43,.07);
}

/* ══ POST HEADER ══ */
.post-header{
    display:flex;
    gap:.75rem;
    align-items:flex-start;
    padding:1rem 1rem .55rem;
}
.post-av-link{
    flex-shrink:0;
    display:block;
    position:relative;
    width:44px;height:44px;
}
.post-av-link::after{
    content:'';
    position:absolute;inset:-2px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--or),var(--or2));
    z-index:0;
    opacity:0;
    transition:opacity .2s;
}
.post-card:hover .post-av-link::after{opacity:.6;}
.post-av-img{
    width:44px;height:44px;
    border-radius:50%;
    object-fit:cover;
    position:relative;z-index:1;
    border:2px solid rgba(255,255,255,.06);
}
.post-av-initial{
    width:44px;height:44px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--or),var(--or2));
    display:flex;align-items:center;justify-content:center;
    font-weight:800;color:#fff;font-size:1.05rem;
    position:absolute;top:0;left:0;z-index:1;
}
.post-meta{flex:1;min-width:0;}
.post-name-row{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;line-height:1.3;}
.post-dname{
    font-weight:700;color:var(--text-primary);font-size:.9rem;
    text-decoration:none;line-height:1.2;
    transition:color .15s;
}
.post-dname:hover{color:var(--or);}
.post-handle{color:var(--text-muted);font-size:.8rem;font-weight:400;}
.post-submeta{display:flex;align-items:center;gap:.45rem;margin-top:3px;flex-wrap:wrap;}
.post-time{color:var(--text-muted);font-size:.74rem;}
.post-permalink{
    color:var(--text-muted);font-size:.74rem;
    text-decoration:none;
    transition:color .15s;
    display:inline-flex;align-items:center;gap:3px;
}
.post-permalink:hover{color:var(--or);}
.post-vis-chip{
    display:inline-flex;align-items:center;gap:3px;
    color:#374151;font-size:.68rem;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.05);
    padding:1px 8px;border-radius:99px;
}
.post-verified-badge{
    display:inline-flex;align-items:center;justify-content:center;
    width:15px;height:15px;border-radius:50%;
    background:linear-gradient(145deg,#5aabff 0%,#2b87e8 45%,#1565c0 100%);
    box-shadow:0 0 0 2px rgba(91,171,255,.18);
    flex-shrink:0;
}
.post-top-actions{
    margin-left:auto;flex-shrink:0;
    display:flex;align-items:center;gap:.2rem;
}
.post-action-icon{
    background:none;border:none;
    color:#374151;cursor:pointer;
    padding:.35rem;border-radius:8px;
    transition:all .18s;display:flex;align-items:center;
}
.post-action-icon:hover{background:rgba(239,68,68,.1);color:#f87171;}

/* ══ POST BODY ══ */
.post-body{
    color:#d4d8e1;
    font-size:.92rem;
    line-height:1.7;
    padding:.2rem 1rem .7rem;
    word-break:break-word;
}
.post-hashtag{
    color:var(--or);
    text-decoration:none;
    font-weight:600;
    transition:color .15s;
    border-radius:3px;
}
.post-hashtag:hover{color:#ff8c52;}

/* ══ POST IMAGE ══ */
.post-img-wrap{
    width:100%;
    overflow:hidden;
    max-height:480px;
    background:#0a0a0f;
    position:relative;
}
.post-img-wrap img{
    width:100%;
    max-height:480px;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:transform .4s ease;
}
.post-img-wrap:hover img{transform:scale(1.025);}

/* ══ POST FOOTER (Actions) ══ */
.post-footer{
    display:flex;
    align-items:center;
    gap:.15rem;
    padding:.55rem .65rem;
    border-top:1px solid rgba(255,255,255,.04);
    background:rgba(255,255,255,.01);
}
.post-foot-btn{
    display:inline-flex;align-items:center;gap:.38rem;
    background:none;border:none;
    color:var(--text-secondary);
    cursor:pointer;
    font-size:.8rem;font-weight:600;
    padding:.48rem .78rem;
    border-radius:99px;
    transition:all .18s ease;
    white-space:nowrap;
    text-decoration:none;
}
.post-foot-btn svg{transition:transform .2s ease;}
.post-foot-btn:hover{color:var(--text-primary);background:rgba(255,255,255,.07);}

/* Like button */
.post-foot-btn:first-child:hover{color:var(--like-color);background:rgba(244,63,94,.08);}
.post-foot-btn:first-child:hover svg{transform:scale(1.2);}
.post-like-active{color:var(--like-color)!important;background:rgba(244,63,94,.09)!important;}
.post-like-active svg{fill:var(--like-color);transform:scale(1.1);}
@keyframes heartPop{0%{transform:scale(1)} 30%{transform:scale(1.4)} 60%{transform:scale(.9)} 100%{transform:scale(1)}}
.post-like-active svg{animation:heartPop .35s ease;}

/* Comment button */
.post-cmt-btn:hover{color:var(--cmt-color)!important;background:rgba(96,165,250,.08)!important;}
.post-cmt-btn:hover svg{transform:scale(1.1);}
.post-cmt-open{color:var(--cmt-color)!important;}

/* Share button */
.post-share-btn{margin-left:auto;}
.post-share-btn:hover{color:#34d399!important;background:rgba(52,211,153,.08)!important;}

.post-like-count,.post-comment-count{min-width:14px;}

/* ══ COMMENTS PANEL ══ */
.post-comments-panel{
    border-top:1px solid rgba(255,255,255,.05);
    padding:.9rem 1rem 1rem;
    background:rgba(0,0,0,.15);
    animation:slideDown .2s ease;
}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.comments-list{
    display:flex;flex-direction:column;
    gap:.7rem;
    margin-bottom:.8rem;
}
.cmts-more-btn{
    font-size:.78rem;color:var(--text-muted);
    background:none;
    border:1px solid rgba(255,255,255,.07);
    border-radius:99px;
    padding:.32rem 1rem;
    cursor:pointer;
    transition:all .18s;
    display:block;margin:0 auto;
}
.cmts-more-btn:hover{color:var(--or);border-color:rgba(255,107,43,.3);background:rgba(255,107,43,.06);}

/* ══ SINGLE COMMENT ══ */
.cmt-item{
    display:flex;
    gap:.6rem;
    align-items:flex-start;
}
.cmt-reply{
    padding-left:2.75rem;
    position:relative;
    margin-top:.4rem;
}
.cmt-reply::before{
    content:'';
    position:absolute;
    left:.95rem;top:0;bottom:.6rem;
    width:1.5px;
    background:linear-gradient(to bottom,rgba(255,107,43,.2),transparent);
}
.cmt-av-link{
    flex-shrink:0;display:block;
    position:relative;width:34px;height:34px;
}
.cmt-av-img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.07);}
.cmt-av-initial{
    width:34px;height:34px;border-radius:50%;
    background:linear-gradient(135deg,var(--or),var(--or2));
    display:flex;align-items:center;justify-content:center;
    font-weight:800;color:#fff;font-size:.78rem;
    position:absolute;top:0;left:0;
}
.cmt-body{flex:1;min-width:0;}
.cmt-bubble{
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.06);
    border-radius:4px 14px 14px 14px;
    padding:.52rem .8rem;
    transition:background .15s;
}
.cmt-bubble:hover{background:rgba(255,255,255,.05);}
.cmt-name-row{
    display:flex;align-items:center;
    gap:.3rem;margin-bottom:.18rem;flex-wrap:wrap;
}
.cmt-dname{
    font-weight:700;color:#e9ebee;font-size:.82rem;
    text-decoration:none;line-height:1.2;
}
.cmt-dname:hover{color:var(--or);}
.cmt-del-btn{
    margin-left:auto;background:none;border:none;
    color:#374151;cursor:pointer;padding:.15rem;
    border-radius:4px;transition:all .15s;
    display:flex;align-items:center;
    opacity:0;
}
.cmt-bubble:hover .cmt-del-btn{opacity:1;}
.cmt-del-btn:hover{color:#f87171;}
.cmt-content{color:#c6cad1;font-size:.845rem;line-height:1.58;word-break:break-word;}
.cmt-meta-row{
    display:flex;align-items:center;
    gap:.7rem;margin-top:.32rem;padding-left:.15rem;
}
.cmt-time{color:#374151;font-size:.72rem;}
.cmt-reply-btn{
    background:none;border:none;
    color:#4b5563;font-size:.76rem;font-weight:700;
    cursor:pointer;padding:0;
    transition:color .15s;
}
.cmt-reply-btn:hover{color:var(--or);}
.cmt-react-btn{
    display:inline-flex;align-items:center;gap:.25rem;
    background:none;border:none;cursor:pointer;
    padding:0;font-size:.76rem;font-weight:600;
    color:#4b5563;transition:color .15s;
}
.cmt-react-btn:hover{color:#e5e7eb;}
.cmt-like-btn:hover,.cmt-like-btn.active{color:#60a5fa;}
.cmt-dislike-btn:hover,.cmt-dislike-btn.active{color:#f87171;}
.cmt-react-stat{
    display:inline-flex;align-items:center;
    gap:.25rem;font-size:.76rem;color:#4b5563;
}
.cmt-replies{
    margin-top:.5rem;
    display:flex;flex-direction:column;gap:.5rem;
}

/* ══ COMMENT INPUT ══ */
.comment-compose{margin-top:.65rem;}
.cmt-reply-form{margin-top:.45rem;}
.cmt-input-row{
    display:flex;align-items:flex-end;gap:.45rem;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
    padding:.5rem .5rem .5rem .8rem;
    transition:border-color .2s, background .2s;
}
.cmt-input-row:focus-within{
    border-color:rgba(255,107,43,.35);
    background:rgba(255,107,43,.03);
}
.cmt-textarea{
    flex:1;background:transparent;border:none;outline:none;
    resize:none;color:#e5e7eb;font-size:.86rem;
    line-height:1.55;font-family:inherit;
    max-height:110px;overflow-y:auto;
    padding:2px 0;
}
.cmt-textarea::placeholder{color:#374151;}
.cmt-emoji-btn{
    flex-shrink:0;background:none;border:none;
    color:#4b5563;cursor:pointer;
    padding:.3rem;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    transition:all .15s;line-height:1;
}
.cmt-emoji-btn:hover{background:rgba(255,107,43,.1);color:var(--or);}
.cmt-send-btn{
    flex-shrink:0;
    background:linear-gradient(135deg,var(--or),var(--or2));
    border:none;border-radius:10px;
    padding:.46rem .52rem;color:#fff;
    cursor:pointer;display:flex;
    align-items:center;justify-content:center;
    transition:opacity .15s, transform .15s;
    box-shadow:0 2px 8px rgba(255,107,43,.25);
}
.cmt-send-btn:hover{opacity:.88;transform:translateY(-1px);}
.cmt-send-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}

/* ══ SPINNERS ══ */
.comment-spinner{
    width:22px;height:22px;
    border:2px solid rgba(255,255,255,.08);
    border-top-color:var(--or);
    border-radius:50%;
    animation:posts-spin .7s linear infinite;
    margin:.6rem auto;
}
.wall-spinner{
    width:26px;height:26px;
    border:2.5px solid rgba(255,255,255,.06);
    border-top-color:var(--or);
    border-radius:50%;
    animation:posts-spin .7s linear infinite;
}
@keyframes posts-spin{to{transform:rotate(360deg)}}

/* ══ LIGHTBOX ══ */
#post-lightbox{
    display:none;position:fixed;inset:0;
    z-index:9999;
    background:rgba(0,0,0,.96);
    backdrop-filter:blur(6px);
    align-items:center;justify-content:center;
    cursor:zoom-out;
}
#post-lightbox.open{display:flex;}
#post-lightbox img{
    max-width:92vw;max-height:92vh;
    object-fit:contain;border-radius:10px;
    box-shadow:0 24px 80px rgba(0,0,0,.7);
}
#post-lightbox-close{
    position:absolute;top:16px;right:16px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;width:42px;height:42px;
    color:#fff;font-size:1.25rem;
    cursor:pointer;display:flex;
    align-items:center;justify-content:center;
    transition:background .15s;
}
#post-lightbox-close:hover{background:rgba(255,255,255,.15);}

/* ══ MOBILE ══ */
@media(max-width:540px){
    .post-card{border-radius:14px;margin-bottom:.75rem;}
    .post-header{padding:.85rem .85rem .5rem;gap:.6rem;}
    .post-av-img,.post-av-initial,.post-av-link{width:38px;height:38px;}
    .post-body{padding:.15rem .85rem .6rem;font-size:.88rem;}
    .post-footer{padding:.45rem .45rem;}
    .post-foot-btn{padding:.4rem .55rem;font-size:.77rem;border-radius:99px;}
    .post-comments-panel{padding:.75rem .85rem .85rem;}
    .cmt-reply{padding-left:2.25rem;}
    .cmt-av-img,.cmt-av-initial,.cmt-av-link{width:30px;height:30px;}
}