/* Özellik önizlemelerindeki Discord sahneleri: panel, Top.gg tanıtımı ve herkese açık özellik sayfaları ortak kullanır. */
.feature-preview { min-width: 0; margin: 28px 0 22px; }
.feature-preview-window { overflow: hidden; border-radius: 12px 12px 0 0; background: #1b1d25; }
.feature-preview-layout { display: flex; min-width: 0; }
.feature-preview-chat { flex: 1; min-width: 0; }
.feature-preview-rooms { width: clamp(145px, 31%, 190px); flex: 0 0 auto; padding: 17px 9px; border-right: 1px solid #111216; background: #202127; }
.feature-preview-rooms > strong { display: block; margin: 0 8px 12px; color: #aeb4c0; font-size: 10px; letter-spacing: .5px; }
.preview-voice-room { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 7px; padding: 7px 8px; border-radius: 4px; color: #c7cad1; font-size: 11px; font-weight: 700; }
.preview-voice-room span:last-child { min-width: 0; overflow-wrap: anywhere; }
.preview-voice-room.is-selected { background: #3c3e47; color: #fff; }
.preview-voice-member { display: flex; align-items: center; gap: 7px; margin: 3px 0 3px 23px; color: #aeb4c0; font-size: 10px; }
.preview-voice-member > span { color: #43b581; font-size: 13px; }
.feature-preview-channel { display: flex; align-items: center; padding: 12px 18px; border-bottom: 1px solid #ffffff12; background: #20222b; }
.feature-preview-channel strong { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.feature-preview-channel strong span { margin-right: 5px; color: #9298a5; font-size: 19px; }
.feature-preview-body { display: grid; align-content: center; gap: 17px; min-height: 230px; padding: 21px; }
.preview-message { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.preview-message-ghost { padding: 8px 10px; border: 1px dashed #65707d99; border-radius: 6px; background: #272a3280; }
.preview-message-ghost + .preview-message-ghost { margin-top: -10px; }
.preview-message-ghost .preview-avatar { filter: grayscale(1); opacity: .5; }
.preview-message-ghost .preview-author { color: #9ba1aa; }
.preview-message.preview-message-ghost p { color: #848b95; text-decoration: line-through; text-decoration-color: #b3bac3; }
.preview-ghost-status { padding: 1px 5px; border-radius: 3px; background: #56606b55; color: #b9c0c8; font-size: 10px; font-weight: 600; }
.preview-message-content { flex: 1; min-width: 0; }
.preview-avatar, .preview-bot-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; }
.preview-avatar { background: #5865f236; color: var(--light-blurple); font-weight: 800; text-transform: lowercase; }
.preview-bot-avatar { object-fit: cover; }
.preview-author { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; color: #f2f3f5; font-size: 12px; font-weight: 800; }
.preview-author small { color: #9298a5; font-size: 10px; font-weight: 500; }
.preview-author .preview-message-status { padding: 1px 5px; border-radius: 4px; background: #f0b23220; color: #f6c77d; font-weight: 700; }
.preview-author b { padding: 1px 5px; border-radius: 3px; background: var(--blurple); color: white; font-size: 9px; letter-spacing: .3px; }
.preview-message p { color: #d8d9df; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.preview-command { display: inline-block; padding: 2px 7px; border-radius: 4px; background: #5865f22b; color: var(--light-blurple) !important; }
.preview-embed { max-width: 510px; margin-top: 5px; padding: 10px 13px; border-left: 4px solid var(--preview-embed-color, #eb1c5a); border-radius: 4px; background: #272a35; }
.preview-embed-author { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: #f2f3f5; font-size: 12px; font-weight: 700; }
.preview-embed-icon { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: #5865f2; color: white; }
.preview-embed-icon img, .preview-embed-footer img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.preview-embed-title { margin-bottom: 6px; color: #f2f3f5; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.preview-embed-description { color: #c7c9d0; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.preview-embed-description code, .preview-embed-title code, .preview-embed-rows code { padding: 1px 3px; border-radius: 3px; background: #15171d; font-family: inherit; }
.preview-mention { padding: 1px 2px; border-radius: 3px; background: #5865f244; color: #c9ceff; }
.preview-embed-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 11px 0 0; }
.preview-embed-rows div { min-width: 0; }
.preview-embed-rows dt { color: #999eab; font-size: 10px; font-weight: 700; }
.preview-embed-rows dd { margin: 2px 0 0; overflow-wrap: anywhere; color: #f2f3f5; font-size: 12px; font-weight: 700; }
.preview-embed-footer { display: flex; align-items: center; gap: 5px; margin-top: 12px; color: #aeb4c0; font-size: 10px; }
.preview-embed-footer img { width: 17px; height: 17px; }
.preview-reply { margin: 0 0 5px; padding-left: 7px; border-left: 2px solid #9298a5; color: #aeb4c0; font-size: 11px; }
.preview-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.preview-button { padding: 6px 10px; border-radius: 4px; background: #5865f2; color: white; font-size: 11px; font-weight: 700; }
.preview-button.is-danger { background: #da373c; }
.preview-automod { max-width: 490px; padding: 11px 13px; border-left: 4px solid #e74c3c; border-radius: 4px; background: #272a35; }
.preview-automod strong { color: #f2f3f5; font-size: 12px; }
.preview-automod p { margin-top: 5px; color: #c7c9d0; font-size: 12px; }
.preview-campaign-banner { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 5px; overflow: hidden; max-width: 410px; min-height: 150px; margin-top: 9px; padding: 20px 24px; border-radius: 5px; background: linear-gradient(120deg, #1c3343, #196f86 58%, #52afad); color: #fff; }
.preview-campaign-banner::after { position: absolute; top: -54px; right: -65px; width: 210px; height: 210px; border: 22px solid #ffffff26; border-radius: 50%; content: ''; }
.preview-campaign-banner span, .preview-campaign-banner strong, .preview-campaign-banner small { position: relative; z-index: 1; }
.preview-campaign-banner span { font-size: 12px; font-weight: 900; letter-spacing: .5px; }
.preview-campaign-banner strong { max-width: 260px; font-size: 23px; line-height: 1.15; }
.preview-campaign-banner small { font-size: 11px; color: #e7fbfd; }
.preview-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.preview-chips span { padding: 5px 9px; border: 1px solid #6d76d4; border-radius: 5px; background: #5865f22b; color: #dfe2ff; font-size: 11px; font-weight: 700; }
.preview-progress { overflow: hidden; height: 7px; margin-top: 13px; border-radius: 9px; background: #3c404e; }
.preview-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5865f2, #f00072); }
.preview-event { display: flex; align-items: center; gap: 9px; color: #aeb4c0; font-size: 12px; line-height: 1.5; }
.preview-event span { display: grid; place-items: center; width: 34px; height: 24px; color: #aeb7ff; }
.preview-profile { padding: 12px 14px; border: 1px solid #3a3f50; border-radius: 8px; background: #252833; }
.preview-profile-after { border-color: #23a5598c; background: #1e302b; }
.preview-profile-label { display: block; margin-bottom: 8px; color: #aeb4c0; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.preview-profile-after .preview-profile-label { color: #89dbaf; }
.preview-profile > div { display: flex; align-items: center; gap: 11px; }
.preview-profile-avatar { background: #5865f2; color: white; font-weight: 800; text-transform: uppercase; }
.preview-profile > div > span:nth-child(2) { display: grid; min-width: 0; }
.preview-profile strong { overflow-wrap: anywhere; font-size: 14px; }
.preview-profile small { color: #aeb4c0; font-size: 11px; }
.preview-profile-state { margin-left: auto; color: #86e1ab; font-size: 20px; }
.preview-profile-before .preview-profile-state { color: #f6c77d; }
.preview-channels { display: grid; gap: 5px; padding: 15px; border: 1px solid #3a3f50; border-radius: 8px; background: #22252e; }
.preview-channels > strong { margin-bottom: 5px; color: #aeb4c0; font-size: 11px; letter-spacing: .6px; }
.preview-channel { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 5px; color: #d8d9df; font-size: 13px; }
.preview-channel span:first-child { width: 19px; color: #aeb4c0; }
.preview-channel small { margin-left: auto; color: #aeb4c0; font-size: 10px; }
.preview-channel.is-new { background: #5865f23b; color: #e0e3ff; }
.preview-channel.is-member { padding-left: 30px; color: #aeb4c0; font-size: 12px; }
.preview-rule { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid #f0b23270; border-radius: 8px; background: #f0b23212; }
.preview-rule-icon { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 50%; background: #f0b2322b; color: #f6c77d; font-weight: 900; }
.preview-rule > div { flex: 1; min-width: 0; }
.preview-rule strong { color: #f9dcad; font-size: 13px; }
.preview-rule p { margin-top: 3px; color: #d8c7a9; font-size: 12px; line-height: 1.5; }
.preview-rule-badge { flex-shrink: 0; color: #f6c77d; font-size: 10px; font-weight: 800; }
.feature-preview-input { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px 16px; padding: 9px 12px; border-radius: 6px; background: #12141a; color: #898f9b; font-size: 11px; }
.feature-preview-input span { font-size: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .feature-preview-body > * { animation: preview-appear .55s both; animation-delay: calc(var(--preview-order) * 120ms); }
  @keyframes preview-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
/* CSP satır içi style özniteliğini engellediği için mesaj sırası sınıfla verilir. */
.preview-order-0 { --preview-order: 0; } .preview-order-1 { --preview-order: 1; } .preview-order-2 { --preview-order: 2; } .preview-order-3 { --preview-order: 3; } .preview-order-4 { --preview-order: 4; } .preview-order-5 { --preview-order: 5; } .preview-order-6 { --preview-order: 6; } .preview-order-7 { --preview-order: 7; } .preview-order-8 { --preview-order: 8; } .preview-order-9 { --preview-order: 9; }
@media (max-width: 540px) {
  .feature-preview-rooms { width: 128px; padding: 14px 5px; }
  .feature-preview-body { padding: 14px 11px; }
  .feature-preview-channel { padding: 10px 11px; }
  .feature-preview-rooms + .feature-preview-chat .preview-embed-rows { grid-template-columns: 1fr; }
}