/* Ratemo Yorumlar - Front */
:root {
    --ry-primary: #1a1a1a;
    --ry-accent:  #c8a96e;
    --ry-star:    #f5a623;
    --ry-bg:      #fafafa;
    --ry-border:  #e8e8e8;
    --ry-radius:  10px;
    --ry-text:    #333;
    --ry-muted:   #888;
}

.ry-wrapper { font-family: inherit; color: var(--ry-text); max-width: 860px; }

/* Summary */
.ry-summary { display: flex; align-items: center; gap: 24px; padding: 28px 0 24px; border-bottom: 1px solid var(--ry-border); }
.ry-avg { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ry-avg__score { font-size: 3rem; font-weight: 700; line-height: 1; color: var(--ry-primary); }
.ry-avg__count { font-size: .8rem; color: var(--ry-muted); }

/* Stars */
.ry-stars { display: flex; gap: 2px; }
.ry-star { font-size: 1.1rem; color: var(--ry-border); transition: color .15s; }
.ry-star.filled { color: var(--ry-star); }
.ry-stars--lg .ry-star { font-size: 1.5rem; }

/* List */
.ry-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.ry-empty { color: var(--ry-muted); padding: 32px 0; text-align: center; }

.ry-item {
    padding: 24px 0;
    border-bottom: 1px solid var(--ry-border);
    animation: ryFadeIn .3s ease;
}
@keyframes ryFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ry-item__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.ry-item__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ry-item__author { font-weight: 600; font-size: .95rem; }
.ry-item__date { font-size: .78rem; color: var(--ry-muted); }

.ry-badge { font-size: .7rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.ry-badge--verified { background: #e8f5e9; color: #2e7d32; }

.ry-item__content { margin: 0 0 14px; line-height: 1.65; font-size: .93rem; }

/* Photos */
.ry-item__photos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ry-photo-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ry-border); transition: transform .2s; }
.ry-photo-thumb img:hover { transform: scale(1.05); }

/* Footer / votes */
.ry-item__footer { display: flex; align-items: center; gap: 10px; }
.ry-helpful { font-size: .78rem; color: var(--ry-muted); }
.ry-vote-btn {
    background: none; border: 1px solid var(--ry-border); border-radius: 20px;
    padding: 3px 12px; font-size: .8rem; cursor: pointer; transition: all .15s;
    display: flex; align-items: center; gap: 4px;
}
.ry-vote-btn:hover { border-color: var(--ry-accent); color: var(--ry-accent); }
.ry-vote-btn.active { background: var(--ry-accent); border-color: var(--ry-accent); color: #fff; }

/* Form */
.ry-form-wrap { margin-top: 40px; padding: 32px; background: var(--ry-bg); border-radius: var(--ry-radius); border: 1px solid var(--ry-border); }
.ry-form-title { margin: 0 0 24px; font-size: 1.2rem; font-weight: 700; }
.ry-login-notice { font-size: .88rem; color: var(--ry-muted); margin-bottom: 20px; }
.ry-login-notice a { color: var(--ry-accent); }

.ry-field { margin-bottom: 18px; }
.ry-field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; color: var(--ry-primary); }
.ry-field input[type="text"],
.ry-field textarea {
    width: 100%; padding: 10px 14px; border: 1px solid var(--ry-border);
    border-radius: 6px; font-size: .92rem; font-family: inherit;
    transition: border-color .15s; background: #fff; box-sizing: border-box;
}
.ry-field input:focus, .ry-field textarea:focus { outline: none; border-color: var(--ry-accent); }

/* Star picker */
.ry-star-picker { display: flex; gap: 4px; cursor: pointer; }
.ry-pick-star { font-size: 1.8rem; color: var(--ry-border); transition: color .1s, transform .1s; }
.ry-pick-star.active, .ry-pick-star.hover { color: var(--ry-star); transform: scale(1.15); }

/* Photo upload */
.ry-upload-btn {
    background: none; border: 1.5px dashed var(--ry-border); border-radius: 6px;
    padding: 8px 16px; font-size: .85rem; cursor: pointer; color: var(--ry-muted);
    transition: all .15s;
}
.ry-upload-btn:hover { border-color: var(--ry-accent); color: var(--ry-accent); }
.ry-photo-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ry-preview-item { position: relative; }
.ry-preview-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ry-border); }
.ry-preview-remove {
    position: absolute; top: -6px; right: -6px; background: #e53935; color: #fff;
    border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 10px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* Submit */
.ry-submit-btn {
    background: var(--ry-primary); color: #fff; border: none; border-radius: 6px;
    padding: 12px 28px; font-size: .92rem; font-weight: 600; cursor: pointer;
    transition: background .2s, transform .1s;
}
.ry-submit-btn:hover { background: var(--ry-accent); }
.ry-submit-btn:active { transform: scale(.98); }
.ry-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

.ry-form-msg { margin-top: 12px; font-size: .88rem; padding: 10px 14px; border-radius: 6px; display: none; }
.ry-form-msg.success { background: #e8f5e9; color: #2e7d32; display: block; }
.ry-form-msg.error   { background: #ffebee; color: #c62828; display: block; }

@media (max-width: 600px) {
    .ry-form-wrap { padding: 20px; }
    .ry-item__header { flex-direction: column; }
}