/* ═══════════════════════════════════════════════════════════════════════════
Shema — Ek Stiller
Bootstrap 3 Cyborg temasi ustune yalnizca Shema'ya ozgu siniflar.
Tum temel bilesim Bootstrap native kullanilir (panel, label, badge,
btn, table, alert, well, progress-bar, list-group, vb.)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Global ─────────────────────────────────────────────────────────────── */
::selection
{
background:
rgba(42, 159, 214, 0.35);
color:
#fff;
}
::-moz-selection
{
background:
rgba(42, 159, 214, 0.35);
color:
#fff;
}
::placeholder
{
color:
#777 !important;
opacity:
1 !important;
}
::-webkit-input-placeholder
{
color:
#777 !important;
opacity:
1 !important;
}
::-moz-placeholder
{
color:
#777 !important;
opacity:
1 !important;
}
/* Spinbox (number input) arrows */
input[type = "number"]
{
-moz-appearance : textfield;
appearance:
auto;
}
input[type = "number"] ::-webkit-inner-spin-button,
input[type = "number"] ::-webkit-outer-spin-button
{
-webkit-appearance : inner-spin-button;
opacity:
1;
height:
auto;
cursor:
pointer;
}
/* ── Layout Shell ────────────────────────────────────────────────────────── */
.navbar-inverse
{
min-height : 50px !important;
height:
50px;
position:
relative;
border:
none !important;
border-bottom : 1px solid rgba(42, 159, 214, 0.12) !important;
box-shadow : 0 1px 12px rgba(0, 0, 0, 0.4);
padding:
0;
}
.navbar-inverse.container-fluid
{
padding:
0;
height:
50px;
}
.navbar-inverse.navbar-header
{
margin:
0;
height:
50px;
}
.navbar-inverse.navbar-collapse
{
position:
relative;
padding:
0 64px;
height:
50px !important;
min-height : 50px !important;
max-height : 50px !important;
display:
flex !important;
align-items : center;
overflow:
visible !important;
border-top : none !important;
}
.navbar-inverse.navbar-collapse >.navbar-form.navbar-left,
.navbar-inverse.navbar-collapse >.navbar-form.navbar-right
{
display:
contents !important;
margin:
0 !important;
padding:
0 !important;
}
.content-area
{
/* Alt 40px = fixed .bottom-player-panel header seridi payi: sayfa icerigi
(en alttaki satirlar) panelin arkasinda kalmasin. Ust 8 / yan 20 korunur. */
padding:
8px 20px 40px;
/* 53px = navbar ustu 3px bosluk + 50px navbar yuksekligi (olculmus gercek
ust offset). Onceki 50px, navbarin top:3 boslugunu saymadigi icin
content-area tabanini viewport disina 3px tasiriyor ve sayfaya (body)
ikinci bir scrollbar ekliyordu. 53px ile content-area y=53..innerHeight
araligini tam doldurur; yalnizca tablo wrapper'i kendi icinde scroll eder. */
min-height : calc(100vh - 53px);
max-height : calc(100vh - 53px);
overflow-y : auto;
overflow-x : auto;
}
.content-area.public-content-area
{
min-height : 100vh;
max-height : 100vh;
padding-bottom : 0;
}
.mobile-workspace-nav
{
display:
none;
}
.mobile-more-panel
{
display:
none;
}
.mobile-nav-public-hidden
{
display:
none !important;
}
.sortable-table-wrapper
{
max-width : 100% ;
}
.sortable-table
{
margin-bottom : 0;
}
/* ── Navbar Enhancements ─────────────────────────────────────────────────── */
.navbar-nav
{
display:
flex;
align-items : center;
justify-content : stretch;
gap:
0;
width:
100% ;
float : none;
margin:
0;
padding:
0;
box-sizing : border-box;
height:
50px;
}
.navbar-nav > li
{
float : none;
height:
50px;
display:
flex;
align-items : center;
justify-content : center;
flex:
1 1 0;
min-width : 0;
}
.navbar-inverse.navbar-nav
{
margin-top : 0;
margin-bottom : 0;
}
.navbar-nav > li > a
{
padding:
0 10px;
line-height : 50px;
height:
50px;
transition:
color 0.2s, background 0.2s;
position:
relative;
display:
flex;
align-items : center;
justify-content : center;
width:
100% ;
text-align : center;
white-space : nowrap;
}
.navbar-nav > li.active > a::after
{
display:
none;
}
.navbar-brand
{
letter-spacing : 0.04em;
}
.navbar-nav > li.navbar-settings-item > a
{
font-size : 20px;
}
.navbar.nav > li.navbar-globe-item > a
{
height:
50px;
line-height : 50px;
}
/* ── WDialog global styling ─────────────────────────────────────────────── */
.modal-dialog
{
max-width : 460px;
}
.modal-content, .dialog-layout.modal-content
{
background:
#222 !important;
border:
none !important;
box-shadow : inset 0 1px 0 rgba(255, 255, 255, 0.06)
, 0 0 0 1px rgba(255, 255, 255, 0.07)
, 0 4px 16px rgba(0, 0, 0, 0.4)
, 0 12px 48px rgba(0, 0, 0, 0.3) !important;
}
.modal-header
{
padding:
4px 10px;
min-height : 0;
border-bottom : 1px solid #333;
display:
flex;
align-items : center;
justify-content : space-between;
}
.modal-header.close
{
margin:
0;
font-size : 14px;
padding:
2px 6px;
order:
2;
}
.modal-header h4
{
font-size : 11px !important;
font-weight : 600;
line-height : 1.2;
margin:
0;
text-transform : uppercase;
letter-spacing : 0.05em;
color:
#888;
}
.modal-body
{
padding:
10px 14px;
}
.modal-footer
{
padding:
10px 0 0 0;
border-top : 1px solid #333;
display:
flex;
gap:
8px;
}
/* Standart dialog footer: butonlar tum genisligi ESIT bolusur (full-width
split). DOM sirasi: olumlu/uygula butonu once eklenir -> SOLDA; vazgec/
olumsuz sonra eklenir -> SAGDA. (Eski selector ".modal-footer.btn" bitisikti,
bosluk eksik oldugundan hicbir butona uymuyordu; dogrusu ".modal-footer .btn".)
Footer'in kendisi flex container olmali; aksi halde cocuklardaki flex:1 1 0
etkisiz kalir (BS3 modal-footer varsayilani text-align:right, flex degil). Bu
tek kural TUM WDialog/WMessageBox footer'larini esit-bolus standardina sokar. */
.modal-footer
{
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 8px;
}
/* BS3 clearfix pseudo-elementleri flex item olup hayalet bosluk acmasin */
.modal-footer::before,
.modal-footer::after
{
display: none;
}
.modal-footer .btn
{
flex:
1 1 0;
margin : 0;
min-width : 0;
font-size : 12px;
padding:
6px 10px;
text-align : center;
line-height : 20px;
}
/* Plan değiştir dialog — başlık ortalı, kapatma (x) sağda, footer butonları eşit */
.modal-header.plan-dialog-header
{
position: relative;
justify-content: center;
}
.modal-header.plan-dialog-header h4
{
text-align: center;
}
.modal-header.plan-dialog-header .close
{
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.modal-footer.plan-dialog-footer
{
gap: 8px;
}
.modal-footer.plan-dialog-footer .btn
{
flex: 1 1 0;
margin: 0;
}
/* Upload alanları — Wt uses form.btn for file uploads */
.modal-body form.btn
{
display:
block !important;
width:
100% !important;
padding:
10px !important;
border:
1px dashed #555 !important;
border-radius : 4px !important;
background:
#1a1a1a !important;
text-align : center !important;
margin-top : 2px;
box-shadow : none !important;
}
.modal-body form.btn:hover{border-color : #2a9fd6 !important;
background : #1e2a30 !important;
}
.modal-body form.btn input[type = "file"]
{
background:
transparent !important;
color:
#999 !important;
border:
none !important;
width:
100% !important;
cursor:
pointer;
}
.modal-body form.btn input[type = "file"] ::file-selector-button
{
background:
#2a9fd6;
color:
#fff;
border:
none;
padding:
3px 10px;
border-radius : 3px;
font-size : 11px;
cursor:
pointer;
margin-right : 8px;
}
.modal-body.form-control
{
font-size : 13px;
padding:
4px 8px;
height:
30px;
}
.modal-body strong
{
font-size : 12px;
}
.modal-body div[style *= "margin-top"]
{
margin-top : 8px !important;
margin-bottom : 2px !important;
}
/* ── Table toolbar: search left, buttons right ─────────────────────────── */
/* Filter row butonlari ayni height, grid ile hizali */
.table-filter-cell.btn
{
width:
calc(50% - 1px);
height:
30px;
padding:
4px 8px;
font-size : 12px;
}
.table-filter-cell.form-control
{
height:
30px;
padding:
4px 8px;
font-size : 12px;
}
.table-filter-cell select.form-control
{
height:
30px;
}
/* ── Model List ─────────────────────────────────────────────────────────── */
.model-list-container
{
margin:
8px 0;
max-height : 200px;
overflow-y : auto;
}
.model-list-item
{
display:
flex;
align-items : center;
justify-content : space-between;
padding:
3px 8px;
border-bottom : 1px solid #333;
font-size : 12px;
}
.model-list-item:hover
{
background:
rgba(42, 159, 214, 0.08);
}
.model-name
{
color:
#ccc;
font-family : monospace;
}
.model-remove-btn
{
padding:
0 5px !important;
line-height : 16px !important;
font-size : 10px !important;
}
.model-add-row
{
display:
flex !important;
gap:
6px;
margin-top : 6px;
}
.model-add-row.form-control
{
flex:
1;
}
/* ── Monitor Control Bar ────────────────────────────────────────────────── */
.monitor-bar
{
display:
flex;
align-items : center;
gap:
8px;
padding:
6px 12px !important;
margin-bottom : 10px;
border-left : 3px solid #555;
}
.monitor-bar.monitor-running{border-left-color : #5cb85c;
}
.monitor-bar.monitor-stopped
{
border-left-color : #d9534f;
}
.monitor-dot
{
display:
inline-block;
width:
8px;
height:
8px;
border-radius : 50% ;
background:
#555;
}
/* Lamba durum renkleri asagidaki .monitor-dot-running / .monitor-dot-stopped
bloklarinda; sinifi refresh() Wt setStyleClass ile dot elemanina ekler. */
/* Esnek bosluk: Start/Stop'u solda tutar, metrik chip'lerini saga iter. */
.monitor-spacer
{
flex : 1 1 auto;
min-width : 10px;
}
/* Disabled buton GRI gorunur (Wt setEnabled(false) -> [disabled] attribute).
Start hep yesil / Stop hep kirmizi sinifli kalir; pasifken griye ezilir. */
.monitor-bar .btn:disabled,
.monitor-bar .btn[disabled],
.monitor-bar .btn.disabled
{
background : #555 !important;
border-color : #555 !important;
color : #999 !important;
opacity : 1;
cursor : not-allowed;
}
.monitor-label
{
font-size : 11px;
color:
#888;
}
.monitor-poll-input
{
width:
50px !important;
text-align : center;
padding:
2px 4px !important;
height:
24px !important;
font-size : 12px !important;
}
.monitor-bar > *
{
flex-shrink : 0;
}
/* Esnek bosluk artik .monitor-spacer sinifiyla buyur (yukarida) — kirilgan
nth-child kuralina gerek yok (poll input kaldirilinca indeks kaymisti). */
.metric-chip
{
display:
inline-block;
font-size : 10px;
font-family : monospace;
color:
#aaa;
background:
rgba(255, 255, 255, 0.04);
border:
1px solid #333;
border-radius : 3px;
padding:
1px 6px;
white-space : nowrap;
}
/* ── Stat Wells ─────────────────────────────────────────────────────────── */
.stat-well
{
margin-bottom : 12px;
transition:
background 0.2s, box-shadow 0.3s, transform 0.2s, border-color 0.3s;
border:
1px solid transparent;
display:
flex !important;
align-items : center;
gap:
8px;
}
.stat-well:hover
{
background:
rgba(255, 255, 255, 0.03);
transform:
translateY(-2px);
}
.stat-well-primary:hover
{
box-shadow : 0 4px 24px rgba(42, 159, 214, 0.18);
border-color : rgba(42, 159, 214, 0.25);
}
.stat-well-warning:hover
{
box-shadow : 0 4px 24px rgba(255, 136, 0, 0.18);
border-color : rgba(255, 136, 0, 0.25);
}
.stat-well-success:hover
{
box-shadow : 0 4px 24px rgba(119, 179, 0, 0.18);
border-color : rgba(119, 179, 0, 0.25);
}
.stat-well-danger:hover
{
box-shadow : 0 4px 24px rgba(204, 0, 0, 0.18);
border-color : rgba(204, 0, 0, 0.25);
}
.stat-number
{
font-size : 36px;
font-weight : 700;
line-height : 1.2;
margin-left : auto;
}
.stat-label
{
font-size : 12px;
color:
#888;
text-transform : uppercase;
letter-spacing : 0.05em;
margin-top : 0;
}
/* ── Panel Enhancements ──────────────────────────────────────────────────── */
.panel
{
transition:
transform 0.2s ease, box-shadow 0.2s ease;
border:
none;
}
.panel[style *= "cursor"]:hover
{
transform:
translateY(-3px);
}
.panel-heading
{
border-bottom : 1px solid rgba(255, 255, 255, 0.05);
}
.panel-default >.panel-heading
{
background:
rgba(255, 255, 255, 0.025);
}
/* ── Table Enhancements ──────────────────────────────────────────────────── */
.table > thead > tr > th
{
font-size : 11px;
text-transform : uppercase;
letter-spacing : 0.06em;
color:
#2A9FD6;
font-weight : 600;
padding:
10px 8px;
border-bottom : 2px solid rgba(42, 159, 214, 0.25) !important;
}
.table > tbody > tr > td
{
border-color : rgba(255, 255, 255, 0.04) !important;
vertical-align : middle;
}
.table-hover > tbody > tr
{
transition:
background 0.15s;
}
.table-hover > tbody > tr:hover > td
{
background:
rgba(42, 159, 214, 0.05) !important;
}
.table-striped > tbody > tr:nth-of-type(odd)
{
background-color : rgba(255, 255, 255, 0.015);
}
/* ── Form Enhancements ───────────────────────────────────────────────────── */
.form-control
{
transition:
border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus
{
border-color : #2A9FD6 !important;
box-shadow : 0 0 0 3px rgba(42, 159, 214, 0.15) !important;
}
.form-control::placeholder{color : #555;
}
/* ── Button Enhancements ─────────────────────────────────────────────────── */
.btn
{
transition:
all 0.15s ease;
font-weight : 500;
}
.btn-primary:hover
, .btn-primary:focus
{
box-shadow : 0 0 14px rgba(42, 159, 214, 0.35);
}
.btn-success:hover
, .btn-success:focus
{
box-shadow : 0 0 14px rgba(119, 179, 0, 0.35);
}
.btn-warning:hover
, .btn-warning:focus
{
box-shadow : 0 0 14px rgba(255, 136, 0, 0.35);
}
.btn-danger:hover
, .btn-danger:focus
{
box-shadow : 0 0 14px rgba(204, 0, 0, 0.35);
}
.btn:active
{
transform:
scale(0.97);
}
/* ── Badge / Label ───────────────────────────────────────────────────────── */
.label
{
font-weight : 500;
letter-spacing : 0.02em;
}
.badge
{
font-weight : 500;
}
/* ── Recording pulse for active recording indicators ─────────────────────── */
@keyframes xcalibur-pulse{0%, 100% {opacity : 1;
}
50%
{
opacity:
0.55;
}
}
.status-recording
{
animation:
xcalibur-pulse 2s ease-in-out infinite;
}
/* ── Monitor Status Pill ─────────────────────────────────────────────────── */
.monitor-status
{
display:
inline-flex;
align-items : center;
gap:
8px;
padding:
6px 16px;
border-radius : 100px;
font-size : 13px;
font-weight : 500;
margin-bottom : 16px;
}
.monitor-status-running
{
background:
rgba(119, 179, 0, 0.1);
color:
#77B300;
border:
1px solid rgba(119, 179, 0, 0.25);
}
.monitor-status-stopped
{
background:
rgba(204, 0, 0, 0.1);
color:
#CC0000;
border:
1px solid rgba(204, 0, 0, 0.25);
}
@keyframes xcalibur-dot-pulse{0%, 100% {box-shadow : 0 0 0 0 rgba(119, 179, 0, 0.4);
}
50%
{
box-shadow : 0 0 0 6px rgba(119, 179, 0, 0);
}
}
.monitor-dot
{
width:
8px;
height:
8px;
border-radius : 50% ;
display:
inline-block;
flex-shrink : 0;
}
.monitor-dot-running
{
background:
#77B300;
animation:
xcalibur-dot-pulse 2s ease-in-out infinite;
}
.monitor-dot-stopped
{
background:
#CC0000;
}
/* ── Section Divider ─────────────────────────────────────────────────────── */
.section-divider
{
display:
flex;
align-items : center;
gap:
10px;
margin:
20px 0 12px 0;
color:
#555;
font-size : 11px;
text-transform : uppercase;
letter-spacing : 0.08em;
font-weight : 500;
}
.section-divider::after
{
content:
'';
flex:
1;
height:
1px;
background:
linear-gradient(to right, rgba(255, 255, 255, 0.08), transparent);
}
/* ── Alert Enhancements ──────────────────────────────────────────────────── */
.alert
{
border:
none;
border-radius : 4px;
}
.alert-success
{
background:
rgba(119, 179, 0, 0.1);
color:
#77B300;
border-left : 3px solid #77B300;
}
.alert-danger
{
background:
rgba(204, 0, 0, 0.1);
color:
#CC0000;
border-left : 3px solid #CC0000;
}
.alert-warning
{
background:
rgba(255, 136, 0, 0.1);
color:
#FF8800;
border-left : 3px solid #FF8800;
}
.recording-toast
{
position:
fixed;
top:
68px;
right:
18px;
z-index : 1200;
min-width : 280px;
max-width : 420px;
box-shadow : 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* ── Well Enhancements ───────────────────────────────────────────────────── */
.well
{
border:
none;
}
/* ── Recording Detail ────────────────────────────────────────────────────── */
.recording-detail-page
{
animation:
xcalibur-fade-in 0.25s ease;
}
.detail-header
{
display:
flex;
align-items : center;
gap:
16px;
margin-bottom : 16px;
}
.rec-detail-header
{
display:
flex;
align-items : center;
gap:
10px;
margin-bottom : 10px;
}
.rec-detail-title-wrap
{
flex:
1;
overflow:
hidden;
}
.rec-detail-title
{
font-size : 15px;
font-weight : 600;
color:
#ccc;
overflow:
hidden;
text-overflow : ellipsis;
white-space : nowrap;
}
.rec-detail-chat-btn
{
margin-left : auto;
flex-shrink : 0;
}
.log-btn-row
{
display:
flex;
justify-content : space-between;
align-items : center;
}
.detail-info-grid
{
display:
grid;
grid-template-columns : repeat(auto-fill, minmax(180px, 1fr));
gap:
12px;
}
.detail-field
{
display:
flex;
flex-direction : column;
gap:
2px;
}
.detail-label
{
font-size : 12px;
color:
#888;
text-transform : uppercase;
letter-spacing : 0.04em;
font-weight : 500;
}
.detail-value
{
font-size : 14px;
color:
#ccc;
}
/* ── Analysis Card ───────────────────────────────────────────────────────── */
.analysis-stats-row
{
display:
flex;
flex-wrap : wrap;
align-items : center;
gap:
8px;
margin-bottom : 10px;
}
.analysis-stat
{
color:
#aaa;
font-size : 13px;
}
.analysis-stat-sep
{
color:
#555;
font-size : 10px;
}
.analysis-speaker-badge
{
display:
inline-block;
background:
rgba(255, 255, 255, 0.06);
border:
1px solid rgba(255, 255, 255, 0.1);
border-radius : 12px;
padding:
2px 10px;
font-size : 12px;
color:
#bbb;
}
.analysis-speaker-badge small{color : #777;
}
.analysis-results
{
display:
flex;
flex-direction : column;
gap:
10px;
margin-top : 10px;
}
.analysis-topic
{
background:
rgba(255, 255, 255, 0.03);
border:
1px solid rgba(255, 255, 255, 0.08);
border-radius : 6px;
padding:
10px 12px;
}
.analysis-topic.score-green
{
border-left : 3px solid #22c55e;
}
.analysis-topic.score-yellow
{
border-left : 3px solid #eab308;
}
.analysis-topic.score-orange
{
border-left : 3px solid #f97316;
}
.analysis-topic.score-red
{
border-left : 3px solid #ef4444;
}
.analysis-topic-hdr
{
display:
flex;
align-items : center;
gap:
8px;
margin-bottom : 8px;
padding-bottom : 6px;
border-bottom : 1px solid rgba(255, 255, 255, 0.06);
}
.analysis-topic-name
{
font-weight : 600;
font-size : 14px;
color:
#ddd;
}
.analysis-topic-score
{
font-size : 13px;
font-weight : 700;
padding:
1px 8px;
border-radius : 10px;
}
.analysis-topic-score.score-green
{
background:
rgba(34, 197, 94, 0.15);
color:
#4ade80;
}
.analysis-topic-score.score-yellow
{
background:
rgba(234, 179, 8, 0.15);
color:
#facc15;
}
.analysis-topic-score.score-orange
{
background:
rgba(249, 115, 22, 0.15);
color:
#fb923c;
}
.analysis-topic-score.score-red
{
background:
rgba(239, 68, 68, 0.15);
color:
#f87171;
}
.analysis-topic-cat
{
font-size : 11px;
color:
#777;
margin-left : auto;
}
.analysis-item
{
margin-top : 6px;
padding:
6px 8px;
background:
rgba(0, 0, 0, 0.2);
border-radius : 4px;
}
.analysis-item-meta
{
display:
flex;
align-items : center;
gap:
8px;
margin-bottom : 3px;
font-size : 11px;
}
.analysis-item-speaker
{
color:
#60a5fa;
font-weight : 600;
}
.analysis-item-time
{
color:
#6b7280;
font-family : monospace;
}
/* ── Drag-drop priority reorder ── */
.analysis-drag-table tr[draggable]
{
cursor:
grab;
}
.analysis-drag-table tr.dragging
{
opacity:
0.4;
}
.analysis-drag-table tr.drag-over td{box-shadow : inset 0 2px 0 0 #2a9fd6;
}
.analysis-speaker-filter
{
background:
rgba(255, 255, 255, 0.06) !important;
border:
1px solid rgba(255, 255, 255, 0.12) !important;
color:
#ccc !important;
border-radius : 12px !important;
font-size : 12px !important;
padding:
2px 10px !important;
margin-right : 6px !important;
cursor:
pointer;
transition:
background 0.15s, border-color 0.15s;
}
.analysis-speaker-filter:hover
{
background:
rgba(42, 159, 214, 0.15) !important;
border-color : rgba(42, 159, 214, 0.3) !important;
}
.analysis-speaker-filter.active
{
background:
rgba(42, 159, 214, 0.25) !important;
border-color : #2a9fd6 !important;
color:
#fff !important;
}
.analysis-item-quote
{
font-size : 13px;
color:
#ccc;
font-style : italic;
line-height : 1.4;
}
.analysis-item-num
{
display:
inline-block;
width:
18px;
height:
18px;
line-height : 18px;
text-align : center;
font-size : 10px;
font-style : normal;
font-weight : 600;
color:
#999;
background:
rgba(255, 255, 255, 0.06);
border-radius : 50% ;
margin-right : 6px;
vertical-align : middle;
}
.analysis-item-reason
{
font-size : 11px;
color:
#888;
margin-top : 4px;
padding-left : 24px;
}
/* ── Audio Player ────────────────────────────────────────────────────────── */
.audio-player-container
{
padding:
4px 0;
}
audio
{
border-radius : 8px;
outline:
none;
width:
100% ;
color-scheme : dark;
}
/* Playlist header */
.playlist-header
{
display:
flex;
justify-content : space-between;
align-items : center;
padding:
6px 0;
color:
#999;
font-size : 12px;
}
.playlist-total-dur
{
color:
#4a9;
font-weight : 600;
font-size : 13px;
font-variant-numeric : tabular-nums;
}
/* Playlist */
.audio-playlist
{
margin-top : 4px;
border:
1px solid #333;
border-radius : 6px;
overflow:
hidden;
max-height : 360px;
overflow-y : auto;
}
.playlist-item
{
display:
flex !important;
align-items : center;
padding:
7px 12px;
cursor:
pointer;
border-bottom : 1px solid #2a2a2a;
transition:
background 0.15s;
}
.playlist-item:last-child
{
border-bottom : none;
}
.playlist-item:hover{background : #1a1a1a;
}
.playlist-item.active{background : #1c2a1c;
}
.playlist-num
{
color:
#555;
font-size : 12px;
width:
28px;
flex-shrink : 0;
font-variant-numeric : tabular-nums;
}
.playlist-item.active.playlist-num{color : #4a9;
}
.playlist-title
{
flex:
1;
color:
#bbb;
font-size : 13px;
padding:
0 8px;
}
.playlist-item.active.playlist-title
{
color:
#4a9;
font-weight : 600;
}
.playlist-duration
{
color:
#666;
font-size : 12px;
font-variant-numeric : tabular-nums;
flex-shrink : 0;
text-align : right;
min-width : 50px;
}
.playlist-item.active.playlist-duration{color : #999;
}
/* ── Transcript Viewer ───────────────────────────────────────────────────── */
.transcript-viewer
{
padding:
4px 0;
}
.transcript-timeline
{
display:
flex;
flex-direction : column;
gap:
2px;
margin-top : 8px;
}
.segment-row
{
display:
grid;
grid-template-columns : 100px 140px 1fr;
gap:
12px;
padding:
8px 10px;
border-radius : 6px;
transition:
background 0.15s;
}
.segment-row:hover
{
background:
rgba(255, 255, 255, 0.04);
}
.segment-time
{
font-family : "JetBrains Mono"
, "Fira Code"
, monospace;
font-size : 12px;
color:
#888;
}
.segment-speaker
{
font-weight : 500;
color:
#aaa;
}
.segment-text
{
color:
#ccc;
line-height : 1.5;
}
/* ── Speaker Badge ───────────────────────────────────────────────────────── */
.speaker-badge
{
display:
inline-flex;
align-items : center;
gap:
6px;
padding:
2px 10px;
border-radius : 100px;
font-size : 12px;
font-weight : 500;
}
.speaker-color-0
{
background:
rgba(42, 159, 214, 0.15);
color:
#2A9FD6;
}
.speaker-color-1
{
background:
rgba(119, 179, 0, 0.15);
color:
#77B300;
}
.speaker-color-2
{
background:
rgba(255, 136, 0, 0.15);
color:
#FF8800;
}
.speaker-color-3
{
background:
rgba(20, 184, 166, 0.15);
color:
#2dd4bf;
}
.speaker-color-4
{
background:
rgba(204, 0, 0, 0.15);
color:
#CC0000;
}
.speaker-color-5
{
background:
rgba(234, 179, 8, 0.15);
color:
#facc15;
}
/* ── Content Area Animation ──────────────────────────────────────────────── */
@keyframes xcalibur-fade-in{from{opacity : 0;
transform : translateY(6px);
}
to
{
opacity:
1;
transform:
translateY(0);
}
}
.content-area > div
{
animation:
xcalibur-fade-in 0.25s ease;
}
/* ── Search Page ─────────────────────────────────────────────────────────── */
div.well.search-form-row
{
display:
flex !important;
align-items : center;
gap:
8px;
}
div.well.search-form-row > input, div.well.search-form-row > select,
div.well.search-form-row > button
{
display:
inline-block !important;
width:
auto !important;
flex-shrink : 0;
}
div.well.search-form-row > input.search-query-input
{
flex:
1 !important;
min-width : 0;
}
/* ── Custom Scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar
{
width:
6px;
height:
6px;
}
::-webkit-scrollbar-track
{
background:
#060606;
}
::-webkit-scrollbar-thumb
{
background:
#333;
border-radius : 3px;
}
::-webkit-scrollbar-thumb:hover{background : #555;
}
/* ── Tooltip ─────────────────────────────────────────────────────────────── */
.tooltip-inner
{
background:
#1a1a1a;
border:
1px solid rgba(255, 255, 255, 0.1);
font-size : 12px;
/* Uzun bilgilendirici hint'ler dar 200px BS3 kutusunda 7 satira sikismasin;
cumleler sola hizali daha okunakli. Genislik kenarda JS'in inline
maxWidth'i ile zaten viewport'a clamp'lenir. */
max-width : 340px;
text-align : left;
line-height : 1.45;
}
/* Tier tablosunda TR/EN ad alanlarinin yanindaki dil rozeti — yalniz gorsel. */
.tier-lang-badge
{
font-size : 10px;
font-weight : 600;
letter-spacing : 0.04em;
color : #8b97a8;
}
/* Islemci listesi: ad kolonu buton degil, alti cizili tiklanir metin. */
.backend-name-link
{
color : inherit;
text-decoration : underline;
cursor : pointer;
}
.backend-name-link:hover
{
opacity : 0.85;
}
/* Islemciler sayfasi tepe GPU kullanim/kota ozeti — yalniz gorsel (muted). */
.backend-usage-summary
{
display : block;
margin-bottom : 10px;
color : #8b97a8;
font-size : 12px;
}
/* ── Misc ────────────────────────────────────────────────────────────────── */
.text-muted{color : #555 !important;
}
a
{
transition:
color 0.15s;
}
hr
{
border-color : rgba(255, 255, 255, 0.06);
}
/* ── Profile Avatar Area (navbar left) ─────────────────────────────────── */
.navbar-avatar-area
{
position:
absolute !important;
left:
16px !important;
top:
50% !important;
transform:
translateY(-50%) !important;
display:
flex !important;
align-items : center;
justify-content : center;
width:
32px;
height:
32px;
box-sizing : border-box;
margin:
0 !important;
padding:
0 !important;
cursor:
pointer;
z-index : 10;
}
.profile-avatar
{
width:
32px;
height:
32px;
border-radius : 6px;
border:
2px solid rgba(42, 159, 214, 0.4);
vertical-align : middle;
transition:
border-color 0.2s;
}
.navbar-avatar-area:hover.profile-avatar{border-color : #2A9FD6;
}
.profile-avatar-default
{
display:
inline-flex;
align-items : center;
justify-content : center;
width:
32px;
height:
32px;
border-radius : 6px;
background:
rgba(42, 159, 214, 0.2);
border:
2px solid rgba(42, 159, 214, 0.4);
color:
#2A9FD6;
font-size : 14px;
font-weight : 600;
vertical-align : middle;
line-height : 1;
transition:
border-color 0.2s;
}
.navbar-avatar-area:hover.profile-avatar-default {border-color : #2A9FD6;
}
.navbar-globe-link
{
align-items : center;
display:
flex !important;
height:
32px;
justify-content : center;
position:
absolute !important;
right:
16px !important;
top:
50% !important;
transform:
translateY(-50%) !important;
width:
32px;
background:
transparent !important;
border:
0 !important;
box-shadow : none !important;
margin:
0 !important;
padding:
0 !important;
z-index : 10;
}
.navbar-globe-link img
{
display:
block;
height:
28px;
width:
28px;
}
@media (min-width: 768px)
{
.counselor-navbar .navbar-avatar-area,
.counselor-navbar .navbar-globe-link
{
position:
static !important;
left:
auto !important;
right:
auto !important;
top:
auto !important;
transform:
none !important;
}
.counselor-navbar .navbar-avatar-area
{
width:
30px;
height:
30px;
}
.counselor-navbar .navbar-globe-link
{
display:
inline-flex !important;
flex:
0 0 30px !important;
width:
30px !important;
height:
30px !important;
min-width:
30px !important;
min-height:
30px !important;
margin:
0 !important;
padding:
0 !important;
}
}
.navbar-counselor-link
{
position:
absolute !important;
right:
16px !important;
top:
50% !important;
transform:
translateY(-50%) !important;
margin:
0 !important;
z-index : 10;
}
.navbar-counselor-link:hover
{
border-color : #2A9FD6;
color:
#2A9FD6;
text-decoration : none;
}
/* ── Profile Popup Menu ─────────────────────────────────────────────────── */
ul.profile-popup-menu.dropdown-menu
{
background:
#111 !important;
border:
none !important;
border-radius : 6px !important;
min-width : 160px;
padding:
4px 0 !important;
margin-top : 4px;
}
ul.profile-popup-menu li > a
{
color:
#ccc !important;
padding:
8px 16px !important;
font-size : 13px;
background:
transparent !important;
}
ul.profile-popup-menu li > a:hover
{
background:
rgba(42, 159, 214, 0.15) !important;
color:
#fff !important;
}
ul.profile-popup-menu li.disabled > a, ul.profile-popup-menu li.Wt-disabled > a
{
color:
#666 !important;
font-weight : 500;
font-size : 12px;
}
ul.profile-popup-menu.divider, ul.profile-popup-menu li.Wt-separator
{
background-color : rgba(255, 255, 255, 0.08) !important;
margin:
4px 0 !important;
height:
1px;
}
.profile-login-link
{
color:
#2A9FD6 !important;
font-size : 13px;
text-decoration : none;
}
.profile-login-link:hover
{
color:
#fff !important;
text-decoration : underline;
}
/* ── Login Page ─────────────────────────────────────────────────────────── */
.twitter-login-btn
{
background:
#1DA1F2 !important;
border-color : #1DA1F2 !important;
color:
#fff !important;
}
.twitter-login-btn:hover{background : #0d8ecf !important;
border-color : #0d8ecf !important;
}
/* ── Disabled Nav (auth yokken) ────────────────────────────────────────── */
.nav-disabled > a
{
color:
#555 !important;
cursor:
not-allowed !important;
pointer-events : none;
}
.navbar-inverse.nav > li.nav-disabled > a:hover
{
background:
transparent !important;
color:
#555 !important;
}
/* ── Add User Form (full width) ────────────────────────────────────────── */
.add-user-form
{
display:
flex !important;
flex-wrap : nowrap;
gap:
8px;
align-items : center;
}
.add-user-form.form-control
{
flex:
1 1 0;
width:
auto !important;
min-width : 0;
}
.add-user-form.btn
{
flex:
0 0 auto;
white-space : nowrap;
}
/* ── Table Toolbar (search + filters) ────────────────────────────────── */
.table-toolbar
{
display:
flex !important;
flex-wrap : wrap;
gap:
8px;
align-items : center;
padding:
8px 0;
margin-bottom : 0;
background:
transparent;
border:
none;
border-radius : 0;
}
.table-toolbar.table-search-box
{
flex:
1 1 auto;
width:
auto !important;
min-width : 150px;
max-width : 300px;
}
.table-toolbar.btn
{
flex:
0 0 auto;
white-space : nowrap;
}
.table-toolbar.toolbar-filter-combo
{
flex:
0 0 auto;
width:
auto !important;
min-width : 120px;
max-width : 220px;
}
/* ── Spin Box (number input arrows visible on dark theme) ────────────── */
input[type = "number"] ::-webkit-inner-spin-button,
input[type = "number"] ::-webkit-outer-spin-button
{
opacity:
1;
height:
28px;
cursor:
pointer;
filter:
invert(0.8);
}
/* ── Inline Button Group (actions column — 2-column grid) ─────────────── */
.actions-grid
{
display:
inline-grid;
grid-template-columns : auto auto;
gap:
3px;
}
.actions-grid.btn
{
text-align : center;
white-space : nowrap;
}
.filter-actions
{
display:
flex;
flex-wrap : nowrap;
gap:
2px;
}
/* ─── Settings card titles ─── */
.admin-card-title
{
font-size : 12px;
font-weight : 600;
text-transform : uppercase;
letter-spacing : 0.5px;
color:
#ccc;
margin:
0 0 8px 0;
}
/* ─── Cookie toolbar (plain flex) ─── */
.cookie-toolbar
{
display:
flex !important;
align-items : center !important;
gap:
8px;
margin:
8px 0;
}
.cookie-toolbar form
{
flex:
1 1 auto;
margin:
0 !important;
padding:
0 !important;
border:
none !important;
display:
flex !important;
align-items : center !important;
}
.cookie-toolbar form input[type = "file"].form-control
{
margin:
0 !important;
}
.cookie-toolbar form input[type = "file"]
{
width:
100% !important;
height:
34px !important;
background:
#1a1a1a !important;
border:
1px solid #555 !important;
border-radius : 3px !important;
padding:
4px 8px !important;
color:
#999 !important;
font-size : 12px;
box-shadow : none !important;
}
.cookie-toolbar input[type = "file"] ::-webkit-file-upload-button
{
background:
#3a3a3a;
color:
#ccc;
border:
none;
border-right : 1px solid #555;
padding:
0 12px;
margin-right : 8px;
height:
100% ;
font-size : 12px;
cursor:
pointer;
}
.cookie-toolbar input[type = "file"] ::-webkit-file-upload
-button:hover{background : #4a4a4a;
}
.cookie-toolbar.admin-btn
{
white-space : nowrap !important;
flex-shrink : 0;
}
.cookie-toolbar >.Wt-fill-height
{
align-items : center !important;
justify-content : center !important;
}
.cookie-toolbar >.Wt-fill-height > div
{
align-items : center !important;
}
.cookie-upload-bar
{
display:
flex;
align-items : center;
gap:
8px;
margin:
8px 0;
}
input[type = "file"] ::-webkit-file-upload-button
{
background:
#3a3a3a;
color:
#ccc;
border:
none;
border-right : 1px solid #555;
padding:
0 14px;
margin-right : 8px;
font-size : 12px;
cursor:
pointer;
height:
100% ;
}
input[type = "file"] ::-webkit-file-upload-button:hover{background : #4a4a4a;
}
/* ─── Tight column gap for side-by-side cards ─── */
.settings-tight-row
{
margin-left :-5px;
margin-right :-5px;
}
.settings-tight-row > [class *= "col-"]
{
padding-left : 5px;
padding-right : 5px;
}.row.settings-tight-row
{
margin-left :-5px;
margin-right :-5px;
}
/* ─── Storage Health Dots ─── */
.health-dot
{
display:
inline-block;
width:
8px;
height:
8px;
border-radius : 50% ;
margin-right : 6px;
vertical-align : middle;
}
.health-dot-ok
{
background:
#5cb85c;
box-shadow : 0 0 4px rgba(92, 184, 92, 0.5);
}
.health-dot-fail
{
background:
#d9534f;
}
.health-dot-unknown{background : #777;
}
/* ─── Field Save Button ─── */
.admin-save-group
{
display:
flex;
align-items : stretch;
}
.admin-save-input
{
flex:
1 1 0;
min-width : 0;
height:
34px;
padding:
6px 12px;
font-size : 13px;
box-sizing : border-box;
border-radius : 3px 0 0 3px;
border-right : none;
}
.admin-field-save
{
flex:
0 0 auto;
height:
34px;
padding:
0 16px;
font-size : 12px;
box-sizing : border-box;
border-radius : 0 3px 3px 0 !important;
background:
#2a9fd6 !important;
border:
1px solid #2a9fd6 !important;
color:
#fff !important;
white-space : nowrap;
cursor:
pointer;
}
.admin-field-save:hover{background : #238bb8 !important;
border-color : #238bb8 !important;
}
/* ─── Icon Buttons (compact) ─── */
.btn-icon
{
padding-left : 2px !important;
padding-right : 2px !important;
min-width : 0;
}
/* ─── Delete Progress Bar (CSS-only animation) ─── */
.delete-progress-track
{
width:
100% ;
height:
6px;
background:
#333;
border-radius : 3px;
overflow:
hidden;
margin:
12px 0;
}
.delete-progress-bar
{
width:
40% ;
height:
100% ;
background:
#c9302c;
border-radius : 3px;
animation:
delete-progress-slide 1.2s ease-in-out infinite;
}
@keyframes delete-progress-slide{0% {transform : translateX(-100%);
}
50%
{
transform:
translateX(150%);
}
100%
{
transform:
translateX(-100%);
}
}
/* ── Bottom Player Panel ── */
.bottom-player-panel
{
position:
fixed;
bottom:
0;
left:
0;
right:
0;
z-index : 1000;
border-top : 1px solid rgba(255, 255, 255, 0.1);
background:
#1a1d23;
margin:
0;
}
.bottom-player-panel >.panel-heading
{
display:
flex;
align-items : center;
gap:
12px;
background:
#15171c;
border-bottom : 1px solid rgba(255, 255, 255, 0.06);
padding:
6px 12px;
font-size : 13px;
cursor:
pointer;
}
.bottom-player-panel >.panel-heading >.title
{
min-width : 0;
overflow:
hidden;
text-overflow : ellipsis;
white-space : nowrap;
}
.bottom-player-panel >.panel-body
{
padding:
8px 12px;
background:
#1a1d23;
}
@media(max-width : 760px){.navbar-inverse{display : none !important;
}
.content-area
{
padding:
10px 10px 92px 10px;
min-height : 100vh;
max-height : none;
overflow-x : auto;
overflow-y : visible;
}
.content-area.public-content-area
{
padding:
0;
}
.mobile-workspace-nav
{
display:
flex;
position:
fixed;
left:
10px;
right:
10px;
bottom:
10px;
z-index : 1040;
align-items : stretch;
justify-content : space-between;
gap:
6px;
padding:
6px;
border-radius : 22px;
border:
1px solid rgba(42, 159, 214, 0.22);
background:
rgba(18, 20, 26, 0.96);
box-shadow : 0 14px 42px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter : blur(16px);
}
.mobile-workspace-nav[style *= "display: none"],
.mobile-workspace-nav[style *= "display:none"]
{
display:
flex !important;
}
.mobile-workspace-nav.mobile-nav-public-hidden,
.mobile-workspace-nav.mobile-nav-public-hidden[style *= "display: none"],
.mobile-workspace-nav.mobile-nav-public-hidden[style *= "display:none"]
{
display:
none !important;
}
.mobile-nav-item.btn, .mobile-nav-item
{
flex:
1 1 0;
min-width : 0;
height:
48px;
padding:
4px 5px !important;
border:
0 !important;
border-radius : 17px !important;
background:
transparent !important;
color:
#9ca6b8 !important;
font-size : 11px;
font-weight : 700;
letter-spacing : 0.01em;
line-height : 1.15;
white-space : normal;
box-shadow : none !important;
text-align : center;
}
.mobile-nav-item.active, .mobile-nav-item:focus
, .mobile-nav-item:hover
{
background:
linear-gradient(135deg, rgba(42, 159, 214, 0.26), rgba(42, 159, 214, 0.08)) !important;
color:
#fff !important;
}
.mobile-more-toggle.active
{
background:
rgba(92, 184, 92, 0.18) !important;
color:
#fff !important;
}
.mobile-more-panel
{
display:
grid;
position:
absolute;
left:
0;
right:
0;
bottom:
70px;
grid-template-columns : repeat(2, minmax(0, 1fr));
gap:
8px;
padding:
12px;
border-radius : 18px;
border:
1px solid rgba(255, 255, 255, 0.08);
background:
rgba(23, 26, 34, 0.98);
box-shadow : 0 18px 52px rgba(0, 0, 0, 0.5);
}
.mobile-more-panel[style *= "display: none"],
.mobile-more-panel[style *= "display:none"]
{
display:
none !important;
}
.mobile-more-panel.mobile-more-item
{
width:
100% ;
height:
42px;
border-radius : 12px !important;
background:
rgba(255, 255, 255, 0.04) !important;
text-align : left;
padding:
0 12px !important;
font-size : 12px;
white-space : nowrap;
}
.bottom-player-panel
{
bottom:
76px;
z-index : 1030;
left:
8px;
right:
8px;
border-radius : 14px 14px 0 0;
overflow:
hidden;
}
.bottom-player-panel >.panel-heading
{
padding:
8px 10px;
}
.table-toolbar, .add-user-form, .cookie-toolbar, .cookie-upload-bar,
.filter-actions
{
align-items : stretch !important;
flex-direction : column !important;
}
.table-toolbar.table-search-box, .table-toolbar.toolbar-filter-combo,
.table-toolbar.btn, .add-user-form.form-control, .add-user-form.btn,
.cookie-toolbar.admin-btn, .cookie-upload-bar.admin-btn, .filter-actions.btn
{
width:
100% !important;
max-width : none !important;
}
.actions-grid
{
display:
grid;
grid-template-columns : repeat(2, minmax(0, 1fr));
width:
100% ;
}
.sortable-table-wrapper
{
width:
100% ;
max-width : 100% ;
overflow-x : auto !important;
overflow-y : auto !important;
-webkit-overflow-scrolling : touch;
}
.recordings-table
{
display:
block;
width:
100% ;
max-width : 100% ;
}
.recordings-table.sortable-table
{
min-width : 0;
}
/* Uzun metin kolonlari (Space basligi = col 3, kullanici = col 4) tabloyu yatayda
zorlamasin: kolon icerigi tasinca ellipsis ile kirpilir. Boylece dar icerik
alaninda istenmeyen yatay scrollbar olusmaz ve kart padding'i bozulmaz.
nth-child: 1=secim kutusu, 3=Space, 4=kullanici. Kolon genisligi gerekiyorsa
C++ tarafinda set_column_width ile verilir; burada yalnizca metin kirpma
(gorsel davranis) tanimlidir. */
.recordings-table.sortable-table td:nth-child(3),
.recordings-table.sortable-table td:nth-child(4),
.recordings-table .sortable-table td:nth-child(3),
.recordings-table .sortable-table td:nth-child(4)
{
max-width : 280px;
overflow : hidden;
text-overflow : ellipsis;
}
.recordings-table.sortable-table th, .recordings-table.sortable-table td,
.recordings-table .sortable-table th, .recordings-table .sortable-table td
{
white-space : nowrap;
}
.recordings-table .sortable-table-wrapper
{
background : #15181e;
border : 1px solid #2b313a;
border-radius : 12px;
}
.recordings-toolbar
{
flex-direction : row !important;
flex-wrap : nowrap !important;
align-items : center !important;
gap : 8px !important;
overflow-x : auto !important;
overflow-y : hidden !important;
-webkit-overflow-scrolling : touch;
}
/* Boyut/flex C++ tarafinda yonetilir (SortableTable arama+combo, RecordingsPage
aksiyon butonlari inline). Burada yalnizca kontrol yuksekligi + renk/tema
kalir. Genislik/flex override'lari kaldirildi: aksi halde !important sabit
genislikler C++ inline'i ezip toolbar cocuklarini kuculmekten alikoyuyor ve
dar ekranda yatay scrollbar uretiyordu. */
.recordings-toolbar .table-search-box .form-control,
.recordings-toolbar .toolbar-filter-combo,
.recordings-toolbar .recordings-toolbar-action
{
height : 34px !important;
}
.recordings-toolbar .recordings-toolbar-action
{
border : 0 !important;
font-weight : 600;
white-space : nowrap !important;
}
.recordings-toolbar .recordings-toolbar-refresh
{
background : #1f6feb !important;
color : #fff !important;
}
.recordings-toolbar .recordings-toolbar-upload
{
background : #1f8f55 !important;
color : #fff !important;
}
.recordings-table .sortable-table thead tr:first-child th,
.recordings-table .sortable-table thead tr:first-child td
{
position : sticky;
top : 0;
z-index : 8;
background : #15181e;
}
.recordings-table .sortable-table thead tr:nth-child(2) th,
.recordings-table .sortable-table thead tr:nth-child(2) td
{
position : sticky;
top : 38px;
z-index : 7;
background : #11141a;
}
.recordings-selection-actions
{
display : flex;
width : 100%;
align-items : center;
justify-content : flex-end;
gap : 8px;
padding : 8px 10px;
background : #11141a;
}
.recording-favorite-star
{
font-size : 18px;
color : #6f7784;
}
.recording-favorite-star.is-favorite,
.recording-detail-favorite-btn .glyphicon-star
{
color : #f5b642;
}
.gundem-analytics-grid, .gundem-chart-grid
{
display:
grid;
grid-template-columns : 1fr !important;
}
.modal-dialog
{
width:
calc(100vw - 20px) !important;
max-width : calc(100vw - 20px) !important;
margin:
10px auto !important;
}
.modal-footer
{
justify-content : flex-end;
}
.modal-footer.btn
{
flex:
0 1 auto;
min-width : 96px;
}
}
.demo-countdown
{
display:
inline-flex;
align-items : center;
justify-content : flex-end;
pointer-events : none;
}
.demo-countdown-pill
{
display:
inline-flex;
align-items : center;
height:
32px;
padding:
0 12px;
border-radius : 999px;
background:
rgba(17, 24, 31, 0.92);
border:
1px solid rgba(138, 148, 160, 0.58);
color:
#d7edf7;
font-size : 12px;
font-weight : 700;
letter-spacing : 0.03em;
white-space : nowrap;
}
.bottom-player-panel.demo-countdown
{
flex:
0 0 auto;
margin-left : auto;
z-index : 1;
}
/* Help tooltip */
.help-tip
{
position:
relative;
cursor:
help;
color:
#888;
font-size : 12px;
display:
inline-block;
}
/* Tooltip artik Wt native setToolTip() ile yapiliyor (C++ FIRST);
eski CSS ::after/data-tip hilesi kaldirildi (transformed/overflow
ancestor'lar position:fixed ::after'i kirpiyordu). */
/* ── Auto-refresh progress bar ─────────────────────────────────────── */
.refresh-progress-fill
{
transition:
width 1s linear;
}
/* ═══════════════════════════════════════════════════════════════════════════
Elevation System — Inset Light Illusion (Dark Mode) + Stacked Elevation (Light)
═══════════════════════════════════════════════════════════════════════════ */
:root
{
--shadow-color : rgba(0, 0, 0, 0.14);
}
/* Dark Mode — Inset Light Illusion */
.dm-elevation-0
{
box-shadow : none;
}
.dm-elevation-1
{
box-shadow : inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.dm-elevation-2
{
box-shadow : inset 0 1px 0 0 rgba(255, 255, 255, 0.02)
, inset 0 0 0 1px rgba(255, 255, 255, 0.02)
, 0 1px 1px-0.5px rgba(0, 0, 0, 0.18);
}
.dm-elevation-3
{
box-shadow : inset 0 1px 0 0 rgba(255, 255, 255, 0.05)
, inset 0 0 0 1px rgba(255, 255, 255, 0.02)
, 0 0 0 1px rgba(0, 0, 0, 0.12)
, 0 1px 1px-0.5px rgba(0, 0, 0, 0.18)
, 0 3px 3px-1.5px rgba(0, 0, 0, 0.18);
}
.dm-elevation-4
{
box-shadow : inset 0 1px 0 0 rgba(255, 255, 255, 0.05)
, inset 0 0 0 1px rgba(255, 255, 255, 0.04)
, 0 0 0 1px rgba(0, 0, 0, 0.14)
, 0 1px 1px-0.5px rgba(0, 0, 0, 0.18)
, 0 3px 3px-1.5px rgba(0, 0, 0, 0.18)
, 0 6px 6px-3px rgba(0, 0, 0, 0.18);
}
.dm-elevation-5
{
box-shadow : inset 0 1px 0 0 rgba(255, 255, 255, 0.08)
, inset 0 0 0 1px rgba(255, 255, 255, 0.04)
, 0 0 0 1px rgba(0, 0, 0, 0.16)
, 0 1px 1px-0.5px rgba(0, 0, 0, 0.18)
, 0 3px 3px-1.5px rgba(0, 0, 0, 0.18)
, 0 6px 6px-3px rgba(0, 0, 0, 0.18)
, 0 12px 12px-6px rgba(0, 0, 0, 0.18);
}
.dm-elevation-6
{
box-shadow : inset 0 1px 0 0 rgba(255, 255, 255, 0.08)
, inset 0 0 0 1px rgba(255, 255, 255, 0.06)
, 0 0 0 1px rgba(0, 0, 0, 0.18)
, 0 1px 1px-0.5px rgba(0, 0, 0, 0.18)
, 0 3px 3px-1.5px rgba(0, 0, 0, 0.18)
, 0 6px 6px-3px rgba(0, 0, 0, 0.18)
, 0 12px 12px-6px rgba(0, 0, 0, 0.18)
, 0 24px 24px-12px rgba(0, 0, 0, 0.18);
}
.dm-elevation-7
{
box-shadow : inset 0 1px 0 0 rgba(255, 255, 255, 0.11)
, inset 0 0 0 1px rgba(255, 255, 255, 0.06)
, 0 0 0 1px rgba(0, 0, 0, 0.20)
, 0 1px 1px-0.5px rgba(0, 0, 0, 0.18)
, 0 3px 3px-1.5px rgba(0, 0, 0, 0.18)
, 0 6px 6px-3px rgba(0, 0, 0, 0.18)
, 0 12px 12px-6px rgba(0, 0, 0, 0.18)
, 0 24px 24px-12px rgba(0, 0, 0, 0.18)
, 0 48px 48px-24px rgba(0, 0, 0, 0.18);
}
/* Light Mode — Stacked Elevation */
.elevation-0
{
box-shadow : 0px 0px 0px 1px var(--shadow-color);
}
.elevation-1
{
box-shadow : 0px 0px 0px 1px var(--shadow-color),
0px 1px 1px-0.5px var(--shadow-color);
}
.elevation-2
{
box-shadow : 0px 0px 0px 1px var(--shadow-color),
0px 1px 1px-0.5px var(--shadow-color), 0px 3px 3px-1.5px var(--shadow-color);
}
.elevation-3
{
box-shadow : 0px 0px 0px 1px var(--shadow-color),
0px 1px 1px-0.5px var(--shadow-color), 0px 3px 3px-1.5px var(--shadow-color),
0px 6px 6px-3px var(--shadow-color);
}
.elevation-4
{
box-shadow : 0px 0px 0px 1px var(--shadow-color),
0px 1px 1px-0.5px var(--shadow-color), 0px 3px 3px-1.5px var(--shadow-color),
0px 6px 6px-3px var(--shadow-color), 0px 12px 12px-6px var(--shadow-color);
}
.elevation-5
{
box-shadow : 0px 0px 0px 1px var(--shadow-color),
0px 1px 1px-0.5px var(--shadow-color), 0px 3px 3px-1.5px var(--shadow-color),
0px 6px 6px-3px var(--shadow-color), 0px 12px 12px-6px var(--shadow-color),
0px 24px 24px-12px var(--shadow-color);
}
.elevation-6
{
box-shadow : 0px 0px 0px 1px var(--shadow-color),
0px 1px 1px-0.5px var(--shadow-color), 0px 3px 3px-1.5px var(--shadow-color),
0px 6px 6px-3px var(--shadow-color), 0px 12px 12px-6px var(--shadow-color),
0px 24px 24px-12px var(--shadow-color), 0px 48px 48px-24px var(--shadow-color);
}
/* ─── Live Spaces — Tablo viewport'a sabit, kendi icinde dikey scroll ────── */
/* overflow C++ tarafinda (table_wrap->setOverflow Auto) verilir; ancak
"viewport eksi ust offset" hesabinin (calc) Wt WLength karsiligi olmadigindan
max-height burada gelir. Boylece tablo + status etiketi viewport'u doldurur,
fazla satirlar tablonun KENDI icinde kayar (sayfa/content-area scroll'u degil). */
.live-spaces-table-wrap
{
max-height : calc(100vh - 253px);
}
/* ─── Live Spaces — Auto-refresh pill ───────────────────────────────────── */
.live-spaces-auto-bar
{
display : inline-flex;
align-items : center;
gap : 7px;
padding : 0 10px;
min-height : 34px;
background : rgba(255, 255, 255, 0.04);
border : 1px solid rgba(255, 255, 255, 0.14);
border-radius : 999px;
font-size : 12px;
line-height : 1;
white-space : nowrap;
}
.live-spaces-auto-bar .live-spaces-auto-label
{
color : #9aa6ad;
font-weight : 500;
letter-spacing : 0.3px;
text-transform : uppercase;
font-size : 11px;
}
.live-spaces-auto-bar .live-spaces-auto-toggle
{
margin : 0 !important;
display : inline-flex;
align-items : center;
}
.live-spaces-auto-bar .live-spaces-auto-toggle > input[type = "checkbox"]
{
margin : 0;
cursor : pointer;
accent-color : #8a929a;
width : 13px;
height : 13px;
}
.live-spaces-auto-bar .live-spaces-countdown
{
width : 48px;
height : 26px;
padding : 1px 5px;
border-radius : 4px;
border : 1px solid rgba(255, 255, 255, 0.12);
background-color : rgba(0, 0, 0, 0.25);
background-image : linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18));
background-repeat : no-repeat;
background-size : 0% 100%;
color : #e6edf2;
font-weight : 600;
font-variant-numeric : tabular-nums;
text-align : center;
transition : background-size 0.4s linear;
}
.live-spaces-auto-bar .live-spaces-countdown:focus
{
outline : none;
border-color : rgba(255, 255, 255, 0.32);
}
.live-spaces-auto-bar .live-spaces-auto-sec
{
color : #6c7780;
font-size : 11px;
}
.live-spaces-auto-bar .live-spaces-refresh
{
margin-left : 4px;
padding : 2px 10px;
height : 26px;
font-size : 12px;
line-height : 1.1;
border-radius : 999px;
background : rgba(255, 255, 255, 0.06);
color : #d8dee6;
border : 1px solid rgba(255, 255, 255, 0.18);
}
.live-spaces-auto-bar .live-spaces-refresh:hover
{
background : rgba(255, 255, 255, 0.12);
color : #ffffff;
border-color : rgba(255, 255, 255, 0.32);
}
/* ── Audio player — single-row, full-width, dark theme ── */
/* Container fills the panel */
.audio-player-container
{
width:
100% !important;
color:
#d8dee6;
}
.audio-player-container >.Wt-text
{
color:
#d8dee6;
}
/* Outer player widget — full width, no fixed cap */
.audio-mediaplayer.jp-audio, .audio-mediaplayer div.jp-audio
{
width:
100% !important;
min-width : 0 !important;
max-width : 100% !important;
background:
transparent !important;
background-image : none !important;
border:
none !important;
box-shadow : none !important;
color:
#d8dee6 !important;
font-family : inherit !important;
font-size : 13px !important;
line-height : 1.4 !important;
padding:
0 !important;
margin:
0 !important;
position:
relative !important;
}
/* Hide the JPG sprite background entirely + any nested img/span inside control anchors */
.audio-mediaplayer a[class ^= "jp-"], .audio-mediaplayer a[class *= " jp-"]
{
background-image : none !important;
text-indent : 0 !important;
}
.audio-mediaplayer a[class ^= "jp-"] > *, .audio-mediaplayer a[class *= " jp-"] > *
{
display:
none !important;
}
/* Interface bar — flex row */
.audio-mediaplayer.jp-interface, .audio-mediaplayer div.jp-interface
{
width:
100% !important;
height:
50px !important;
min-height : 44px !important;
background:
transparent !important;
background-image : none !important;
border:
none !important;
display:
flex !important;
align-items : center !important;
/* Uniform gap YOK: kullanici 1x dropdown'in SOLUNDA ve sure bilgisinin SAGINDA
bosluk istemiyor. Bu yuzden junction'lar acik margin ile kontrol edilir:
combo controls'e flush, sure volume'e flush; nefes payi sadece progress'in
iki yaninda (combo margin-right + time-holder margin-left). */
gap:
0 !important;
padding:
0 12px !important;
position:
relative !important;
flex-wrap : nowrap !important;
}
/* Controls UL — inline-flex */
.audio-mediaplayer.jp-controls, .audio-mediaplayer ul.jp-controls
{
width:
auto !important;
padding:
0 !important;
margin:
0 !important;
display:
flex !important;
align-items : center !important;
gap:
4px !important;
list-style : none !important;
flex:
0 0 auto !important;
}
.audio-mediaplayer.jp-controls li, .audio-mediaplayer ul.jp-controls li
{
float : none !important;
display:
inline-flex !important;
align-items : center !important;
margin:
0 !important;
padding:
0 !important;
list-style : none !important;
}
/* Buttons — clean, consistent, native anchor text fully hidden via font-size:0 */
.audio-mediaplayer a.jp-play, .audio-mediaplayer a.jp-pause,
.audio-mediaplayer a.jp-stop, .audio-mediaplayer a.jp-previous,
.audio-mediaplayer a.jp-next, .audio-mediaplayer a.jp-mute,
.audio-mediaplayer a.jp-unmute, .audio-mediaplayer a.jp-volume-max
{
width:
32px !important;
height:
32px !important;
margin:
0 !important;
padding:
0 !important;
display:
inline-flex !important;
align-items : center !important;
justify-content : center !important;
border-radius : 4px !important;
color:
#d8dee6 !important;
font-size : 0 !important; /* Hide jPlayer's native anchor text completely */
line-height : 0 !important;
text-decoration : none !important;
overflow:
hidden !important;
background:
transparent !important;
transition:
background-color 0.15s ease, color 0.15s ease;
text-indent : 0 !important;
}
.audio-mediaplayer a.jp-play:hover
, .audio-mediaplayer a.jp-pause:hover
, .audio-mediaplayer a.jp-stop:hover
, .audio-mediaplayer a.jp-previous:hover
, .audio-mediaplayer a.jp-next:hover
, .audio-mediaplayer a.jp-mute:hover
, .audio-mediaplayer a.jp-unmute:hover
, .audio-mediaplayer a.jp-volume-max:hover
{
background:
rgba(255, 255, 255, 0.10) !important;
color:
#ffffff !important;
}
/* Inline-SVG mask icons — crisp at any size, follow currentColor for hover */
.audio-mediaplayer a.jp-play::before, .audio-mediaplayer a.jp-pause::before,
.audio-mediaplayer a.jp-stop::before, .audio-mediaplayer a.jp-previous::before,
.audio-mediaplayer a.jp-next::before, .audio-mediaplayer a.jp-mute::before,
.audio-mediaplayer a.jp-unmute::before
{
content:
'' !important;
display:
inline-block !important;
width:
16px !important;
height:
16px !important;
background-color : currentColor !important;
-webkit-mask-repeat : no-repeat !important;
mask-repeat : no-repeat !important;
-webkit-mask-position : center !important;
mask-position : center !important;
-webkit-mask-size : contain !important;
mask-size : contain !important;
}
.audio-mediaplayer a.jp-play::before
{
-webkit-mask-image : url("data:image/svg+xml;utf8,") !important;
mask-image : url("data:image/svg+xml;utf8,") !important;
}
.audio-mediaplayer a.jp-pause::before
{
-webkit-mask-image : url("data:image/svg+xml;utf8,") !important;
mask-image : url("data:image/svg+xml;utf8,") !important;
}
.audio-mediaplayer a.jp-stop::before
{
-webkit-mask-image : url("data:image/svg+xml;utf8,") !important;
mask-image : url("data:image/svg+xml;utf8,") !important;
}
.audio-mediaplayer a.jp-previous::before
{
-webkit-mask-image : url("data:image/svg+xml;utf8,") !important;
mask-image : url("data:image/svg+xml;utf8,") !important;
}
.audio-mediaplayer a.jp-next::before
{
-webkit-mask-image : url("data:image/svg+xml;utf8,") !important;
mask-image : url("data:image/svg+xml;utf8,") !important;
}
/* jp-mute = audio is ON (click to mute) → speaker with sound waves */
.audio-mediaplayer a.jp-mute::before
{
-webkit-mask-image : url("data:image/svg+xml;utf8,") !important;
mask-image : url("data:image/svg+xml;utf8,") !important;
}
/* jp-unmute = audio is MUTED (click to unmute) → speaker with diagonal slash */
.audio-mediaplayer a.jp-unmute::before
{
-webkit-mask-image : url("data:image/svg+xml;utf8,") !important;
mask-image : url("data:image/svg+xml;utf8,") !important;
}
/* jPlayer toggles mute/unmute via inline style="display: none" — broad rule above sets
display: inline-flex !important which overrides jPlayer's hide. Restore the toggle by
matching the attribute jPlayer actually sets. */
.audio-mediaplayer a.jp-mute[style *= "display: none"],
.audio-mediaplayer a.jp-mute[style *= "display:none"],
.audio-mediaplayer a.jp-unmute[style *= "display: none"],
.audio-mediaplayer a.jp-unmute[style *= "display:none"]
{
display:
none !important;
}
/* Hide volume-max button entirely — single mute toggle is enough.
DIKKAT: ':has' iki noktadan sonra BOSLUK ICERMEMELI. ': has' yazimi tum
virgullu kurali gecersiz kilar ve buton mute'un sagINDA bos 32px'lik bir
bosluk olarak geri gelir (1x dropdown'in solundaki boslugun gercek sebebi). */
.audio-mediaplayer ul.jp-controls li:has(> a.jp-volume-max),
.audio-mediaplayer a.jp-volume-max
{
display:
none !important;
}
/* Time-holder icindeki repeat toggle'lari gizle — kullanilmiyor; aksi halde
sure yazisinin SAGINDA bos ~25px'lik bir buton durur. */
.audio-mediaplayer .jp-time-holder ul.jp-toggles
{
display:
none !important;
}
/* Playback speed selector — injected into jp-interface flex row.
Override Bootstrap .form-control (width:100%) which makes it span full width. */
select.audio-speed-combo, .audio-speed-combo,
.audio-mediaplayer.jp-interface > select.audio-speed-combo
{
flex:
0 0 auto !important;
display:
inline-block !important;
width:
72px !important;
min-width : 72px !important;
max-width : 72px !important;
height:
28px !important;
padding:
0 22px 0 8px !important;
background-color : rgba(255, 255, 255, 0.06) !important;
color:
#d8dee6 !important;
border:
1px solid rgba(255, 255, 255, 0.18) !important;
border-radius : 4px !important;
font-size : 12px !important;
font-weight : 600 !important;
line-height : 26px !important;
cursor:
pointer !important;
/* Sol: controls'e flush (0). Sag: progress'ten 10px nefes payi. */
margin:
0 10px 0 0 !important;
box-shadow : none !important;
-webkit-appearance : none !important;
-moz-appearance : none !important;
appearance:
none !important;
background-image : url("data:image/svg+xml;utf8,") !important;
background-repeat : no-repeat !important;
background-position : right 4px center !important;
background-size : 14px 14px !important;
}
select.audio-speed-combo:hover
, .audio-speed-combo:hover
{
background-color : rgba(255, 255, 255, 0.12) !important;
border-color : rgba(255, 255, 255, 0.30) !important;
}
select.audio-speed-combo:focus
, .audio-speed-combo:focus
{
outline:
none !important;
border-color : #2a9fd6 !important;
box-shadow : none !important;
}
.audio-speed-combo option
{
background:
#1a1d21 !important;
color:
#d8dee6 !important;
}
/* Time holder — placed right after controls (LEFT of progress bar) */
.audio-mediaplayer.jp-audio div.jp-time-holder,
.audio-mediaplayer div.jp-time-holder
{
position:
static !important;
top:
auto !important;
bottom:
auto !important;
left:
auto !important;
right:
auto !important;
width:
auto !important;
height:
auto !important;
display:
inline-flex !important;
align-items : center !important;
gap:
0 !important;
margin:
0 12px 0 10px !important;
padding:
0 !important;
flex:
0 0 auto !important;
color:
#b8c0c8 !important;
font-size : 12px !important;
font-family : ui-monospace
, "SF Mono"
, Menlo
, Consolas
, monospace !important;
font-variant-numeric : tabular-nums !important;
font-style : normal !important;
white-space : nowrap !important;
line-height : 1 !important;
overflow:
visible !important;
order:
2 !important; /* seek progress (order 1) ile volume (order 3) arasinda */
}
.audio-mediaplayer.jp-audio div.jp-current-time,
.audio-mediaplayer.jp-audio div.jp-duration,
.audio-mediaplayer div.jp-current-time,
.audio-mediaplayer div.jp-duration
{
position:
static !important;
top:
auto !important;
left:
auto !important;
right:
auto !important;
bottom:
auto !important;
float : none !important;
display:
inline-block !important;
width:
auto !important;
height:
auto !important;
min-width : 0 !important;
padding:
0 !important;
margin:
0 !important;
color:
#b8c0c8 !important;
font-size : 12px !important;
font-style : normal !important;
font-family : ui-monospace
, "SF Mono"
, Menlo
, Consolas
, monospace !important;
font-variant-numeric : tabular-nums !important;
text-shadow : none !important;
text-align : left !important;
line-height : 1 !important;
white-space : nowrap !important;
vertical-align : middle !important;
}
.audio-mediaplayer div.jp-duration::before
{
content:
" / ";
opacity:
0.5;
margin:
0 3px;
display:
inline-block !important;
}
/* Progress bar — flex grow, BEFORE time-holder */
.audio-mediaplayer.jp-progress, .audio-mediaplayer div.jp-progress
{
position:
static !important;
top:
auto !important;
left:
auto !important;
width:
auto !important;
height:
6px !important;
flex:
1 1 auto !important;
background:
rgba(255, 255, 255, 0.08) !important;
background-image : none !important;
border-radius : 3px !important;
overflow:
hidden !important;
min-width : 100px !important;
cursor:
pointer;
order:
1 !important; /* controls (order 0) ile time-holder (order 2) arasinda */
}
/* jp-seek-bar = WProgressBar outer div. Must fill .jp-progress regardless of
Bootstrap .progress flex defaults (which would shrink to inner bar width). */
.audio-mediaplayer.jp-seek-bar
{
display:
block !important;
position:
relative !important;
width:
100% !important;
height:
100% !important;
min-width : 0 !important;
background:
transparent !important;
background-image : none !important;
box-shadow : none !important;
border:
none !important;
border-radius : 3px !important;
overflow:
hidden !important;
cursor:
pointer !important;
}
/* jp-play-bar = currently played portion. Width set inline by Wt (% string). */
.audio-mediaplayer.jp-play-bar
{
display:
block !important;
position:
absolute !important;
top:
0 !important;
left:
0 !important;
height:
100% !important;
background:
#4aa6ff !important;
background-image : none !important;
border-radius : 3px !important;
transition:
width 0.1s linear;
}
/* Hide WProgressBar's text label sibling (only inner bar should remain). */
.audio-mediaplayer.jp-seek-bar > div:not(.jp-play-bar)
, .audio-mediaplayer.jp-volume-bar > div
:not(.jp-volume-bar-value)
:not(.progress-bar)
{
display:
none !important;
}
/* Volume bar (Wt's WMediaPlayer renders as .jp-volume-bar.progress) */
.audio-mediaplayer.jp-audio div.jp-volume-bar,
.audio-mediaplayer div.jp-volume-bar
{
position:
static !important;
top:
auto !important;
left:
auto !important;
right:
auto !important;
bottom:
auto !important;
width:
80px !important;
height:
4px !important;
margin:
0 !important;
flex:
0 0 80px !important;
background:
rgba(255, 255, 255, 0.08) !important;
background-image : none !important;
border-radius : 2px !important;
overflow:
hidden;
cursor:
pointer;
order:
3 !important;
}
.audio-mediaplayer.jp-volume-bar-value,
.audio-mediaplayer.jp-volume-bar.progress-bar
{
height:
100% !important;
background:
#4aa6ff !important;
background-image : none !important;
border-radius : 2px !important;
}
/* Title + details — hidden in compact bar (we already show our own label) */
.audio-mediaplayer.jp-title, .audio-mediaplayer.jp-details,
.audio-mediaplayer.jp-toggles, .audio-mediaplayer.jp-no-solution,
.audio-mediaplayer.jp-no-flash
{
display:
none !important;
}
/* Playlist (kayit listesi) */
.audio-playlist
{
background:
transparent !important;
color:
#d8dee6;
}
.audio-playlist.playlist-item
{
background:
transparent;
color:
#b8c0c8;
padding:
4px 8px;
border-radius : 4px;
cursor:
pointer;
}
.audio-playlist.playlist-item:hover
{
background:
rgba(255, 255, 255, 0.04);
}
.audio-playlist.playlist-item.active
{
background:
rgba(74, 166, 255, 0.12);
color:
#e6edf2;
}
.audio-playlist.playlist-num
{
color:
#6c7780;
margin-right : 8px;
}
.audio-playlist.playlist-duration
{
color:
#6c7780;
margin-left : 8px;
font-variant-numeric : tabular-nums;
}
/* ─── Live Spaces — kompakt tab yuksekligi + soft accent ──────────────────── */
/* WTabWidget "nav-tabs-custom" sinifiyla render edilir. Wt 4 + Bootstrap dark
varsayilani secili sekmeyi acik mavi gosteriyor; kompakt + nötr tonlandirma. */
.nav-tabs-custom > ul.nav-tabs, .nav-tabs-custom >.Wt-tabs > ul,
.nav-tabs-custom ul.Wt-tabs, .nav-tabs-custom ul.nav
{
margin:
0;
padding:
0;
min-height : 0;
border-bottom : 1px solid #2c2c2c;
}
.nav-tabs-custom > ul.nav-tabs > li > a, .nav-tabs-custom >.Wt-tabs > ul > li > a,
.nav-tabs-custom ul.Wt-tabs > li > a, .nav-tabs-custom ul.nav > li > a,
.nav-tabs-custom ul.nav > li.nav-item > a.nav-link
{
padding:
7px 16px;
font-size : 13px;
line-height : 1.4;
min-height : 32px;
display:
inline-flex;
align-items : center;
border-radius : 0;
background:
transparent;
color:
#9aa3ad;
border:
1px solid transparent;
}
.nav-tabs-custom > ul.nav-tabs > li > a:hover
, .nav-tabs-custom ul.Wt-tabs > li > a:hover
, .nav-tabs-custom ul.nav > li > a:hover
{
color:
#d8dee6;
background:
rgba(255, 255, 255, 0.03);
}
.nav-tabs-custom > ul.nav-tabs > li.active > a,
.nav-tabs-custom > ul.nav-tabs > li.active > a:hover
, .nav-tabs-custom > ul.nav-tabs > li.active > a:focus
, .nav-tabs-custom >.Wt-tabs > ul > li.itemselected > a
, .nav-tabs-custom ul.Wt-tabs > li.itemselected > a
, .nav-tabs-custom ul.nav > li.active > a
, .nav-tabs-custom ul.nav > li > a.nav-link.active
{
background-color : #1f1f1f !important;
color:
#d8dee6 !important;
border-color : #2c2c2c #2c2c2c transparent #2c2c2c !important;
}
/* ── Landing Page ─────────────────────────────────────────────────────────── */
.landing-page
{
max-width : 1220px;
min-height : calc(100vh - 16px);
margin:
0 auto;
padding-bottom : 34px;
color:
#edf6fb;
background:
radial-gradient(circle at 80% 10%, rgba(42, 159, 214, 0.16), transparent 28%),
linear-gradient(180deg, #081019 0%, #0b1118 100%);
}
.landing-scroll-page
{
scroll-behavior : smooth;
scroll-snap-type : y proximity;
}
.landing-scroll-page >.landing-hero, .landing-scroll-page >.landing-section,
.landing-scroll-page >.landing-final-cta
{
min-height : calc(100vh - 118px);
scroll-margin-top : 72px;
scroll-snap-align : start;
}
.landing-hero
{
position:
relative;
overflow:
hidden;
background:
radial-gradient(circle at 76% 16%, rgba(42, 159, 214, 0.34), transparent 30%),
radial-gradient(circle at 18% 80%, rgba(119, 179, 0, 0.18), transparent 28%),
linear-gradient(135deg, #081019 0%, #101a24 48%, #06090d 100%);
border:
1px solid rgba(120, 210, 255, 0.18);
border-radius : 26px;
box-shadow : 0 34px 120px rgba(0, 0, 0, 0.58);
}
.landing-hero:before
{
content:
"";
position:
absolute;
inset:
0;
background-image : linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px)
, linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size : 42px 42px;
mask-image : linear-gradient(120deg, rgba(0, 0, 0, 0.7), transparent 74%);
pointer-events : none;
}
.landing-hero-grid
{
position:
relative;
display:
grid;
grid-template-columns : minmax(0, 820px);
gap:
24px;
align-items : center;
justify-content : center;
text-align : center;
}
.landing-hero-copy
{
margin:
0 auto;
}
.landing-eyebrow, .landing-section-kicker
{
color:
#7dd3fc;
font-size : 12px;
font-weight : 800;
letter-spacing : 0.16em;
text-transform : uppercase;
}
.landing-hero h1
{
font-size : 58px;
font-weight : 900;
letter-spacing :-0.04em;
line-height : 0.98;
margin:
16px auto 20px;
max-width : 760px;
}
.landing-lead, .landing-section p, .landing-final-cta p
{
color:
#b8c7d0;
font-size : 17px;
line-height : 1.75;
}
.landing-lead, .landing-section-lead
{
margin-left : auto;
margin-right : auto;
max-width : 760px;
text-align : center;
}
.landing-actions.btn
{
border-radius : 999px;
font-weight : 800;
padding:
13px 26px;
}
.landing-primary-cta
{
background:
linear-gradient(135deg, #2a9fd6, #77b300) !important;
border:
0 !important;
box-shadow : 0 16px 44px rgba(42, 159, 214, 0.34);
color:
#fff !important;
}
.landing-secondary-cta
{
background:
rgba(255, 255, 255, 0.08) !important;
border-color : rgba(255, 255, 255, 0.18) !important;
color:
#e8eef2 !important;
}
.landing-trust-row, .landing-ops-list
{
display:
flex;
flex-wrap : wrap;
gap:
10px;
margin-top : 28px;
}
.landing-trust-row span, .landing-ops-list span
{
background:
rgba(9, 18, 27, 0.72);
border:
1px solid rgba(125, 211, 252, 0.18);
border-radius : 999px;
color:
#dce9ef;
font-size : 12px;
font-weight : 700;
padding:
8px 12px;
}
.landing-trust-row strong{color : #7dd3fc;
}
.landing-metrics-row
{
display:
grid;
grid-template-columns : repeat(3, minmax(0, 1fr));
gap:
10px;
margin-top : 18px;
}
.landing-metrics-row div, .landing-card, .landing-use-case, .landing-ops,
.landing-final-cta {
background:
rgba(12, 20, 29, 0.86);
border : 1px solid rgba(255, 255, 255, 0.08);
border-radius : 18px;
box-shadow : 0 18px 70px rgba(0, 0, 0, 0.24);
}
.landing-metrics-row div
{
padding:
14px;
}
.landing-metrics-row strong, .landing-metrics-row span
{
display:
block;
}
.landing-metrics-row strong
{
font-size : 15px;
}
.landing-metrics-row span
{
color:
#8fa2ad;
font-size : 12px;
margin-top : 4px;
}
.landing-section h2, .landing-final-cta h2
{
font-size : 36px;
font-weight : 900;
letter-spacing :-0.025em;
margin:
8px 0 16px;
text-align : center;
}
.landing-steps, .landing-feature-grid, .landing-use-case-grid,
.landing-faq-grid {
display:
grid;
gap : 16px;
margin-top : 24px;
}
.landing-steps, .landing-feature-grid
{
grid-template-columns : repeat(2, minmax(0, 1fr));
}
.landing-capability-grid
{
grid-template-columns : repeat(4, minmax(0, 1fr));
margin-left : auto;
margin-right : auto;
max-width : 1120px;
}
.landing-capabilities-section
{
text-align : center;
}
.landing-use-case-grid { grid-template-columns:
repeat(4, minmax(0, 1fr));
}
.landing-faq-grid
{
align-items : start;
grid-template-columns : minmax(0, 1fr);
margin-left : auto;
margin-right : auto;
margin-top : 0;
max-width : 920px;
}
.landing-faq-item, .landing-faq-item.panel, .landing-faq-item.panel-default
{
background:
rgba(9, 18, 27, 0.78) !important;
border:
1px solid rgba(125, 211, 252, 0.16) !important;
border-radius : 18px !important;
box-shadow : 0 18px 54px rgba(0, 0, 0, 0.26) !important;
overflow:
hidden;
text-align : left;
}
.landing-faq-item >.panel-heading
{
background:
transparent !important;
border:
0 !important;
border-radius : 18px !important;
padding:
0 !important;
}
.landing-faq-item.panel-heading
{
position:
relative;
}
.landing-faq-item.accordion-toggle
{
color:
#edf6fb !important;
display:
block;
font-size : 16px;
font-weight : 900;
line-height : 1.35;
padding:
18px 48px 18px 20px;
text-decoration : none !important;
}
.landing-faq-item.Wt-collapse-button
{
align-items : center;
background:
rgba(42, 159, 214, 0.18);
border:
1px solid rgba(125, 211, 252, 0.18);
border-radius : 999px;
color:
#d9f3ff;
display:
inline-flex;
font-size : 0;
font-weight : 900;
height:
26px;
justify-content : center;
position:
absolute;
right:
18px;
top:
50% ;
transform:
translateY(-50%);
width:
26px;
z-index : 2;
}
.landing-faq-item.Wt-collapsed.Wt-collapse-button::before
{
content:
"+";
font-size : 18px;
}
.landing-faq-item:not(.Wt-collapsed).Wt-collapse-button::before
{
content:
"−";
font-size : 18px;
}
.landing-faq-item.panel-body
{
background:
rgba(4, 11, 18, 0.34) !important;
border-top : 1px solid rgba(125, 211, 252, 0.12) !important;
padding:
16px 18px 18px !important;
}
.landing-faq-answer
{
color:
#aebbc3;
font-size : 14px;
line-height : 1.65;
}
.landing-card, .landing-use-case { transition:
transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.landing-card:hover
, .landing-use-case:
hover
{
background:
rgba(16, 28, 40, 0.96);
border-color : rgba(125, 211, 252, 0.24);
transform:
translateY(-2px);
}
.landing-card h3, .landing-use-case h3 { font-size:
18px;
font-weight : 900;
margin : 12px 0 8px;
}
.landing-capability-grid.landing-card h3
{
font-size : 16px;
}
.landing-card p, .landing-use-case p { color:
#aebbc3;
font-size : 14px;
line-height : 1.65;
margin : 0;
}
.landing-capability-grid.landing-card p
{
font-size : 13px;
line-height : 1.55;
}
.landing-card-icon
{
align-items : center;
background:
linear-gradient(135deg, rgba(42, 159, 214, 0.22), rgba(119, 179, 0, 0.16));
border:
1px solid rgba(125, 211, 252, 0.18);
border-radius : 14px;
color:
#d9f3ff;
display:
inline-flex;
font-weight : 900;
justify-content : center;
min-height : 42px;
min-width : 42px;
padding:
0 11px;
}
.landing-final-cta
{
background:
radial-gradient(circle at 50% 0%, rgba(42, 159, 214, 0.22), transparent 46%),
linear-gradient(135deg, rgba(12, 20, 29, 0.98), rgba(7, 11, 16, 0.98));
text-align : center;
}
.demo-workspace-embed-panel
{
background:
rgba(20, 27, 34, 0.92) !important;
border:
1px solid rgba(138, 148, 160, 0.55) !important;
border-radius : 18px !important;
box-shadow : 0 24px 80px rgba(0, 0, 0, 0.42) !important;
overflow:
hidden !important;
}
.demo-workspace-embed
{
border:
0 !important;
border-radius : 17px !important;
display:
block !important;
}
@media(max-width : 900px){.landing-hero-grid,
.landing-steps,
.landing-feature-grid,
.landing-capability-grid,
.landing-use-case-grid,
.landing-faq-grid,
.landing-demo-grid,
.landing-metrics-row{grid-template-columns : 1fr;
}
.landing-hero h1
{
font-size : 40px;
}
}
/* ─── Pricing Page ─── */
.pricing-page
{
max-width : 1200px;
margin:
0 auto;
padding:
48px 24px 80px;
color:
#d7edf7;
}
.pricing-header
{
text-align : center;
margin-bottom : 40px;
}
.pricing-title
{
display:
block;
font-size : 36px;
font-weight : 700;
margin-bottom : 8px;
}
.pricing-subtitle
{
display:
block;
font-size : 16px;
color:
#8a94a0;
margin-bottom : 24px;
}
.pricing-toggle
{
display:
grid;
grid-template-columns : repeat(2, 1fr);
width:
min(420px, 100%);
margin-left : auto;
margin-right : auto;
align-items : center;
gap:
6px;
padding:
6px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
border:
1px solid rgba(255, 255, 255, 0.24);
border-radius : 999px;
box-shadow : inset 0 1px 0 rgba(255, 255, 255, 0.22)
, 0 18px 48px rgba(0, 0, 0, 0.32);
backdrop-filter : blur(18px) saturate(1.35);
-webkit-backdrop-filter : blur(18px) saturate(1.35);
}
.pricing-toggle-btn
{
display:
flex !important;
width:
100% ;
min-width : 0;
align-items : center;
justify-content : center;
text-align : center !important;
background:
transparent !important;
border:
1px solid transparent !important;
box-shadow : none !important;
color:
rgba(222, 236, 246, 0.72) !important;
border-radius : 999px !important;
padding:
9px 16px !important;
font-weight : 700;
letter-spacing : 0.01em;
text-shadow : 0 1px 12px rgba(255, 255, 255, 0.18);
}
.pricing-toggle-btn.active
{
background:
linear-gradient(135deg, rgba(226, 246, 255, 0.36), rgba(92, 170, 220, 0.22)) !important;
border-color : rgba(255, 255, 255, 0.42) !important;
box-shadow : inset 0 1px 0 rgba(255, 255, 255, 0.38)
, 0 10px 26px rgba(62, 149, 205, 0.22) !important;
color:
#f3fbff !important;
}
.pricing-cards
{
display:
grid;
grid-template-columns : repeat(3, 1fr);
gap:
24px;
align-items : stretch;
}
.landing-pricing-section.pricing-header
{
margin-bottom : 26px;
}
.landing-pricing-section.pricing-cards
{
margin-top : 26px;
}
.landing-pricing-section.pricing-demo-cta
{
margin-top : 18px;
}
.landing-demo-section
{
background:
rgba(12, 20, 29, 0.76);
border:
1px solid rgba(255, 255, 255, 0.08);
border-radius : 18px;
box-shadow : 0 18px 70px rgba(0, 0, 0, 0.24);
}
.landing-demo-grid
{
display:
grid;
grid-template-columns : minmax(0, 1.08fr) minmax(320px, 0.92fr);
gap:
24px;
align-items : stretch;
}
.landing-demo-preview, .landing-demo-copy
{
height:
100% ;
}
.landing-demo-copy h3
{
font-size : 24px;
font-weight : 900;
margin:
0 0 12px;
}
.pricing-card
{
background:
#15171c;
border:
1px solid rgba(138, 148, 160, 0.25);
border-radius : 16px;
padding:
32px 24px;
display:
flex;
flex-direction : column;
position:
relative;
}
.pricing-card-featured
{
border-color : rgba(80, 150, 200, 0.6);
box-shadow : 0 10px 30px rgba(80, 150, 200, 0.12);
transform:
translateY(-8px);
}
.pricing-card-badge
{
position:
absolute;
top:
16px;
right:
16px;
background:
rgba(80, 150, 200, 0.18);
color:
#9ecdff;
font-size : 11px;
font-weight : 700;
letter-spacing : 0.05em;
text-transform : uppercase;
padding:
4px 10px;
border-radius : 999px;
}
.pricing-card-name
{
display:
block;
font-size : 20px;
font-weight : 700;
margin-bottom : 12px;
}
.pricing-card-description
{
color : #aab4bf;
font-size : 14px;
line-height : 1.45;
margin : -4px 0 16px;
}
.tier-lang-badge
{
display : block;
font-size : 10px;
font-weight : 600;
letter-spacing : 0.04em;
color : #8b97a8;
}
.pricing-card-price
{
display:
inline-block;
font-size : 44px;
font-weight : 800;
margin-right : 6px;
}
.pricing-card-period
{
color:
#8a94a0;
font-size : 14px;
}
.pricing-card-features
{
margin:
24px 0;
display:
flex;
flex-direction : column;
gap:
10px;
flex-grow : 1;
}
.pricing-feature
{
font-size : 14px;
color:
#c7d5e0;
line-height : 1.5;
}
.pricing-card-cta
{
width:
100% ;
margin-top : auto;
}
.pricing-demo-cta
{
grid-column : 1 /-1;
text-align : center;
margin-top : 32px;
}
.pricing-demo-btn
{
color:
#9ecdff !important;
text-decoration : underline;
font-size : 15px;
}
/* Kart-altı dipnotlar (¹ ² açıklamaları) — yalnız renk; boyut/satır/margin C++'ta. */
.pricing-footnotes
{
color:
#8a94a0;
}
.pricing-footnote
{
color:
#8a94a0;
line-height : 1.6;
}
/* Mobile fallback */
@media(max-width : 900px){.pricing-cards{grid-template-columns : 1fr;
}
.pricing-card-featured
{
transform:
none;
}
}
/* === Public top navbar (Landing + Pricing) ============================ */
.landing-page, .pricing-page
{
padding-top : 52px;
}
.public-navbar
{
position:
fixed;
top:
0;
left:
0;
right:
0;
z-index : 1000;
display:
flex;
align-items : center;
justify-content : center;
padding:
8px 24px;
background:
rgba(20, 22, 28, 0.94);
backdrop-filter : blur(10px);
border-bottom : 1px solid rgba(255, 255, 255, 0.08);
}
.public-navbar-links
{
display:
flex;
gap:
8px;
}
.public-navbar-link
{
display:
block;
background:
transparent;
border:
0;
color:
#c6cad4;
padding:
8px 18px;
font-size : 14px;
border-radius : 6px;
cursor:
pointer;
text-decoration : none !important;
}
.public-navbar-link:hover
, .public-navbar-link:focus
{
color:
#ffffff;
background:
rgba(255, 255, 255, 0.06);
text-decoration : none !important;
}
.public-navbar-link-active
{
color:
#ffffff;
background:
rgba(255, 255, 255, 0.10);
text-decoration : none !important;
}
.public-mobile-brand, .public-mobile-toggle, .public-mobile-menu
{
display:
none;
}
@media(max-width : 760px)
{
.landing-page, .pricing-page, .demo-page, .login-page
{
padding-top : 0;
}
.landing-page >:not(.public-navbar)
, .pricing-page >:not(.public-navbar)
, .demo-page >:not(.public-navbar)
, .login-page >:not(.public-navbar)
{
transition:
transform 0.46s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.46s ease,
border-radius 0.46s ease;
}
.public-nav-open.landing-page >:not(.public-navbar)
, .public-nav-open.pricing-page >:not(.public-navbar)
, .public-nav-open.demo-page >:not(.public-navbar)
, .public-nav-open.login-page >:not(.public-navbar)
{
transform:
translateX(250px) translateY(50px);
border-radius : 24px 0 0 0;
box-shadow :-24px 0 70px rgba(0, 0, 0, 0.58);
}
.public-navbar
{
position:
fixed !important;
top:
0 !important;
left:
0 !important;
right:
auto !important;
bottom:
0 !important;
z-index : 1080 !important;
align-items : flex-start !important;
justify-content : flex-start !important;
width:
250px !important;
max-width : 250px !important;
height:
100vh !important;
min-height : 100vh !important;
padding:
72px 0 24px 0 !important;
background:
radial-gradient(circle at 0% 0%, rgba(42, 159, 214, 0.2), transparent 34%),
linear-gradient(180deg, #081019 0%, #101923 52%, #070b11 100%) !important;
border:
0 !important;
box-shadow : inset-1px 0 0 rgba(255, 255, 255, 0.08)
, 26px 0 70px rgba(0, 0, 0, 0.32);
overflow:
visible !important;
transform:
translateX(-250px);
transition:
transform 0.46s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.24s ease;
}
.public-navbar.public-navbar-open
{
transform:
translateX(0);
}
.public-navbar:not(.public-navbar-open)
{
box-shadow : none !important;
}
.public-navbar-links, .public-mobile-brand
{
display:
none;
}
.public-mobile-toggle
{
position:
fixed;
top:
18px;
left:
18px;
z-index : 1090;
display:
block;
width:
52px;
height:
52px;
padding:
0;
font-size : 0;
background:
linear-gradient(135deg, rgba(42, 159, 214, 0.98), rgba(20, 63, 96, 0.98));
border:
1px solid rgba(132, 221, 255, 0.52);
border-radius : 18px;
box-shadow : 0 16px 34px rgba(0, 0, 0, 0.46), 0 0 24px rgba(42, 159, 214, 0.18);
transition:
transform 0.46s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.24s ease,
box-shadow 0.24s ease;
}
.public-mobile-toggle::before, .public-mobile-toggle::after
{
content:
"";
position:
absolute;
left:
13px;
width:
26px;
height:
2px;
border-radius : 999px;
background:
#f5fbff;
transition:
transform 0.28s ease, top 0.28s ease, box-shadow 0.2s ease;
}
.public-mobile-toggle::before
{
top:
17px;
box-shadow : 0 8px 0 #f5fbff;
}
.public-mobile-toggle::after
{
top:
33px;
}
.public-mobile-toggle-open
{
transform:
translateX(250px);
background:
linear-gradient(135deg, rgba(19, 26, 36, 0.98), rgba(8, 12, 18, 0.98));
box-shadow : 0 18px 42px rgba(0, 0, 0, 0.56),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.public-mobile-toggle-open::before
{
top:
25px;
transform:
rotate(45deg);
box-shadow : none;
}
.public-mobile-toggle-open::after
{
top:
25px;
transform:
rotate(-45deg);
}
.public-mobile-menu
{
position:
relative;
display:
flex;
width:
250px;
max-width : 250px;
flex-direction : column;
align-items : stretch;
gap:
2px;
padding:
0 28px 0 0;
background:
transparent;
border:
0;
box-shadow : none;
}
.public-navbar:not(.public-navbar-open).public-mobile-menu
{
display:
none !important;
pointer-events : none;
}
.public-mobile-link
{
width:
100% ;
padding:
9px 12px 9px 24px;
font-size : 15px;
font-weight : 800;
letter-spacing : 0.03em;
line-height : 24px;
color:
rgba(235, 244, 252, 0.84) !important;
text-align : right;
border-radius : 0 18px 18px 0;
background:
transparent;
}
.public-mobile-link:hover
, .public-mobile-link:focus
, .public-mobile-link.public-navbar-link-active
{
color:
#ffffff !important;
background:
linear-gradient(90deg, transparent, rgba(42, 159, 214, 0.18));
}
}
/* Resources tier table — dark spinboxes */
body input.resource-spin, body.resource-spin, body input.form-control.resource-spin,
body input.Wt-spinbox.resource-spin, body.Wt-spinbox.resource-spin
{
background:
#1d2330 !important;
background-color : #1d2330 !important;
background-image : none !important;
color:
#e6e6e6 !important;
border:
1px solid rgba(255, 255, 255, 0.14) !important;
border-radius : 4px !important;
padding:
4px 8px !important;
box-shadow : none !important;
}
body input.resource-spin:focus
, body.resource-spin:focus
{
background:
#232a3a !important;
background-color : #232a3a !important;
border-color : #4aa6ff !important;
outline:
none !important;
box-shadow : 0 0 0 2px rgba(74, 166, 255, 0.25) !important;
}
/* ── WSpinBox yukarı/aşağı okları — Cyborg koyu tema ───────────────────────
WBootstrap3Theme tüm WSpinBox'lara .Wt-spinbox sınıfı ekler; BS3 sprite
(spin-buttons.png) koyu zeminde görünmez. Burada açık renkli iki chevron
çizilir (üst yarı = artır, alt yarı = azalt). .resource-spin hariç (tier
tablosu kasıtlı oksuz). Tıklama bölgesi WSpinBox.js'te sağdan ~22px; oklar
buna hizalı. background-position !important olduğundan BS3'ün .up/.dn sprite
kaydırması okları zıplatmaz; hover'da yalnızca ilgili ok parlatılır. */
input.Wt-spinbox:not(.resource-spin)
{
padding-right : 22px !important;
background-repeat : no-repeat, no-repeat !important;
background-position : right 6px top 7px, right 6px bottom 7px !important;
background-size : 10px 6px, 10px 6px !important;
background-image :
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1.5 4.5 5 1.5 8.5 4.5' fill='none' stroke='%238b97a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1.5 1.5 5 4.5 8.5 1.5' fill='none' stroke='%238b97a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
input.Wt-spinbox.up:not(.resource-spin)
{
background-image :
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1.5 4.5 5 1.5 8.5 4.5' fill='none' stroke='%23d4dae2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1.5 1.5 5 4.5 8.5 1.5' fill='none' stroke='%238b97a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
input.Wt-spinbox.dn:not(.resource-spin)
{
background-image :
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1.5 4.5 5 1.5 8.5 4.5' fill='none' stroke='%238b97a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1.5 1.5 5 4.5 8.5 1.5' fill='none' stroke='%23d4dae2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* Resources tier tablosu spinbox'larına da yukarı/aşağı okları. resource-spin
bloğu (yukarıda) background-image:none ile okları siliyordu; burada YALNIZCA
WSpinBox'a geri veriyoruz — düz .resource-spin line-edit'lere (süre alanı)
dokunmadan. Eşit specificity + daha geç sıra → background-image:none'ı ezer.
Koyu #1d2330 zemin korunur (background-color tekrar verilir). */
body input.Wt-spinbox.resource-spin
{
padding-right : 22px !important;
background-color : #1d2330 !important;
background-repeat : no-repeat, no-repeat !important;
background-position : right 6px top 6px, right 6px bottom 6px !important;
background-size : 10px 6px, 10px 6px !important;
background-image :
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1.5 4.5 5 1.5 8.5 4.5' fill='none' stroke='%23aab4c2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1.5 1.5 5 4.5 8.5 1.5' fill='none' stroke='%23aab4c2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.resource-status
{
margin-left : 12px;
font-size : 12px;
opacity:
0.85;
}
.resources-header
{
display:
flex !important;
align-items : center;
justify-content : space-between;
gap:
12px;
margin-bottom : 6px;
}
.resources-apply-all
{
flex:
0 0 auto;
}
.xcalibur-loading-indicator
{
position:
fixed;
top:
50% ;
left:
50% ;
z-index : 10000;
transform:
translate(-50%,-50%);
display:
flex;
align-items : center;
justify-content : center;
gap:
3px;
padding:
0;
background:
transparent;
pointer-events : none;
}
.xcalibur-loading-wave
{
width:
3px;
height:
28px;
border-radius : 20px;
background:
linear-gradient(45deg, #00ffff, #ffffff);
animation:
xcalibur-loading-wave 1s linear infinite;
}
.xcalibur-loading-wave:nth-child(2)
{
animation-delay : 0.1s;
}
.xcalibur-loading-wave:nth-child(3)
{
animation-delay : 0.2s;
}
.xcalibur-loading-wave:nth-child(4)
{
animation-delay : 0.3s;
}
.xcalibur-loading-wave:nth-child(5)
{
animation-delay : 0.4s;
}
.xcalibur-loading-wave:nth-child(6)
{
animation-delay : 0.5s;
}
.xcalibur-loading-wave:nth-child(7)
{
animation-delay : 0.6s;
}
.xcalibur-loading-wave:nth-child(8)
{
animation-delay : 0.7s;
}
.xcalibur-loading-wave:nth-child(9)
{
animation-delay : 0.8s;
}
.xcalibur-loading-wave:nth-child(10)
{
animation-delay : 0.9s;
}
@keyframes xcalibur-loading-wave{0% {transform : scaleY(0);
}
50%
{
transform:
scaleY(1);
}
100%
{
transform:
scaleY(0);
}
}
.gundem-page
{
min-height : calc(100vh - 44px);
padding:
0 16px 0 16px;
background:
radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.04), transparent 32%),
radial-gradient(circle at 84% 8%, rgba(255, 255, 255, 0.03), transparent 30%),
radial-gradient(circle at 54% 100%, rgba(255, 255, 255, 0.04), transparent 36%),
linear-gradient(180deg, #222 0%, #222 48%, #222 100%);
box-shadow : inset 0 1px 0 rgba(255, 255, 255, 0.9);
color:
#29443d;
}
.gundem-toolbar-compact
{
border:
1px solid rgba(255, 255, 255, 0.08);
border-radius : 14px;
background:
#050505;
box-shadow : none;
min-height : 40px;
backdrop-filter : none;
-webkit-backdrop-filter : none;
}
.gundem-title
{
font-size : 18px;
line-height : 22px;
font-weight : 900;
letter-spacing : 0.1em;
text-transform : uppercase;
color:
#234a42;
text-shadow : 0 1px 0 rgba(255, 255, 255, 0.82);
}
.gundem-subtitle
{
max-width : 820px;
overflow:
hidden;
text-overflow : ellipsis;
white-space : nowrap;
font-size : 12px;
line-height : 18px;
color:
rgba(77, 107, 98, 0.78);
}
.gundem-toolbar-controls
{
border:
1px solid rgba(255, 255, 255, 0.08);
border-radius : 12px;
background:
#050505;
padding:
0;
box-shadow : none;
}
.gundem-days-label
{
white-space : nowrap;
font-size : 12px;
line-height : 30px;
color:
rgba(70, 99, 91, 0.78);
}
.gundem-days-spin, .gundem-toolbar-btn
{
line-height : 26px !important;
}
.gundem-days-spin
{
border-color : rgba(255, 255, 255, 0.07) !important;
background:
rgba(255, 253, 248, 0.92) !important;
color:
#29443d !important;
box-shadow : none !important;
}
.gundem-toolbar-btn
{
border-color : rgba(255, 255, 255, 0.07) !important;
background:
linear-gradient(135deg, #222, #1a1a1a) !important;
color:
#29443d !important;
box-shadow : 0 8px 18px rgba(110, 151, 138, 0.12) !important;
}
.gundem-toolbar-btn.btn-primary
{
border-color : rgba(255, 255, 255, 0.07) !important;
background:
linear-gradient(135deg, #262626, #1a1a1a) !important;
color:
#2a9fd6 !important;
}
.gundem-analytics-panel
{
max-width : 1220px;
/* Dikey bosluk WVBoxLayout setSpacing(8) ile kontrol ediliyor; burada
yalnizca max-width blogunu yatayda ortala. */
margin : 0 auto;
border : 1px solid rgba(255, 255, 255, 0.07);
border-radius : 14px;
background : linear-gradient(180deg, #262626, #1a1a1a);
box-shadow : none;
backdrop-filter : none;
-webkit-backdrop-filter : none;
}
.gundem-analytics-header
{
display:
flex;
align-items : center;
justify-content : space-between;
gap:
12px;
margin-bottom : 12px;
}
.gundem-analytics-title
{
display:
flex;
align-items : baseline;
justify-content : space-between;
gap:
8px;
width : 100%;
min-width : 0;
}
.gundem-analytics-title strong
{
font-size : 16px;
font-weight : 800;
letter-spacing : 0.04em;
color:
#254d45;
white-space : nowrap;
}
.gundem-analytics-title span
{
flex : 1 1 auto;
min-width : 0;
margin-left : auto;
font-size : 12px;
text-align : right;
color:
rgba(75, 105, 98, 0.66);
white-space : nowrap;
overflow:
hidden;
text-overflow : ellipsis;
}
.gundem-filter-chip
{
border:
1px solid rgba(120, 176, 158, 0.34);
border-radius : 999px;
background:
rgba(234, 249, 241, 0.88);
color:
rgba(38, 76, 68, 0.88);
font-size : 11px;
font-weight : 800;
box-shadow : inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.gundem-analytics-grid
{
display:
grid;
grid-template-columns : repeat(auto-fit, minmax(168px, 1fr));
gap:
8px;
margin-bottom : 8px;
}
.gundem-stat-card
{
border-color : rgba(255, 255, 255, 0.07) !important;
border-radius : 18px !important;
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(234, 249, 241, 0.86)) !important;
box-shadow : 0 14px 30px rgba(103, 147, 132, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}
.gundem-stat-card:nth-child(3n + 2)
{
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 242, 231, 0.9)) !important;
}
.gundem-stat-card:nth-child(3n)
{
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(234, 247, 255, 0.88)) !important;
}
.gundem-stat-card .stat-number
{
margin-left : 0;
font-size : 25px;
line-height : 30px;
font-weight : 900;
color:
#244940;
}
.gundem-stat-card .stat-label
{
margin-top : 5px;
font-size : 10px;
line-height : 13px;
font-weight : 800;
color:
rgba(70, 100, 92, 0.62);
}
.gundem-chart-grid
{
display:
grid;
grid-template-columns : repeat(auto-fit, minmax(292px, 1fr));
gap:
14px;
}
.gundem-chart-card
{
border:
1px solid rgba(255, 255, 255, 0.08);
border-radius : 14px;
background:
#222;
box-shadow : none;
}
.gundem-chart-title, .gundem-chart-card h4
{
margin:
0 0 4px 0;
font-size : 13px;
font-weight : 900;
letter-spacing : 0.03em;
color:
#244940;
}
.gundem-chart-subtitle, .gundem-chart-card p
{
margin:
0 0 10px 0;
font-size : 11px;
line-height : 15px;
color:
rgba(73, 102, 95, 0.68);
}
.gundem-bar-row, .gundem-chart-row
{
width:
100% ;
margin:
0 0 7px 0;
border:
1px solid rgba(255, 255, 255, 0.07) !important;
border-radius : 12px !important;
background:
rgba(255, 255, 255, 0.72) !important;
color:
#2b4b44 !important;
text-align : left !important;
box-shadow : none !important;
}
.gundem-bar-row:hover
, .gundem-chart-row:hover
{
background:
rgba(237, 249, 243, 0.96) !important;
}
.gundem-chart-row-btn
{
display:
block !important;
width:
100% !important;
min-height : 0 !important;
padding:
0 !important;
border:
0 !important;
background:
transparent !important;
box-shadow : none !important;
color:
inherit !important;
font-size : 11px !important;
font-weight : 850 !important;
line-height : 15px !important;
text-align : left !important;
white-space : normal !important;
}
.gundem-chart-row-btn:hover
, .gundem-chart-row-btn:focus
{
color:
#2a9fd6 !important;
text-decoration : none !important;
outline:
none !important;
}
.gundem-bar-label
{
display:
flex;
justify-content : space-between;
gap:
8px;
font-size : 11px;
font-weight : 800;
}
.gundem-bar-track, .gundem-chart-bar-track
{
height:
9px;
border-radius : 999px;
background:
rgba(130, 178, 162, 0.18);
overflow:
hidden;
}
.gundem-bar-fill, .gundem-chart-bar-fill
{
height:
100% ;
border-radius : 999px;
background:
linear-gradient(90deg, #1c6a92, #2a9fd6);
}
.gundem-heatmap-row
{
display:
flex;
align-items : center;
justify-content : space-between;
gap:
8px;
margin-bottom : 7px;
padding:
8px 9px;
border-radius : 12px;
background:
rgba(255, 255, 255, 0.68);
color:
rgba(46, 76, 69, 0.9);
font-size : 11px;
}
.gundem-heatmap-score
{
font-weight : 900;
color:
rgba(41, 104, 85, 0.96);
}
.gundem-paper
{
position:
relative;
max-width : 1220px;
margin:
0 auto 0 auto;
border:
1px solid rgba(125, 173, 157, 0.32);
border-radius : 22px;
background:
radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.04), transparent 34%),
linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 25%),
linear-gradient(180deg, rgba(255, 252, 246, 0.97), rgba(249, 255, 252, 0.95));
box-shadow : 0 28px 70px rgba(102, 145, 130, 0.2),
inset 0 0 0 1px rgba(255, 255, 255, 0.7);
color:
#28483f;
font-family : Georgia
, 'Times New Roman'
, serif;
overflow:
hidden;
}
.gundem-paper:before
{
content:
'';
position:
absolute;
inset:
0;
pointer-events : none;
background-image : radial-gradient(rgba(255, 255, 255, 0.07) 0.5px, transparent 0.5px);
background-size : 4px 4px;
opacity:
0.24;
}
.gundem-masthead
{
position:
relative;
z-index : 1;
padding:
12px 14px 14px 14px;
margin-bottom : 14px;
border:
1px solid rgba(255, 255, 255, 0.07);
border-radius : 18px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(237, 249, 243, 0.82));
box-shadow : 0 14px 34px rgba(102, 145, 130, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
text-align : center;
}
.gundem-masthead-kicker
{
font-family : Arial
, sans-serif;
font-size : 10px;
font-weight : 800;
letter-spacing : 0.34em;
color:
rgba(76, 106, 98, 0.72);
}
.gundem-masthead-title
{
font-size : 42px;
line-height : 50px;
font-weight : 900;
letter-spacing : 0.12em;
color:
#244940;
text-shadow : 0 1px 0 rgba(255, 255, 255, 0.86);
}
.gundem-masthead-rule
{
display:
flex;
align-items : center;
gap:
10px;
font-family : Arial
, sans-serif;
font-size : 10px;
font-weight : 800;
letter-spacing : 0.12em;
text-transform : uppercase;
color:
rgba(70, 100, 92, 0.66);
}
.gundem-masthead-rule:before
, .gundem-masthead-rule:after
{
content:
'';
flex:
1;
border-top : 1px solid rgba(255, 255, 255, 0.07);
}
.gundem-paper >.Wt-container, .gundem-paper > div
{
position:
relative;
z-index : 1;
}
.gundem-story
{
height:
auto;
min-height : 0;
border:
1px solid rgba(255, 255, 255, 0.07);
border-top : 3px solid rgba(137, 217, 193, 0.5);
border-radius : 18px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 255, 252, 0.82));
box-shadow : 0 14px 30px rgba(102, 145, 130, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.gundem-empty
{
max-width : 680px;
margin : 8px auto 0 auto;
padding : 14px 18px;
border : 1px solid rgba(255, 255, 255, 0.08);
border-radius : 14px;
background : #222;
background-image : none;
box-shadow : none;
text-align : center;
}
.gundem-empty-kicker
{
margin-bottom : 9px;
font-size : 12px;
font-weight : 900;
letter-spacing : 0.18em;
text-transform : uppercase;
color:
rgba(54, 91, 81, 0.82);
}
.gundem-empty-text
{
font-size : 15px;
line-height : 22px;
color:
rgba(71, 101, 94, 0.74);
}
.gundem-page
{
background:
#030303;
box-shadow : none;
color:
#d6d9d7;
}
.gundem-toolbar-compact, .gundem-analytics-panel, .gundem-paper, .gundem-masthead,
.gundem-story, .gundem-empty
{
border-color : rgba(255, 255, 255, 0.07) !important;
background:
#171a19 !important;
box-shadow : 0 18px 42px rgba(0, 0, 0, 0.42) !important;
backdrop-filter : none;
-webkit-backdrop-filter : none;
}
.gundem-analytics-panel, .gundem-paper{background : #222 !important;
}
.gundem-toolbar-controls, .gundem-days-spin, .gundem-toolbar-btn,
.gundem-filter-chip, .gundem-stat-card, .gundem-chart-card,
.gundem-bar-row, .gundem-heatmap-row
{
border-color : rgba(255, 255, 255, 0.07) !important;
background:
#1a1d1c !important;
box-shadow : none !important;
color:
#d6dbd8 !important;
}
.gundem-stat-card:nth-child(3n + 2)
, .gundem-stat-card:nth-child(3n)
, .gundem-bar-row:hover{background : #2a2a2a !important;
}
.gundem-toolbar-btn.btn-primary
{
border-color : rgba(255, 255, 255, 0.07) !important;
background:
#26302d !important;
color:
#e4e7e5 !important;
}
.gundem-title, .gundem-analytics-title strong, .gundem-stat-card .stat-number,
.gundem-chart-title, .gundem-chart-card h4, .gundem-masthead-title,
.gundem-empty-kicker, .gundem-story h2, .gundem-story h4
{
color:
#e0e4e2 !important;
text-shadow : none !important;
}
.gundem-subtitle, .gundem-days-label, .gundem-analytics-title span,
.gundem-stat-card .stat-label, .gundem-chart-subtitle, .gundem-chart-card p,
.gundem-masthead-kicker, .gundem-masthead-rule, .gundem-empty-text,
.gundem-meta
{
color:
#aeb7b3 !important;
}
.gundem-eyebrow, .gundem-score
{
color:
#b8d8ce !important;
}
.gundem-quote
{
color:
#d4dad7 !important;
}
.gundem-continue, .gundem-chart-row-btn:hover
, .gundem-chart-row-btn:focus
{
color:
#c8e9df !important;
}
.gundem-bar-track, .gundem-chart-bar-track{background : #1a1a1a !important;
}
.gundem-bar-fill, .gundem-chart-bar-fill{
background : linear-gradient(90deg, #1c6a92, #2a9fd6) !important;
}
.gundem-heatmap-score{color : #2a9fd6 !important;
}
.gundem-paper:before
{
background-image : radial-gradient(rgba(255, 255, 255, 0.08) 0.5px, transparent 0.5px);
opacity:
0.18;
}
.gundem-masthead-rule:before
, .gundem-masthead-rule:after
{
border-top-color : rgba(255, 255, 255, 0.07) !important;
}
@media(max-width : 760px)
{
html, body,
#root,
.Wt-domRoot, .Wt-domRoot > div
{
width:
100% !important;
max-width : 100% !important;
}
.navbar-inverse
{
display:
none !important;
}
.content-area
{
width:
100% !important;
max-width : 100% !important;
min-height : 100vh;
max-height : none;
padding:
10px 10px 92px 10px !important;
overflow-x : auto !important;
overflow-y : visible !important;
}
.content-area.public-content-area
{
padding:
0 !important;
max-height : none;
overflow-y : visible !important;
}
.mobile-workspace-nav
{
display:
flex !important;
position:
fixed;
left:
12px;
right:
12px;
bottom:
12px;
z-index : 1040;
align-items : stretch;
justify-content : space-between;
gap:
6px;
padding:
7px;
border:
1px solid rgba(42, 159, 214, 0.22);
border-radius : 24px;
background:
linear-gradient(135deg, rgba(9, 12, 18, 0.96), rgba(18, 25, 34, 0.94));
box-shadow : 0 18px 44px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
backdrop-filter : blur(16px);
-webkit-backdrop-filter : blur(16px);
transition:
transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.mobile-workspace-nav.mobile-nav-open
{
border-color : rgba(42, 159, 214, 0.46);
box-shadow : 0 22px 56px rgba(0, 0, 0, 0.66), 0 0 34px rgba(42, 159, 214, 0.12);
}
.mobile-workspace-nav.mobile-nav-public-hidden
{
display:
none !important;
}
.mobile-nav-item
{
min-width : 0;
flex:
1 1 0;
height:
42px;
padding:
0 6px !important;
border:
1px solid rgba(255, 255, 255, 0.06) !important;
border-radius : 17px !important;
background:
rgba(255, 255, 255, 0.035) !important;
color:
#c9d7e3 !important;
font-size : 10px !important;
font-weight : 700 !important;
letter-spacing : 0.01em;
white-space : nowrap !important;
box-shadow : none !important;
transition:
background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mobile-nav-item.active, .mobile-nav-item:active
, .mobile-more-toggle.active
{
border-color : rgba(42, 159, 214, 0.48) !important;
background:
rgba(42, 159, 214, 0.18) !important;
color:
#e9f7ff !important;
}
.mobile-more-toggle
{
position:
relative;
flex:
0 0 48px;
width:
48px;
padding:
0 !important;
font-size : 0 !important;
color:
transparent !important;
border-radius : 19px !important;
background:
linear
-gradient(135deg, rgba(42, 159, 214, 0.95), rgba(25, 82, 121, 0.94)) !important;
border-color : rgba(132, 221, 255, 0.48) !important;
box-shadow : 0 8px 22px rgba(42, 159, 214, 0.28) !important;
}
.mobile-more-toggle::before, .mobile-more-toggle::after
{
content:
"";
position:
absolute;
left:
13px;
width:
22px;
height:
2px;
border-radius : 999px;
background:
#f3fbff;
transition:
top 0.2s ease, transform 0.26s ease, box-shadow 0.2s ease;
}
.mobile-more-toggle::before
{
top:
15px;
box-shadow : 0 6px 0 #f3fbff;
}
.mobile-more-toggle::after
{
top:
27px;
}
.mobile-more-toggle.active::before
{
top:
21px;
transform:
rotate(45deg);
box-shadow : 0 0 0 transparent;
}
.mobile-more-toggle.active::after
{
top:
21px;
transform:
rotate(-45deg);
}
.mobile-more-panel
{
display:
flex !important;
position:
fixed;
left:
12px;
right:
12px;
bottom:
76px;
z-index : 1039;
flex-direction : column;
gap:
8px;
padding:
10px;
border:
1px solid rgba(42, 159, 214, 0.25);
border-radius : 24px;
background:
linear-gradient(160deg, rgba(8, 11, 16, 0.98), rgba(20, 29, 39, 0.96));
box-shadow : 0 20px 54px rgba(0, 0, 0, 0.62),
0 0 0 1px rgba(255, 255, 255, 0.035) inset;
backdrop-filter : blur(18px);
-webkit-backdrop-filter : blur(18px);
}
.mobile-more-panel[style *= "display: none"]
{
display:
none !important;
}
.mobile-more-item
{
width:
100% ;
flex:
0 0 auto;
height:
42px;
justify-content : flex-start;
padding:
0 14px !important;
font-size : 12px !important;
text-align : left;
}
.mobile-workspace-link
{
min-width : 0;
flex:
1 1 0;
padding:
8px 4px !important;
font-size : 10px !important;
white-space : normal !important;
}
.landing-page, .landing-scroll-page
{
width:
100% !important;
max-width : 100% !important;
overflow-x : auto !important;
}
.public-navbar.landing-actions, .public-navbar.public-nav-actions
{
width:
auto !important;
max-width : 55% !important;
justify-content : flex-end !important;
}
.landing-scroll-page >.landing-hero, .landing-scroll-page >.landing-section,
.landing-scroll-page >.landing-final-cta
{
min-height : auto !important;
scroll-snap-align : none !important;
}
.landing-hero, .landing-section, .landing-final-cta
{
width:
100% !important;
max-width : 100% !important;
padding:
22px 14px !important;
border-radius : 0 !important;
margin:
0 !important;
}
.landing-hero-grid, .landing-steps, .landing-feature-grid,
.landing-capability-grid, .landing-use-case-grid, .landing-faq-grid,
.landing-demo-grid, .landing-metrics-row, .pricing-cards,
.demo-workspace-grid, .workspace-grid, .settings-grid, .dashboard-grid,
.dashboard-stats-grid, .gundem-analytics-grid, .gundem-chart-grid {
display:
grid !important;
grid-template-columns : minmax(0, 1fr) !important;
width:
100% !important;
max-width : 100% !important;
gap:
14px !important;
}
.landing-hero h1
{
font-size : 36px !important;
line-height : 40px !important;
letter-spacing :-0.04em !important;
}
.landing-section h2, .landing-final-cta h2
{
font-size : 28px !important;
line-height : 32px !important;
letter-spacing :-0.03em !important;
}
.landing-section p, .landing-hero p, .landing-final-cta p
{
font-size : 15px !important;
line-height : 22px !important;
}
.landing-actions
{
display:
flex !important;
width:
100% !important;
max-width : 100% !important;
flex-direction : column !important;
align-items : stretch !important;
gap:
10px !important;
}
.landing-actions.btn, .landing-actions a, .landing-actions button
{
width:
100% !important;
max-width : 100% !important;
white-space : normal !important;
}
.demo-workspace-embed, .demo-browser-shell, .demo-browser-body,
.demo-browser-content
{
width:
100% !important;
max-width : 100% !important;
min-width : 0 !important;
overflow-x : auto !important;
}
.demo-workspace-embed
{
height:
auto !important;
min-height : 360px !important;
}
.sortable-table-wrapper, .recordings-table, .recordings-table.sortable-table,
.sortable-table
{
max-width : 100% !important;
}
.recordings-table.sortable-table, .sortable-table
{
min-width : 860px !important;
}
}
@media(max-width : 760px)
{
.content-area
{
min-width : 0 !important;
padding:
12px 12px 98px 12px !important;
overflow-x : auto !important;
overflow-y : visible !important;
}
.content-area.public-content-area
{
padding:
0 !important;
}
.mobile-workspace-nav
{
display:
flex !important;
position:
fixed !important;
left:
auto !important;
right:
14px !important;
bottom:
14px !important;
z-index : 1040 !important;
align-items : flex-end !important;
justify-content : flex-end !important;
width:
58px !important;
height:
58px !important;
gap:
0 !important;
padding:
0 !important;
border:
0 !important;
border-radius : 0 !important;
background:
transparent !important;
box-shadow : none !important;
backdrop-filter : none !important;
-webkit-backdrop-filter : none !important;
pointer-events : none !important;
}
.mobile-workspace-nav.mobile-nav-open
{
border:
0 !important;
box-shadow : none !important;
}
.mobile-workspace-nav.mobile-nav-public-hidden,
.mobile-workspace-nav.mobile-nav-public-hidden[style *= "display: none"],
.mobile-workspace-nav.mobile-nav-public-hidden[style *= "display:none"]
{
display:
none !important;
}
.mobile-workspace-nav >.mobile-nav-item:not(.mobile-more-toggle)
{
display:
none !important;
}
.mobile-more-toggle
{
position:
relative !important;
z-index : 1041 !important;
flex:
0 0 58px !important;
width:
58px !important;
height:
58px !important;
min-width : 58px !important;
padding:
0 !important;
font-size : 0 !important;
color:
transparent !important;
border:
1px solid rgba(132, 221, 255, 0.48) !important;
border-radius : 22px !important;
background:
linear-gradient(135deg, rgba(42, 159, 214, 0.98), rgba(13, 42, 65, 0.96)) !important;
box-shadow : 0 16px 34px rgba(0, 0, 0, 0.52),
0 0 24px rgba(42, 159, 214, 0.22) !important;
pointer-events : auto !important;
}
.mobile-more-toggle::before, .mobile-more-toggle::after
{
content:
"";
position:
absolute;
left:
17px;
width:
24px;
height:
2px;
border-radius : 999px;
background:
#f3fbff;
transition:
top 0.22s ease, transform 0.26s ease, box-shadow 0.2s ease;
}
.mobile-more-toggle::before
{
top:
20px;
box-shadow : 0 8px 0 #f3fbff;
}
.mobile-more-toggle::after
{
top:
36px;
}
.mobile-more-toggle.active::before
{
top:
28px;
transform:
rotate(45deg);
box-shadow : 0 0 0 transparent;
}
.mobile-more-toggle.active::after
{
top:
28px;
transform:
rotate(-45deg);
}
.mobile-more-panel
{
display:
flex !important;
position:
fixed !important;
left:
auto !important;
right:
14px !important;
bottom:
84px !important;
z-index : 1039 !important;
width:
min(330px, calc(100vw - 28px)) !important;
max-height : calc(100vh - 116px) !important;
flex-direction : column !important;
gap:
8px !important;
padding:
12px !important;
overflow-y : auto !important;
border:
1px solid rgba(42, 159, 214, 0.28) !important;
border-radius : 24px !important;
background:
linear-gradient(160deg, rgba(8, 11, 16, 0.98), rgba(20, 29, 39, 0.96)) !important;
box-shadow : 0 24px 66px rgba(0, 0, 0, 0.64),
0 0 0 1px rgba(255, 255, 255, 0.035) inset !important;
backdrop-filter : blur(18px) !important;
-webkit-backdrop-filter : blur(18px) !important;
pointer-events : auto !important;
}
.mobile-more-panel[style *= "display: none"],
.mobile-more-panel[style *= "display:none"]
{
display:
none !important;
}
.mobile-more-panel.mobile-nav-item, .mobile-more-item
{
display:
flex !important;
width:
100% !important;
min-width : 0 !important;
height:
auto !important;
min-height : 44px !important;
flex:
0 0 auto !important;
align-items : center !important;
justify-content : flex-start !important;
padding:
0 14px !important;
font-size : 13px !important;
line-height : 18px !important;
text-align : left !important;
white-space : normal !important;
}
.workspace-shell, .workspace-grid, .settings-grid, .dashboard-grid,
.dashboard-stats-grid, .gundem-analytics-grid, .gundem-chart-grid,
.recordings-grid, .live-spaces-grid, .storage-grid, .management-grid,
.notifications-grid, .processing-grid, .speakers-grid, .search-grid,
.actions-grid, .detail-info-grid, .landing-feature-grid,
.landing-use-case-grid {
display:
grid !important;
grid-template-columns : minmax(0, 1fr) !important;
width:
100% !important;
max-width : 100% !important;
min-width : 0 !important;
gap:
14px !important;
}
.workspace-card, .settings-card, .dashboard-card, .gundem-card, .recording-card,
.live-space-card, .storage-card, .management-card, .notification-card,
.processing-card, .speaker-card, .search-card, .admin-card, .result-card,
.gundem-stat-card, .gundem-chart-card, .checkout-card, .panel, .well
{
width:
100% !important;
max-width : 100% !important;
min-width : 0 !important;
box-sizing : border-box !important;
}
.workspace-header, .dashboard-header, .settings-header, .recordings-header,
.live-spaces-header, .storage-header, .management-header, .notifications-header,
.processing-header, .speakers-header, .search-header, .gundem-masthead,
.page-header
{
display:
flex !important;
width:
100% !important;
max-width : 100% !important;
min-width : 0 !important;
flex-direction : column !important;
align-items : stretch !important;
gap:
12px !important;
}
.workspace-actions, .dashboard-actions, .settings-actions, .recordings-actions,
.live-spaces-actions, .storage-actions, .management-actions,
.notifications-actions, .processing-actions, .speakers-actions, .search-actions,
.form-actions, .button-row, .filter-actions, .cookie-toolbar, .admin-toolbar,
.table-toolbar, .gundem-toolbar-controls
{
display:
flex !important;
width:
100% !important;
max-width : 100% !important;
flex-wrap : wrap !important;
align-items : stretch !important;
gap:
8px !important;
}
.workspace-actions.btn, .workspace-actions button, .dashboard-actions.btn,
.dashboard-actions button, .settings-actions.btn, .settings-actions button,
.recordings-actions.btn, .recordings-actions button, .live-spaces-actions.btn,
.live-spaces-actions button, .storage-actions.btn, .storage-actions button,
.management-actions.btn, .management-actions button, .notifications-actions.btn,
.notifications-actions button, .processing-actions.btn, .processing-actions button,
.speakers-actions.btn, .speakers-actions button, .search-actions.btn,
.search-actions button, .form-actions.btn, .form-actions button, .button-row.btn,
.button-row button
{
flex:
1 1 150px !important;
min-width : 0 !important;
white-space : normal !important;
}
.sortable-table-wrapper, .recordings-table, .table-responsive, .Wt-tableview,
.Wt-treeview
{
width:
100% !important;
max-width : 100% !important;
overflow-x : auto !important;
-webkit-overflow-scrolling : touch !important;
}
.recordings-table.sortable-table, .sortable-table-wrapper.sortable-table,
.table-responsive table, .Wt-tableview table, .Wt-treeview table
{
min-width : 720px !important;
}
input, select, textarea, .form-control, .Wt-edit, .Wt-combobox, .Wt-spinbox
{
max-width : 100% !important;
box-sizing : border-box !important;
}
}
.gundem-page
{
min-height : calc(100vh - 44px);
padding : 4px 16px 12px 16px;
background : #000 !important;
box-shadow : none !important;
color : #dce4ec !important;
}
.gundem-toolbar-compact, .gundem-analytics-panel, .gundem-paper, .gundem-masthead,
.gundem-story, .gundem-empty
{
border-color : rgba(255, 255, 255, 0.07) !important;
background : #222 !important;
background-image : none !important;
box-shadow : 0 20px 48px rgba(0, 0, 0, 0.46) !important;
backdrop-filter : none !important;
-webkit-backdrop-filter : none !important;
}
.gundem-analytics-panel, .gundem-paper
{
/* Cap kaldirildi: gundem adalari da diger sayfalar gibi mevcut genisligi
tam kullansin (genis ekranda ortalanip daralmasin). */
max-width : none !important;
}
.gundem-paper
{
background : #222 !important;
background-image : none !important;
}
/* Buyuk ada hissini kaldir: analytics paneli sayfa zeminiyle butunlessin.
Adalar arasi bosluk C++ tarafinda (setMargin) kontrol ediliyor. */
.gundem-analytics-panel
{
background : transparent !important;
background-image : none !important;
box-shadow : none !important;
border-color : transparent !important;
}
.gundem-toolbar-controls, .gundem-days-spin, .gundem-toolbar-btn,
.gundem-filter-chip, .gundem-stat-card, .gundem-chart-card,
.gundem-bar-row, .gundem-chart-row, .gundem-heatmap-row
{
border-color : rgba(255, 255, 255, 0.07) !important;
background : #222 !important;
box-shadow : none !important;
color : #dce4ec !important;
}
.gundem-toolbar-controls
{
background : #222 !important;
}
.gundem-days-spin
{
background : #1a1a1a !important;
color : #e7edf5 !important;
}
.gundem-toolbar-btn.btn-primary
{
border-color : rgba(42, 159, 214, 0.6) !important;
background : linear-gradient(135deg, #1c6a92, #2a9fd6) !important;
color : #f3f8ff !important;
}
.gundem-title, .gundem-analytics-title strong, .gundem-stat-card .stat-number,
.gundem-chart-title, .gundem-chart-card h4, .gundem-masthead-title,
.gundem-empty-kicker, .gundem-story h2, .gundem-story h4
{
color : #eef5fb !important;
text-shadow : none !important;
}
.gundem-subtitle, .gundem-days-label, .gundem-analytics-title span,
.gundem-stat-card .stat-label, .gundem-chart-subtitle, .gundem-chart-card p,
.gundem-masthead-kicker, .gundem-masthead-rule, .gundem-empty-text,
.gundem-meta
{
color : #9aa9bb !important;
}
.gundem-filter-chip
{
background : #1a1a1a !important;
color : #c7d5e5 !important;
}
.gundem-analytics-grid
{
grid-template-columns : repeat(4, minmax(0, 1fr)) !important;
grid-auto-rows : auto !important;
gap : 12px !important;
align-items : stretch !important;
}
.gundem-stat-card
{
min-height : 78px !important;
height : 78px !important;
border-radius : 18px !important;
border : 1px solid rgba(255, 255, 255, 0.07) !important;
background : #222 !important;
background-image : none !important;
box-shadow : 0 16px 32px rgba(0, 0, 0, 0.32) !important;
box-sizing : border-box !important;
display : flex !important;
flex-direction : column !important;
justify-content : center !important;
overflow : hidden !important;
}
.gundem-stat-card:nth-child(3n + 2), .gundem-stat-card:nth-child(3n),
.gundem-stat-card:nth-child(odd), .gundem-stat-card:nth-child(even)
{
background : #222 !important;
background-image : none !important;
}
.gundem-chart-grid
{
grid-template-columns : repeat(auto-fit, minmax(320px, 1fr)) !important;
gap : 14px !important;
align-items : stretch !important;
}
.gundem-chart-card
{
border-color : rgba(255, 255, 255, 0.07) !important;
background : #222 !important;
background-image : none !important;
box-shadow : 0 18px 38px rgba(0, 0, 0, 0.38) !important;
}
.gundem-chart-card-wide
{
grid-column : 1 / -1 !important;
}
.gundem-chart-card-3d
{
min-height : 360px !important;
}
/* Heatmap karti sabit 360px'e zorlanmasin; veri az/bos oldugunda dev bos alan
birakiyordu. Icerik (saatlik tablo) kendi yuksekligini alir. */
.gundem-chart-card-heatmap
{
min-height : 0 !important;
}
.gundem-bar-row:hover, .gundem-chart-row:hover
{
background : #2a2a2a !important;
}
.gundem-chart-row-btn:hover, .gundem-chart-row-btn:focus,
.gundem-continue, .gundem-eyebrow, .gundem-score
{
color : #2a9fd6 !important;
text-decoration : none !important;
outline : none !important;
}
.gundem-quote
{
color : #d8e2ec !important;
}
.gundem-bar-track, .gundem-chart-bar-track
{
background : #1a1a1a !important;
}
.gundem-bar-fill, .gundem-chart-bar-fill
{
background : linear-gradient(90deg, #1c6a92, #2a9fd6) !important;
}
.gundem-heatmap-score
{
color : #2a9fd6 !important;
}
.gundem-hour-heatmap-wrap
{
width : 100% !important;
overflow-x : auto !important;
overflow-y : hidden !important;
padding-bottom : 3px !important;
}
.gundem-hour-heatmap
{
min-width : 960px !important;
width : 100% !important;
border-collapse : separate !important;
border-spacing : 4px !important;
color : #dce4ec !important;
}
.gundem-hour-heatmap th, .gundem-hour-heatmap td
{
border : 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius : 8px !important;
background : #222 !important;
font-size : 10px !important;
line-height : 18px !important;
text-align : center !important;
white-space : nowrap !important;
}
.gundem-hour-heatmap th
{
color : #9aa9bb !important;
font-weight : 800 !important;
}
.gundem-hour-day-cell
{
min-width : 94px !important;
padding : 0 8px !important;
color : #dce4ec !important;
text-align : left !important;
}
.gundem-hour-cell
{
min-width : 32px !important;
height : 28px !important;
font-weight : 900 !important;
color : #f1f6fb !important;
}
.gundem-hour-cell-intensity-0
{
background : #1a1a1a !important;
color : #536274 !important;
}
.gundem-hour-cell-intensity-1
{
background : rgba(42, 159, 214, 0.18) !important;
}
.gundem-hour-cell-intensity-2
{
background : rgba(42, 159, 214, 0.34) !important;
}
.gundem-hour-cell-intensity-3
{
background : rgba(42, 159, 214, 0.52) !important;
}
.gundem-hour-cell-intensity-4
{
background : rgba(42, 159, 214, 0.72) !important;
}
.gundem-hour-cell-intensity-5
{
background : rgba(42, 159, 214, 0.92) !important;
}
.gundem-topic-speaker-3d-wrap
{
width : 100% !important;
min-height : 620px !important;
padding : 0 !important;
background : #222 !important;
overflow-x : auto !important;
overflow-y : auto !important;
box-sizing : border-box !important;
}
.gundem-paper::before
{
background-image : radial-gradient(rgba(255, 255, 255, 0.08) 0.5px, transparent 0.5px) !important;
opacity : 0.18 !important;
}
.gundem-masthead-rule::before, .gundem-masthead-rule::after
{
border-top-color : rgba(255, 255, 255, 0.12) !important;
}
@media(min-width : 1290px)
{
.gundem-chart-grid
{
grid-template-columns : repeat(2, minmax(0, 1fr)) !important;
}
.gundem-chart-card-wide
{
grid-column : 1 / -1 !important;
}
}
@media(max-width : 760px)
{
.gundem-analytics-grid, .gundem-chart-grid
{
grid-template-columns : minmax(0, 1fr) !important;
}
.gundem-hour-heatmap
{
min-width : 820px !important;
}
.gundem-chart-card-3d
{
min-height : 300px !important;
}
.gundem-chart-card-heatmap
{
min-height : 0 !important;
}
}
.content-area.gundem-content-area, .gundem-content-area, .gundem-content-area > div,
.gundem-content-area .Wt-stack, .gundem-content-area .Wt-stack > div
{
background : #000 !important;
background-image : none !important;
box-shadow : none !important;
}
.content-area.gundem-content-area
{
min-height : 0 !important;
max-height : none !important;
height : auto !important;
padding : 8px 20px 152px 20px !important;
overflow-y : visible !important;
}
.gundem-content-area > div,
.gundem-content-area .Wt-stack,
.gundem-content-area .Wt-stack > div
{
min-height : 0 !important;
height : auto !important;
}
.gundem-page
{
min-height : 0 !important;
height : auto !important;
/* Yatay padding 0: content-area zaten 20px yan bosluk veriyor; ek 16px
gundem icerigini diger sayfalara gore daraltiyordu. Artik gundem de
tablolar gibi content-area'yi tam genislikte kullanir. */
padding : 0 !important;
background : #000 !important;
background-image : none !important;
overflow : visible !important;
}
.gundem-toolbar-compact
{
background : transparent !important;
background-image : none !important;
border : 0 !important;
border-radius : 0 !important;
box-shadow : none !important;
margin : 0 !important;
min-height : 34px !important;
overflow : visible !important;
padding : 0 !important;
}
.gundem-toolbar-controls
{
background : transparent !important;
background-image : none !important;
border : 0 !important;
border-radius : 0 !important;
box-shadow : none !important;
padding : 0 !important;
overflow : visible !important;
}
.gundem-toolbar-btn
{
border-radius : 10px !important;
overflow : visible !important;
white-space : nowrap !important;
}
.gundem-toolbar-btn.btn-primary
{
min-width : 86px !important;
height : 32px !important;
line-height : 18px !important;
}
.gundem-analytics-grid
{
display : grid !important;
grid-template-columns : repeat(auto-fit, minmax(168px, 1fr)) !important;
grid-auto-rows : 68px !important;
gap : 8px !important;
}
.gundem-stat-card
{
background : #222 !important;
background-image : none !important;
border-color : rgba(255, 255, 255, 0.07) !important;
box-shadow : none !important;
min-height : 68px !important;
height : 68px !important;
padding : 8px 12px !important;
border-radius : 14px !important;
}
.gundem-stat-card .stat-number
{
color : #eef5fb !important;
font-size : 20px !important;
line-height : 24px !important;
}
.gundem-chart-grid
{
display : grid !important;
grid-template-columns : repeat(2, minmax(0, 1fr)) !important;
gap : 14px !important;
align-items : stretch !important;
}
.gundem-chart-card
{
width : 100% !important;
box-sizing : border-box !important;
overflow : visible !important;
background : #222 !important;
background-image : none !important;
border-color : rgba(255, 255, 255, 0.07) !important;
}
.gundem-chart-card-wide, .gundem-chart-card-3d, .gundem-chart-card-heatmap
{
grid-column : 1 / -1 !important;
}
.gundem-chart-card-3d, .gundem-topic-speaker-3d-wrap
{
background : #222 !important;
background-image : none !important;
}
.gundem-topic-speaker-3d-wrap
{
width : 100% !important;
max-width : 100% !important;
height : 620px !important;
min-height : 620px !important;
padding : 0 !important;
overflow-x : auto !important;
overflow-y : auto !important;
box-sizing : border-box !important;
}
.gundem-topic-speaker-3d-chart, .gundem-topic-speaker-3d-wrap canvas,
.gundem-topic-speaker-3d-wrap .Wt-chart, .gundem-topic-speaker-3d-wrap > div
{
min-width : 1480px !important;
max-width : none !important;
background : #222 !important;
background-image : none !important;
box-sizing : border-box !important;
}
@media(max-width : 760px)
{
.gundem-analytics-grid, .gundem-chart-grid
{
grid-template-columns : minmax(0, 1fr) !important;
}
.gundem-analytics-grid
{
grid-auto-rows : 66px !important;
}
.gundem-stat-card
{
height : 66px !important;
min-height : 66px !important;
}
.gundem-toolbar-compact
{
padding : 2px 0 !important;
}
.gundem-toolbar-controls
{
max-width : 100% !important;
}
}
/* Gundem newspaper masonry layout */
.gundem-masonry
{
display : flex !important;
align-items : flex-start !important;
gap : 12px !important;
}
.gundem-masonry-column
{
display : block !important;
min-width : 0 !important;
box-sizing : border-box !important;
}
.gundem-masonry-item
{
break-inside : avoid !important;
box-sizing : border-box !important;
}
.gundem-story-masonry
{
min-height : 0 !important;
}
@media(max-width : 760px)
{
.gundem-masonry
{
flex-direction : column !important;
gap : 12px !important;
}
.gundem-masonry-column
{
width : 100% !important;
}
}
/* Saatlik gerceklesme yogunlugu kartinda baslik ustte tek satir dursun; alt
baslik ("Gun x saat kiriliminda gundem eslesmeleri") onun altinda ve saga
hizali yer alsin. */
.gundem-chart-card-heatmap .gundem-chart-title
{
display : block !important;
}
.gundem-chart-card-heatmap .gundem-chart-subtitle
{
display : block !important;
text-align : right !important;
}
.gundem-analytics-list-grid
{
display : grid !important;
grid-template-columns : repeat(4, minmax(0, 1fr)) !important;
gap : 12px !important;
align-items : stretch !important;
}
.gundem-analytics-list-grid .gundem-chart-card
{
min-width : 0 !important;
min-height : 0 !important;
}
.gundem-topic-speaker-matrix-wrap
{
width : 100% !important;
max-width : 100% !important;
min-height : 0 !important;
height : auto !important;
padding : 0 0 4px 0 !important;
background : #222 !important;
background-image : none !important;
overflow-x : hidden !important;
overflow-y : auto !important;
box-sizing : border-box !important;
}
.gundem-topic-speaker-viewport
{
width : 100% !important;
max-width : 100% !important;
min-width : 0 !important;
}
.gundem-topic-speaker-scroll
{
min-width : 0 !important;
max-width : 100% !important;
background : #222 !important;
background-image : none !important;
}
.gundem-topic-speaker-axis,
.gundem-topic-speaker-matrix
{
border-collapse : collapse !important;
border-spacing : 0 !important;
background : #222 !important;
background-image : none !important;
}
.gundem-topic-speaker-corner,
.gundem-topic-speaker-topic,
.gundem-topic-speaker-head,
.gundem-topic-speaker-cell
{
box-sizing : border-box !important;
border : 1px solid rgba(255, 255, 255, 0.08) !important;
padding : 0 !important;
overflow : hidden !important;
}
.gundem-topic-speaker-corner,
.gundem-topic-speaker-head
{
background : #2a2a2a !important;
color : rgba(238, 246, 255, 0.78) !important;
font-size : 11px !important;
font-weight : 800 !important;
letter-spacing : 0.04em !important;
/* Uzun topic baslik adlari (orn. "Propaganda ve Manipulasyon") tek satira
sigmadigi icin sarmalanmaya birakildi; dikey ortalama vertical-align ile.
Hucre yuksekligi C++ tarafinda (setHeight) artirildi. */
line-height : 1.25 !important;
vertical-align : middle !important;
text-align : center !important;
white-space : normal !important;
}
.gundem-topic-speaker-topic
{
background : #262626 !important;
color : #eef6ff !important;
font-size : 12px !important;
font-weight : 800 !important;
line-height : 34px !important;
text-align : left !important;
text-overflow : ellipsis !important;
white-space : nowrap !important;
}
.gundem-topic-speaker-topic .Wt-text
{
display : block !important;
padding : 0 10px !important;
overflow : hidden !important;
text-overflow : ellipsis !important;
}
.gundem-topic-speaker-head .Wt-text
{
display : block !important;
padding : 4px 6px !important;
overflow : visible !important;
white-space : normal !important;
word-break : break-word !important;
line-height : 1.2 !important;
}
.gundem-topic-speaker-cell
{
background : #1c1c1c !important;
line-height : 34px !important;
text-align : center !important;
}
.gundem-topic-speaker-level-0
{
background : #1a1a1a !important;
}
.gundem-topic-speaker-level-1
{
background : rgba(42, 159, 214, 0.22) !important;
}
.gundem-topic-speaker-level-2
{
background : rgba(42, 159, 214, 0.38) !important;
}
.gundem-topic-speaker-level-3
{
background : rgba(42, 159, 214, 0.55) !important;
}
.gundem-topic-speaker-level-4
{
background : rgba(42, 159, 214, 0.74) !important;
}
.gundem-topic-speaker-level-5
{
background : rgba(42, 159, 214, 0.92) !important;
}
.gundem-topic-speaker-btn,
.gundem-topic-speaker-btn:hover,
.gundem-topic-speaker-btn:focus
{
width : 100% !important;
height : 100% !important;
padding : 0 !important;
border : 0 !important;
background : transparent !important;
box-shadow : none !important;
color : #eef6ff !important;
font-size : 12px !important;
font-weight : 900 !important;
line-height : 34px !important;
text-decoration : none !important;
}
.gundem-topic-speaker-painted-chart
{
display : block !important;
max-width : none !important;
border-radius : 16px !important;
background : #222 !important;
background-image : none !important;
}
.gundem-chart-card-3d .gundem-topic-speaker-matrix-wrap,
.gundem-chart-card-3d .gundem-topic-speaker-painted-chart
{
min-height : 0 !important;
}
.gundem-story,
.gundem-story-masonry
{
min-height : 0 !important;
height : auto !important;
}
.gundem-story-title
{
margin : 0 0 7px 0 !important;
color : #eef5fb !important;
font-size : 14px !important;
font-weight : 800 !important;
line-height : 1.25 !important;
letter-spacing : 0.01em !important;
}
.gundem-quote
{
min-height : 0 !important;
height : auto !important;
white-space : normal !important;
word-break : normal !important;
overflow-wrap : anywhere !important;
}
@media(max-width : 1180px)
{
.gundem-analytics-list-grid
{
grid-template-columns : repeat(2, minmax(0, 1fr)) !important;
}
}
@media(max-width : 760px)
{
.gundem-analytics-list-grid
{
grid-template-columns : minmax(0, 1fr) !important;
}
}
/* ── Gündem: filtre toolbar'ini scroll'da uste sabitle (sticky) ──
Bu Wt uygulamasi dokumani seviyesinde kaydirir. position:sticky'nin
calismasi icin sticky ogesi ile gercek scroller (html) arasinda
overflow:auto/scroll olan ata kalmamali. content-area ve body C++ tarafinda
inline overflow:auto aldigi icin sticky tuzaga dusuyor; bu tuzagi YALNIZCA
Gundem ekraninda (body.gundem-active) kaldiriyoruz, diger sayfalar etkilenmez.
Sticky ogesi, toolbar'i saran Wt layout wrapper'idir (gundem-page'in ilk
cocugu); kapsayan blok uzun gundem-page oldugu icin scroll boyunca uste
yapisir. */
body.gundem-active
{
overflow : visible !important;
}
body.gundem-active .gundem-content-area
{
overflow-x : visible !important;
overflow-y : visible !important;
}
body.gundem-active .gundem-page > .Wt-fill-width:first-child
{
position : sticky !important;
top : 0 !important;
z-index : 50 !important;
/* Sabitlenince arkasindaki icerik gorunmesin: sayfa zemini (#000) ile ayni
opak renk; sticky bar siyah. */
background : #000 !important;
}
/* ── Erişilebilirlik: "İçeriğe geç" atlama bağlantısı ──
Görsel olarak ekran dışında tutulur; klavye ile odaklanınca (Tab) görünür
hale gelir. Mantık/landmark C++ tarafında (skip-link anchor + ),
burada yalnızca görünürlük geçişi var. DİKKAT: pseudo-selektörde (:focus)
iki nokta etrafına boşluk konmaz — boşluk selektörü kırar. */
.skip-link
{
/* Ekran dışına (sol) taşı — top:-Npx absolute'ta positioned ancestor varsa
sızabiliyor; left:-9999px her zaman güvenli gizler. Odaklanınca geri gelir. */
position : absolute;
left : -9999px;
top : 8px;
z-index : 3000;
padding : 10px 18px;
border-radius : 8px;
background : #161b22;
color : #e6edf3;
border : 1px solid rgba(255, 255, 255, .18);
font-weight : 600;
text-decoration : none;
box-shadow : 0 6px 24px rgba(0, 0, 0, .45);
}
.skip-link:focus
{
left : 12px;
outline : 3px solid #2f81f7;
outline-offset : 2px;
}
/* Tespit metot satiri surukle-birak gorsel geri bildirimi */
.det-method-row.det-drop-hover { outline: 2px dashed #2a9fd6; outline-offset: 2px; }
/* ============================================================
Kaynak Paketleri (resource packs) — yalniz gorsel.
Layout/boyut/spacing C++ (Wt) tarafinda; burada sadece renk,
border, tipografi, rozet ve kart vurgusu var.
============================================================ */
/* Admin Resources: ikili spinbox hucresi ($ price + qty) gorsel hiza */
.pack-dual-spin
{
align-items : center;
}
/* Tek-seferlik / aylik rozet (admin + PacksPage) */
.pack-kind-badge
{
display : inline-block;
padding : 1px 8px;
border-radius : 10px;
font-size : 11px;
font-weight : 600;
line-height : 1.7;
white-space : nowrap;
}
.pack-kind-one-time
{
background : rgba(42, 159, 214, .18);
color : #2a9fd6;
}
.pack-kind-recurring
{
background : rgba(119, 178, 85, .18);
color : #77b255;
}
/* Admin: matris altindaki paket saglayici ID bolumu */
.pack-provider-section
{
margin-top : 18px;
}
.pack-provider-title
{
font-size : 14px;
font-weight : 600;
margin-bottom : 8px;
}
/* Landing/pricing: 4. paket karti vurgusu */
.pricing-card-packs
{
border-color : #2a9fd6;
}
.pricing-card-price-contact
{
font-size : 20px;
font-weight : 600;
color : #2a9fd6;
}
/* PacksPage: satin alma sayfasi (genislik merkezleme + kart gorseli) */
.packs-page
{
max-width : 900px;
margin : 0 auto;
}
.packs-card
{
background : #2b2b2b;
border : 1px solid #3a3a3a;
border-radius : 8px;
margin-bottom : 18px;
}
.packs-title
{
font-size : 22px;
font-weight : 700;
}
.packs-subtitle
{
color : #9a9a9a;
font-size : 14px;
}
.packs-gate-note
{
color : #c9a227;
font-size : 14px;
}
.packs-item-row
{
align-items : center;
border-bottom : 1px solid #3a3a3a;
}
.packs-item-name
{
font-size : 15px;
font-weight : 600;
}
.packs-item-sub
{
color : #9a9a9a;
font-size : 12px;
}
.packs-line-total
{
font-size : 15px;
font-weight : 600;
text-align : right;
}
.packs-grand-total
{
font-size : 18px;
font-weight : 700;
text-align : right;
}
.packs-section-title
{
font-size : 16px;
font-weight : 700;
}
.packs-active-row
{
align-items : center;
border-bottom : 1px solid #3a3a3a;
}
.packs-active-none
{
color : #9a9a9a;
font-size : 14px;
}
.packs-portal-note
{
color : #9a9a9a;
font-size : 13px;
}
/* Aktif kayit karti (DashboardPage RecordingCard): baslik + 2 kolonlu roster.
Izgara/layout C++'tan inline ayarlanir; burada yalniz gorsel detaylar +
takip-edilen blink animasyonu (C++ karsiligi olmayan tarayici-only efekt). */
.recording-card-title { font-weight: 600; min-width: 0; }
.recording-card-handle { margin-left: 3px; font-size: .85em; }
@keyframes xcal-roster-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.recording-card-tracked { animation: xcal-roster-blink 1.4s ease-in-out infinite; }