/* Yorumlar (32. tur): the published comments, a form, the rules. Colours from palette.css through rota.css. */
.comments-intro,.comments-box,.comments-write,.comments-rules{padding:20px 22px;margin-bottom:14px}
.comments-intro h1{margin:6px 0 10px}
.comments-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.comment-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border:1px solid var(--ui-line,#3a4b5c);border-radius:14px;background:var(--ui-raised,#1f2d3b)}
.comment-card blockquote{margin:0}.comment-card blockquote p{margin:0;font:400 16px/1.55 Georgia,serif;white-space:pre-wrap;overflow-wrap:anywhere}
.comment-card blockquote p::before{content:'“';color:var(--ui-accent,#ecc27f)}.comment-card blockquote p::after{content:'”';color:var(--ui-accent,#ecc27f)}
.comment-who{margin:auto 0 0;font-size:13px;color:var(--ui-muted,#c6ced6)}.comment-who strong{color:var(--ui-text,#f4f1ea)}
.comment-basis{margin:0;font-size:12px;color:var(--ui-accent,#ecc27f)}
#comments-more{margin-top:12px}
.comments-write h2,.comments-rules h2{margin:4px 0 10px;font:600 22px/1.25 Georgia,serif}
.comment-form,.invite-form{display:grid;gap:8px;max-width:640px;margin-top:12px}
.comment-form label,.invite-form label{font-size:13px;font-weight:700;color:var(--ui-accent,#ecc27f)}
.comment-form input:not([type=checkbox]),.comment-form textarea,.invite-form input{min-height:44px;padding:10px 12px;border:1px solid var(--ui-line,#3a4b5c);border-radius:10px;background:var(--ui-field,#1f2d3b);color:var(--ui-text,#f4f1ea);font:inherit}
.comment-form textarea{resize:vertical}
.invite-form>div{display:flex;gap:8px;flex-wrap:wrap}.invite-form input{flex:1;min-width:180px;letter-spacing:.08em;text-transform:uppercase}
.comment-form .consent{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:var(--ui-text,#f4f1ea)}.comment-form .consent input{margin-top:4px;width:20px;height:20px;accent-color:var(--ui-accent,#ecc27f)}
.comment-form button{justify-self:start}
.my-comment{max-width:640px;margin-top:12px;padding:14px 16px;border:1px solid var(--ui-line,#3a4b5c);border-radius:12px;background:var(--ui-raised,#1f2d3b)}
.my-comment blockquote{margin:6px 0}.my-comment blockquote p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.my-state{margin:6px 0 10px;font-size:13px;color:var(--ui-accent,#ecc27f)}.my-actions,.my-ask{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.comments-rules ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:14px;line-height:1.55}
.comments-page [hidden]{display:none!important}
/* 58. tur: the stars its writer gave over each comment, yellow as on review sites; in the form, five to choose from. */
.comment-stars{margin:0;font-size:18px;line-height:1;letter-spacing:2px}.comment-stars .on{color:#fbbc04}.comment-stars .off{color:#55677a}.my-comment .comment-stars{margin:6px 0 2px}
.star-pick{min-width:0;margin:4px 0 0;padding:0;border:0}.star-pick legend{margin-bottom:4px;padding:0;font-size:13px;font-weight:700;color:var(--ui-accent,#ecc27f)}
.star-pick-row{display:flex;gap:2px}
.comment-form .star-pick label{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;font:400 32px/1 system-ui,sans-serif;color:#55677a;cursor:pointer}
.comment-form .star-pick label.on{color:#fbbc04}.star-pick label:has(input:focus-visible){outline:2px solid var(--ui-accent,#ecc27f);outline-offset:-2px}
.comment-form .star-pick input{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
@media(max-width:760px){.comments-intro,.comments-box,.comments-write,.comments-rules{padding:16px}.comments-list{grid-template-columns:1fr}}