@artilingo/artiframe-cli 2.0.3 → 2.0.5

package/core-stubs/public/assets/css/root/app.css

@@ -1,39 +1,5 @@
-/* ==========================================================================
-   ArtiFrame Global Variables & Base Styles
-   (Driven by data-attributes: data-theme and data-mode)
-   ========================================================================== */
+@import 'root.css';
 
-/* Light Mode (Varsayılan) */
-html[data-theme="default"][data-mode="light"] {
-    --accent: #3b82f6;
-    --accent-hover: #2563eb;
-    --accent-bg: rgba(59, 130, 246, 0.08);
-    --menu-bg: #ffffff;
-    --canvas-bg: #f8fafc;
-    --card-bg: #ffffff;
-    --border: #e2e8f0;
-    --text-main: #0f172a;
-    --text-muted: #64748b;
-    --danger: #ef4444;
-    --success: #10b981;
-    --warning: #f59e0b;
-}
-
-/* Dark Mode */
-html[data-theme="default"][data-mode="dark"] {
-    --accent: #60a5fa;
-    --accent-hover: #93c5fd;
-    --accent-bg: rgba(96, 165, 250, 0.15);
-    --menu-bg: #141619;
-    --canvas-bg: #0b0c0e;
-    --card-bg: #1a1d21;
-    --border: #262b32;
-    --text-main: #f8fafc;
-    --text-muted: #94a3b8;
-    --danger: #f87171;
-    --success: #34d399;
-    --warning: #fbbf24;
-}
 
 /* Base Reset & Genel Stiller */
 *, *::before, *::after {
@@ -45,17 +11,988 @@ html[data-theme="default"][data-mode="dark"] {
 body {
     background-color: var(--canvas-bg);
     color: var(--text-main);
-    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
     line-height: 1.5;
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 a {
-    color: var(--accent);
+    color: var(--brand-primary);
     text-decoration: none;
     transition: color 0.2s ease;
 }
 
 a:hover {
-    color: var(--accent-hover);
+    color: var(--brand-secondary);
+}
+
+/* ==========================================================================
+   Toaster (Toast Notifications)
+   ========================================================================== */
+.toast-container {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    z-index: 10005;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    pointer-events: none;
+}
+
+.toast {
+    background: var(--card-bg);
+    color: var(--text-main);
+    border: 1px solid var(--border);
+    border-left: 4px solid var(--success);
+    border-radius: 8px;
+    padding: 1rem 1.5rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+/* ==========================================================================
+   Global Dropdown Menüler (Sil/Düzenle vb. için)
+   ========================================================================== */
+.arti-dropdown {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    margin-top: 5px;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+    min-width: 150px;
+    padding: 6px 0;
+    text-align: left;
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    overflow: hidden;
+}
+
+html[data-mode="light"] .arti-dropdown {
+    background: rgba(255, 255, 255, 0.75);
+}
+
+html[data-mode="dark"] .arti-dropdown {
+    background: rgba(37, 34, 51, 0.75);
+}
+
+.arti-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+html[data-mode="light"] .arti-dropdown-item:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+html[data-mode="dark"] .arti-dropdown-item:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.arti-dropdown-item.edit-btn {
+    color: var(--text-main);
+}
+.arti-dropdown-item.delete-btn {
+    color: var(--danger);
+}
+.arti-dropdown-item i {
+    width: 16px;
+    text-align: center;
+}
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    pointer-events: auto;
+    transform: translateX(120%);
+    opacity: 0;
+    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.toast.show {
+    transform: translateX(0);
+    opacity: 1;
+}
+
+.toast.success { border-left-color: var(--success); }
+.toast.error { border-left-color: var(--danger); }
+.toast.warning { border-left-color: var(--warning); }
+.toast.info { border-left-color: var(--info); }
+
+.toast-message {
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+@media (max-width: 576px) {
+    .toast-container { bottom: 1rem; right: 1rem; left: 1rem; }
+    .toast { width: 100%; justify-content: center; transform: translateY(120%); }
+    .toast.show { transform: translateY(0); }
+}
+
+/* ==========================================================================
+   Main Application Layout
+   ========================================================================== */
+.app-layout {
+    display: flex;
+    min-height: 100vh;
+    width: 100%;
+    background-color: var(--canvas-bg);
+    overflow: hidden;
+    position: relative;
+}
+
+.app-main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+    padding: 0; /* Header'ın tepeye yapışabilmesi için sıfırlandı */
+    z-index: 1;
+}
+
+/* Sayfaların asıl içerik alanı */
+.main-content {
+    flex: 1;
+    padding: 2rem;
+}
+
+@media (max-width: 992px) {
+    .main-content {
+        padding: 1.25rem;
+    }
+}
+
+/* Mobil Scroll Düzeltmesi (Native Body Scroll) */
+@media (max-width: 768px) {
+    html, body {
+        overflow-x: clip; /* Sadece yatay taşmaları kırpar, dikey scroll'u bozmaz (iOS uyumlu) */
+        overflow-y: visible; /* Sayfanın kendisi kaydırılır */
+    }
+    .app-layout {
+        display: block;
+        min-height: 100vh;
+        overflow: visible !important; /* Asla iç scroll olmamalı */
+    }
+    .app-main-content {
+        display: block;
+        height: auto !important;
+        overflow: visible !important; /* Asla iç scroll olmamalı */
+        padding-bottom: 100px; /* FAB menüsü yüksekliği (60px) + bottom (32px) için kesin boşluk */
+    }
+}
+
+/* --- Global Animasyonlu Arka Plan Şekilleri --- */
+.bg-shape {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(100px);
+    z-index: 0;
+    opacity: 0.2;
+    animation: float 12s infinite alternate ease-in-out;
+    pointer-events: none;
+}
+
+.bg-primary {
+    background: var(--brand-primary);
+    width: 600px;
+    height: 600px;
+    top: -200px;
+    left: -200px;
+    animation-delay: 0s;
+}
+
+.bg-secondary {
+    background: var(--brand-secondary);
+    width: 500px;
+    height: 500px;
+    bottom: -150px;
+    right: -100px;
+    animation-delay: -4s;
+}
+
+.bg-accent {
+    background: var(--brand-accent);
+    width: 400px;
+    height: 400px;
+    bottom: 30%;
+    left: 40%;
+    animation-delay: -8s;
+    opacity: 0.3;
+}
+
+@keyframes float {
+    0% { transform: translate(0, 0) scale(1); }
+    100% { transform: translate(40px, 50px) scale(1.1); }
+}
+
+/* ==========================================================================
+   Global Buttons (Brand Guidelines)
+   ========================================================================== */
+.btn {
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    font-size: 0.95rem;
+    border-radius: 0.75rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid transparent;
+    font-family: inherit;
+    text-align: center;
+    line-height: 1.5;
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.btn-primary {
+    background-color: var(--brand-primary);
+    color: #ffffff;
+}
+
+.btn-primary:hover:not(:disabled) {
+    background-color: var(--brand-secondary);
+    color: #ffffff;
+}
+
+.btn-secondary {
+    background-color: var(--brand-secondary);
+    color: #ffffff;
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background-color: var(--brand-primary);
+    color: #ffffff;
+}
+
+.btn-outline {
+    background-color: transparent;
+    border-color: var(--border);
+    color: var(--text-main);
+}
+
+.btn-outline:hover:not(:disabled) {
+    background-color: var(--border);
+    color: var(--text-main);
+}
+
+[data-mode="dark"] .btn-outline:hover:not(:disabled) {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* ==========================================================================
+   Page Headers (Inside App)
+   ========================================================================== */
+.page-header {
+    margin-bottom: 2rem;
+    padding: 1rem 1.5rem;
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: 1rem;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
+    position: relative;
+    overflow: hidden;
+}
+
+/* Yan vurgu çizgisi (İnce ve minimal) */
+.page-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: linear-gradient(to bottom, var(--brand-primary), var(--brand-secondary));
+    border-radius: 1rem 0 0 1rem;
+}
+
+.page-header h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-main);
+    margin-bottom: 0.2rem;
+    position: relative;
+    z-index: 1;
+}
+
+.page-header p {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    position: relative;
+    z-index: 1;
+}
+
+@media (max-width: 768px) {
+    .page-header {
+        padding: 0.75rem 1rem 0.75rem 1.25rem;
+        margin-bottom: 1.5rem;
+        border-radius: 0.75rem;
+    }
+    .page-header::before {
+        border-radius: 0.75rem 0 0 0.75rem;
+        width: 3px;
+    }
+    .page-header h1 {
+        font-size: 1.25rem;
+    }
+}
+
+/* --- Global Confirm Modal --- */
+.confirm-overlay {
+    position: fixed;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.confirm-overlay.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+.confirm-modal {
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 24px;
+    width: 90%;
+    max-width: 400px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    transform: scale(0.95) translateY(10px);
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.confirm-overlay.show .confirm-modal {
+    transform: scale(1) translateY(0);
+}
+
+.confirm-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--text-main);
+    margin-bottom: 12px;
+}
+
+.confirm-message {
+    font-size: 0.95rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+    margin-bottom: 24px;
+}
+
+.confirm-prompt-input {
+    width: 100%;
+    margin-bottom: 24px;
+    margin-top: -8px; /* Pulled up slightly closer to the message */
+    padding: 0.75rem 1rem;
+    background: var(--canvas-bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    color: var(--text-main);
+    font-family: inherit;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.confirm-prompt-input:focus {
+    border-color: var(--brand-primary);
+    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
+    outline: none;
+}
+
+.confirm-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+.confirm-actions .btn {
+    padding: 8px 20px;
+    font-size: 0.95rem;
+}
+
+/* --- Global Comment Bottom Sheet Modal --- */
+.cm-overlay {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: flex-end;
+    /* Mobilde overlay'e dokunulduğunda sayfanın kaymasını engelle */
+    touch-action: none;
+    overscroll-behavior: none;
+}
+.cm-overlay.show {
+    opacity: 1;
+    visibility: visible;
+}
+.cm-modal {
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+    background: var(--canvas-bg);
+    border-radius: 20px 20px 0 0;
+    transform: translateY(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    flex-direction: column;
+    max-height: 85vh; /* 85% of viewport height */
+    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
+}
+@media (min-width: 640px) {
+    .cm-overlay {
+        align-items: center; /* Center on desktop */
+    }
+    .cm-modal {
+        border-radius: 16px;
+        max-height: 80vh;
+    }
+}
+.cm-overlay.show .cm-modal {
+    transform: translateY(0);
+}
+.cm-header {
+    padding: 1rem 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+.cm-header h2 {
+    font-size: 1.1rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    margin: 0;
+}
+.cm-close {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    font-size: 1.25rem;
+    cursor: pointer;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 0.2s;
+}
+.cm-close:hover {
+    background: var(--bg-hover);
+    color: var(--text-main);
+}
+.cm-body {
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
+    overscroll-behavior: contain;      /* Scroll zincirini kır */
+    padding: 1rem 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: .75rem;
+}
+/* Input Container Fixed at Bottom */
+.cm-footer {
+    padding: .75rem 1.25rem;
+    border-top: 1px solid var(--border);
+    background: var(--canvas-bg);
+    flex-shrink: 0;
+    /* Safe Area Inset Bottom for Mobile Navigation Bars */
+    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
+}
+
+/* ---- Yorum Listesi ve Öğeleri (Global) ---- */
+.sq-yorumlar-list { display: flex; flex-direction: column; gap: .6rem; }
+.sq-yorumlar-loading { text-align: center; color: var(--text-muted); font-size: .85rem; padding: 1rem; }
+
+.sq-yorum-item {
+    display: flex;
+    gap: .6rem;
+    font-size: .87rem;
+    position: relative;
+}
+.sq-yorum-item.sq-yorum-reply {
+    margin-left: 2.8rem;
+}
+.sq-yorum-item .sq-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
+.sq-yorum-bubble {
+    background: transparent;
+    padding: .2rem 0;
+    flex: 1;
+}
+.sq-yorum-header {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    margin-bottom: .2rem;
+    flex-wrap: wrap;
+}
+.sq-yorum-header strong { font-size: .82rem; color: var(--text-main); }
+.sq-yorum-header span { font-size: .75rem; color: var(--text-muted); }
+.sq-yorum-header .sq-yorum-role { color: var(--brand-secondary); font-weight: 600; }
+.sq-yorum-metin { color: var(--text-main); line-height: 1.45; word-break: break-word; }
+.sq-yorum-footer {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    margin-top: .4rem;
+}
+.sq-yorum-action {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    font-size: .75rem;
+    font-weight: 600;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    gap: .3rem;
+    transition: color .2s;
+}
+.sq-yorum-action:hover { color: var(--brand-primary); }
+.sq-yorum-action.delete:hover { color: var(--danger); }
+.sq-yorum-action.edit:hover { color: var(--brand-secondary, #7c3aed); }
+
+.sq-edit-area {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    margin-top: .5rem;
+    position: relative;
+}
+.sq-edit-textarea {
+    width: 100%;
+    min-height: 72px;
+    padding: .6rem .75rem;
+    border-radius: .6rem;
+    border: 1px solid var(--border);
+    background: var(--bg-main);
+    color: var(--text-main);
+    font-size: .9rem;
+    font-family: inherit;
+    outline: none;
+    transition: border-color .2s;
+    cursor: text;
+    white-space: pre-wrap;
+    word-break: break-word;
+    box-sizing: border-box;
+}
+.sq-edit-textarea:focus { border-color: var(--brand-primary); }
+.sq-edit-textarea:empty::before {
+    content: attr(data-placeholder);
+    color: var(--text-muted);
+    pointer-events: none;
+}
+.sq-edit-mention-dropdown {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    right: 0;
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: .75rem;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+    max-height: 180px;
+    overflow-y: auto;
+    z-index: 200;
+    display: none;
+}
+.sq-edit-actions {
+    display: flex;
+    gap: .5rem;
+    justify-content: flex-end;
+}
+
+/* Yorum Input Alanı */
+.sq-yorum-input-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+}
+.sq-reply-status {
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--bg-hover);
+    padding: .4rem .8rem;
+    border-radius: .5rem;
+    font-size: .82rem;
+    color: var(--text-muted);
+}
+.sq-reply-status.active { display: flex; }
+.sq-reply-status strong { color: var(--text-main); margin-left: .3rem; }
+.sq-cancel-reply {
+    background: transparent;
+    border: none;
+    color: var(--danger);
+    cursor: pointer;
+    font-size: .75rem;
+    padding: 0 .4rem;
+}
+.sq-yorum-input-row {
+    display: flex;
+    gap: .5rem;
+    align-items: flex-end;
+}
+.sq-yorum-input {
+    flex: 1;
+    border: 1.5px solid var(--border);
+    border-radius: .75rem;
+    padding: .6rem .9rem;
+    font-size: .88rem;
+    font-family: inherit;
+    resize: none;
+    background: var(--canvas-bg);
+    color: var(--text-main);
+    transition: border-color .2s;
+}
+.sq-yorum-input:focus { outline: none; border-color: var(--brand-primary); }
+
+.sq-toggle-replies {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    font-size: .8rem;
+    font-weight: 600;
+    cursor: pointer;
+    padding: .3rem 0;
+    margin-left: 2.8rem;
+    display: flex;
+    align-items: center;
+    gap: .4rem;
+    align-self: flex-start;
+}
+.sq-toggle-replies::before {
+    content: "—";
+    margin-right: .2rem;
+}
+.sq-toggle-replies:hover { color: var(--text-main); }
+.sq-replies-container {
+    display: none;
+    flex-direction: column;
+    gap: .6rem;
+    margin-top: .2rem;
+}
+.sq-replies-container.open {
+    display: flex;
+}
+
+/* ---- Mention (Etiket) Sistemi ---- */
+
+/* Contenteditable editor - textarea görünümünü taklit eder */
+.cm-editor {
+    min-height: 44px;
+    max-height: 120px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    line-height: 1.5;
+    word-break: break-word;
+    white-space: pre-wrap;
+    cursor: text;
+}
+/* Placeholder emülasyonu */
+.cm-editor:empty::before {
+    content: attr(data-placeholder);
+    color: var(--text-muted);
+    pointer-events: none;
+}
+.cm-editor:focus { outline: none; border-color: var(--brand-primary); }
+
+/* @mention tag - input içinde mor hap gibi görünür */
+.cm-mention-tag {
+    display: inline-block;
+    background: rgba(139, 92, 246, 0.15);
+    color: var(--brand-primary);
+    border-radius: 4px;
+    padding: 0 3px;
+    font-weight: 600;
+    font-size: .87em;
+    cursor: default;
+    user-select: all;
+    white-space: nowrap;
+}
+
+/* @mention link - yorum metninde mor tıklanabilir bağlantı */
+.cm-mention-link {
+    color: var(--brand-primary);
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: 3px;
+    padding: 0 2px;
+    transition: background .15s;
+}
+.cm-mention-link:hover {
+    background: rgba(139, 92, 246, 0.12);
+    text-decoration: underline;
+}
+
+/* Autocomplete Dropdown */
+.cm-mention-dropdown {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: .75rem;
+    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
+    overflow: hidden;
+    z-index: 10001;
+    max-height: 220px;
+    overflow-y: auto;
+}
+/* Footer'ı relative yap ki dropdown absolute çalışsın */
+.cm-footer .sq-yorum-input-wrap {
+    position: relative;
+}
+
+.cm-mention-dropdown {
+    position: absolute;
+    bottom: calc(100% + 5px);
+    left: 0;
+    width: 250px;
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: .75rem;
+    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
+    overflow: hidden;
+    z-index: 10001;
+    max-height: 220px;
+    overflow-y: auto;
+}
+
+@media (max-width: 576px) {
+    .cm-mention-dropdown { width: 100%; left: 0; right: 0; }
+    .cm-mention-item { padding: 8px 12px; }
+}
+
+.cm-mention-item {
+    display: flex;
+    align-items: center;
+    gap: .6rem;
+    padding: .55rem .9rem;
+    cursor: pointer;
+    transition: background .15s;
+}
+.cm-mention-item:hover,
+.cm-mention-item.active {
+    background: var(--bg-hover);
+}
+.cm-mention-item img {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+}
+.cm-mention-info {
+    display: flex;
+    flex-direction: column;
+    gap: .1rem;
+}
+.cm-mention-info strong {
+    font-size: .85rem;
+    color: var(--text-main);
+    line-height: 1.2;
+}
+.cm-mention-info span {
+    font-size: .75rem;
+    color: var(--text-muted);
+}
+
+/* ==========================================================================
+   Viewer.js Custom Theme (Premium Mobile Feel)
+   ========================================================================== */
+.viewer-container {
+    background-color: rgba(0, 0, 0, 0.95) !important;
+    backdrop-filter: blur(8px);
+    z-index: 10005 !important;
+}
+.viewer-button {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+    border-radius: 50% !important;
+    transition: background-color 0.2s;
+}
+.viewer-button:hover {
+    background-color: rgba(255, 255, 255, 0.25) !important;
+}
+.viewer-close {
+    top: 15px !important;
+    right: 15px !important;
+    width: 40px !important;
+    height: 40px !important;
+}
+
+/* Özel Masaüstü Okları (Enjekte Edilen DOM) */
+.custom-viewer-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 48px;
+    height: 48px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    color: #fff;
+    font-size: 1.25rem;
+    z-index: 10010;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s, transform 0.2s;
+}
+.custom-viewer-arrow:hover {
+    background-color: rgba(255, 255, 255, 0.25);
+    transform: translateY(-50%) scale(1.05);
+}
+.custom-viewer-arrow.prev { left: 20px; }
+.custom-viewer-arrow.next { right: 20px; }
+
+/* Sadece Masaüstünde Göster */
+@media (max-width: 768px) {
+    .custom-viewer-arrow { display: none !important; }
+}
+
+/* ==========================================================================
+   MODERATÖR GLOBAL STİLLERİ
+   ========================================================================== */
+
+/* Avatar Çerçeve Animasyonu */
+.is-mod-avatar {
+    border: none;
+    padding: 4px; /* Gradient kalınlığı */
+    background: transparent;
+    position: relative;
+    border-radius: 50%;
+    display: inline-flex;
+    z-index: 1;
+}
+.is-mod-avatar::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: linear-gradient(45deg, var(--brand-primary), #a855f7, var(--brand-primary));
+    background-size: 200% 200%;
+    animation: modAvatarGlow 3s ease infinite;
+    z-index: -1;
+}
+.is-mod-avatar img {
+    border: 3px solid var(--card-bg); /* Görseli arka plandan koparır */
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+    display: block;
+}
+
+@keyframes modAvatarGlow {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Tipografi (İsim / Kullanıcı Adı) */
+.is-mod-text {
+    background: linear-gradient(90deg, var(--brand-primary), #a855f7);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: inline-block;
+    font-weight: 800;
+}
+[data-mode="dark"] .is-mod-text {
+    background: linear-gradient(90deg, #818cf8, #c084fc);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+/* Iyzico Secure Wrapper */
+.iyzico-secure-wrapper {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    margin-top: 20px;
+    text-align: center;
+}
+
+.iyzico-header {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.iyzico-header i {
+    color: var(--success);
+}
+
+.iyzico-logo {
+    height: 24px;
+}
+
+.iyzico-logo img {
+    height: 100%;
+    object-fit: contain;
+}
+
+.iyzico-schemes {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    background: #fff; /* Şemalar renkli olduğu için beyaz zemin */
+    padding: 6px 10px;
+    border-radius: 8px;
+    border: 1px solid rgba(0,0,0,0.05);
+}
+
+.iyzico-schemes img {
+    height: 20px;
+    object-fit: contain;
+}
+
+.iyzico-schemes img[alt="Amex"] {
+    background: #006fcf; /* Amex Mavi Zemin */
+    padding: 2px 4px;
+    border-radius: 4px;
 }