/* --- GENEL AYARLAR --- */
#arcane-wrapper {
    background: #1a1a1a;
    color: #e0e0e0;
    padding: 30px;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    width: 100%; 
    max-width: 100%;
    margin: 20px 0; 
    box-sizing: border-box;
    border: 1px solid #333;
}

/* --- ÜST KISIM --- */
.ac-top-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 25px; border-bottom: 1px solid #333; padding-bottom: 15px;
    flex-wrap: wrap; gap: 15px;
}
.ac-title h3 { margin: 0; font-size: 20px; color: #fff; font-weight: 700; }

/* FİLTRELER */
.ac-filters { display: flex; gap: 5px; background: #252525; padding: 4px; border-radius: 6px; }
.ac-filter-btn {
    background: transparent; border: none; color: #888;
    padding: 8px 16px; font-size: 13px; cursor: pointer;
    border-radius: 4px; font-weight: 500; transition: 0.2s;
}
.ac-filter-btn:hover { color: #fff; background: #333; }
.ac-filter-btn.active { background: #5865F2; color: #fff; }

/* --- YORUM LİSTESİ (İÇ İÇE SİSTEM) --- */
.ac-comment-container { margin-bottom: 20px; } /* Her ana yorum bloğu */

/* Ana Yorum */
.ac-item {
    display: flex; gap: 20px;
    padding-bottom: 15px;
    align-items: flex-start;
    position: relative;
}

/* Yanıtlar (Çocuklar) - SAĞA KAYDIRMA BURADA */
.ac-children {
    margin-left: 50px; /* Girinti */
    border-left: 2px solid #333; /* Sol tarafa çizgi */
    padding-left: 15px;
}

.ac-avatar { flex-shrink: 0; text-align: center; width: 60px; }
.ac-avatar img {
    width: 50px; height: 50px;
    border-radius: 50%; object-fit: cover;
    background: #333; display: block; margin: 0 auto;
}

.ac-body { flex: 1; min-width: 0; }
.ac-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ac-author { font-weight: 700; color: #fff; font-size: 16px; margin-right: 10px; }
.ac-date { font-size: 12px; color: #777; }
.ac-content { font-size: 15px; line-height: 1.6; color: #dcddde; word-wrap: break-word; }

.ac-attachment img {
    max-width: 100%; max-height: 400px;
    border-radius: 8px; margin-top: 15px; border: 1px solid #333;
}

/* Aksiyonlar */
.ac-footer-actions { display: flex; gap: 20px; margin-top: 10px; align-items: center; }
.ac-btn-action {
    background: none; border: none; padding: 0; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    color: #b9bbbe; font-size: 13px; font-weight: 600; transition: 0.2s;
}
.ac-btn-action:hover { color: #fff; }
.ac-btn-like.liked { color: #5865F2; }
.ac-btn-like.liked svg { fill: #5865F2; }
.ac-btn-action svg { width: 18px; height: 18px; fill: currentColor; }

/* --- YORUM FORMU --- */
#arcane-form-area {
    display: flex; gap: 20px; background: #222;
    padding: 25px; border-radius: 12px; margin-top: 40px;
    border: 1px solid #333; align-items: flex-start;
}

/* PROFİL FOTOĞRAFI ALANI (DEĞİŞTİR YAZISI) */
.ac-user-preview {
    text-align: center;
    cursor: pointer;
}
.ac-my-avatar {
    width: 60px; height: 60px;
    position: relative; flex-shrink: 0; margin: 0 auto;
}
.ac-my-avatar img {
    width: 100%; height: 100%;
    border-radius: 50%; object-fit: cover;
    border: 2px solid #444; transition: 0.3s;
}
.ac-my-avatar:hover img { border-color: #5865F2; opacity: 0.8; }
.ac-avatar-label {
    display: block; font-size: 11px; color: #777;
    margin-top: 5px; font-weight: 600; transition: 0.2s;
}
.ac-user-preview:hover .ac-avatar-label { color: #5865F2; }

/* Form Elemanları */
#ac-form { flex: 1; display: flex; flex-direction: column; gap: 15px; position: relative; }
.ac-inputs input, .ac-textarea-wrapper textarea {
    width: 100%; background: #2f3136; border: 1px solid #202225;
    color: #dcddde; padding: 15px; border-radius: 6px;
    font-size: 15px; box-sizing: border-box; font-family: inherit;
}
.ac-inputs input:focus, .ac-textarea-wrapper textarea:focus { outline: none; border-color: #5865F2; }
.ac-textarea-wrapper textarea { min-height: 100px; resize: vertical; }

.ac-form-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }

/* BUTONLAR */
.ac-tool-btn {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: #b9bbbe; cursor: pointer; transition: 0.2s; font-weight: 500;
}
.ac-tool-btn:hover { color: #fff; }

#btn-submit {
    background: #5865F2; color: white; border: none;
    padding: 10px 24px; border-radius: 6px; cursor: pointer;
    font-weight: 600; font-size: 15px;
}
#btn-submit:hover { background: #4752c4; }

/* STICKER PANELİ */
#ac-sticker-panel {
    display: none; /* Başlangıçta gizli */
    background: #2f3136; padding: 10px;
    border-radius: 8px; margin-top: 10px;
    border: 1px solid #202225;
}
#ac-sticker-panel.active { display: block; animation: fadeIn 0.2s; }
.ac-stickers-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px; max-height: 200px; overflow-y: auto;
}
.ac-sticker-item { cursor: pointer; border-radius: 4px; overflow: hidden; border: 2px solid transparent; }
.ac-sticker-item:hover { border-color: #5865F2; }
.ac-sticker-item img { width: 100%; height: auto; display: block; }

/* Yükleme Önizleme */
#upload-preview-area img { height: 80px; border-radius: 6px; border: 1px solid #444; margin-top: 15px; }
#cancel-reply-btn { font-size: 14px; color: #ed4245; margin-right: 20px; cursor: pointer; display: none; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* MOBİL */
@media (max-width: 600px) {
    #arcane-wrapper { padding: 15px; }
    .ac-children { margin-left: 20px; padding-left: 10px; } /* Mobilde girinti azalsın */
    .ac-avatar { width: 45px; } .ac-avatar img { width: 40px; height: 40px; }
    .ac-my-avatar { width: 50px; height: 50px; }
    #arcane-form-area { padding: 15px; gap: 10px; }
}