/* Anılar sayfası — feed + kartlar + tam ekran görüntüleyici */
.anilar {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem) calc(var(--bottom-h, 0px) + 3rem);
}

/* ---------- Hero ---------- */
.anilar-hero {
    text-align: center;
    padding: clamp(1.8rem, 6vw, 3.4rem) 0 clamp(1.2rem, 4vw, 2rem);
}
.anilar-hero-inner { max-width: 720px; margin: 0 auto; }
.anilar-eyebrow {
    display: inline-block;
    font-size: .8rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--primary);
    margin-bottom: .6rem;
}
.anilar-hero h1 {
    font-size: clamp(1.9rem, 6vw, 3rem);
    line-height: 1.08; margin: 0 0 .7rem;
}
.anilar-hero h1 em.display-serif { font-style: italic; color: var(--primary); }
.anilar-lead { color: var(--text-dim); font-size: 1.02rem; margin: 0 auto .5rem; max-width: 540px; }
.anilar-cta-hint { font-size: .9rem; }
.anilar-cta-hint a { color: var(--primary); font-weight: 600; }

/* ---------- Toolbar ---------- */
.anilar-toolbar {
    display: flex; justify-content: center;
    margin-bottom: 1.4rem;
    position: sticky; top: .6rem; z-index: 5;
}
.anilar-sort {
    display: inline-flex; gap: .25rem;
    background: var(--surface, var(--bg-2));
    border: 1px solid var(--line);
    border-radius: 999px; padding: .3rem;
    box-shadow: var(--shadow-xs, 0 2px 8px rgba(0,0,0,.06));
}
.anilar-sort button {
    border: none; background: transparent; cursor: pointer;
    padding: .45rem .95rem; border-radius: 999px;
    font-size: .88rem; font-weight: 600; color: var(--text-dim);
    transition: background .15s, color .15s;
}
.anilar-sort button:hover { color: var(--text); }
.anilar-sort button.active { background: var(--primary); color: var(--text-on-primary); }

/* ---------- Feed (masonry) ---------- */
.anilar-feed {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.1rem;
    align-items: start;
}
.anilar-card {
    background: var(--surface, var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--radius, 16px);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    display: flex;
    flex-direction: column;
}
.anilar-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,.12)); }

.anilar-card-img {
    display: block; width: 100%; padding: 0; border: none;
    background: var(--bg-2); cursor: zoom-in; position: relative;
    aspect-ratio: 4 / 5;   /* tüm anılar aynı şablona oturur */
    overflow: hidden;
}
.anilar-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.anilar-badge {
    position: absolute; top: .6rem; left: .6rem;
    background: rgba(0,0,0,.6); color: #fff;
    font-size: .72rem; font-weight: 600;
    padding: .25rem .55rem; border-radius: 999px;
    backdrop-filter: blur(4px);
}
.anilar-badge.soft { background: rgba(22,163,74,.85); }
.anilar-badge.friends { background: var(--primary); }

/* Arkadaşlara özel anı — yeşil çerçeve */
.anilar-card--friends { border: 2px solid var(--primary); box-shadow: 0 0 0 3px var(--primary-soft, rgba(22,163,74,.12)); }
.anilar-card--friends:hover { box-shadow: 0 0 0 3px var(--primary-soft, rgba(22,163,74,.12)), var(--shadow-md, 0 10px 30px rgba(0,0,0,.12)); }

.anilar-card-body { padding: .75rem .85rem .85rem; flex: 1; display: flex; flex-direction: column; }
.anilar-caption {
    margin: 0 0 .7rem; font-size: .95rem; line-height: 1.45; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.anilar-card-foot { display: flex; align-items: center; gap: .5rem; margin-top: auto; }
.anilar-user { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.anilar-user:hover .anilar-user-meta strong { color: var(--primary); }
.anilar-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.anilar-user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.anilar-user-meta strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anilar-cafe { font-size: .78rem; color: var(--text-mute); text-decoration: none; }
.anilar-cafe:hover { color: var(--primary); }

.anilar-like, .av-like {
    display: inline-flex; align-items: center; gap: .3rem;
    border: 1px solid var(--line); background: transparent;
    color: var(--text-dim); cursor: pointer;
    padding: .35rem .6rem; border-radius: 999px;
    font-size: .82rem; font-weight: 600; flex: 0 0 auto;
    transition: transform .12s, color .15s, background .15s;
}
.anilar-like svg, .av-like svg { width: 16px; height: 16px; }
.anilar-like:hover, .av-like:hover { color: var(--text); }
.anilar-like:active, .av-like:active { transform: scale(.9); }
.anilar-like.liked, .av-like.liked { color: #e0245e; border-color: #e0245e44; background: #e0245e14; }

/* initials avatar (anilar.css kendi içinde de tanımlı olsun) */
.anilar .user-avatar-initial, .vv .user-avatar-initial {
    display: grid; place-items: center; font-weight: 800;
    color: var(--text-on-primary);
    background: linear-gradient(135deg, var(--primary), var(--accent, #10b981));
    text-transform: uppercase;
}

/* ---------- skeleton + foot ---------- */
.anilar-skel {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius, 16px);
    background: linear-gradient(100deg, var(--line) 30%, var(--bg-2) 50%, var(--line) 70%);
    background-size: 200% 100%; animation: anilar-shimmer 1.3s infinite;
}
@keyframes anilar-shimmer { to { background-position: -200% 0; } }

.anilar-foot { text-align: center; padding: 1rem 0; }
.anilar-foot .btn { min-width: 180px; }

/* ---------- Story baloncukları ---------- */
.anilar-bubbles-wrap { margin: 0 0 1.2rem; }
.anilar-bubbles {
    list-style: none; margin: 0; padding: .25rem .1rem .5rem;
    display: flex; gap: 1rem; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.anilar-bubbles::-webkit-scrollbar { display: none; }
.anilar-bubble {
    flex: 0 0 auto; width: 72px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    border-radius: 14px; outline: none;
}
.anilar-bubble:focus-visible { box-shadow: 0 0 0 2px var(--primary); }
.bubble-ring {
    position: relative; display: grid; place-items: center;
    width: 68px; height: 68px; border-radius: 50%; padding: 3px;
    background: conic-gradient(from 210deg, var(--primary), var(--accent-2, #34d399), var(--primary-3, #4ade80), var(--primary));
    transition: transform .15s ease;
}
.anilar-bubble:hover .bubble-ring, .anilar-bubble:active .bubble-ring { transform: scale(1.06); }
.anilar-bubble.is-self .bubble-ring { background: linear-gradient(135deg, var(--primary), var(--primary-2, #15803d)); }
.bubble-ring-add { background: var(--line) !important; }
.bubble-av {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
    border: 2.5px solid var(--bg); background: var(--bg-2);
}
.bubble-plus {
    position: absolute; right: 0; bottom: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); color: #fff; border: 2px solid var(--bg);
    display: grid; place-items: center; font-size: .9rem; font-weight: 700; line-height: 1;
}
.bubble-name {
    font-size: .74rem; font-weight: 600; color: var(--text-dim);
    max-width: 70px; text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.bubble-skel {
    flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%;
    background: linear-gradient(100deg, var(--line) 30%, var(--bg-2) 50%, var(--line) 70%);
    background-size: 200% 100%; animation: anilar-shimmer 1.3s infinite;
}

/* ---------- Dikey kaydırmalı (reels) izleyici ---------- */
.vv {
    position: fixed; inset: 0; z-index: 9999;
    display: none; flex-direction: column;
    background: #06080a;
    animation: vv-fade .18s ease;
}
.vv.open { display: flex; }
@keyframes vv-fade { from { opacity: 0; } to { opacity: 1; } }

.vv-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    display: flex; flex-direction: column; gap: .55rem;
    padding: calc(env(safe-area-inset-top, 0px) + .6rem) 1rem .7rem;
    background: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
    pointer-events: none;
}
.vv-top-row { display: flex; align-items: center; justify-content: space-between; }
.vv-title { color: #fff; font-weight: 700; font-size: .95rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* Story ilerleme çubukları */
.vv-progress { display: flex; gap: 4px; }
.vv-progress[hidden] { display: none; }
.vv-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.vv-bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.vv-close {
    pointer-events: auto;
    width: 40px; height: 40px; display: grid; place-items: center;
    border: none; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,.16); color: #fff;
}
.vv-close:hover { background: rgba(255,255,255,.28); }
.vv-close svg { width: 22px; height: 22px; }

/* Kendi anısını silme butonu (tam ekran izleyici, sağ üst) */
.vv-del {
    position: absolute; top: 64px; right: 14px; z-index: 6;
    pointer-events: auto;
    width: 40px; height: 40px; display: grid; place-items: center;
    border: none; border-radius: 50%; cursor: pointer;
    background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(4px);
    transition: background .15s ease;
}
.vv-del:hover { background: #dc2626; }
.vv-del svg { width: 20px; height: 20px; }

.vv-scroll {
    flex: 1; overflow-y: auto; scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.vv-scroll::-webkit-scrollbar { display: none; }

/* Yatay mod (story baloncuğundan açılınca soldan sağa) */
.vv-scroll.vv-h {
    display: flex; flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
}
.vv-scroll.vv-h .vv-slide { flex: 0 0 100%; width: 100%; }

.vv-slide {
    position: relative; height: 100%; width: 100%;
    scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.vv-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.vv-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vv-grad {
    position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
    pointer-events: none;
}
.vv-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 1rem 1.1rem calc(env(safe-area-inset-bottom, 0px) + 1.4rem);
    color: #fff; display: flex; flex-direction: column; gap: .5rem;
    max-width: 620px; margin: 0 auto;
}
.vv-badge { align-self: flex-start; background: var(--primary); color: #fff;
    font-size: .72rem; font-weight: 600; padding: .2rem .5rem; border-radius: 999px; }
.vv-user { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; align-self: flex-start; }
.vv-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.7); }
.vv-user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.vv-user-meta strong { font-size: 1rem; }
.vv-user:hover strong { text-decoration: underline; }
.vv-user-meta small { font-size: .8rem; color: rgba(255,255,255,.75); }
.vv-cafe { align-self: flex-start; color: #9ad9b0; text-decoration: none; font-size: .9rem; }
.vv-caption { margin: .2rem 0; font-size: 1.05rem; line-height: 1.45; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.vv-overlay .react { align-self: flex-start; margin-top: .2rem; }

@media (max-width: 600px) {
    .anilar-feed { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
}