/* ==========================================================================
   GRAFINO DESIGN SYSTEM - UI COMPONENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.g-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--g-space-2);
    padding: 8px 16px; font-size: 14px; font-weight: 500; font-family: inherit;
    border-radius: var(--g-radius-md); border: 1px solid transparent; cursor: pointer;
    transition: all var(--g-trans-fast); position: relative; user-select: none; white-space: nowrap; text-decoration: none;
    --g-spinner-color: var(--g-neutral-700);
}
.g-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-btn:active { transform: scale(0.97); }
.g-btn:disabled, .g-btn[disabled] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

/* Not: aşağıdaki her kural bilinçli olarak .g-btn.g-btn-XXX (çift sınıf) şeklinde yazılır —
   .grafino-app a { color: var(--g-primary-600); } (grafino-base.css) tek başına .g-btn-primary
   gibi tek sınıflı kurallardan (0,1,0) DAHA SPESİFİK (0,1,1); <a class="g-btn g-btn-primary">
   şeklindeki her buton linki (ör. "Yeni Teklif/İş/Fatura" gibi liste sayfası aksiyon butonları)
   bu yüzden genel mavi link rengine düşüyordu. Butonlar zaten her zaman .g-btn ile birlikte
   kullanıldığından eşleşme davranışı değişmiyor, yalnızca özgüllük artırılıyor (!important yok). */
.g-btn.g-btn-primary { background: linear-gradient(180deg, var(--g-primary-500) 0%, var(--g-primary-600) 100%); color: #fff; box-shadow: var(--g-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.2); --g-spinner-color: #fff; }
.g-btn.g-btn-primary:hover { background: var(--g-primary-700); transform: translateY(-1px); box-shadow: var(--g-shadow-primary), inset 0 1px 0 rgba(255,255,255,0.1); color: #fff; }

.g-btn.g-btn-secondary { background-color: var(--g-neutral-50); color: var(--g-neutral-700); border-color: var(--g-neutral-200); box-shadow: var(--g-shadow-sm); --g-spinner-color: var(--g-neutral-700); }
.g-btn.g-btn-secondary:hover { background-color: var(--g-neutral-100); color: var(--g-neutral-900); transform: translateY(-1px); box-shadow: var(--g-shadow-md); }

.g-btn.g-btn-outline { background-color: transparent; color: var(--g-neutral-700); border-color: var(--g-neutral-300); --g-spinner-color: var(--g-neutral-700); }
.g-btn.g-btn-outline:hover { background-color: var(--g-neutral-50); border-color: var(--g-neutral-400); color: var(--g-neutral-900); transform: translateY(-1px); }

.g-btn.g-btn-ghost { background-color: transparent; color: var(--g-neutral-600); --g-spinner-color: var(--g-neutral-600); }
.g-btn.g-btn-ghost:hover { background-color: var(--g-neutral-100); color: var(--g-neutral-900); }

.g-btn-sm { padding: 4px 10px; font-size: 12px; }
.g-btn-sm svg { width: 14px; height: 14px; }

.g-btn.g-btn-danger { background: linear-gradient(180deg, var(--g-danger-500) 0%, var(--g-danger-600) 100%); color: #fff; box-shadow: var(--g-shadow-sm); --g-spinner-color: #fff; }
.g-btn.g-btn-danger:hover { background: var(--g-danger-700); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25); color: #fff; }

.g-btn.g-btn-success { background: linear-gradient(180deg, var(--g-success-500) 0%, var(--g-success-600) 100%); color: #fff; box-shadow: var(--g-shadow-sm); --g-spinner-color: #fff; }
.g-btn.g-btn-success:hover { background: var(--g-success-700); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25); color: #fff; }

.g-btn-icon { padding: 8px; border-radius: var(--g-radius-md); }
.g-btn-block { width: 100%; }

/* Standalone icon button (used without the base .g-btn class, e.g. table row actions, topbar icons) */
.g-btn-icon:not(.g-btn) {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; padding: 0; border: 1px solid transparent; background: transparent;
    cursor: pointer; transition: all var(--g-trans-fast);
}
.g-btn-icon:not(.g-btn):hover { background-color: var(--g-neutral-100); color: var(--g-neutral-900); }
.g-btn-icon:not(.g-btn):active { transform: scale(0.94); }

/* Loading State */
.g-btn-loading { color: transparent !important; pointer-events: none; }
.g-btn-loading svg { opacity: 0; }
.g-btn-loading::after {
    content: ''; position: absolute; width: 18px; height: 18px; left: 50%; top: 50%;
    margin-left: -9px; margin-top: -9px;
    border: 2px solid rgba(128,128,128,0.25); border-top-color: var(--g-spinner-color);
    border-radius: 50%; animation: g-spin 0.8s linear infinite;
}
@keyframes g-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
.g-card {
    background-color: var(--g-bg-surface);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-shadow-md);
    border: 1px solid var(--g-border-color);
    display: flex; flex-direction: column; position: relative;
    transition: all var(--g-trans-base);
}

.g-card-interactive { cursor: pointer; }
.g-card-interactive:hover { transform: translateY(-4px); box-shadow: var(--g-shadow-xl); border-color: var(--g-primary-200); }

/* Subtle lift on hover, without implying the card is clickable */
.g-card-hover:hover { transform: translateY(-2px); box-shadow: var(--g-shadow-lg); }

.g-card-header { padding: var(--g-space-5) var(--g-space-6); border-bottom: 1px solid var(--g-border-color); display: flex; justify-content: space-between; align-items: center; }
.g-card-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--g-text-main); }
.g-card-body { padding: var(--g-space-6); flex: 1; }
.g-card-footer { padding: var(--g-space-4) var(--g-space-6); border-top: 1px solid var(--g-border-color); background-color: var(--g-bg-surface-muted); border-radius: 0 0 var(--g-radius-xl) var(--g-radius-xl); }

/* Quick Action Card */
.g-quick-action {
    display: flex; align-items: center; padding: var(--g-space-4); border-radius: var(--g-radius-lg);
    background: var(--g-bg-surface); border: 1px solid var(--g-border-color); cursor: pointer; transition: all var(--g-trans-fast);
}
.g-quick-action:hover { background: var(--g-primary-50); border-color: var(--g-primary-200); transform: translateY(-2px); box-shadow: var(--g-shadow-md); }
.g-quick-action-icon { width: 36px; height: 36px; border-radius: var(--g-radius-md); display: flex; align-items: center; justify-content: center; margin-right: var(--g-space-3); transition: transform var(--g-trans-fast); }
.g-quick-action:hover .g-quick-action-icon { transform: scale(1.1); }

/* --------------------------------------------------------------------------
   KPI CARDS (Premium SaaS)
   -------------------------------------------------------------------------- */
.g-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g-space-6); margin-bottom: var(--g-space-8); }
@media (max-width: 1200px) { .g-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .g-kpi-grid { grid-template-columns: 1fr; } }

.g-kpi-card {
    padding: var(--g-space-6);
    background-color: var(--g-bg-surface);
    border-radius: var(--g-radius-xl);
    border: 1px solid var(--g-border-color);
    box-shadow: var(--g-shadow-md);
    display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--g-space-4);
    transition: all var(--g-trans-base);
    position: relative; overflow: hidden;
}
.g-kpi-card:hover { transform: translateY(-4px); box-shadow: var(--g-shadow-xl); }
.g-kpi-content { display: flex; flex-direction: column; min-width: 0; }
.g-kpi-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--g-space-4); }
.g-kpi-label { color: var(--g-neutral-500); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--g-space-2); }
.g-kpi-value { font-size: 32px; font-weight: 700; color: var(--g-text-main); line-height: 1.1; margin-bottom: var(--g-space-2); }
.g-kpi-footer, .g-kpi-description { display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-space-2); font-size: 13px; color: var(--g-neutral-500); }

.g-kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; padding: 2px 8px; border-radius: var(--g-radius-pill); }
.g-kpi-trend.positive { color: var(--g-success-700); background: var(--g-success-50); }
.g-kpi-trend.negative { color: var(--g-danger-700); background: var(--g-danger-50); }
.g-kpi-trend.neutral { color: var(--g-warning-700); background: var(--g-warning-50); }
.g-kpi-trend svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

.g-kpi-icon {
    width: 48px; height: 48px; border-radius: var(--g-radius-lg); display: flex; align-items: center; justify-content: center; position: relative;
    transition: transform var(--g-trans-base);
}
.g-kpi-card:hover .g-kpi-icon { transform: scale(1.1) rotate(5deg); }
.g-kpi-icon::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; background: inherit; filter: blur(8px); opacity: 0.4; z-index: 0; }
.g-kpi-icon svg { width: 24px; height: 24px; z-index: 1; position: relative; fill: none; stroke: currentColor; stroke-width: 2; }
.g-kpi-icon.primary { background: linear-gradient(135deg, var(--g-primary-100), var(--g-primary-200)); color: var(--g-primary-700); }
.g-kpi-icon.success { background: linear-gradient(135deg, var(--g-success-100), var(--g-success-200)); color: var(--g-success-700); }
.g-kpi-icon.warning { background: linear-gradient(135deg, var(--g-warning-100), var(--g-warning-200)); color: var(--g-warning-700); }
.g-kpi-icon.info { background: linear-gradient(135deg, var(--g-info-100), var(--g-info-200)); color: var(--g-info-700); }
.g-kpi-icon.danger { background: linear-gradient(135deg, var(--g-danger-100), var(--g-danger-200)); color: var(--g-danger-700); }
.g-kpi-icon.neutral { background: linear-gradient(135deg, var(--g-neutral-100), var(--g-neutral-200)); color: var(--g-neutral-700); }

.g-kpi-card-link { text-decoration: none; cursor: pointer; }
.g-kpi-card-link .g-kpi-card { height: 100%; }

/* --------------------------------------------------------------------------
   DASHBOARD: WELCOME CLOCK, REMINDERS, ACTIVITY FEED
   -------------------------------------------------------------------------- */
.g-welcome-clock { font-size: 13px; color: var(--g-neutral-500); font-weight: 500; margin-bottom: var(--g-space-2); display: flex; align-items: center; gap: 6px; }
.g-welcome-clock svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.g-reminder-item {
    display: flex; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4);
    border-radius: var(--g-radius-md); border-left: 3px solid transparent; transition: all var(--g-trans-fast);
}
.g-reminder-item[data-clickable] { cursor: pointer; }
.g-reminder-item[data-clickable]:hover { background: var(--g-bg-surface-muted); }
.g-reminder-item.danger  { border-left-color: var(--g-danger-500); background: var(--g-danger-50); }
.g-reminder-item.warning { border-left-color: var(--g-warning-500); background: var(--g-warning-50); }
.g-reminder-item.info    { border-left-color: var(--g-info-500); background: var(--g-info-50); }
.g-reminder-item.success { border-left-color: var(--g-success-500); background: var(--g-success-50); }
.g-reminder-group-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--g-neutral-500); margin: var(--g-space-4) 0 var(--g-space-2); }
.g-reminder-group-label:first-child { margin-top: 0; }

.g-activity-row {
    display: flex; align-items: center; gap: var(--g-space-3); padding: var(--g-space-4) var(--g-space-6);
    border-bottom: 1px solid var(--g-border-color); transition: background var(--g-trans-fast);
}
.g-activity-row:last-child { border-bottom: none; }
.g-activity-row[onclick] { cursor: pointer; }
.g-activity-row[onclick]:hover { background: var(--g-bg-surface-muted); }
.g-activity-icon-primary { background: linear-gradient(135deg, var(--g-primary-100), var(--g-primary-200)); color: var(--g-primary-700); }
.g-activity-icon-success { background: linear-gradient(135deg, var(--g-success-100), var(--g-success-200)); color: var(--g-success-700); }
.g-activity-icon-warning { background: linear-gradient(135deg, var(--g-warning-100), var(--g-warning-200)); color: var(--g-warning-700); }
.g-activity-icon-info    { background: linear-gradient(135deg, var(--g-info-100), var(--g-info-200)); color: var(--g-info-700); }
.g-activity-icon-danger  { background: linear-gradient(135deg, var(--g-danger-100), var(--g-danger-200)); color: var(--g-danger-700); }
.g-activity-icon-neutral { background: linear-gradient(135deg, var(--g-neutral-100), var(--g-neutral-200)); color: var(--g-neutral-700); }

/* --------------------------------------------------------------------------
   FORMS & INPUTS
   -------------------------------------------------------------------------- */
.g-form-group { margin-bottom: var(--g-space-4); }
.g-label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--g-neutral-700); font-size: 13px; }

.g-input, .g-select, .g-textarea {
    width: 100%; padding: 10px 14px; border: 1px solid var(--g-neutral-300); border-radius: var(--g-radius-md);
    background-color: var(--g-bg-surface); font-size: 14px; color: var(--g-text-main); font-family: inherit; transition: all var(--g-trans-fast);
}
.g-input:hover, .g-select:hover, .g-textarea:hover { border-color: var(--g-neutral-400); }
.g-input:focus, .g-select:focus, .g-textarea:focus { outline: none; border-color: var(--g-border-focus); box-shadow: var(--g-glow-primary); }
.g-input.error, .g-select.error, .g-textarea.error { border-color: var(--g-danger-500); }
.g-input.error:focus, .g-select.error:focus, .g-textarea.error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.g-input.success, .g-select.success, .g-textarea.success { border-color: var(--g-success-500); }
.g-input.success:focus, .g-select.success:focus, .g-textarea.success:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
.g-input:disabled, .g-select:disabled, .g-textarea:disabled { background-color: var(--g-neutral-50); color: var(--g-neutral-400); cursor: not-allowed; }
.g-textarea { resize: vertical; min-height: 90px; }

/* Reusable search input (icon + rounded field), for toolbars outside the topbar */
.g-search-box { position: relative; width: 100%; }
.g-search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--g-neutral-400); pointer-events: none; transition: color var(--g-trans-fast); }
.g-search-box input {
    width: 100%; padding: 10px 14px 10px 40px; border-radius: var(--g-radius-md); border: 1px solid var(--g-neutral-300);
    background-color: var(--g-bg-surface); font-size: 14px; color: var(--g-text-main); font-family: inherit; transition: all var(--g-trans-fast);
}
.g-search-box input:hover { border-color: var(--g-neutral-400); }
.g-search-box input:focus { outline: none; border-color: var(--g-border-focus); box-shadow: var(--g-glow-primary); }
.g-search-box:focus-within svg { color: var(--g-primary-500); }

.g-checkbox, .g-radio { width: 16px; height: 16px; accent-color: var(--g-primary-600); cursor: pointer; }

/* Teklifler filtre kartı: önceden flex-wrap + items-end kullanıyordu — etiketsiz arama kutusu
   diğer etiketli alanlarla aynı yükseklikte olmadığı için satırlar kayık görünüyordu. Artık her
   alan (arama dahil) kendi .g-label'ına sahip, düzenli bir grid'de aynı hizada. */
.g-quote-filter-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1.3fr 0.8fr 1fr 1fr auto;
    gap: var(--g-space-4);
    align-items: end;
}
.g-quote-filter-actions { display: flex; flex-direction: column; }
.g-quote-filter-actions-spacer { visibility: hidden; }
/* input/select/button arasındaki tarayıcı-native piksel farklarını (select genelde 1-2px daha
   uzun render edilir) ortadan kaldırmak için tüm satır sabit bir yüksekliğe hizalanıyor. */
.g-quote-filter-grid .g-input,
.g-quote-filter-grid .g-select,
.g-quote-filter-grid .g-search-box input {
    height: 41px;
}
.g-quote-filter-actions .g-btn { height: 41px; padding-top: 0; padding-bottom: 0; }

@media (max-width: 1200px) {
    .g-quote-filter-grid { grid-template-columns: repeat(3, 1fr); }
    .g-quote-filter-actions { grid-column: 1 / -1; }
    .g-quote-filter-actions-spacer { display: none; }
}
@media (max-width: 640px) {
    .g-quote-filter-grid { grid-template-columns: 1fr; }
    .g-quote-filter-actions { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */
.g-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0 0 var(--g-radius-xl) var(--g-radius-xl); }
.g-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; }
.g-table th {
    background-color: var(--g-neutral-50); font-weight: 600; color: var(--g-neutral-500); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 16px 24px; border-bottom: 1px solid var(--g-border-color); white-space: nowrap; position: sticky; top: 0; z-index: 10;
}
.g-table td { padding: 16px 24px; border-bottom: 1px solid var(--g-neutral-100); color: var(--g-neutral-800); vertical-align: middle; transition: background var(--g-trans-fast); }
.g-table tr:hover td { background-color: var(--g-neutral-50); }
.g-table tr:last-child td { border-bottom: none; }
.g-table-actions { display: flex; align-items: center; gap: var(--g-space-2); justify-content: flex-end; opacity: 0; transition: opacity var(--g-trans-fast); }
.g-table tr:hover .g-table-actions { opacity: 1; } /* Reveal actions on hover */

/* Teklif/İş/Fatura "Kalemler" satır düzenleme tabloları — .g-table'ın standart 24px hücre
   dolgusu, sadece OKUMAK için tasarlanmıştır. Bir <input> bu dolguya kendi 14px dolgusunu da
   ekleyince (ör. "Miktar" 90px sütununda ~52px'lik dolgu kalıyor, sayı görünür kalacak yer
   kalmıyordu — "500,00" kesiliyor, "1" neredeyse görünmüyordu). Bu blok YALNIZCA .g-items-table
   sınıfını taşıyan tablolarda geçerlidir; genel .g-table (Firmalar/Teklifler/Faturalar listeleri
   vb.) hiç etkilenmez. */
.g-items-table th, .g-items-table td { padding: 10px 12px; }
.g-items-table .g-input, .g-items-table .g-select { padding: 8px 10px; font-size: 13.5px; }
.g-items-table input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.g-items-table thead th:nth-child(3),
.g-items-table thead th:nth-child(4),
.g-items-table thead th:nth-child(5),
.g-items-table thead th:nth-child(6),
.g-items-table thead th:nth-child(7) { text-align: right; }
.g-items-table tbody textarea.g-input { min-height: 40px; padding-top: 8px; }
/* Kaldır (×) butonu artık her zaman hafif görünür bir "buton" gibi okunuyor — önceden yalnızca
   satır hover'ında belirsiz bir ikon gibi duruyordu, kendi başına bir aksiyon olduğu belli değildi. */
.g-items-table .g-btn-icon.g-text-danger {
    background-color: var(--g-danger-50); border-radius: var(--g-radius-md);
    transition: background-color var(--g-trans-fast), transform var(--g-trans-fast);
}
.g-items-table .g-btn-icon.g-text-danger:hover { background-color: var(--g-danger-100); transform: scale(1.05); }

/* --------------------------------------------------------------------------
   AVATAR & USER PROFILE
   -------------------------------------------------------------------------- */
.g-avatar {
    width: 40px; height: 40px; border-radius: var(--g-radius-full); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--g-primary-500), var(--g-primary-700));
    color: #fff; font-weight: 600; font-size: 14px; text-transform: uppercase;
}
.g-avatar-sm { width: 28px; height: 28px; font-size: 11px; }

.g-user-profile {
    display: flex; align-items: center; gap: var(--g-space-3);
    background: none; border: none; cursor: pointer; padding: 6px 10px 6px 6px;
    border-radius: var(--g-radius-pill); transition: background var(--g-trans-fast);
}
.g-user-profile:hover { background-color: var(--g-neutral-100); }
.g-user-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.g-user-name { font-size: 13px; font-weight: 600; color: var(--g-text-main); }
.g-user-role { font-size: 11px; color: var(--g-text-muted); }

/* --------------------------------------------------------------------------
   BADGES & STATUS DOTS
   -------------------------------------------------------------------------- */
.g-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--g-radius-pill);
    font-size: 12px; font-weight: 600; line-height: 1.2;
}
.g-status-dot { width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; flex-shrink: 0;}
.g-status-dot.pulse { animation: g-dotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes g-dotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } }

.g-badge-success { background-color: var(--g-success-50); color: var(--g-success-700); border: 1px solid var(--g-success-200); }
.g-badge-warning { background-color: var(--g-warning-50); color: var(--g-warning-800); border: 1px solid var(--g-warning-200); }
.g-badge-danger { background-color: var(--g-danger-50); color: var(--g-danger-700); border: 1px solid var(--g-danger-200); }
.g-badge-info { background-color: var(--g-info-50); color: var(--g-info-700); border: 1px solid var(--g-info-200); }
.g-badge-neutral { background-color: var(--g-neutral-100); color: var(--g-neutral-600); border: 1px solid var(--g-neutral-200); }

/* Sosyal medya platform chip'leri (ikon otomatik, dosya olarak saklanmaz — bkz. SocialIcons) */
.g-social-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--g-radius-pill);
    background: var(--g-bg-surface-muted); border: 1px solid var(--g-border-color); font-size: 12px; font-weight: 600;
    color: var(--g-text-main); text-decoration: none; line-height: 1.2;
}
.g-social-chip:hover { background: var(--g-primary-50); border-color: var(--g-primary-200); color: var(--g-primary-700); }
.g-social-chip .g-social-icon-svg { flex-shrink: 0; }
.g-social-chip-remove {
    display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 2px;
    border: none; background: none; cursor: pointer; color: inherit; opacity: 0.6; padding: 0;
}
.g-social-chip-remove:hover { opacity: 1; color: var(--g-danger-600); }

/* --------------------------------------------------------------------------
   MODAL
   -------------------------------------------------------------------------- */
.g-modal-overlay {
    position: fixed; inset: 0; background-color: rgba(15, 23, 42, 0.5); backdrop-filter: blur(3px);
    z-index: var(--g-z-modal); display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity var(--g-trans-base);
}
.g-modal {
    background-color: var(--g-bg-surface); border-radius: var(--g-radius-xl); width: 100%; max-width: 500px;
    box-shadow: var(--g-shadow-xl); transform: scale(0.96); opacity: 0; transition: all var(--g-trans-base);
    max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.g-modal-overlay.active { opacity: 1; visibility: visible; }
.g-modal-overlay.active .g-modal { transform: scale(1); opacity: 1; }

.g-modal-header { padding: var(--g-space-5) var(--g-space-6); border-bottom: 1px solid var(--g-border-color); display: flex; justify-content: space-between; align-items: center; }
.g-modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; }
.g-modal-close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--g-neutral-400); transition: color var(--g-trans-fast); }
.g-modal-close:hover { color: var(--g-neutral-700); }
.g-modal-body { padding: var(--g-space-6); overflow-y: auto; flex: 1; }
.g-modal-footer { padding: var(--g-space-4) var(--g-space-6); border-top: 1px solid var(--g-border-color); display: flex; justify-content: flex-end; gap: var(--g-space-3); background-color: var(--g-bg-surface-muted); }

/* --------------------------------------------------------------------------
   DUYURU POPUP (Master > Duyurular → müşteri paneli) — mevcut .g-modal üzerine kurulu,
   tema/dark-mode uyumu --g-* token'lardan otomatik gelir, hardcoded beyaz arka plan YOK.
   -------------------------------------------------------------------------- */
#g-announcement-modal { padding: var(--g-space-4); }
.g-announcement-modal { max-width: 460px; }
.g-announcement-image {
    width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--g-radius-lg);
    margin-bottom: var(--g-space-4); display: block;
}
.g-announcement-title { margin: 0 0 var(--g-space-3); font-size: 19px; font-weight: 700; color: var(--g-text-main); }
.g-announcement-content { font-size: 14.5px; line-height: 1.6; color: var(--g-text-muted); }
.g-announcement-content p { margin: 0 0 var(--g-space-3); }
.g-announcement-content p:last-child { margin-bottom: 0; }
.g-announcement-content ul, .g-announcement-content ol { margin: 0 0 var(--g-space-3) var(--g-space-5); padding: 0; }
.g-announcement-content a { color: var(--g-primary-600); }

.g-announcement-type-badge {
    display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--g-radius-full);
    background-color: var(--g-neutral-100); color: var(--g-neutral-600);
}

/* NOT: --g-primary-* skalası bilinçli olarak koyu modda YENİDEN TANIMLANMIYOR (bkz.
   grafino-base.css) — bu yüzden rozet renkleri burada yalnızca koyu modda de otomatik
   koyulaşan success/warning/danger/info/neutral skalalarından seçilir. */
.g-announcement-type-important { background-color: var(--g-danger-50); color: var(--g-danger-700); }
.g-announcement-type-maintenance { background-color: var(--g-warning-50); color: var(--g-warning-700); }
.g-announcement-type-update { background-color: var(--g-info-50); color: var(--g-info-700); }
.g-announcement-type-campaign { background-color: var(--g-success-50); color: var(--g-success-700); }
.g-announcement-type-announcement { background-color: var(--g-neutral-100); color: var(--g-neutral-600); }
.g-announcement-type-advertisement { background-color: transparent; border: 1px solid var(--g-border-color); color: var(--g-text-muted); }

.g-announcement-footer { flex-wrap: wrap; }

/* Duyuru istatistik özeti (Master > Duyurular > İstatistikler modalı) — genel amaçlı, başka
   stat-kartı ihtiyacı olursa da yeniden kullanılabilir basit bir grid. */
.g-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g-space-3); }
.g-stat-box {
    background-color: var(--g-bg-surface-muted); border: 1px solid var(--g-border-color);
    border-radius: var(--g-radius-lg); padding: var(--g-space-3); text-align: center;
}
.g-stat-value { font-size: 22px; font-weight: 700; color: var(--g-text-main); line-height: 1.2; }
.g-stat-label { font-size: 11.5px; color: var(--g-text-muted); margin-top: 2px; }
@media (max-width: 480px) {
    .g-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    #g-announcement-modal { padding: var(--g-space-3); }
    .g-announcement-modal { max-width: 95vw; max-height: 90vh; }
    .g-announcement-image { max-height: 160px; }
}

/* --------------------------------------------------------------------------
   WIZARD (Master Admin > Yeni Müşteri) — .g-modal üzerine kurulu, yalnızca
   genişlik/adım göstergesi/adım paneli ekler; açma-kapama .g-modal ile AYNI
   window.Grafino.Modal API'sini kullanır, yeni bir JS mekanizması gerekmez.
   -------------------------------------------------------------------------- */
.g-modal.g-modal-wizard { max-width: 760px; }

.g-wizard-steps {
    display: flex; align-items: center; gap: 0; padding: var(--g-space-4) var(--g-space-6);
    border-bottom: 1px solid var(--g-border-color); background-color: var(--g-bg-surface-muted);
    overflow-x: auto;
}
/* NOT: .grafino-app a { color:...; text-decoration:none; } (bkz. grafino-base.css) tek-class'lı
   bir bağlantı kuralını ezebilir — bu yüzden adım göstergesi <button> (link değil) olarak
   kurulur ve rengi iki class'lı bileşik seçicilerle (.g-btn.g-btn-primary desenindeki AYNI
   yaklaşım) verilir, tek bir global reset'e karşı kırılgan kalmaz. */
.g-wizard-step { display: flex; align-items: center; gap: var(--g-space-2); flex-shrink: 0; }
.g-wizard-step:not(:last-child)::after {
    content: ""; width: 28px; height: 1px; background-color: var(--g-border-color); margin: 0 var(--g-space-2);
}
.g-wizard-step-dot {
    width: 26px; height: 26px; border-radius: var(--g-radius-full); background-color: var(--g-bg-surface);
    border: 1px solid var(--g-border-color); color: var(--g-text-muted); font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--g-trans-fast);
}
.g-wizard-step-label { font-size: 12.5px; color: var(--g-text-muted); font-weight: 600; white-space: nowrap; }
.g-wizard-step.is-active .g-wizard-step-dot { background-color: var(--g-primary-600); border-color: var(--g-primary-600); color: #fff; }
.g-wizard-step.is-active .g-wizard-step-label { color: var(--g-text-main); }
.g-wizard-step.is-done .g-wizard-step-dot { background-color: var(--g-success-500); border-color: var(--g-success-500); color: #fff; }

.g-wizard-panel { display: none; }
.g-wizard-panel.is-active { display: block; }

.g-wizard-summary-row {
    display: flex; justify-content: space-between; gap: var(--g-space-4); padding: var(--g-space-3) 0;
    border-bottom: 1px solid var(--g-border-color); font-size: 13.5px;
}
.g-wizard-summary-row:last-child { border-bottom: none; }
.g-wizard-summary-row .k { color: var(--g-text-muted); }
.g-wizard-summary-row .v { color: var(--g-text-main); font-weight: 600; text-align: right; }
.g-wizard-summary-group { margin-bottom: var(--g-space-5); }
.g-wizard-summary-group h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--g-text-muted); margin: 0 0 var(--g-space-2); }

/* --------------------------------------------------------------------------
   TALEP ZAMAN ÇİZELGESİ (Ayarlar > Abonelik > Taleplerim) — paket yükseltme/
   ödeme talebinin ✓ tamamlandı / ● aktif / ○ bekliyor adımları.
   -------------------------------------------------------------------------- */
.g-request-timeline { display: flex; flex-wrap: wrap; gap: var(--g-space-2) var(--g-space-4); }
.g-request-timeline-step { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--g-text-subtle); }
.g-request-timeline-dot {
    width: 20px; height: 20px; border-radius: var(--g-radius-full); display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; background: var(--g-bg-surface-muted); border: 1px solid var(--g-border-color); color: var(--g-text-subtle);
    flex-shrink: 0;
}
.g-request-timeline-step.is-done .g-request-timeline-dot { background: var(--g-success-500); border-color: var(--g-success-500); color: #fff; }
.g-request-timeline-step.is-done .g-request-timeline-label { color: var(--g-text-main); }
.g-request-timeline-step.is-active .g-request-timeline-dot { background: var(--g-primary-600); border-color: var(--g-primary-600); color: #fff; }
.g-request-timeline-step.is-active .g-request-timeline-label { color: var(--g-text-main); font-weight: 600; }
.g-request-timeline-step.is-rejected .g-request-timeline-dot { background: var(--g-danger-500,#ef4444); border-color: var(--g-danger-500,#ef4444); color: #fff; }
.g-request-timeline-step.is-rejected .g-request-timeline-label { color: var(--g-danger-600,#dc2626); font-weight: 600; }

/* --------------------------------------------------------------------------
   DRAWER
   -------------------------------------------------------------------------- */
.g-drawer-overlay {
    position: fixed; inset: 0; background-color: rgba(15, 23, 42, 0.5); backdrop-filter: blur(3px);
    z-index: var(--g-z-drawer); opacity: 0; visibility: hidden; transition: opacity var(--g-trans-base);
}
.g-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 400px;
    background-color: var(--g-bg-surface); box-shadow: -4px 0 24px rgba(0,0,0,0.1);
    z-index: calc(var(--g-z-drawer) + 1); transform: translateX(100%); transition: transform var(--g-trans-base);
    display: flex; flex-direction: column;
}
.g-drawer-overlay.active { opacity: 1; visibility: visible; }
.g-drawer-overlay.active + .g-drawer, .g-drawer.active { transform: translateX(0); }
.g-drawer-header { padding: var(--g-space-5) var(--g-space-6); border-bottom: 1px solid var(--g-border-color); display: flex; justify-content: space-between; align-items: center; }
.g-drawer-header h3 { margin: 0; font-size: 18px; }
.g-drawer-close { background: none; border: none; color: var(--g-neutral-400); cursor: pointer; transition: color var(--g-trans-fast); }
.g-drawer-close:hover { color: var(--g-neutral-700); }
.g-drawer-body { padding: var(--g-space-6); overflow-y: auto; flex: 1; }
.g-drawer-footer { padding: var(--g-space-4) var(--g-space-6); border-top: 1px solid var(--g-border-color); background-color: var(--g-bg-surface-muted); display:flex; justify-content: flex-end; gap: var(--g-space-2);}

/* --------------------------------------------------------------------------
   TOAST
   -------------------------------------------------------------------------- */
.g-toast-container { position: fixed; top: var(--g-space-6); right: var(--g-space-6); z-index: var(--g-z-toast); display: flex; flex-direction: column; gap: var(--g-space-3); }
.g-toast {
    min-width: 300px; max-width: 400px; background-color: var(--g-bg-surface); border-radius: var(--g-radius-lg); box-shadow: var(--g-shadow-xl);
    padding: var(--g-space-4); display: flex; align-items: flex-start; gap: var(--g-space-3);
    transform: translateX(120%); opacity: 0; transition: all var(--g-trans-base); position: relative; overflow: hidden; border: 1px solid var(--g-border-color);
}
.g-toast.show { transform: translateX(0); opacity: 1; }
.g-toast-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.g-toast-success .g-toast-icon { color: var(--g-success-500); }
.g-toast-error .g-toast-icon { color: var(--g-danger-500); }
.g-toast-warning .g-toast-icon { color: var(--g-warning-500); }
.g-toast-info .g-toast-icon { color: var(--g-info-500); }
.g-toast-notify .g-toast-icon { color: var(--g-primary-500); }
/* Telefon bildirimi gibi tıklanabilir banner — yeni bildirim/mesaj geldiğinde, tıklayınca
   ilgili sayfaya götürür (bkz. Toast.show(..., { link })). */
.g-toast-clickable { cursor: pointer; }
.g-toast-clickable:hover { box-shadow: var(--g-shadow-xl), 0 0 0 1px var(--g-primary-500); }
.g-toast-content { flex: 1; }
.g-toast-title { font-weight: 600; font-size: 14px; color: var(--g-text-main); margin-bottom: 2px; }
.g-toast-message { font-size: 13px; color: var(--g-text-muted); }
.g-toast-close { background: none; border: none; color: var(--g-neutral-400); cursor: pointer; }
.g-toast-close:hover { color: var(--g-text-main); }
.g-toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background-color: var(--g-primary-500); width: 100%; transform-origin: left; animation: g-toastProgress var(--g-toast-duration, 4000ms) linear 1 forwards; }
.g-toast-success .g-toast-progress { background-color: var(--g-success-500); }
.g-toast-error .g-toast-progress { background-color: var(--g-danger-500); }
.g-toast-warning .g-toast-progress { background-color: var(--g-warning-500); }
@keyframes g-toastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* --------------------------------------------------------------------------
   DROPDOWN
   -------------------------------------------------------------------------- */
.g-dropdown { position: relative; display: inline-block; }
.g-dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 8px); background-color: var(--g-bg-surface);
    min-width: 200px; border-radius: var(--g-radius-md); box-shadow: var(--g-shadow-xl); border: 1px solid var(--g-border-color);
    padding: 8px 0; z-index: var(--g-z-dropdown); opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95);
    transform-origin: top right; transition: all var(--g-trans-fast);
}
.g-dropdown.open .g-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.g-dropdown-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--g-neutral-700);
    font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--g-trans-fast);
    text-decoration: none; width: 100%; border: none; background: none; text-align: left;
}
.g-dropdown-item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;}
.g-dropdown-item:hover { background-color: var(--g-neutral-50); color: var(--g-neutral-900); }

/* --------------------------------------------------------------------------
   TEMA SEÇİCİ (Açık / Koyu / Sistem) — yalnızca Müşteri Paneli topbar kullanıcı
   menüsünde (bkz. templates/partials/topbar.php, .g-dropdown-item ile aynı bağlamda).
   -------------------------------------------------------------------------- */
.g-theme-picker {
    display: flex; gap: 3px; margin: 8px 16px 8px; padding: 3px;
    background: var(--g-neutral-100); border-radius: var(--g-radius-md);
}
.g-theme-picker-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 4px; font-size: 11.5px; font-weight: 600; font-family: inherit;
    color: var(--g-neutral-500); background: none; border: none; border-radius: calc(var(--g-radius-md) - 2px);
    cursor: pointer; transition: all var(--g-trans-fast); white-space: nowrap;
}
.g-theme-picker-btn:hover { color: var(--g-neutral-800); }
.g-theme-picker-btn.active { background-color: var(--g-bg-surface); color: var(--g-text-main); box-shadow: var(--g-shadow-sm); }

/* --------------------------------------------------------------------------
   TOOLTIP
   -------------------------------------------------------------------------- */
[data-g-tooltip] { position: relative; cursor: pointer; }
[data-g-tooltip]::before, [data-g-tooltip]::after {
    position: absolute; opacity: 0; visibility: hidden; transition: all var(--g-trans-fast); z-index: var(--g-z-tooltip); pointer-events: none;
}
[data-g-tooltip]::before {
    content: attr(data-g-tooltip); background: var(--g-neutral-900); color: #fff; font-size: 12px; padding: 6px 10px;
    border-radius: var(--g-radius-sm); bottom: 100%; left: 50%; transform: translate(-50%, -4px); white-space: nowrap; font-weight: 500; box-shadow: var(--g-shadow-md);
}
[data-g-tooltip]::after { content: ''; border: 5px solid transparent; border-top-color: var(--g-neutral-900); bottom: 100%; left: 50%; transform: translate(-50%, 6px); }
[data-g-tooltip]:hover::before, [data-g-tooltip]:hover::after { opacity: 1; visibility: visible; }
[data-g-tooltip]:hover::before { transform: translate(-50%, -8px); }
[data-g-tooltip]:hover::after { transform: translate(-50%, 2px); }

/* --------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */
.g-pagination { display: flex; align-items: center; gap: 4px; }
.g-page-item {
    display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px;
    border-radius: var(--g-radius-md); color: var(--g-neutral-600); font-weight: 500; font-size: 13px;
    border: 1px solid transparent; transition: all var(--g-trans-fast); cursor: pointer; background: none; text-decoration: none;
}
.g-page-item:hover:not(:disabled) { background-color: var(--g-neutral-100); color: var(--g-neutral-900); }
.g-page-item.active { background-color: var(--g-primary-600); color: #fff; box-shadow: var(--g-shadow-sm); border-color: var(--g-primary-600);}
.g-page-item:disabled, .g-page-item.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* --------------------------------------------------------------------------
   SEGMENTED CONTROL
   -------------------------------------------------------------------------- */
.g-segmented-control { display: inline-flex; background: var(--g-neutral-100); border-radius: var(--g-radius-md); padding: 4px; gap: 2px; }
.g-segmented-item {
    padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--g-neutral-500);
    border-radius: calc(var(--g-radius-md) - 2px); cursor: pointer; transition: all var(--g-trans-fast); user-select: none;
}
.g-segmented-item:hover { color: var(--g-neutral-800); }
.g-segmented-item.active { background-color: var(--g-bg-surface); color: var(--g-text-main); font-weight: 600; box-shadow: var(--g-shadow-sm); }

/* --------------------------------------------------------------------------
   SPINNER / LOADING
   -------------------------------------------------------------------------- */
.g-spinner {
    width: 20px; height: 20px; border-radius: 50%; display: inline-block; flex-shrink: 0;
    border: 2px solid var(--g-neutral-200); border-top-color: var(--g-primary-500);
    animation: g-spin 0.8s linear infinite;
}
.g-loading-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background-color: var(--g-overlay-bg); backdrop-filter: blur(1px); border-radius: inherit; z-index: 5;
}

/* --------------------------------------------------------------------------
   EMPTY STATE, SKELETON, ALERT
   -------------------------------------------------------------------------- */
.g-empty-state { padding: var(--g-space-12) var(--g-space-6); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--g-neutral-300); border-radius: var(--g-radius-xl); background: var(--g-bg-surface-muted); }
.g-empty-icon { width: 64px; height: 64px; color: var(--g-neutral-400); margin-bottom: var(--g-space-4); stroke-width: 1;}
.g-empty-title { font-size: 18px; font-weight: 600; color: var(--g-neutral-800); margin-bottom: var(--g-space-2); }
.g-empty-desc { color: var(--g-neutral-500); max-width: 400px; margin-bottom: var(--g-space-6); }

.g-skeleton {
    background: var(--g-neutral-200); background: linear-gradient(90deg, var(--g-neutral-200) 25%, var(--g-neutral-100) 50%, var(--g-neutral-200) 75%);
    background-size: 200% 100%; animation: g-shimmer 1.5s infinite linear; border-radius: var(--g-radius-md);
}
@keyframes g-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.g-alert { padding: 14px 16px; border-radius: var(--g-radius-md); margin-bottom: var(--g-space-4); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.g-alert-success { background-color: var(--g-success-50); color: var(--g-success-800); border: 1px solid var(--g-success-200); }
.g-alert-warning { background-color: var(--g-warning-50); color: var(--g-warning-800); border: 1px solid var(--g-warning-200); }
.g-alert-danger { background-color: var(--g-danger-50); color: var(--g-danger-800); border: 1px solid var(--g-danger-200); }
.g-alert-info { background-color: var(--g-info-50); color: var(--g-info-800); border: 1px solid var(--g-info-200); }

/* --- PAGE HEADER & BREADCRUMBS --- */
.g-page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--g-space-8); }
.g-breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--g-neutral-500); margin-bottom: var(--g-space-2); }
.g-breadcrumbs a { color: var(--g-neutral-500); transition: color var(--g-trans-fast);}
.g-breadcrumbs a:hover { color: var(--g-primary-600); }
.g-breadcrumbs-separator { color: var(--g-neutral-400); }
.g-breadcrumbs-current { color: var(--g-neutral-900); font-weight: 500; }
.g-page-title { margin-bottom: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em;}

/* --- CHARTS (CSS Bars) --- */
.g-chart-container { display: flex; align-items: flex-end; gap: 12px; height: 200px; padding: var(--g-space-4) 0; }
.g-chart-bar-wrap { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; position: relative; text-decoration: none; cursor: pointer; }
.g-chart-bar { width: 100%; background: linear-gradient(180deg, var(--g-primary-400) 0%, var(--g-primary-600) 100%); border-radius: var(--g-radius-sm) var(--g-radius-sm) 0 0; transition: height 1s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s, transform 0.15s; height: 0; box-shadow: 0 -2px 10px rgba(37, 99, 235, 0.2);}
.g-chart-bar-wrap:hover .g-chart-bar { filter: brightness(1.15); transform: scaleX(1.06); }
.g-chart-bar-wrap:hover .g-chart-label { color: var(--g-primary-600); }
.g-chart-label { font-size: 11px; color: var(--g-neutral-500); font-weight: 500; text-transform: uppercase; transition: color 0.15s; }

/* --- Finans: iki serili (Tahsilat/Ödeme) gruplu çubuk grafik --- */
.g-chart-bar-group { display: flex; align-items: flex-end; gap: 4px; width: 100%; height: 100%; }
.g-chart-bar-group .g-chart-bar { border-radius: var(--g-radius-sm) var(--g-radius-sm) 0 0; }
.g-chart-bar-success { background: linear-gradient(180deg, var(--g-success-500) 0%, var(--g-success-700) 100%) !important; box-shadow: 0 -2px 10px rgba(22, 163, 74, 0.2) !important; }
.g-chart-bar-danger { background: linear-gradient(180deg, var(--g-danger-500) 0%, var(--g-danger-700) 100%) !important; box-shadow: 0 -2px 10px rgba(220, 38, 38, 0.2) !important; }
.g-chart-legend { display: flex; gap: var(--g-space-4); align-items: center; }
.g-chart-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--g-neutral-500); }
.g-chart-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* --- ANIMATION STAGGER --- */
.g-stagger-1 { animation-delay: 50ms !important; }
.g-stagger-2 { animation-delay: 100ms !important; }
.g-stagger-3 { animation-delay: 150ms !important; }
.g-stagger-4 { animation-delay: 200ms !important; }
.g-stagger-5 { animation-delay: 250ms !important; }

/* --------------------------------------------------------------------------
   CALENDAR (month grid)
   -------------------------------------------------------------------------- */
.g-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.g-calendar-weekday {
    padding: var(--g-space-3) var(--g-space-2); text-align: center; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--g-neutral-500); border-bottom: 1px solid var(--g-border-color);
}
.g-calendar-day {
    min-height: 96px; padding: var(--g-space-2); border-right: 1px solid var(--g-border-color); border-bottom: 1px solid var(--g-border-color);
    display: flex; flex-direction: column; gap: 4px; transition: background var(--g-trans-fast);
}
.g-calendar-day:nth-child(7n) { border-right: none; }
.g-calendar-day:hover { background: var(--g-bg-surface-muted); }
.g-calendar-day-empty { background: var(--g-neutral-50); }
.g-calendar-day.is-today { background: var(--g-primary-50); }
.g-calendar-day-number { font-size: 13px; font-weight: 600; color: var(--g-neutral-600); }
.g-calendar-day.is-today .g-calendar-day-number { color: var(--g-primary-700); }
.g-calendar-events { display: flex; flex-direction: column; gap: 2px; }
.g-calendar-event {
    font-size: 11px; font-weight: 500; padding: 2px 6px; border-radius: var(--g-radius-sm); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; text-decoration: none; transition: filter var(--g-trans-fast);
}
.g-calendar-event:hover { filter: brightness(0.95); }
.g-calendar-event-primary { background: var(--g-primary-50); color: var(--g-primary-700); }
.g-calendar-event-info { background: var(--g-info-50); color: var(--g-info-700); }
.g-calendar-event-warning { background: var(--g-warning-50); color: var(--g-warning-800); }
.g-calendar-event-danger { background: var(--g-danger-50); color: var(--g-danger-700); }
.g-calendar-event-neutral { background: var(--g-neutral-100); color: var(--g-neutral-600); }
.g-calendar-event-success { background: var(--g-success-50); color: var(--g-success-700); }

/* Gecikmiş: türün kendi rengi korunur, sol kenarlık + nabız noktasıyla üzerine eklenir (ayrı bir
   renk kategorisi AÇMAZ — "hangi tür" ile "gecikti mi" iki bağımsız sinyal olarak kalır). */
.g-calendar-event.is-overdue { border-left: 3px solid var(--g-danger-600); font-weight: 600; }
.g-calendar-event.is-completed { opacity: 0.6; text-decoration: line-through; }

/* Mobil: pill listesi yerine (metin küçük ekranda okunaksızlaşır) her gün için en fazla 4 renkli
   nokta gösterilir; güne dokunmak altta o günün olaylarını bir panelde açar (bkz. calendar.js).
   Önceki davranış (.g-calendar-event{display:none}) mobilde takvimi tamamen boş gösteriyordu. */
.g-calendar-day-dots { display: none; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.g-calendar-day-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.g-calendar-day-dot.primary { background: var(--g-primary-500); }
.g-calendar-day-dot.info { background: var(--g-info-500); }
.g-calendar-day-dot.warning { background: var(--g-warning-500); }
.g-calendar-day-dot.danger { background: var(--g-danger-500); }
.g-calendar-day-dot.neutral { background: var(--g-neutral-400); }
.g-calendar-day-dot.success { background: var(--g-success-500); }

#g-calendar-day-panel { display: none; }
#g-calendar-day-panel.open { display: block; }

@media (max-width: 768px) {
    .g-calendar-day { min-height: 52px; font-size: 12px; cursor: pointer; }
    .g-calendar-events { display: none; }
    .g-calendar-day-dots { display: flex; }
}

/* --------------------------------------------------------------------------
   FIRMS MODULE — always-visible row actions, delete confirm, identity card,
   inline copy icons
   -------------------------------------------------------------------------- */

/* 3-nokta işlem menüsü hover'da değil, her zaman görünür (masaüstü + mobil) */
.g-firms-view .g-table-actions { opacity: 1; }
.g-quotes-view .g-table-actions { opacity: 1; }
.g-categories-view .g-table-actions { opacity: 1; }

.g-dropdown-item.g-text-danger:hover { background-color: var(--g-danger-50); color: var(--g-danger-700); }

/* Kimlik kartı: premium/kurumsal his için ince üst şerit + belirgin gölge */
.g-firm-profile-card {
    position: relative; overflow: hidden;
    box-shadow: var(--g-shadow-md);
    border: 1px solid var(--g-border-color);
}
.g-firm-profile-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--g-primary-500), var(--g-info-400), var(--g-primary-600));
}
.g-firm-profile-card .g-card-body { padding-top: calc(var(--g-space-6) + 2px); }

/* Küçük satır-içi kopyalama ikon butonu (metin etiketli buton yerine) */
.g-copy-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 24px; height: 24px; padding: 0; border-radius: var(--g-radius-sm); border: none;
    background: transparent; color: var(--g-neutral-400); cursor: pointer; transition: all var(--g-trans-fast);
}
.g-copy-icon-btn:hover { background: var(--g-primary-50); color: var(--g-primary-600); }
.g-copy-icon-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.g-firm-info-row { display: flex; align-items: center; gap: 6px; }

/* Silme onayı: yaz-doğrula alanı ve tehlike vurgusu */
.g-delete-confirm-box {
    background: var(--g-danger-50); border: 1px solid var(--g-danger-200); border-radius: var(--g-radius-md);
    padding: var(--g-space-4); margin-bottom: var(--g-space-4);
}
.g-delete-confirm-box .g-font-semibold { color: var(--g-danger-800); }
#g-firm-delete-confirm-input.g-input-danger-focus:focus { border-color: var(--g-danger-400); box-shadow: 0 0 0 3px var(--g-danger-100); }
.g-input-danger-focus:focus { border-color: var(--g-danger-400); box-shadow: 0 0 0 3px var(--g-danger-100); }

/* --------------------------------------------------------------------------
   SERVICES MODULE — modern service catalog cards
   -------------------------------------------------------------------------- */

.g-services-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--g-space-5);
}
.g-service-card {
    background: var(--g-bg-surface); border: 1px solid var(--g-border-color); border-radius: var(--g-radius-lg);
    padding: var(--g-space-5); display: flex; flex-direction: column; gap: var(--g-space-3);
    transition: box-shadow var(--g-trans-fast), transform var(--g-trans-fast), border-color var(--g-trans-fast);
    position: relative; min-width: 0;
}
.g-service-card:hover { box-shadow: var(--g-shadow-md); border-color: var(--g-primary-200); transform: translateY(-2px); }
.g-service-card.is-inactive { opacity: 0.85; }
.g-service-card.is-archived { background: var(--g-bg-surface-muted); }

.g-service-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--g-space-2); }
.g-service-icon {
    width: 44px; height: 44px; border-radius: var(--g-radius-md); display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative;
}
.g-service-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; z-index: 1; position: relative; }
.g-service-icon.primary { background: linear-gradient(135deg, var(--g-primary-100), var(--g-primary-200)); color: var(--g-primary-700); }
.g-service-icon.success { background: linear-gradient(135deg, var(--g-success-100), var(--g-success-200)); color: var(--g-success-700); }
.g-service-icon.warning { background: linear-gradient(135deg, var(--g-warning-100), var(--g-warning-200)); color: var(--g-warning-700); }
.g-service-icon.info { background: linear-gradient(135deg, var(--g-info-100), var(--g-info-200)); color: var(--g-info-700); }
.g-service-icon.danger { background: linear-gradient(135deg, var(--g-danger-100), var(--g-danger-200)); color: var(--g-danger-700); }
.g-service-icon.neutral { background: linear-gradient(135deg, var(--g-neutral-100), var(--g-neutral-200)); color: var(--g-neutral-600); }

/* Hizmet kartındaki 3 nokta menüsü — hover'da değil her zaman görünür (masaüstü + mobil) */
.g-service-card-menu { opacity: 1; }

.g-service-name {
    font-size: 15px; font-weight: 600; color: var(--g-neutral-900); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.g-service-id { font-size: 11px; color: var(--g-text-subtle); font-weight: 500; }
.g-service-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.g-service-desc { font-size: 12px; color: var(--g-neutral-500); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.g-service-price-row {
    display: flex; align-items: baseline; gap: 6px; margin-top: auto; padding-top: var(--g-space-2);
    border-top: 1px solid var(--g-border-color);
}
.g-service-price { font-size: 20px; font-weight: 700; color: var(--g-neutral-900); }
.g-service-unit { font-size: 12px; color: var(--g-text-subtle); font-weight: 500; }
.g-service-vat { font-size: 11px; color: var(--g-text-subtle); margin-left: auto; }

.g-service-status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-2); }

@media (max-width: 640px) {
    .g-services-grid { grid-template-columns: 1fr; gap: var(--g-space-4); }
}

/* Sınıflandırma (Sektör/Kategori/Alt Kategori) cascade seçimi — form içinde girinti ile hiyerarşiyi görsel olarak yansıtır */
.g-cascade-group { border-left: 2px solid var(--g-border-color); padding-left: var(--g-space-4); margin-left: 2px; }

/* Fiyat geçmişi zaman çizelgesi satırı */
.g-price-history-row {
    display: flex; align-items: flex-start; gap: var(--g-space-3); padding: var(--g-space-3) 0;
    border-bottom: 1px solid var(--g-border-color);
}
.g-price-history-row:last-child { border-bottom: none; }

/* --------------------------------------------------------------------------
   İLETİŞİM MESAJLARI — Master Admin mesaj detayı + yanıt geçmişi
   -------------------------------------------------------------------------- */
.g-divider { height: 1px; background: var(--g-border-color); border: none; margin: 0; }

.g-contact-detail-meta {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--g-space-4);
    padding: var(--g-space-4); background: var(--g-bg-surface-muted); border-radius: var(--g-radius-md);
}

.g-contact-thread-item {
    padding: var(--g-space-3) var(--g-space-4); border: 1px solid var(--g-border-color);
    border-radius: var(--g-radius-md); background: var(--g-primary-50); margin-bottom: var(--g-space-2);
}
.g-contact-thread-message { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.g-price-history-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-primary-500); margin-top: 6px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   DESTEK TALEPLERİ (Canlı Destek) — Müşteri Paneli + Master Admin konuşma ekranı.
   İletişim Mesajları'ndan AYRI bir sistemdir, kendi sınıf öneki (g-support-*) kullanır.
   -------------------------------------------------------------------------- */
.g-support-summary-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--g-space-4);
}
.g-support-summary-card .g-card-body { padding: var(--g-space-5); }

.g-support-thread { display: flex; flex-direction: column; gap: var(--g-space-3); }

.g-support-msg {
    max-width: 78%; padding: var(--g-space-3) var(--g-space-4); border-radius: var(--g-radius-lg);
    border: 1px solid var(--g-border-color); background: var(--g-bg-surface-muted);
}
.g-support-msg-customer { align-self: flex-start; border-bottom-left-radius: 4px; }
.g-support-msg-master {
    align-self: flex-end; background: var(--g-primary-50); border-color: var(--g-primary-200);
    border-bottom-right-radius: 4px;
}
.g-support-msg-note { background: var(--g-warning-50); border-color: var(--g-warning-200); }
.g-support-msg-text { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }

.g-support-system-line {
    text-align: center; font-size: 12px; color: var(--g-text-subtle); padding: 4px 0;
}

.g-support-attachment-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: var(--g-space-2);
    font-size: 12.5px; font-weight: 600; color: var(--g-primary-700); text-decoration: none;
}
.g-support-attachment-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .g-support-msg { max-width: 92%; }
}

/* --------------------------------------------------------------------------
   Destek Merkezi (Canlı Destek 2.0) — hub kartları + müşteri paneli canlı sohbet
   -------------------------------------------------------------------------- */
.g-support-hub-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--g-space-5);
    max-width: 860px;
}
.g-support-hub-card {
    display: flex; flex-direction: column; gap: var(--g-space-2); text-decoration: none;
    background: var(--g-bg-surface); border: 1px solid var(--g-border-color); border-radius: var(--g-radius-lg);
    padding: var(--g-space-6); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    color: var(--g-text-main);
}
.g-support-hub-card:hover { transform: translateY(-2px); box-shadow: var(--g-shadow-md); border-color: var(--g-primary-300); }
.g-support-hub-card-live { border-color: var(--g-primary-200); background: var(--g-primary-50); }
.g-support-hub-icon { font-size: 32px; line-height: 1; margin-bottom: var(--g-space-2); }
.g-support-hub-card h2 { margin: 0; font-size: 17px; font-weight: 700; }
.g-support-hub-card p { margin: 0; font-size: 13.5px; color: var(--g-text-muted); flex: 1; }
.g-support-hub-card .g-btn { align-self: flex-start; pointer-events: none; margin-top: var(--g-space-2); }

.g-live-chat-card .g-card-body { min-height: 320px; }
.g-lc-stage { display: none; }

.g-lc-start-intro { text-align: center; margin-bottom: var(--g-space-5); }
.g-lc-start-icon { font-size: 30px; margin-bottom: var(--g-space-2); }
.g-lc-start-intro h2 { margin: 0 0 4px; font-size: 16px; }

.g-lchat-connecting-dots { display: flex; gap: 6px; justify-content: center; }
.g-lchat-connecting-dots span {
    width: 9px; height: 9px; border-radius: 50%; background: var(--g-primary-600);
    animation: g-lchat-bounce 1.1s infinite ease-in-out both;
}
.g-lchat-connecting-dots span:nth-child(2) { animation-delay: 0.15s; }
.g-lchat-connecting-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes g-lchat-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}
#g-lc-connecting { text-align: center; padding: var(--g-space-8) 0; }

.g-lc-thread {
    max-height: 420px; overflow-y: auto; padding: var(--g-space-3);
    background: var(--g-bg-surface-muted); border-radius: var(--g-radius-lg); position: relative;
}
.g-lc-typing-indicator { font-size: 12px; color: var(--g-text-subtle); padding: 4px 2px; font-style: italic; }
.g-lc-new-msg-indicator {
    position: sticky; bottom: 4px; margin: 0 auto; width: fit-content; cursor: pointer;
    background: var(--g-primary-600); color: #fff; font-size: 12px; font-weight: 600;
    padding: 5px 12px; border-radius: 999px; box-shadow: var(--g-shadow-md);
}

.g-lc-stars { display: flex; gap: 6px; font-size: 34px; line-height: 1; }
.g-lc-star { color: var(--g-border-color-strong, var(--g-border-color)); cursor: pointer; transition: color 0.1s ease; user-select: none; }
.g-lc-star.active { color: var(--g-warning-500, #f59e0b); }

@media (max-width: 640px) {
    .g-support-hub-grid { grid-template-columns: 1fr; }
    .g-lc-thread { max-height: 320px; }
    .g-lc-stars { font-size: 28px; }
}