/* --- Fonts: Inter --- */
/* _Layout.cshtml içinde kısmına ekleyeceğiz (aşağıda var) */
/* ===== Tokens ===== */
:root {
/* Brand */
--ps-brand-blue: #4D58EB; /* logodaki mavi */
--ps-brand-blue-2: #3F49D6; /* hover için koyusu */
/* Theme */
--vtm-blue: var(--ps-brand-blue);
--vtm-blue-2: var(--ps-brand-blue-2);
--vtm-orange: #f07c00;
--vtm-orange-2: #d96f00;
--vtm-ink: #0f172a;
--vtm-muted: #64748b;
--vtm-bg: #f6f8fc;
--vtm-card: #fff;
--vtm-border: #e6eaf2;
--vtm-green: #16a34a;
--vtm-green-2: #15803d;
--vtm-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
/* ===== Base ===== */
body {
font-family: var(--vtm-font-sans);
color: var(--vtm-ink);
background: var(--vtm-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.text-vtm-muted {
color: rgba(100,116,139,.92) !important; /* Inter'de az güç */
}
/* cards */
.card-soft {
background: var(--vtm-card);
border: 1px solid var(--vtm-border);
border-radius: 1rem;
box-shadow: 0 12px 30px rgba(15,23,42,.06);
}
/* buttons */
.btn-vtm-primary {
--bs-btn-bg: var(--vtm-blue);
--bs-btn-border-color: var(--vtm-blue);
--bs-btn-hover-bg: var(--vtm-blue-2);
--bs-btn-hover-border-color: var(--vtm-blue-2);
--bs-btn-color: #fff;
}
.btn-vtm-accent {
--bs-btn-bg: var(--vtm-orange);
--bs-btn-border-color: var(--vtm-orange);
--bs-btn-hover-bg: var(--vtm-orange-2);
--bs-btn-hover-border-color: var(--vtm-orange-2);
--bs-btn-color: #fff;
}
.btn:disabled, .btn.disabled {
opacity: .55;
cursor: not-allowed;
}
/* form controls */
.form-control, .form-select {
border-color: var(--vtm-border);
border-radius: .9rem;
padding-top: .7rem;
padding-bottom: .7rem;
}
.form-control::placeholder {
color: rgba(100,116,139,.85);
}
.form-control:focus, .form-select:focus {
border-color: rgba(77,88,235,.45); /* brand mavi ton */
box-shadow: 0 0 0 .25rem rgba(77,88,235,.12);
}
/* separators */
hr {
border-color: var(--vtm-border);
opacity: 1;
}
/* ===== Navbar brand (PolySpeaking) ===== */
.vtm-brand {
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px; /* logo iç boşluk var, 8 ideal */
}
.vtm-brand-mark {
height: 34px;
width: auto;
display: block;
}
.vtm-brand-text {
font-size: 1.05rem;
line-height: 1;
letter-spacing: -0.01em;
white-space: nowrap;
color: var(--vtm-ink);
}
.vtm-brand-text strong {
font-weight: 800;
color: var(--ps-brand-blue); /* Poly mavi */
}
.vtm-brand-text .muted {
font-weight: 600;
color: rgba(15,23,42,.78);
}
@media (max-width:520px) {
.vtm-brand-mark {
height: 30px;
}
.vtm-brand-text {
font-size: 1rem;
}
}
@media (max-width:420px) {
.vtm-brand-text .muted {
display: none;
}
}
/* ===== External auth card compact ===== */
.ext-card {
/* normalde card-soft zaten var; burada sadece iç düzeni sıkılaştırıyoruz */
}
.ext-card.compact {
padding: 18px !important; /* p-4 yerine daha kısa */
}
.ext-card .ext-title {
font-weight: 800;
margin-bottom: .25rem;
}
.ext-card .ext-sub {
margin-bottom: .75rem;
}
.ext-card .ext-empty {
font-size: .95rem;
line-height: 1.35;
}
.ext-card .ext-link {
font-weight: 600;
}
/* küçük ekranda yine rahat */
@media (max-width: 520px) {
.ext-card.compact {
padding: 16px !important;
}
}
/*register login dısındaki ekranlarda hata uyarı alano*/
.alert:empty {
display: none;
}
/* ===== Header / Navbar polish ===== */
.vtm-navbar {
backdrop-filter: blur(10px);
}
.vtm-nav-container {
/* navbar yüksekliğini premium yapar */
padding-top: 14px;
padding-bottom: 14px;
}
/* Brand biraz nefes + daha iyi hizalama */
.vtm-brand {
gap: 10px; /* 8 -> 10: daha rahat */
padding-top: 2px;
padding-bottom: 2px;
}
.vtm-brand-mark {
height: 32px; /* 34 -> 32: optik olarak daha iyi */
}
/* Nav linkler biraz daha “button-like” */
.navbar .nav-link {
padding: .55rem .75rem;
border-radius: .75rem;
}
.navbar .nav-link:hover {
background: rgba(15,23,42,.04);
}
/* Sağ aksiyonlar (Login/Register/Logout) biraz daha güçlü */
.vtm-nav-actions .btn {
padding: .55rem .9rem;
border-radius: .85rem;
font-weight: 600;
}
/* Mobile: collapse açılınca butonlar zayıf durmasın */
@media (max-width: 991.98px) {
.navbar-collapse {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--vtm-border);
}
.vtm-nav-actions {
width: 100%;
gap: 10px !important;
}
/* Login/Register yan yana ama tam otursun */
.vtm-nav-actions .btn {
flex: 1;
}
/* Hello yazısı mobilde zaten gizli; sorun yok */
}
/* outline-secondary biraz daha belirgin olsun (header’da soluk kalmasın) */
.btn-outline-secondary {
border-color: rgba(15,23,42,.22);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
border-color: rgba(15,23,42,.32);
}
.navbar .btn-outline-secondary {
border-color: rgba(15,23,42,.22);
}
.navbar .btn-outline-secondary:hover {
border-color: rgba(15,23,42,.32);
}
/* Navbar collapse açıkken (mobil) link/buton ritmini aynı yap */
@media (max-width: 991.98px) {
.navbar .navbar-collapse {
padding-top: .5rem;
}
.navbar .navbar-nav .nav-link {
padding: .55rem .75rem;
border-radius: .9rem;
color: rgba(15,23,42,.78);
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
background: rgba(15,23,42,.04);
}
/* Login/Register butonları da tam genişlik olsun (istersen) */
.navbar .navbar-collapse .btn {
width: 100%;
}
.navbar .navbar-collapse .d-flex {
gap: .5rem !important;
padding-top: .4rem;
}
}
/* ===== Speakers table: code chip ===== */
.ps-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: .92rem;
padding: .22rem .5rem;
border-radius: .6rem;
background: rgba(77,88,235,.08);
border: 1px solid rgba(77,88,235,.18);
color: #2b2f8f;
display: inline-block;
}
/* ===== Table spacing: more “prod” density ===== */
.table td, .table th {
padding-top: .9rem;
padding-bottom: .9rem;
}
@media (max-width: 576px) {
.table td, .table th {
padding-top: .75rem;
padding-bottom: .75rem;
}
.table {
font-size: .95rem;
}
}
/* ===== Create button: compact on mobile ===== */
.ps-btn-create {
display: inline-flex;
align-items: center;
gap: .5rem;
}
/* Desktop/tablet: normal */
.ps-btn-create .bi {
font-size: 1rem;
}
/* Mobile: smaller + optional text shrink */
@media (max-width: 576px) {
.ps-btn-create {
padding: .55rem .7rem; /* btn-sm hissi */
border-radius: .9rem;
}
.ps-btn-create .ps-btn-create-text {
font-size: .95rem;
}
}
/* Extra small: icon-only */
@media (max-width: 380px) {
.ps-btn-create .ps-btn-create-text {
display: none;
}
.ps-btn-create {
gap: 0;
padding: .55rem .65rem;
}
}
/* ===== Form polish (Create/Edit screens) ===== */
/* input border daha net + hover */
.ps-input.form-control,
.ps-input.form-select,
.ps-input.textarea,
textarea.ps-input {
border-color: rgba(15,23,42,.14);
background: rgba(255,255,255,.98);
}
.ps-input.form-control:hover,
.ps-input.form-select:hover,
textarea.ps-input:hover {
border-color: rgba(15,23,42,.24);
}
/* focus daha temiz */
.ps-input.form-control:focus,
.ps-input.form-select:focus,
textarea.ps-input:focus {
border-color: rgba(77,88,235,.55);
box-shadow: 0 0 0 .22rem rgba(77,88,235,.14);
}
/* input-group icon border uyumu */
.ps-ig {
border-color: rgba(15,23,42,.14) !important;
border-radius: .9rem 0 0 .9rem;
}
.input-group .ps-input {
border-left: 0;
border-radius: 0 .9rem .9rem 0;
}
/* checkbox daha modern dursun */
.ps-check .form-check-input {
border-color: rgba(15,23,42,.22);
}
.ps-check .form-check-input:checked {
background-color: var(--vtm-blue);
border-color: var(--vtm-blue);
}
/* ===== Delete polish ===== */
.ps-btn-danger {
border-radius: .9rem;
padding: .55rem 1rem;
font-weight: 700;
box-shadow: 0 10px 22px rgba(220,53,69,.12);
}
@media (max-width: 576px) {
.ps-btn-danger {
width: 100%;
}
.ps-btn-danger + .btn {
width: 100%;
}
}
/* Speaker Code chip link */
.ps-code-link {
text-decoration: none;
cursor: pointer;
transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.ps-code-link:hover {
border-color: rgba(77,88,235,.32);
box-shadow: 0 10px 22px rgba(15,23,42,.08);
transform: translateY(-1px);
}
.ps-code-link:focus-visible {
outline: 3px solid rgba(77,88,235,.22);
outline-offset: 2px;
}
/* Open: schedule satırı */
.ps-open-schedule .row > div {
padding-top: 2px;
padding-bottom: 2px;
}
/* Open sayfasında label'ları biraz koyulaştır (globali bozmaz) */
.ps-open-label {
color: rgba(15,23,42,.62) !important;
font-weight: 600;
letter-spacing: .01em;
}
/* Open Speaker: sol panel label’ları daha belirgin */
.ps-open-label {
color: rgba(15,23,42,.62) !important; /* daha koyu */
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
font-size: .72rem; /* small’dan bağımsız net */
margin-bottom: .35rem;
}
/* Label + value arası ritim */
.ps-open-label + div,
.ps-open-label + .mt-1 {
margin-top: .15rem !important;
}
/* Open: schedule satırı (daha temiz) */
.ps-open-schedule .text-vtm-muted {
font-size: .9rem;
}
.ps-open-schedule .fw-semibold {
font-size: .95rem;
}
/* Open Speaker: sol taraf metin okunurluğu */
.ps-open-left .fw-semibold {
color: rgba(15,23,42,.92);
}
.ps-open-left .ps-open-desc {
color: rgba(15,23,42,.82);
line-height: 1.45;
}
/* =========================
Speaker Console polish (sc-console scope)
========================= */
.sc-console .card-soft {
border-radius: 22px;
}
.sc-console .card-soft.p-4.p-md-5 {
padding: 28px !important;
}
@media (min-width: 768px) {
.sc-console .card-soft.p-4.p-md-5 {
padding: 36px !important;
}
}
/* Header biraz daha “ürün” dursun */
.sc-console .h3 {
letter-spacing: -0.02em;
}
/* Form label hiyerarşisi (Speaker Code / Preset / Language vs) */
.sc-console label.fw-semibold {
font-size: .85rem;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(15,23,42,.72);
margin-bottom: .35rem !important;
}
/* SpeakerId input: readonly gibi ama “chip değil”, premium input */
.sc-console #speakerId.form-control {
background: rgba(29,78,216,.06);
border-color: rgba(29,78,216,.18);
color: rgba(15,23,42,.90);
box-shadow: none;
}
.sc-console #speakerId.form-control:focus {
border-color: rgba(29,78,216,.28);
}
/* Speaker Code satırında hizalama: input + buton aynı yükseklik gibi */
.sc-console .vtm-input-softblue {
border-radius: 16px;
}
.sc-console .btn-outline-softblue {
border-radius: 16px;
}
/* QR panel daha “soft” */
.sc-console .speaking-qr-soft {
background: rgba(15,23,42,.03);
border-color: rgba(15,23,42,.08) !important;
}
/* Subtitle preview kartını premiumleştir */
.sc-console .subtitle-preview {
border-radius: 18px;
}
.sc-console .subtitle-preview .spv-head {
background: rgba(29,78,216,.06);
border-bottom: 1px solid rgba(15,23,42,.06);
}
.sc-console .subtitle-preview .spv-title {
font-weight: 700;
color: rgba(15,23,42,.82);
}
.sc-console .subtitle-preview .spv-chip {
font-size: .72rem;
font-weight: 700;
padding: .22rem .55rem;
border-radius: 999px;
background: rgba(29,78,216,.12);
color: rgba(29,78,216,1);
}
.sc-console .subtitle-preview .spv-partial {
font-size: 1.05rem;
color: rgba(15,23,42,.92);
}
.sc-console .subtitle-preview .spv-final {
margin-top: .35rem;
font-size: .95rem;
color: rgba(15,23,42,.70);
}
/* Start/Stop butonları: daha modern + “running” animasyonları JS class’larıyla */
.sc-console #btnStart,
.sc-console #btnStop {
border-radius: 22px !important;
}
.sc-console .btn-start-dim {
filter: saturate(.9);
opacity: .92;
}
/* Stop/Pause running iken dikkat çeksin */
.sc-console .btn-stop-attn {
border-color: rgba(15,23,42,.18) !important;
box-shadow: 0 10px 26px rgba(15,23,42,.12);
}
.sc-console .btn-stop-pulse {
position: relative;
overflow: hidden;
}
.sc-console .btn-stop-pulse::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 24px;
box-shadow: 0 0 0 0 rgba(249,115,22,.35);
animation: vtmPulse 1.25s infinite;
}
@keyframes vtmPulse {
0% {
box-shadow: 0 0 0 0 rgba(249,115,22,.35);
}
70% {
box-shadow: 0 0 0 18px rgba(249,115,22,0);
}
100% {
box-shadow: 0 0 0 0 rgba(249,115,22,0);
}
}
/* Sağdaki “Live subtitle” paneli: içerik alanını daha okunur yap */
.sc-console #sagSutun .border.rounded-4.bg-white {
border-color: rgba(15,23,42,.08) !important;
}
.sc-console #partial {
font-weight: 600;
letter-spacing: -0.01em;
}
.sc-console #final {
color: rgba(15,23,42,.78);
}
/* Notes kısmı: daha az “duvar yazısı” hissi */
.sc-console .text-vtm-muted.small ul {
padding-left: 1.05rem;
}
.sc-console .text-vtm-muted.small li {
margin: .25rem 0;
}
.sc-console #sagSutun .fw-semibold {
font-size: 1.05rem;
}
/* Stop/Pause running iken: outline görünümünü kır, "aktif" hissi ver */
.btn-stop-attn {
background: rgba(220, 38, 38, .10) !important;
border-color: rgba(220, 38, 38, .40) !important;
color: #991b1b !important;
}
/* ikonlu küçük kutu (buton içindeki span) da biraz belirginleşsin */
.btn-stop-attn span[style*="background"] {
background: rgba(220, 38, 38, .12) !important;
}
/* Hover/Focus: daha canlı */
.btn-stop-attn:hover {
background: rgba(220, 38, 38, .16) !important;
border-color: rgba(220, 38, 38, .60) !important;
}
.btn-stop-attn:focus,
.btn-stop-attn:focus-visible {
box-shadow: 0 0 0 .25rem rgba(220,38,38,.18) !important;
outline: none !important;
}
/* Çok hafif pulse */
@keyframes vtmPulse {
0% {
box-shadow: 0 0 0 0 rgba(220,38,38,.22);
}
70% {
box-shadow: 0 0 0 14px rgba(220,38,38,0);
}
100% {
box-shadow: 0 0 0 0 rgba(220,38,38,0);
}
}
.btn-stop-pulse {
animation: vtmPulse 1.6s ease-out infinite;
}
/* Stop/Pause ikonuna minik "pop" (opsiyonel ama çok iyi his verir) */
@keyframes vtmPop {
0% {
transform: scale(1);
}
40% {
transform: scale(1.06);
}
100% {
transform: scale(1);
}
}
.btn-stop-attn i {
animation: vtmPop 1.2s ease-in-out infinite;
}
/* Start running iken biraz sakinleşsin */
.btn-start-dim {
opacity: .88;
filter: saturate(.90);
}
/* Disabled butonlar: kesin pasif görünsün */
button:disabled, .btn:disabled {
opacity: .55 !important;
cursor: not-allowed !important;
}
/* =========================
LISTEN PAGE - polish pack
========================= */
.listen-page .card-soft {
border-radius: 18px;
}
/* Header küçük iyileştirme */
.listen-page h1.h4 {
letter-spacing: -0.02em;
}
/* Start/Stop butonları daha “ürün” gibi */
.listen-page #btnStart,
.listen-page #btnStop {
border-radius: 18px;
font-size: 1.05rem;
padding-top: 14px;
padding-bottom: 14px;
}
/* Stop disabled iken “basılmaz” gibi değil, sadece pasif dursun */
.listen-page #btnStop:disabled {
opacity: .65; /* .35 gibi öldürmesin */
filter: saturate(.9);
cursor: not-allowed;
}
/* Start butonu hover */
.listen-page #btnStart:hover {
transform: translateY(-1px);
}
.listen-page #btnStart:active {
transform: translateY(0px);
}
/* Playback butonlarını chip gibi yap */
.listen-page #btnPlayPause,
.listen-page #btnMute {
border-radius: 999px;
padding: 6px 12px;
}
/* Audio kontrolünü kart diliyle uyumla */
.listen-page audio {
border-radius: 14px;
background: #fff;
}
/* Loading bar daha yumuşak */
.listen-page #loadingBarWrap .progress {
border-radius: 999px;
overflow: hidden;
}
/* ===== Transcript header (2 row) ===== */
.listen-page .tx-head {
padding: 10px 2px 0 2px;
}
.listen-page .tx-head-row1,
.listen-page .tx-head-row2 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.listen-page .tx-title {
font-weight: 700;
letter-spacing: -0.01em;
}
/* OK chip */
.listen-page .tx-ok {
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.10);
background: rgba(2,132,199,.06); /* hafif mavi */
color: rgba(15,23,42,.75);
white-space: nowrap;
}
/* Last chip */
.listen-page .tx-last {
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.10);
background: rgba(15,23,42,.04);
color: rgba(15,23,42,.70);
white-space: nowrap;
}
/* Toggles daha kompakt ve premium */
.listen-page .tx-toggles {
display: flex;
align-items: center;
gap: 14px;
}
.listen-page .tx-toggles .form-switch .form-check-input {
cursor: pointer;
}
.listen-page .tx-toggles .form-check-label {
user-select: none;
}
/* Transcript kutuları: iç padding ve arkaplanı ayrıştır */
.listen-page #txOrgBox,
.listen-page #txTrBox {
background: rgba(248,250,252,.9); /* saf beyaz yerine yumuşak */
border-color: rgba(15,23,42,.10) !important;
}
/* ORIJINAL / CEVIRI başlıklarını güçlendir */
.listen-page #boxORIGINAL .fw-semibold,
.listen-page #boxTRANSLATION .fw-semibold {
letter-spacing: .02em;
}
/* ===== Stop attention + pulse (senin sınıflar) ===== */
.btn-stop-attn {
background: rgba(220, 38, 38, .10) !important;
border-color: rgba(220, 38, 38, .35) !important;
color: #991b1b !important;
}
.btn-stop-attn:hover {
background: rgba(220, 38, 38, .16) !important;
border-color: rgba(220, 38, 38, .55) !important;
}
@keyframes vtmPulse {
0% {
box-shadow: 0 0 0 0 rgba(220,38,38,.22);
}
70% {
box-shadow: 0 0 0 14px rgba(220,38,38,0);
}
100% {
box-shadow: 0 0 0 0 rgba(220,38,38,0);
}
}
.btn-stop-pulse {
animation: vtmPulse 1.6s ease-out infinite;
}
.btn-start-dim {
opacity: .85;
filter: saturate(.85);
}
/* Join gate: daha temiz ve yumuşak */
#joinGate.card-soft {
border-radius: 22px;
}
/* join speakerId görünümü: input gibi dursun */
.join-sid {
display: flex;
align-items: center;
min-height: 46px; /* form-control hissi */
padding: 10px 14px;
border-radius: 16px;
font-weight: 600;
letter-spacing: .2px;
}
/* join header satırı daha dengeli */
#joinGate h2.h6 {
font-weight: 700;
}
#joinGate .text-vtm-muted.small {
line-height: 1.35;
}
/* Connect butonu biraz daha “action” görünsün */
#btnJoinConnect {
border-radius: 14px;
padding: 10px 18px;
}
/* Join gate içindeki Speaker Code görseli */
#joinGate #joinSpeakerIdText {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 14px;
background: rgba(29,78,216,.06); /* soft mavi zemin */
border: 1px solid rgba(29,78,216,.18); /* ince mavi border */
color: #1d4ed8; /* vtm-blue */
font-weight: 700;
letter-spacing: .2px;
min-width: 72px;
font-size: 1.15rem;
}
/* Speaker Code label'ı biraz daha “başlık” gibi */
#joinGate .join-label {
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(15,23,42,.55);
}
/* Join form inputs biraz daha kompakt */
#joinGate .form-control,
#joinGate .form-select {
padding-top: .55rem;
padding-bottom: .55rem;
border-radius: 14px;
}
/* Join kartının iç boşluğu biraz sıkı */
#joinGate {
padding: 22px !important;
}
#joinGate .join-speaker-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: 6px;
}
/* Join ekranı - speaker pill */
.listen-page #joinGate .join-speaker-row {
display: flex;
align-items: center;
}
.listen-page #joinGate #joinSpeakerIdText {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 14px;
background: rgba(29,78,216,.06);
border: 1px solid rgba(29,78,216,.18);
color: #1d4ed8;
font-weight: 700;
letter-spacing: .2px;
font-size: 1.05rem;
/* ✅ uzun id’ler taşmasın */
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.listen-page #joinGate #joinSpeakerIdText {
min-width: 120px;
}
.listen-page #joinGate {
border-radius: 20px;
}
.listen-page #joinGate hr {
opacity: .12;
}
.listen-page #joinGate .join-info {
background: linear-gradient(180deg, rgba(29,78,216,.05), rgba(255,255,255,1));
border-color: rgba(15,23,42,.10) !important;
}
.listen-page #joinGate .join-info b {
color: var(--vtm-blue);
}
.listen-page #joinGate .join-info {
background: linear-gradient(180deg, rgba(29,78,216,.05), rgba(255,255,255,1));
border-color: rgba(15,23,42,.10) !important;
}
.listen-page #joinGate .join-info b {
color: var(--vtm-blue);
}
#joinSpeakerIdText {
display: inline-block;
padding: 10px 14px !important;
border-radius: 14px !important;
background: rgba(29,78,216,.06) !important;
border-color: rgba(29,78,216,.18) !important;
color: #1e3a8a;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: .2px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* join overlay */
#joinGate {
position: relative;
}
/* JOIN OVERLAY (FINAL) */
.join-overlay {
position: fixed;
inset: 0;
display: none; /* JS flex yapıyor */
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, .28);
backdrop-filter: blur(6px);
z-index: 9999;
}
.join-overlay-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255,255,255,.92);
border: 1px solid rgba(148,163,184,.35);
box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
/* Premium spinner container */
.join-logo-spin {
width: 40px;
height: 40px;
border-radius: 999px;
background: #fff;
padding: 8px;
box-shadow: 0 0 0 6px rgba(77,88,235,.08), 0 10px 22px rgba(0,0,0,.12);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
animation: joinSpin 1.05s linear infinite, joinPulse 1.35s ease-in-out infinite;
transform-origin: 50% 50%;
}
/* SVG içeriği kesin 24px olsun (40 - padding*2) */
.join-logo-spin > img {
width: 24px !important;
height: 24px !important;
max-width: none !important;
display: block;
object-fit: contain;
}
@keyframes joinSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes joinPulse {
0%,100% {
filter: saturate(1);
}
50% {
transform: rotate(180deg) scale(1.03);
filter: saturate(1.08);
}
}
.join-ov-title {
font-weight: 700;
font-size: 14px;
color: var(--vtm-ink);
}
.join-ov-sub {
margin-top: 2px;
font-size: 12px;
color: rgba(100,116,139,1);
}
.join-overlay.is-err .join-overlay-card {
background: rgba(254,242,242,.95);
border-color: rgba(220,38,38,.35);
}
.join-overlay.is-err .join-logo-spin {
box-shadow: 0 0 0 6px rgba(220,38,38,.10), 0 10px 22px rgba(0,0,0,.12);
}
/* ==============
Speaker Public (scoped) - FINAL CLEAN
============== */
/* QR plate */
.speaker-public .qr-plate {
background: linear-gradient(180deg,#F6F8FC 0%,#F3F6FB 50%,#EEF2F8 100%);
padding: 24px;
border-radius: 28px;
box-shadow: 0 18px 40px rgba(0,0,0,.18);
display: inline-flex;
align-items: center;
justify-content: center;
transform: none !important;
}
.speaker-public #qrWrap {
background: #fff;
padding: 16px;
border-radius: 20px;
}
.speaker-public #qrWrap svg,
.speaker-public #qrWrap canvas {
display: block;
background: #fff;
}
/* FREE badge (right panel) */
.speaker-public .ps-free-badge {
background: rgba(240,124,0,.08) !important;
border-color: rgba(240,124,0,.22) !important;
}
.speaker-public .ps-free-badge .text-success {
color: #b45309 !important; /* “FREE / Ücretsiz” yazısı turuncu-kahve */
}
/* =========================
3-line compact summary bar
========================= */
.speaker-public .ps-summary {
border: 1px solid rgba(15,23,42,.10);
border-radius: 18px;
background: rgba(255,255,255,.96);
box-shadow: 0 10px 24px rgba(15,23,42,.05);
padding: 14px 16px;
}
.speaker-public .ps-summary-row + .ps-summary-row {
margin-top: 10px;
}
/* chip (speakerId/title) */
.speaker-public .ps-chip {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 14px;
border: 1px solid rgba(15,23,42,.10);
background: rgba(15,23,42,.035);
color: rgba(15,23,42,.86);
font-weight: 650;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.speaker-public .ps-chip.is-blue {
background: rgba(29,78,216,.06);
border-color: rgba(29,78,216,.18);
color: var(--vtm-blue) !important;
}
.speaker-public .ps-chip.is-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
letter-spacing: .2px;
font-weight: 700;
}
/* description panel */
.speaker-public .ps-desc {
border-radius: 14px;
border: 1px solid rgba(15,23,42,.10);
background: rgba(248,250,252,.95);
padding: 10px 12px;
color: rgba(15,23,42,.80);
line-height: 1.55;
white-space: pre-wrap;
}
/* mobile */
@media (max-width: 576px) {
.speaker-public .ps-summary {
padding: 12px 14px;
}
.speaker-public .ps-chip {
width: 100%;
}
}
/* =========================
ABOUT PAGE (scoped)
========================= */
.about-page .about-card {
border-radius: 22px; /* SpeakerPublic hissi */
}
.about-page .about-lead {
font-size: 1.03rem;
line-height: 1.65;
}
/* İç kutular: düz beyaz yerine soft panel */
.about-page .about-box {
border: 1px solid rgba(15,23,42,.10);
border-radius: 18px;
background: rgba(248,250,252,.95);
padding: 14px 16px;
}
/* Liste aralığı biraz daha “ürün” gibi */
.about-page .about-box ul {
padding-left: 1.1rem;
margin-bottom: 0;
}
.about-page .about-box li + li {
margin-top: .35rem;
}
/* Mobilde kart padding zaten iyi; sadece kutuları biraz sıkıla */
@media (max-width: 576px) {
.about-page .about-box {
padding: 12px 14px;
border-radius: 16px;
}
}
/* =========================
Terms (wide but readable)
========================= */
.terms-page .terms-card {
width: 100%;
max-width: 1100px;
}
.terms-page .terms-box {
border-color: rgba(15,23,42,.10) !important;
box-shadow: 0 8px 18px rgba(15,23,42,.04);
}
.terms-page .terms-box ol {
padding-left: 1.25rem;
}
.terms-page .terms-box li {
margin: .35rem 0;
line-height: 1.6;
color: rgba(15,23,42,.82);
}
/* =========================
Support (wide but readable)
========================= */
.support-page .support-card {
width: 100%;
max-width: 1100px;
}
.support-page .support-box {
border-color: rgba(15,23,42,.10) !important;
box-shadow: 0 8px 18px rgba(15,23,42,.04);
}
.support-page .support-box ul {
padding-left: 1.15rem;
}
.support-page .support-box li {
margin: .35rem 0;
line-height: 1.6;
color: rgba(15,23,42,.82);
}
/* =========================
Status (wide but readable)
========================= */
.status-page .status-card {
width: 100%;
max-width: 1100px;
}
/* icon pill */
.status-page .status-hero {
width: 56px;
height: 56px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(240,124,0,.12);
border: 1px solid rgba(240,124,0,.22);
flex: 0 0 56px;
}
.status-page .status-hero i {
color: var(--vtm-orange);
font-size: 1.35rem;
}
/* code badge */
.status-page .status-code {
background: rgba(15,23,42,.035) !important;
border: 1px solid rgba(15,23,42,.10) !important;
color: rgba(15,23,42,.78) !important;
font-weight: 700;
padding: .45rem .7rem;
border-radius: 999px;
}
/* =========================
Security (wide but readable)
========================= */
.security-page .security-card {
width: 100%;
max-width: 1100px;
}
.security-page .security-ico {
color: var(--vtm-blue);
font-size: 1.1rem;
}
/* küçük hover/polish (opsiyonel ama güzel) */
.security-page .security-box {
border-color: rgba(15,23,42,.10) !important;
box-shadow: 0 10px 22px rgba(15,23,42,.04);
transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.security-page .security-box:hover {
border-color: rgba(15,23,42,.16) !important;
box-shadow: 0 14px 28px rgba(15,23,42,.06);
transform: translateY(-1px);
}
/* alert ritmi */
.security-page .security-note {
border-radius: 16px;
}
/* =========================
Privacy (wide but readable)
========================= */
.privacy-page .privacy-card {
width: 100%;
max-width: 1100px;
}
.privacy-page .privacy-ico {
color: var(--vtm-blue);
font-size: 1.1rem;
}
.privacy-page .privacy-box {
border-color: rgba(15,23,42,.10) !important;
box-shadow: 0 10px 22px rgba(15,23,42,.04);
}
/* =========================
Error (wide but readable)
========================= */
.error-page .error-card {
width: 100%;
max-width: 1100px;
}
.error-page .error-ico {
color: var(--vtm-orange);
font-size: 1.1rem;
}
.error-page .error-box {
border-color: rgba(15,23,42,.10) !important;
box-shadow: 0 10px 22px rgba(15,23,42,.04);
}
/* =========================
Contact (wide but readable)
========================= */
.contact-page .contact-card {
width: 100%;
max-width: 1100px;
}
.contact-page .contact-ico {
color: var(--vtm-orange);
font-size: 1.1rem;
}
.contact-page .contact-box {
border-color: rgba(15,23,42,.10) !important;
box-shadow: 0 10px 22px rgba(15,23,42,.04);
}
/* Mail butonları: kart gibi dursun */
.contact-page .contact-mailbtn {
border-color: rgba(15,23,42,.18);
border-radius: 14px;
padding: 10px 14px;
font-weight: 600;
}
/* Site-wide page width */
.site-container {
max-width: 1320px;
}