/* ==========================================================================
C@T — Bileşenler (§37 premium · §28 mobil öncelikli)
========================================================================== */
/* --------------------------------------------------------------------------
Üst bar
-------------------------------------------------------------------------- */
.topbar {
position: sticky;
top: 0;
z-index: 40;
display: flex;
align-items: center;
gap: 10px;
min-height: calc(var(--topbar-h) + var(--safe-t));
padding: var(--safe-t) 12px 0;
background: rgba(10, 16, 32, .82);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom: 1px solid var(--line);
}
.topbar .brand__mark { width: 30px; height: 30px; flex-basis: 30px; }
.topbar .brand__name { font-size: 21px; }
.topbar .brand__tag { display: none; }
/* Geniş ekranda sığmazsa yeni satır açılır. ≤430 px'te ise dosyanın sonundaki
🧭 HİYERARŞİ bölümü çubuğu TEK satırda tutar (9 Eyl 2026: 375 px'te avatar
tek başına ikinci satıra düşüyor, çubuk 93 px oluyordu). */
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; justify-content: flex-end; }
@media (min-width: 1000px) {
.topbar { padding-left: 22px; padding-right: 22px; }
.topbar .brand { display: none; }
}
/* --------------------------------------------------------------------------
Gezinme
-------------------------------------------------------------------------- */
.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.nav__item {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 10px 12px;
border-radius: var(--r-sm);
color: var(--ink-2);
font-size: 14px;
font-weight: 500;
text-align: left;
transition: background var(--t-fast), color var(--t-fast);
position: relative;
}
.nav__item:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.nav__item.is-active {
background: linear-gradient(90deg, var(--gold-dim), transparent 78%);
color: var(--gold-light);
font-weight: 600;
}
.nav__item.is-active::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 3px; height: 20px;
transform: translateY(-50%);
border-radius: 0 3px 3px 0;
background: var(--gold-grad);
}
.nav__icon { width: 20px; text-align: center; font-size: 16px; flex: 0 0 20px; }
.nav__label { flex: 1; min-width: 0; }
/* Satır içi SVG simgeler (ui.js → iconOf) satır tabanına oturup 2-3px aşağı
kaymasın; kutunun tam ortasında dursun. Metin karakteri olan simgeler
(⌂ ☰ ⚙ ✦ ☑) bu kuraldan etkilenmez. */
.nav__icon > svg,
.cbtn__icon > svg,
.stat__box > svg { display: block; margin: 0 auto; }
.nav__count {
min-width: 20px;
padding: 1px 6px;
border-radius: 99px;
background: var(--gold);
color: var(--on-gold);
font-size: 11px;
font-weight: 800;
text-align: center;
}
.nav__section {
font-size: 10px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--faint);
padding: 16px 12px 6px;
}
/* Alt sekme çubuğu (mobil) */
.tabbar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 45;
display: grid;
grid-template-columns: repeat(5, 1fr);
height: calc(var(--tabbar-h) + var(--safe-b));
padding-bottom: var(--safe-b);
background: rgba(10, 16, 32, .93);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-top: 1px solid var(--line);
}
.tabbar__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: var(--faint);
font-size: 10px;
font-weight: 600;
position: relative;
transition: color var(--t-fast);
}
.tabbar__item .nav__icon { font-size: 19px; width: auto; }
.tabbar__item.is-active { color: var(--gold-bright); }
.tabbar__item.is-active::before {
content: "";
position: absolute;
top: 0; left: 50%;
width: 26px; height: 2.5px;
transform: translateX(-50%);
border-radius: 0 0 3px 3px;
background: var(--gold-grad);
}
.tabbar__dot {
position: absolute;
top: 8px;
right: calc(50% - 18px);
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 99px;
background: var(--danger);
color: #fff;
font-size: 9.5px;
font-weight: 800;
line-height: 16px;
text-align: center;
}
/* --------------------------------------------------------------------------
Kartlar / paneller
-------------------------------------------------------------------------- */
/* Üstteki `inset` çizgi kartın kenarına ince bir ışık payı bırakır — düz
kenarlığa göre yüzeye derinlik verir ve tek bir gölge katmanıyla yapıldığı
için mobilde ek maliyeti yoktur (ağır blur yığını KULLANILMAZ). */
.card {
background: linear-gradient(160deg, var(--surface), var(--bg-2));
border: 1px solid var(--line);
border-radius: var(--r);
padding: var(--pad);
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .035);
transition: border-color var(--t-fast);
}
.card--gold { border-color: var(--gold-line); box-shadow: var(--glow-gold); }
.card--flat { background: var(--surface); box-shadow: none; }
.card--pad-0 { padding: 0; overflow: hidden; }
.panel {
background: linear-gradient(160deg, var(--surface), var(--bg-2));
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .035);
transition: border-color var(--t-fast);
}
/* İnce altın çerçeve vurgusu — imleç kartın üzerindeyken. */
.card:hover,
.panel:hover { border-color: rgba(212, 175, 55, .20); }
.card--gold:hover { border-color: var(--gold-line); }
.panel__head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
font-weight: 700;
font-size: 14px;
letter-spacing: -.01em;
background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent);
}
.panel__head .spacer { flex: 1; }
.panel__body { padding: 15px 16px; }
.panel__foot { padding: 12px 16px; border-top: 1px solid var(--line); }
/* Başlıktaki "Tümünü gör →" gibi metin bağlantıları: mobilde parmakla
rahat basılabilmesi için dokunma alanı büyütülür (§28, §29).
Negatif kenar boşluğu, görsel hizayı bozmadan alanı genişletir. */
.panel__head a,
.section__head a,
.card a.small,
.card a.tiny {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 4px;
margin: -12px 0;
white-space: nowrap;
}
/* --------------------------------------------------------------------------
İstatistik kartı (ui.js → statCard)
Yerleşim: solda renkli, yuvarlak köşeli İKON KUTUCUĞU · sağda büyük sayı,
küçük etiket ve isteğe bağlı değişim göstergesi ("+12").
`.stat__value` / `.stat__label` sınıfları TEK BAŞINA da kullanılıyor
(katkı ekranı, üye kartı) — o kullanım altın rengiyle korunur, kart
içindeyken sayı beyaza döner çünkü rengi artık ikon kutusu taşır.
-------------------------------------------------------------------------- */
.stat-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.stat {
display: flex;
align-items: center;
gap: 11px;
padding: 13px 14px;
border-radius: var(--r);
background: linear-gradient(160deg, var(--surface), var(--bg-2));
border: 1px solid var(--line);
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .035);
color: inherit;
transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.stat:hover {
border-color: var(--gold-line);
transform: translateY(-2px);
text-decoration: none;
}
.stat__box {
width: 38px; height: 38px;
flex: 0 0 38px;
display: grid;
place-items: center;
border-radius: 12px;
font-size: 18px;
line-height: 1;
background: var(--gold-dim);
border: 1px solid var(--gold-line);
color: var(--gold-light);
}
.stat__main { flex: 1; min-width: 0; }
.stat__value {
font-size: 26px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -.02em;
color: var(--gold-light);
}
.stat .stat__value { color: var(--ink); }
.stat__label { font-size: 11.5px; color: var(--muted); }
/* Eski düz ikon (kart üstünde tek başına duran emoji) — geriye dönük uyum. */
.stat__icon { font-size: 15px; opacity: .8; }
.stat__delta {
display: inline-block;
margin-top: 5px;
padding: 1px 7px;
border-radius: 99px;
background: var(--surface-3);
color: var(--muted);
font-size: 10.5px;
font-weight: 700;
}
.stat__delta--up { background: var(--ok-dim); color: var(--ok); }
.stat__delta--down { background: var(--danger-dim); color: var(--danger); }
/* Tonlar — ikon kutucuğunun rengi (ui.js → STAT_TONES ile aynı liste) */
.stat--info .stat__box { background: var(--info-dim); border-color: rgba(90, 162, 232, .32); color: var(--info); }
.stat--ok .stat__box { background: var(--ok-dim); border-color: rgba(52, 201, 139, .32); color: var(--ok); }
.stat--warn .stat__box { background: var(--warn-dim); border-color: rgba(232, 169, 60, .32); color: var(--warn); }
.stat--danger .stat__box { background: var(--danger-dim); border-color: rgba(239, 95, 95, .32); color: var(--danger); }
.stat--violet .stat__box { background: var(--violet-dim); border-color: rgba(167, 139, 250, .32); color: var(--violet); }
/* 375px'te dört kart iki sütuna düşer — kutu ve sayı bir tık küçülür. */
@media (max-width: 400px) {
.stat { gap: 9px; padding: 12px; }
.stat__box { width: 34px; height: 34px; flex-basis: 34px; font-size: 16px; border-radius: 11px; }
.stat__value { font-size: 22px; }
}
/* --------------------------------------------------------------------------
Liste öğeleri
-------------------------------------------------------------------------- */
.list { display: flex; flex-direction: column; }
.item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border-top: 1px solid var(--line-soft);
transition: background var(--t-fast);
text-align: left;
width: 100%;
color: inherit;
}
.list > .item:first-child { border-top: 0; }
.item:hover { background: rgba(255, 255, 255, .028); text-decoration: none; }
.item--tap { cursor: pointer; }
.item__body { flex: 1; min-width: 0; }
.item__title { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.item__sub { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.item__meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.item__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
/* Satır başındaki ikon kutucuğu (mockup: sol ikon · başlık · alt bilgi ·
sağda rozet ve tutar). `.avatar` yuvarlak ve kişiye aittir; `.item__lead`
yuvarlak köşeli karedir ve KAYIT TÜRÜNÜ anlatır: firma, ziyaret, teklif.
Ton verilmezse altın kalır. */
.item__lead {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: grid;
place-items: center;
border-radius: 12px;
font-size: 17px;
line-height: 1;
color: var(--lead-fg, var(--gold-light));
background: var(--lead-bg, var(--gold-dim));
border: 1px solid var(--lead-line, var(--gold-line));
}
/* Emoji yerine baş harf yazıldığında (firma kartı) yazı boyu küçülür. */
.item__lead--text {
font-size: 13px;
font-weight: 800;
letter-spacing: -.4px;
}
/* 375px'te kutucuk + rozetler başlığa yer bırakmıyordu; dar ekranda küçülür. */
@media (max-width: 400px) {
.item__lead {
width: 32px; height: 32px; flex-basis: 32px;
border-radius: 10px;
font-size: 15px;
}
.item__lead--text { font-size: 11.5px; }
}
.item__lead--info { --lead-fg: var(--info); --lead-bg: var(--info-dim); --lead-line: rgba(90, 162, 232, .32); }
.item__lead--ok { --lead-fg: var(--ok); --lead-bg: var(--ok-dim); --lead-line: rgba(52, 201, 139, .32); }
.item__lead--warn { --lead-fg: var(--warn); --lead-bg: var(--warn-dim); --lead-line: rgba(232, 169, 60, .32); }
.item__lead--danger { --lead-fg: var(--danger); --lead-bg: var(--danger-dim); --lead-line: rgba(239, 95, 95, .32); }
.item__lead--muted { --lead-fg: var(--muted); --lead-bg: var(--surface-2); --lead-line: var(--line); }
/* Sağ taraftaki tutar — listede gözle taranabilmesi için iri ve hizalı. */
.item__amount {
font-size: 14.5px;
font-weight: 800;
color: var(--gold-light);
white-space: nowrap;
letter-spacing: -.01em;
}
.item__actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 9px;
}
/* Avatar */
.avatar {
width: 38px; height: 38px;
flex: 0 0 38px;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 800;
font-size: 14px;
color: var(--on-gold);
background: var(--gold-grad);
letter-spacing: -.5px;
}
.avatar--sm { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; }
.avatar--lg { width: 58px; height: 58px; flex-basis: 58px; font-size: 21px; }
/* Profil fotoğrafı (ui.js → avatar(name, color, size, photoUrl)).
Fotoğraf yoksa bu sınıf hiç eklenmez; kart baş harfleriyle çizilir. */
.avatar--photo {
background: var(--surface-2);
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--gold-line);
}
.avatar__img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
/* Boş durum — "hiçbir şey yok" değil, "şunu yapabilirsin" hissi vermeli.
İkon soluk bir emoji yerine kendi kutucuğunda durur; başlık okunur
kontrastta; eylem düğmesi ortalanır. */
.empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 22px 34px;
text-align: center;
color: var(--muted);
}
.empty__icon {
width: 64px;
height: 64px;
display: grid;
place-items: center;
margin-bottom: 14px;
border-radius: 20px;
font-size: 28px;
line-height: 1;
color: var(--gold-light);
background:
radial-gradient(circle at 50% 32%, var(--gold-dim), transparent 72%),
var(--surface-2);
border: 1px solid var(--line);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.empty__title {
font-size: 15.5px;
font-weight: 700;
color: var(--ink);
margin-bottom: 5px;
}
.empty__text {
font-size: 13px;
line-height: 1.6;
max-width: 360px;
margin: 0 auto 16px;
}
/* Boş durumdaki eylem düğmesi kendi `.mt-2` boşluğunu getiriyor;
metin zaten alt boşluk verdiği için düğme fazladan aşağı kaymasın. */
.empty__text + .btn,
.empty__text + .row { margin-top: 0; }
/* --------------------------------------------------------------------------
Düğmeler
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 15px;
min-height: 40px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--ink);
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
transition: transform var(--t-fast), background var(--t-fast),
border-color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.btn:hover { background: var(--surface-3); border-color: var(--gold-line); text-decoration: none; }
.btn:active { transform: scale(.975); }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }
.btn--primary {
background: var(--gold-grad);
color: var(--on-gold);
border-color: transparent;
box-shadow: 0 6px 18px rgba(212, 175, 55, .26);
}
/* Genel .btn:hover zemini altını kapatıp koyu yazıyı okunamaz yapmamalı. */
.btn--primary:hover { background: var(--gold-grad); filter: brightness(1.07); border-color: transparent; }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface); }
.btn--danger { color: var(--danger); border-color: rgba(239, 95, 95, .34); background: var(--danger-dim); }
.btn--danger:hover { background: rgba(239, 95, 95, .22); border-color: var(--danger); }
.btn--ok { color: var(--ok); border-color: rgba(52, 201, 139, .34); background: var(--ok-dim); }
.btn--ok:hover { background: rgba(52, 201, 139, .22); border-color: var(--ok); }
.btn--sm { padding: 6px 11px; min-height: 32px; font-size: 12.5px; border-radius: 8px; }
.btn--lg { padding: 13px 22px; min-height: 50px; font-size: 15px; border-radius: 12px; }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: 40px; min-height: 40px; }
.btn--icon.btn--sm { width: 32px; min-height: 32px; }
/* Hızlı iletişim — metin düğmesi biçimi (§10).
contactActions() artık ikon düğmeleri (.cbtn) üretir, ancak bu sınıflar
TEK BAŞINA da kullanılıyor (yönetim ekranındaki "WhatsApp'tan gönder"). */
.btn--call { color: #6ee7a8; border-color: rgba(110, 231, 168, .3); }
.btn--wa { color: #5ee08a; border-color: rgba(94, 224, 138, .3); }
.btn--mail { color: #7fb6f0; border-color: rgba(127, 182, 240, .3); }
.btn--map { color: #e8a93c; border-color: rgba(232, 169, 60, .3); }
.btn--locked { color: var(--faint); border-style: dashed; }
/* --------------------------------------------------------------------------
Hızlı iletişim — dikey ikon düğmeleri (§10, ui.js → contactActions)
48px yuvarlak ikon + altında 10.5px etiket; toplam yükseklik 44px dokunma
hedefinin üzerindedir.
GENİŞLİK HESABI: dört düğme 375px'te avatarlı bir liste satırının içinde
TEK SATIRDA durmalı. Orada gövdeye kalan yer ~254px'tir (kaydırma çubuğu
dâhil), en uzun etiket ("WhatsApp") 10.5px'te 52px sürer. 4×54 + 3×6 = 234px
→ 20px pay kalır. Yine de yer kalmazsa `.item__actions` sarma özelliği
devrede olduğu için düğmeler alt satıra iner, taşma OLMAZ.
-------------------------------------------------------------------------- */
.contact-acts { gap: 6px; align-items: center; }
.cbtn {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 5px;
width: 54px;
padding: 2px 0;
color: var(--ink-2);
text-align: center;
transition: transform var(--t-fast);
}
.cbtn:hover { text-decoration: none; }
.cbtn:active { transform: scale(.93); }
.cbtn:focus-visible { border-radius: 12px; }
.cbtn__icon {
width: 48px; height: 48px;
display: grid;
place-items: center;
border-radius: 50%;
font-size: 19px;
line-height: 1;
background: var(--surface-2);
border: 1px solid var(--line);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cbtn:hover .cbtn__icon { border-color: currentColor; }
.cbtn__label {
max-width: 100%;
font-size: 10.5px;
font-weight: 650;
line-height: 1.2;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cbtn:hover .cbtn__label { color: var(--ink-2); }
.cbtn--call { color: #6ee7a8; }
.cbtn--call .cbtn__icon { background: rgba(110, 231, 168, .12); border-color: rgba(110, 231, 168, .30); }
.cbtn--wa { color: #5ee08a; }
.cbtn--wa .cbtn__icon { background: rgba(94, 224, 138, .12); border-color: rgba(94, 224, 138, .30); }
.cbtn--mail { color: #7fb6f0; }
.cbtn--mail .cbtn__icon { background: rgba(127, 182, 240, .12); border-color: rgba(127, 182, 240, .30); }
.cbtn--map { color: #e8a93c; }
.cbtn--map .cbtn__icon { background: rgba(232, 169, 60, .12); border-color: rgba(232, 169, 60, .30); }
/* Kayan eylem düğmesi */
.fab {
position: fixed;
right: 16px;
bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
z-index: 44;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--gold-grad);
color: var(--on-gold);
font-size: 26px;
font-weight: 300;
display: grid;
place-items: center;
box-shadow: 0 12px 30px rgba(212, 175, 55, .38);
transition: transform var(--t-fast);
}
.fab:active { transform: scale(.93); }
@media (min-width: 1000px) { .fab { bottom: 26px; right: 26px; } }
/* --------------------------------------------------------------------------
Rozetler / etiketler
-------------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 99px;
font-size: 11px;
font-weight: 700;
background: var(--surface-3);
color: var(--ink-2);
white-space: nowrap;
border: 1px solid transparent;
}
/* 📂 Katlanır form bölümü (§15) — uzun profil formunu okunur kılar.
Bölümler TEK FORM içinde kalır: görsel ayrım, teknik birliktelik. */
.bolum { border: 1px solid var(--line-soft); border-radius: 12px;
margin-top: 12px; overflow: hidden; }
.bolum__bas { display: flex; align-items: center; gap: 8px; width: 100%;
padding: 12px 14px; background: var(--surface-2);
border: 0; text-align: left; color: var(--ink);
font-size: 14px; font-weight: 700; cursor: pointer; }
.bolum__bas:hover { background: var(--surface-3); }
.bolum__ok { color: var(--muted); font-size: 12px; width: 14px; }
.bolum__ipucu { padding: 0 14px 8px; }
.bolum__govde { padding: 12px 14px 14px; display: grid; gap: 12px; }
@media (max-width: 560px) { .bolum__bas { min-height: 44px; } }
/* 🌳 Hiyerarşide üstteki "Tümü" seçiliyken alt seçimler SOLUK görünür:
şu an etkisiz olduklarını söyler. Tıklanabilir kalırlar — dokununca
"Tümü" kalkar ve o seçim yapılır; ölü bir düğme kullanıcıyı çıkmaza
sokar. Renk tek başına anlam taşımasın diye saydamlığa ek olarak
kenarlık da kesikli. */
.chip--soluk { opacity: .42; border-style: dashed; }
.chip--soluk:hover { opacity: .72; }
/* Açıklanabilir rozet: dokunulabilir olduğu GÖRÜNSÜN. Tıklanabilir ama
tıklanabilir görünmeyen bir öğe, olmayan bir özelliktir. */
.badge--acik { cursor: pointer; border-bottom: 1px dotted currentColor; }
.badge--acik:hover { filter: brightness(1.15); }
.badge--acik:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.badge--gold { background: var(--gold-dim); color: var(--gold-light); border-color: var(--gold-line); }
.badge--ok { background: var(--ok-dim); color: var(--ok); }
.badge--warn { background: var(--warn-dim); color: var(--warn); }
.badge--danger { background: var(--danger-dim); color: var(--danger); }
.badge--info { background: var(--info-dim); color: var(--info); }
.badge--private { background: rgba(125, 139, 166, .16); color: var(--private); }
.badge--team { background: var(--info-dim); color: var(--team); }
.badge--urgent { background: var(--danger); color: #fff; animation: pulse 2s ease-in-out infinite; }
/* Fırsat sıcaklığı (§15, ui.js → heatBadge) — güven puanının okunur karşılığı.
Kırmızı 🔥 Sıcak (≥0.75) · turuncu 🌤 Ilık (≥0.50) · mavi ❄ Soğuk */
.badge--hot { background: var(--danger-dim); color: #ff8f70; border-color: rgba(239, 95, 95, .34); }
.badge--warm { background: var(--warn-dim); color: var(--warn); border-color: rgba(232, 169, 60, .32); }
.badge--cold { background: var(--info-dim); color: var(--info); border-color: rgba(90, 162, 232, .32); }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: .62; }
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 99px;
border: 1px solid var(--line);
background: var(--surface);
font-size: 12.5px;
font-weight: 600;
color: var(--ink-2);
transition: all var(--t-fast);
}
.chip:hover { border-color: var(--gold-line); color: var(--ink); }
/* 🖱 ÇİP BİR DÜĞMEYSE TIKLANABİLİR GÖRÜNÜR VE TIKLANABİLİR OLUR.
⚠ Kurucu bildirdi (5 Eyl 2026): "ilgilenmiyorum kısmı tıklanmıyor".
JavaScript'i gerçek kodla sürüp ölçtüm — olay dinleyicisi bağlı ve
istek gidiyor. Sorun koddan değil DOKUNMA ALANINDAN geliyordu:
`.chip` yüksekliği 6px dolgu + 12.5px yazı ≈ 27px. Mobilde erişilebilir
dokunma hedefi EN AZ 44px'tir; 27px'lik bir hedefe parmakla isabet
ettirmek şansa kalır ve kullanıcı "çalışmıyor" der. Haklı da olur:
tıklanamayan bir düğme, olmayan düğmedir.
⚠ `touch-action: manipulation` çift dokunma yakınlaştırmasını kapatır;
onsuz tarayıcı ilk dokunuşu ~300ms bekletip bazen yutar. */
button.chip { cursor: pointer; touch-action: manipulation; }
/* ⚠ MEŞGUL DURUM GÖRÜNMÜYORDU. `withBusy` düğmeyi `disabled` yapıyor ama
`.chip` için bir kural YOKTU: yalnız `.btn` soluklaşıyordu. Yani istek
sürerken çip aynen tıklanabilir GÖRÜNÜYOR, tarayıcı ise tıklamayı
engelliyordu. Kullanıcı için bu, "bastım hiçbir şey olmadı" demek. */
.chip[disabled], .chip.is-loading { opacity: .55; pointer-events: none; }
/* 📱 MOBİLDE DOKUNMA HEDEFİ 44px. Masaüstünde çip küçük kalabilir; parmak
fareyle aynı hassasiyette değildir. */
@media (max-width: 700px) {
.chip {
min-height: 44px;
padding: 10px 14px;
font-size: 13.5px;
}
/* ⚠ KÜÇÜK DÜĞMELER DE MOBİLDE 44px. \`.btn--sm\` 32px, \`.btn--icon\`
40px idi; ikisi de parmak için küçük. Kart içindeki "Neden?" ve
"Ayrıntılar" düğmeleri bunları kullanıyor — aynı "tıklanmıyor"
şikayetinin öteki adayları. */
.btn--sm { min-height: 44px; padding: 10px 14px; font-size: 13.5px; }
.btn--icon { width: 44px; min-height: 44px; }
.btn--icon.btn--sm { width: 44px; min-height: 44px; padding: 0; }
/* ⚠ Çift dokunma yakınlaştırması ilk dokunuşu geciktirip yutabilir. */
button, .chip, .tab { touch-action: manipulation; }
}
.chip.is-on {
background: var(--gold-dim);
border-color: var(--gold-line);
color: var(--gold-light);
}
.chip__x { opacity: .6; font-weight: 400; }
/* 🔖 "Görünümü kaydet" çipi: kayıtlı görünümlerden ayrılsın diye kesik
çerçeve — bir süzgeç değil, bir EYLEM olduğu bakışta anlaşılsın. */
.chip--ghost {
border-style: dashed;
color: var(--dim);
background: transparent;
}
.chip--ghost:hover { color: var(--gold); border-color: var(--gold-line); }
/* 👁 Okunmuş kart: "Tümü" kipinde listede KALIR ama arka plana çekilir.
Gizlemek yerine soluklaştırmak, kullanıcının okuduğu bir sinyali
sonradan fırsata çevirebilmesini sağlar. Düğmeler tam opaklıkta
kalır — soluk bir kart tıklanamaz sanılmasın. */
.card.is-read { opacity: .58; }
.card.is-read:hover,
.card.is-read:focus-within { opacity: 1; }
.card.is-read .btn { opacity: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips--scroll {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll > * { flex: 0 0 auto; scroll-snap-align: start; }
/* Çip hizası kaydırma sonrasında çip SINIRINA oturur — ilk/son çip yarım
kesik kalmaz. `proximity`: serbest kaydırmayı engellemez, yalnızca
yakındayken hizalar. */
.chips--scroll { scroll-snap-type: x proximity; scroll-padding-inline: 4px; }
/* --------------------------------------------------------------------------
Gruplu çoklu seçim (ui.js → multiChips)
41 meslek / 59 uzmanlık tek tek işaretlenmesin diye liste `grp` alanına
göre gruplanır; her grubun kendi "Tümünü seç" düğmesi vardır. Başlıklar
kaydırma sırasında üstte yapışık kalır (kip pencerede .modal__body,
sayfada gövde kaydırılır).
-------------------------------------------------------------------------- */
.multi__bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.multi__count { font-size: 12px; font-weight: 700; color: var(--muted); }
.multi__acts { display: flex; gap: 6px; margin-left: auto; }
.multi__bulk {
padding: 5px 10px;
border-radius: 9px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--ink-2);
font-size: 11.5px;
font-weight: 700;
white-space: nowrap;
transition: all var(--t-fast);
}
.multi__bulk:hover { border-color: var(--gold-line); color: var(--gold-light); }
.multi__grp {
display: flex;
align-items: center;
gap: 6px;
position: sticky;
top: 0;
z-index: 2;
margin: 10px 0 7px;
padding: 5px 8px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
}
.multi__grp:first-child { margin-top: 0; }
.multi__caret {
width: 22px;
flex: 0 0 auto;
color: var(--muted);
font-size: 12px;
}
.multi__name {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
text-align: left;
color: var(--ink);
font-size: 12.5px;
font-weight: 700;
}
.multi__badge {
padding: 1px 7px;
border-radius: 99px;
background: var(--gold-dim);
color: var(--gold-light);
font-size: 10.5px;
font-weight: 700;
/* "8 / 8" biçiminde okunur; rakamlar sabit genişlikte olmazsa
grup başlıkları satır satır kayar. */
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Grubun TAMAMI seçili — renk tek başına anlam taşımasın diye rozetin
içinde ayrıca ✓ var. */
.multi__badge--tam { background: var(--ok-dim); color: var(--ok); }
.multi__chips { margin-bottom: 4px; }
/* Mobilde parmakla seçim (§28, §29) — 44px dokunma hedefi.
"Tümünü seç" ve katlama oku bu ekranın EN ÇOK dokunulan düğmeleridir;
36/34px hedefler parmakla ıskalanıyordu. Hepsi 44px'e çıkarıldı. */
@media (max-width: 700px) {
.multi .chip { min-height: 44px; padding: 9px 14px; }
.multi__bulk { min-height: 44px; padding: 5px 12px; }
.multi__caret { min-width: 44px; width: 44px; min-height: 44px; }
.multi__name { min-height: 44px; }
}
/* --------------------------------------------------------------------------
Süzgeç düğmesi + tek seçimli seçim paneli (ui.js → optionPicker)
200+ seçenekli listeler (209 meslek, 153 uzmanlık…) yatay çip şeridinde
kullanılamıyordu: ilk çip yarım kesiliyor, "Tümü" ekran dışında kalıyordu.
Her süzgeç artık tek bir "Meslek: Tümü ▾" düğmesidir; dokununca arama
kutulu, grup başlıklı bir panel açılır. Aktif süzgeç altın vurguludur.
-------------------------------------------------------------------------- */
.fbar { display: flex; flex-wrap: wrap; gap: 7px; }
.fbtn {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%;
min-width: 0;
padding: 7px 12px;
border-radius: 99px;
border: 1px solid var(--line);
background: var(--surface);
font-size: 12.5px;
font-weight: 600;
color: var(--ink-2);
transition: all var(--t-fast);
}
.fbtn:hover { border-color: var(--gold-line); color: var(--ink); }
.fbtn.is-on {
background: var(--gold-dim);
border-color: var(--gold-line);
color: var(--gold-light);
}
.fbtn__key { flex: 0 0 auto; font-weight: 700; color: var(--muted); }
.fbtn.is-on .fbtn__key { color: inherit; opacity: .8; }
.fbtn__val {
min-width: 0;
max-width: 38vw; /* uzun etiket düğmeyi taşırmasın (375px) */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fbtn__caret { flex: 0 0 auto; font-size: 10px; opacity: .6; }
/* §28 — mobil dokunma hedefi */
@media (max-width: 700px) { .fbtn { min-height: 44px; } }
.picker { display: flex; flex-direction: column; }
/* 💾 PROFİL KAYDET ŞERİDİ — ALTTA YAPIŞIK.
⚠ Tek kaydet düğmesi dokuz bölümlük formun en altındaydı (v273 §10.4).
Uzmanlık/sektör/bölge çiplerini seçen kullanıcı kaydetmek için beş
bölüm aşağı kaydırmak zorundaydı; mobilde düğmeyi bulamadan ekranı
terk ediyordu. Düğme kaldırılmadı, görüş alanına taşındı.
⚠ `bottom: 0` + alt gezinme çubuğu: mobilde alt menü 56px yer kaplar,
şerit onun ÜSTÜNDE durmalı yoksa düğme menünün altında kalır. */
.profil__kaydet {
position: sticky;
bottom: 0;
z-index: 4;
align-items: center;
gap: 10px;
margin: 14px -18px -16px;
padding: 12px 18px;
background: var(--surface);
border-top: 1px solid var(--line-soft);
}
/* Kaydedilmemiş değişiklik varken şerit KENDİNİ BELLİ EDER — sessiz bir
düğme, kullanıcıya "her şey kayıtlı" der. */
.profil__kaydet.is-kirli {
border-top-color: var(--gold-line, var(--gold));
box-shadow: 0 -6px 18px -12px var(--gold, #caa64a);
}
.profil__kaydet .small { color: var(--gold, #caa64a); }
@media (max-width: 700px) {
.profil__kaydet { bottom: 56px; }
}
/* Arama + "Tümü" üstte YAPIŞIK kalır; liste altında kayar. Negatif kenar
boşlukları .modal__body dolgusunu (16px 18px) kapatır ki blok kaydırma
sırasında kenardan kenara otursun. */
.picker__top {
position: sticky;
top: 0;
z-index: 3;
display: flex;
flex-direction: column;
gap: 8px;
margin: -16px -18px 10px;
padding: 14px 18px 10px;
background: var(--surface);
border-bottom: 1px solid var(--line-soft);
}
.picker__grp {
margin: 12px 2px 5px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .4px;
text-transform: uppercase;
color: var(--muted);
}
.picker__opt {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
min-height: 44px; /* §28 — parmak hedefi */
padding: 9px 10px;
border-radius: 10px;
border: 1px solid transparent;
background: none;
text-align: left;
font-size: 14px;
color: var(--ink);
transition: background var(--t-fast);
}
.picker__opt:hover { background: var(--surface-2); }
.picker__opt.is-on {
background: var(--gold-dim);
border-color: var(--gold-line);
color: var(--gold-light);
font-weight: 700;
}
.picker__check { flex: 0 0 auto; width: 16px; color: var(--gold-light); font-weight: 700; }
.picker__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__all { border-color: var(--line); background: var(--surface-2); }
.picker__all.is-on { background: var(--gold-dim); border-color: var(--gold-line); }
/* --------------------------------------------------------------------------
Üye kartı rozet satırı (members.js) — TEK satır
Rozetler sarmayınca kart yüksekliği sabit kalır; uzun etiketler taşmak
yerine üç noktayla (…) daralır. "+N" rozeti (badge--more) hiç daralmaz —
"3 uzmanlık daha var" bilgisi her genişlikte okunur kalır (375px dahil).
-------------------------------------------------------------------------- */
.item__tags {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 5px;
min-width: 0;
overflow: hidden;
}
.item__tags .badge {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.item__tags .badge--more { flex: 0 0 auto; }
/* Güven skoru çubuğu (fırsat ajanı) */
.conf {
height: 4px;
border-radius: 99px;
background: var(--surface-3);
overflow: hidden;
width: 62px;
}
.conf__fill { height: 100%; background: var(--gold-grad); border-radius: 99px; }
/* --------------------------------------------------------------------------
Formlar
-------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
.form__grid--2 { grid-template-columns: 1fr 1fr; }
.form__grid--3 { grid-template-columns: repeat(3, 1fr); }
.form__full { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label {
font-size: 12.5px;
font-weight: 650;
color: var(--ink-2);
display: flex;
align-items: center;
gap: 6px;
}
.label__req { color: var(--gold); }
.hint { font-size: 11.5px; color: var(--faint); }
.error { font-size: 11.5px; color: var(--danger); font-weight: 600; }
.input, .select, .textarea {
width: 100%;
padding: 11px 13px;
min-height: 44px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--bg-2);
color: var(--ink);
font-size: 15px; /* iOS'ta odaklanınca yakınlaştırmayı önler */
transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--gold);
background: var(--surface);
box-shadow: 0 0 0 3px var(--gold-dim);
}
.input.has-error, .select.has-error, .textarea.has-error { border-color: var(--danger); }
.textarea { min-height: 108px; resize: vertical; line-height: 1.6; }
.select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238093b5' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 11px center;
background-size: 17px;
padding-right: 36px;
}
.select option { background: var(--surface); color: var(--ink); }
/* Onay kutusu / anahtar */
.check {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 13.5px;
line-height: 1.5;
}
.check input {
width: 20px; height: 20px;
flex: 0 0 20px;
margin-top: 1px;
accent-color: var(--gold);
cursor: pointer;
}
.switch {
position: relative;
width: 46px; height: 27px;
flex: 0 0 46px;
border-radius: 99px;
background: var(--surface-3);
border: 1px solid var(--line);
transition: background var(--t-fast), border-color var(--t-fast);
cursor: pointer;
}
.switch::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 21px; height: 21px;
border-radius: 50%;
background: var(--muted);
transition: transform var(--t), background var(--t-fast);
}
.switch.is-on { background: var(--gold-dim); border-color: var(--gold-line); }
.switch.is-on::after { transform: translateX(19px); background: var(--gold); }
.switch-row {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 0;
cursor: pointer;
}
.switch-row__text { flex: 1; min-width: 0; }
/* Arama kutusu */
.search {
position: relative;
flex: 1;
min-width: 0;
}
.search__input { padding-left: 38px; }
.search__icon {
position: absolute;
left: 13px; top: 50%;
transform: translateY(-50%);
color: var(--faint);
pointer-events: none;
font-size: 14px;
}
/* Bölümlü seçici */
.segmented {
display: inline-flex;
padding: 3px;
gap: 3px;
border-radius: 10px;
background: var(--bg-2);
border: 1px solid var(--line);
}
.segmented__btn {
padding: 6px 13px;
border-radius: 7px;
font-size: 12.5px;
font-weight: 650;
color: var(--muted);
transition: all var(--t-fast);
}
.segmented__btn.is-on { background: var(--surface-3); color: var(--gold-light); }
/* --------------------------------------------------------------------------
Kip pencere (modal) / alt sayfa (sheet)
-------------------------------------------------------------------------- */
.modal {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
align-items: flex-end;
justify-content: center;
background: var(--overlay);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: fadeIn var(--t-fast) both;
padding: 0;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal__box {
width: 100%;
max-width: 640px;
max-height: 92dvh;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-bottom: 0;
border-radius: var(--r-xl) var(--r-xl) 0 0;
box-shadow: var(--shadow-lg);
animation: sheetUp var(--t) both;
overflow: hidden;
}
@keyframes sheetUp {
from { transform: translateY(26px); opacity: .6; }
to { transform: none; opacity: 1; }
}
.modal__grip {
width: 42px; height: 4px;
border-radius: 99px;
background: var(--surface-3);
margin: 9px auto 2px;
flex: 0 0 auto;
}
.modal__head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px 12px;
border-bottom: 1px solid var(--line);
flex: 0 0 auto;
}
.modal__title { font-size: 16.5px; font-weight: 700; flex: 1; min-width: 0; }
.modal__body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; }
.modal__foot {
display: flex;
gap: 9px;
padding: 13px 18px calc(13px + var(--safe-b));
border-top: 1px solid var(--line);
background: var(--bg-2);
flex: 0 0 auto;
}
.modal__foot .btn { flex: 1; }
@media (min-width: 700px) {
.modal { align-items: center; padding: 24px; }
.modal__box { border-radius: var(--r-lg); border-bottom: 1px solid var(--line); max-height: 88dvh; }
.modal__grip { display: none; }
.modal__head { padding-top: 15px; }
.modal__foot { padding-bottom: 13px; }
}
/* --------------------------------------------------------------------------
Bildirim balonu (toast)
-------------------------------------------------------------------------- */
.toasts {
position: fixed;
left: 12px; right: 12px;
bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px);
z-index: 95;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
@media (min-width: 1000px) {
.toasts { left: auto; right: 22px; bottom: 22px; width: 380px; }
}
.toast {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px 15px;
border-radius: var(--r);
background: var(--surface-2);
border: 1px solid var(--line);
box-shadow: var(--shadow);
font-size: 13.5px;
pointer-events: auto;
animation: toastIn var(--t) both;
}
@keyframes toastIn {
from { opacity: 0; transform: translateY(14px) scale(.97); }
to { opacity: 1; transform: none; }
}
.toast.is-out { animation: toastOut var(--t-fast) both; }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }
.toast--ok { border-color: rgba(52, 201, 139, .4); }
.toast--error { border-color: rgba(239, 95, 95, .45); }
.toast--gold { border-color: var(--gold-line); box-shadow: var(--glow-gold); }
.toast__icon { font-size: 17px; flex: 0 0 auto; }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-weight: 700; margin-bottom: 1px; }
/* --------------------------------------------------------------------------
Zaman çizelgesi — görüşme geçmişi (§11)
-------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
content: "";
position: absolute;
left: 8px; top: 6px; bottom: 6px;
width: 2px;
background: linear-gradient(180deg, var(--gold-line), var(--line) 65%, transparent);
}
.tl-item { position: relative; padding: 0 0 18px; }
.tl-item::before {
content: "";
position: absolute;
left: -22px; top: 6px;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 3px var(--bg), 0 0 10px rgba(212, 175, 55, .55);
}
.tl-item--muted::before { background: var(--surface-3); box-shadow: 0 0 0 3px var(--bg); }
.tl-item__date { font-size: 11.5px; color: var(--gold-bright); font-weight: 700; }
.tl-item__who { font-size: 12px; color: var(--muted); }
.tl-item__body { margin-top: 5px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
/* §11 — Düzeltme notu: orijinali SİLMEZ, altında girintili durur. */
.tl-item--fix {
margin-left: 14px;
padding-left: 12px;
border-left: 2px solid var(--gold-line);
}
.tl-item--fix::before {
left: -37px;
width: 7px; height: 7px;
background: var(--gold-line);
box-shadow: 0 0 0 3px var(--bg);
}
.tl-item--fix .tl-item__date { color: var(--muted); }
/* §11 eylemleri (Düzenle / Düzeltme ekle / Düzeltmeyi gör) parmakla vurulur:
mobil öncelikli tabanda 44px dokunma hedefi. Geniş ekranda daralır. */
.tl-item .btn--sm { min-height: 44px; padding: 9px 14px; }
@media (min-width: 700px) { .tl-item .btn--sm { min-height: 36px; padding: 7px 12px; } }
/* "Düzeltmeyi gör" bağlantısı hedefi işaretler. */
.tl-item--flash {
border-radius: 8px;
animation: tlFlash 1.6s ease-out both;
}
@keyframes tlFlash {
0% { background: var(--gold-dim); }
100% { background: transparent; }
}
/* --------------------------------------------------------------------------
Fırsat ajanı kartı (§15)
-------------------------------------------------------------------------- */
.agent-box {
border: 1px solid var(--gold-line);
border-radius: var(--r);
background: linear-gradient(155deg, rgba(212, 175, 55, .09), transparent 62%), var(--surface);
padding: 14px;
animation: agentIn var(--t-slow) both;
}
@keyframes agentIn {
from { opacity: 0; transform: translateY(6px) scale(.99); }
to { opacity: 1; transform: none; }
}
.agent-box__head {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 13px;
color: var(--gold-light);
margin-bottom: 10px;
}
.opp {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 0;
border-top: 1px solid var(--line-soft);
}
.agent-box .opp:first-of-type { border-top: 0; }
.opp__dot {
width: 8px; height: 8px;
flex: 0 0 8px;
margin-top: 6px;
border-radius: 50%;
background: var(--gold-grad);
}
.opp__title { font-weight: 650; font-size: 14px; }
.opp__evidence { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 2px; }
/* --------------------------------------------------------------------------
Uyarılar
-------------------------------------------------------------------------- */
.alert {
display: flex;
gap: 11px;
padding: 13px 15px;
border-radius: var(--r);
border: 1px solid var(--line);
background: var(--surface);
font-size: 13.5px;
line-height: 1.55;
}
.alert--gold { border-color: var(--gold-line); background: linear-gradient(150deg, var(--gold-dim), transparent 70%), var(--surface); }
.alert--warn { border-color: rgba(232, 169, 60, .4); background: var(--warn-dim); }
.alert--danger { border-color: rgba(239, 95, 95, .4); background: var(--danger-dim); }
.alert--info { border-color: rgba(90, 162, 232, .4); background: var(--info-dim); }
.alert__icon { font-size: 18px; flex: 0 0 auto; }
.alert__title { font-weight: 700; margin-bottom: 3px; }
/* --------------------------------------------------------------------------
İlerleme çubuğu — katkı seviyesi (§25)
-------------------------------------------------------------------------- */
.progress {
height: 7px;
border-radius: 99px;
background: var(--bg-2);
border: 1px solid var(--line);
overflow: hidden;
}
.progress__fill {
height: 100%;
background: var(--gold-grad);
border-radius: 99px;
transition: width var(--t-slow);
}
/* --------------------------------------------------------------------------
Yükleniyor
-------------------------------------------------------------------------- */
.spinner {
width: 20px; height: 20px;
border: 2.5px solid var(--surface-3);
border-top-color: var(--gold);
border-radius: 50%;
animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 34px; color: var(--muted); }
.skeleton {
border-radius: var(--r-sm);
background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
background-size: 200% 100%;
animation: shimmer 1.3s infinite;
min-height: 14px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
/* --------------------------------------------------------------------------
Giriş / kayıt ekranı
-------------------------------------------------------------------------- */
.auth {
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 26px 16px calc(26px + var(--safe-b));
}
/* Kart altın çizgili ve ışıltılı bir çerçeve içinde durur: 1 px'lik altın
kenarlık + dışa vuran soluk altın hale + üst kenarda iç parlama. Üçü de
tek bir `box-shadow` listesinde toplandığı için ek katman/blur yok. */
.auth__box {
width: 100%;
max-width: 460px;
background: linear-gradient(165deg, var(--surface), var(--bg-2));
border: 1px solid var(--gold-line);
border-radius: var(--r-xl);
padding: 26px 22px;
box-shadow:
var(--shadow-lg),
0 0 44px rgba(212, 175, 55, .10),
var(--inner-hi);
}
.auth__box--wide { max-width: 720px; }
/* Karşılama sloganı — marka bloğunun hemen altında, kartın üstünde. */
.auth__slogan {
margin: 16px 0 4px;
text-align: center;
font-size: 13.5px;
line-height: 1.55;
color: var(--muted);
}
.auth__slogan b {
display: block;
margin-top: 6px;
font-family: var(--font-brand);
font-size: 15.5px;
font-weight: 700;
letter-spacing: .01em;
color: var(--gold-light);
}
/* Marka bloğu ile kartın gövdesi arasındaki ince altın ayraç. */
.auth__rule {
height: 1px;
margin: 18px 0 2px;
background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.auth__quote {
border-left: 2.5px solid var(--gold);
padding: 10px 0 10px 14px;
margin: 18px 0 22px;
font-family: var(--font-brand);
font-style: italic;
font-size: 13.5px;
line-height: 1.6;
color: var(--ink-2);
}
.auth__steps {
display: flex;
gap: 6px;
margin-bottom: 20px;
}
.auth__step {
flex: 1;
height: 3px;
border-radius: 99px;
background: var(--surface-3);
transition: background var(--t);
}
.auth__step.is-on { background: var(--gold-grad); }
.legal {
max-height: 220px;
overflow-y: auto;
padding: 13px;
border-radius: var(--r-sm);
background: var(--bg);
border: 1px solid var(--line);
font-size: 12px;
line-height: 1.65;
color: var(--ink-2);
}
.legal h4 { color: var(--gold-bright); font-size: 12.5px; margin: 12px 0 4px; }
.legal h4:first-child { margin-top: 0; }
.legal ul { margin: 4px 0; padding-left: 18px; }
/* --------------------------------------------------------------------------
Mükerrer kayıt uyarısı (§6)
-------------------------------------------------------------------------- */
.dupe {
border: 1px solid rgba(232, 169, 60, .4);
background: var(--warn-dim);
border-radius: var(--r);
padding: 13px;
}
.dupe__item {
padding: 9px 0;
border-top: 1px solid rgba(232, 169, 60, .22);
font-size: 13px;
}
.dupe__item:first-of-type { border-top: 0; }
/* --------------------------------------------------------------------------
Sekmeler
-------------------------------------------------------------------------- */
/* Sekmeler, ekranın hangi kesitine baktığınızı söyleyen ANA denetimdir;
önceki hâlinde pasif sekmeler `--muted` griydi ve 2px'lik alt çizgi
zeminde kayboluyordu — kullanıcılar "Tümü" sekmesini fark etmiyordu.
Şimdi: yüksek kontrastlı etiket, 46px dokunma hedefi (§28), aktif
sekmede kalın altın alt çizgi + hafif altın zemin. */
.tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--line);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 16px;
min-height: 46px;
border-radius: 10px 10px 0 0;
font-size: 14px;
font-weight: 700;
color: var(--ink-2);
white-space: nowrap;
transition: color var(--t-fast), background var(--t-fast);
}
.tab:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
/* Alt çizgi ayrı katmanda: `.tabs` kaydırılırken hizası bozulmaz.
`bottom: 0` zorunludur — `.tabs` yatay kaydırma kutusu olduğu için
dışarı taşan (negatif bottom) çizgi kırpılır ve yarım görünür. */
.tab::after {
content: "";
position: absolute;
left: 9px; right: 9px; bottom: 0;
height: 3px;
border-radius: 3px 3px 0 0;
background: var(--gold-grad);
opacity: 0;
transform: scaleX(.35);
transition: opacity var(--t-fast), transform var(--t-fast);
}
.tab.is-on {
color: var(--gold-light);
background: linear-gradient(180deg, transparent, var(--gold-dim));
}
.tab.is-on::after { opacity: 1; transform: none; }
@media (max-width: 400px) {
.tab { padding: 12px 13px; font-size: 13.5px; }
}
/* --------------------------------------------------------------------------
Bağlantı durumu (çevrimdışı — §28)
-------------------------------------------------------------------------- */
.offline-bar {
position: fixed;
left: 0; right: 0;
top: 0;
z-index: 100;
padding: 6px 12px;
text-align: center;
font-size: 12px;
font-weight: 650;
background: var(--warn);
color: var(--on-gold);
transform: translateY(-100%);
transition: transform var(--t);
}
.offline-bar.is-on { transform: none; }
/* --------------------------------------------------------------------------
Dokunma hedefleri — küçük düğmeler (§28, §29)
Satır içi eylem düğmeleri (✎ Düzenle, 🗑 Sil, Tamamla) `.btn--sm` kullanır;
bu sınıfın masaüstündeki yüksekliği 32px'tir ve parmakla basmak için
şartnamedeki 44px hedefinin altında kalır. Dokunmatik cihazlarda —
`pointer: coarse` — hedef 44px'e çıkarılır. Fare kullanılan masaüstü
görünümü DEĞİŞMEZ, böylece mevcut yerleşim korunur.
-------------------------------------------------------------------------- */
@media (pointer: coarse) {
/* Açıklamaya parmakla ulaşılabilsin; yazı ölçeğini değiştirmeden
rozetin gerçek kutusu büyür, komşu hedeflerin üzerine taşmaz. */
.badge--acik {
min-width: var(--touch-target);
min-height: var(--touch-target);
justify-content: center;
}
.btn--sm { min-height: 44px; padding: 6px 14px; font-size: 13px; }
.btn--icon.btn--sm { width: 44px; min-height: 44px; padding: 0; }
/* Taban `.btn` masaüstünde 40px'tir; parmakla 44px hedefinin altında kalır.
Üst çubuktaki 🔍 · 🔔 · profil düğmeleri `.btn--icon` kullanır ve kare
olduklarından genişlikleri de büyütülmelidir. */
.btn { min-height: 44px; }
.btn--icon { width: 44px; min-height: 44px; }
/* Rozet satırından oluşan tıklanabilir kısayollar (ana ekranda "✦ N puan")
`role="button"` taşır ama yüksekliğini yalnız rozetler belirler; dokunma
hedefi 24px'e kadar düşüyordu. */
.row.item--tap { min-height: 44px; align-items: center; }
/* Süzgeç çipleri (meslek · pozisyon · il · fırsat türü · durum) yalnızca
dolgudan 33px yükseklik alıyordu. Müşteriler, Kişiler, Fırsatlar, Arama
ve Bildirimler ekranlarının BİRİNCİL süzgeç denetimleri bunlar; yatay
kaydırılan bir şeritte 33px'lik hedefe parmakla isabet etmek zordur.
`.multi .chip` zaten 44px'e çıkarılmıştı, bu satır onu tüm çiplere yayar. */
.chip { min-height: 44px; }
/* Ajanda ekranının Gün / Hafta / Liste anahtarı (ui.js → segmented) yalnız
31px'ti; aynı gerekçeyle 44px'e çıkarılır. */
.segmented__btn { min-height: 44px; display: inline-flex; align-items: center; }
}
/* --------------------------------------------------------------------------
Vitrin şeridi — ana ekranda kayan tanıtım (views/dashboard.js · showcaseStrip)
Katılım isteğe bağlıdır (§27). Hareket azaltma tercihinde kaymaz (§28).
-------------------------------------------------------------------------- */
.showcase {
overflow: hidden;
position: relative;
padding: 4px 0 6px;
/* Kenarlarda yumuşak soluşma — şeridin "kesildiği" hissini önler. */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.showcase__track {
display: flex;
gap: 10px;
width: max-content;
animation: showcase-slide var(--showcase-dur, 40s) linear infinite;
}
.showcase:hover .showcase__track,
.showcase:focus-within .showcase__track { animation-play-state: paused; }
.showcase__card {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
white-space: nowrap;
color: inherit;
text-decoration: none;
}
a.showcase__card:hover { border-color: var(--gold-line); background: var(--surface-2); }
.showcase__dot {
flex: 0 0 30px;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
color: #fff;
}
.showcase__dot--org { background: var(--gold-dim); font-size: 15px; }
.showcase__title { display: block; font-size: 13px; font-weight: 700; }
.showcase__sub { display: block; font-size: 11px; color: var(--ink-3); }
@keyframes showcase-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.showcase { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.showcase__track { animation: none; }
}
/* Saha modu — bekleyen kayıt sayacı (offline-bar içinde) */
.offline-bar { display: flex; align-items: center; justify-content: center; gap: 10px; }
.offline-bar__count {
background: #00000033;
padding: 2px 10px;
border-radius: 99px;
font-weight: 700;
font-size: 12px;
}
.offline-bar__count:empty { display: none; }
/* ---- 🗺 Harita kutusu ve işaretleri (views/map.js) ----------------------- */
.mapbox{height:min(58vh,520px);width:100%;border-radius:14px;overflow:hidden;
border:1px solid #26304d;margin-top:10px;background:#0d1526}
/* ---- 🗺 Harita işaretleri (views/map.js) --------------------------------- */
.mappin{width:26px;height:26px;border-radius:50% 50% 50% 4px;background:#e5b84b;
border:2px solid #0b1024;box-shadow:0 2px 8px rgba(0,0,0,.5);
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:800;color:#0b1024;transform:rotate(-45deg)}
.mappin>*{transform:rotate(45deg)}
.mappin--due{background:#e8933a}
.mappin--today{background:#5aa2e0;color:#fff}
.mappin--route{background:#e5b84b;font-size:13px}
.mappin--me{background:#34d399;border-radius:50%}
.leaflet-popup-content-wrapper{background:#101832;color:#e8ecf7;border:1px solid #26304d}
.leaflet-popup-tip{background:#101832}
.leaflet-container{font:inherit}
/* ---- 📊 KPI panosu (views/kpi.js) ---------------------------------------- */
.grid.grid--4{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
table.table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
table.table th{color:var(--gold-light,#e5b84b);text-align:left;padding:8px 10px;
border-bottom:1px solid var(--line,#26304d);font-size:12.5px;white-space:nowrap}
table.table td{padding:8px 10px;border-bottom:1px solid rgba(38,48,77,.5);white-space:nowrap}
table.table tbody tr:hover{background:rgba(148,163,184,.06)}
/* ---- 🏠 Ana ekran sadeleştirme + modern cila (1 Eyl 2026) ----------------- */
.card--today{border:1px solid rgba(229,184,75,.35);
background:linear-gradient(180deg,rgba(229,184,75,.05),transparent 45%);
box-shadow:0 6px 24px rgba(0,0,0,.25)}
.card--today .card__title{color:var(--gold-light,#e5b84b);letter-spacing:.02em}
.home-more{margin-top:2px}
.home-more__toggle{width:100%;display:flex;align-items:center;gap:12px;
background:none;border:0;color:var(--muted,#8fa0bc);font:inherit;
font-size:13px;cursor:pointer;padding:12px 4px;transition:color .15s}
.home-more__toggle:hover{color:var(--gold-light,#e5b84b)}
.home-more__toggle::before,.home-more__toggle::after{content:'';flex:1;height:1px;
background:var(--line,#26304d)}
.home-more__chev{transition:transform .2s;font-size:15px}
.home-more.is-open .home-more__chev{transform:rotate(180deg)}
.home-more__body{display:none;flex-direction:column;gap:14px;padding-top:4px}
.home-more.is-open .home-more__body{display:flex}
@media (prefers-reduced-motion:reduce){.home-more__chev{transition:none}}
/* ==========================================================================
🏠 MODERN CİLA v2 (kullanıcı isteği: "çok daha modern") — storyboard dili:
dolu gradyan ikon rozetleri, derinlikli kartlar, ışıyan altın odak.
========================================================================== */
/* Aurora zemin — içerik ışımanın üstünde, kaydırmada sabit */
.view{isolation:isolate;position:relative}
.view::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
background:radial-gradient(620px 340px at 88% -6%,rgba(212,175,55,.075),transparent 62%),
radial-gradient(560px 320px at 6% 10%,rgba(90,162,232,.05),transparent 60%)}
/* Sayı kartları — dolu gradyan rozet + renkli ışıma + iri rakam */
.stat__box{border:0;color:#132038;background:var(--gold-grad);
box-shadow:0 5px 14px rgba(212,175,55,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.stat--info .stat__box{background:linear-gradient(135deg,#8ec2f5 0%,#3d84dc 100%);
box-shadow:0 5px 14px rgba(90,162,232,.38),inset 0 1px 0 rgba(255,255,255,.35);color:#0c1d33}
.stat--ok .stat__box{background:linear-gradient(135deg,#66e2ab 0%,#1c9d68 100%);
box-shadow:0 5px 14px rgba(52,201,139,.38),inset 0 1px 0 rgba(255,255,255,.35);color:#07251a}
.stat--violet .stat__box{background:linear-gradient(135deg,#cdbbfd 0%,#8a6bf2 100%);
box-shadow:0 5px 14px rgba(167,139,250,.38),inset 0 1px 0 rgba(255,255,255,.35);color:#1d1440}
.stat__value{font-size:25px;font-weight:800;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;line-height:1.15}
.stat{backdrop-filter:blur(4px)}
.stat:hover{box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 0 1px var(--gold-line)}
/* 🌅 Bugün — sahnenin yıldızı */
.card--today{border-color:var(--gold-line);
background:linear-gradient(165deg,rgba(212,175,55,.10),rgba(16,26,46,0) 46%),
linear-gradient(160deg,var(--surface),var(--bg-2));
box-shadow:0 12px 36px rgba(0,0,0,.38),0 0 0 1px rgba(212,175,55,.14),
0 0 52px rgba(212,175,55,.08)}
.card--today .card__title{background:var(--gold-grad);
-webkit-background-clip:text;background-clip:text;color:transparent;
font-size:17px;font-weight:800;letter-spacing:.01em}
.card--today .list .item{background:rgba(16,26,46,.5);border-radius:12px;
margin-top:6px;border:1px solid rgba(38,48,77,.55)}
.card--today .list .item:hover{border-color:var(--gold-line)}
.card--today .btn--primary{background:var(--gold-grad);color:#1d1503;border:0;
font-weight:800;box-shadow:0 6px 20px rgba(212,175,55,.4)}
.card--today .btn--primary:hover{filter:brightness(1.07)}
/* Genel derinlik + başlık ritmi */
.page__title{font-size:clamp(22px,3.2vw,30px);letter-spacing:-.02em}
.panel,.card{box-shadow:0 4px 18px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.035)}
.panel__head{letter-spacing:.02em}
/* ---- 📋 Kanban satış hattı (views/opportunities.js) ---------------------- */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.kanban__col{flex:0 0 262px;background:var(--surface,#101a2e);border:1px solid var(--line,#26304d);
border-radius:14px;display:flex;flex-direction:column;scroll-snap-align:start;max-height:70vh}
.kanban__col.is-over{border-color:var(--gold,#d4af37);box-shadow:0 0 0 1px var(--gold-line,rgba(212,175,55,.3))}
.kanban__head{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:11px 13px;border-bottom:1px solid var(--line,#26304d);font-weight:700;font-size:13.5px}
.kanban__body{padding:10px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;min-height:70px}
.kanban__card{background:var(--bg-2,#0a1020);border:1px solid var(--line,#26304d);
border-radius:11px;padding:11px 12px;cursor:pointer;transition:border-color .15s,transform .15s}
.kanban__card:hover{border-color:var(--gold-line,rgba(212,175,55,.3));transform:translateY(-1px)}
.kanban__card.is-drag{opacity:.45}
.kanban__card.is-busy{opacity:.5;pointer-events:none}
.kanban__title{font-weight:700;font-size:14px}
.kanban__empty{color:var(--muted,#8093b5);font-size:13px;text-align:center;padding:14px 0}
@media (max-width:760px){.kanban__col{flex-basis:78vw}}
/* ---- Menü katmanlaması (app.js → Daha Fazla) ----------------------------- */
.nav__toggle{width:100%;background:none;border:0;cursor:pointer;text-align:left;
color:var(--muted,#8093b5);font:inherit}
.nav__toggle:hover{color:var(--gold-light,#f0d885)}
.nav__more{display:flex;flex-direction:column;gap:2px;
border-left:1px solid var(--line,#26304d);margin-left:14px;padding-left:6px}
/* ---- Ana ekran: kahraman + büyük kutucuklar (kurucu isteği 2 Eyl 2026) ----
"Bugün yapılması gerekenler, fırsatlar, ajanlar büyük logolu olsun; tek
tıkla içine girilsin." Sayı kalabalığı ve ağ hareketleri ana ekrandan
"Daha Fazla" katmanına indi — hiçbiri kaldırılmadı. */
.hero{position:relative;overflow:hidden;border-radius:18px;padding:22px 24px;
border:1px solid var(--gold-line,rgba(212,175,55,.28));
background:
radial-gradient(120% 140% at 0% 0%, rgba(212,175,55,.10), transparent 58%),
var(--surface,#101a2e)}
.hero__eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold,#d4af37);font-weight:600}
.hero__title{font-size:clamp(20px,3.4vw,27px);font-weight:800;letter-spacing:-.02em;
margin-top:6px;line-height:1.2}
.hero__lead{color:var(--muted,#8093b5);font-size:14.5px;margin-top:6px;max-width:62ch}
.hero__pitch{margin-top:14px;padding:13px 15px;border-radius:12px;
background:var(--bg-2,#0a1020);border:1px solid var(--line,#26304d)}
.hero__pitch b{display:block;font-size:14px;margin-bottom:3px}
.hero__pitch span{font-size:13px;color:var(--muted,#8093b5)}
.hero__cta{margin-top:14px;display:flex;gap:9px;flex-wrap:wrap}
/* ⚠ ÖKSÜZ KUTUCUK BIRAKMA. ``auto-fit`` + 148px, geniş ekranda ALTI
sütun yapıyor ve yedinci kutucuk tek başına alt satırda kalıyordu —
ızgara boş bir satırın üzerine yayılınca ekran dağınık görünür.
Dört sütun 7 kutucuğu 4+3 diye BÖLER; iki satır da dolu durur. */
.tiles{display:grid;gap:12px;
grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
@media (min-width:1100px){.tiles{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1500px){.tiles{grid-template-columns:repeat(5,1fr)}}
/* ⚠ SAYISI OLAN VE OLMAYAN KUTUCUK AYNI HİZADA DURSUN. Kutucukların
bir kısmında sayı var ("4 Haber Radarı"), bir kısmında yok
("Projeler"). Serbest akışta başlıklar farklı yükseklikte kalıyor ve
satır tırtıklı görünüyordu. İkon yukarı yapışır, metin bloğu aşağıya
hizalanır: tekrarlanan nesnede aynı öğe her kartta AYNI yerde durmalı. */
.tile{display:flex;flex-direction:column;gap:5px;padding:17px 16px;border-radius:16px;
min-height:124px;justify-content:flex-end;
background:var(--surface,#101a2e);border:1px solid var(--line,#26304d);
cursor:pointer;text-align:left;font:inherit;color:inherit;
transition:transform .15s,border-color .15s,box-shadow .15s}
.tile:hover,.tile:focus-visible{transform:translateY(-2px);
border-color:var(--gold-line,rgba(212,175,55,.4));
box-shadow:0 10px 26px rgba(0,0,0,.30)}
/* ⚠ İKON ARTIK SVG. ``font-size`` bir SVG'yi büyütmez; ölçü
``width/height`` ile verilir. Emoji döneminden kalan kural sessizce
etkisizdi ve ikonlar 20px'te kalıyordu — sayıdan küçük durmalı ama
kaybolmamalı. */
.tile__icon{display:flex;align-items:center;height:26px;margin-bottom:auto;
color:var(--gold,#d4af37);opacity:.85}
.tile__icon svg{width:24px;height:24px}
.tile__count{font-size:26px;font-weight:800;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;line-height:1}
.tile__title{font-size:14px;font-weight:700}
.tile__sub{font-size:12px;color:var(--faint,#7686a8);line-height:1.4}
.tile--gold{border-color:var(--gold-line,rgba(212,175,55,.35));
background:linear-gradient(180deg,rgba(212,175,55,.07),transparent 60%),
var(--surface,#101a2e)}
.tile--gold .tile__count{color:var(--gold,#d4af37)}
/* Öneri satırı — "şunu yap" kartları */
.advice{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;
border-radius:13px;background:var(--surface,#101a2e);
border:1px solid var(--line,#26304d);cursor:pointer;text-align:left;
font:inherit;color:inherit;width:100%;
transition:border-color .15s,transform .15s}
.advice:hover{border-color:var(--gold-line,rgba(212,175,55,.35));transform:translateX(2px)}
.advice__icon{font-size:22px;line-height:1.2;flex:0 0 auto}
.advice__body{flex:1;min-width:0}
.advice__title{font-weight:700;font-size:14.5px}
.advice__why{font-size:12.5px;color:var(--muted,#8093b5);margin-top:2px;line-height:1.45}
.advice__go{font-size:12px;color:var(--gold,#d4af37);font-weight:600;margin-top:5px;
display:inline-block}
@media (max-width:520px){
.hero{padding:18px 16px}
.tiles{grid-template-columns:repeat(2,1fr)}
.tile{padding:14px 13px}
.tile__icon{font-size:26px}
.tile__count{font-size:22px}
}
/* ==========================================================================
🎤 BAS VE KONUŞ — ürünün ana ekranı (kurucu şartnamesi md.4)
--------------------------------------------------------------------------
Görsel hiyerarşi TERSTİ: ürünün ana vaadi 32 piksellik ikincil bir
düğmeydi, altındaki işlem düğmesi tam genişlikti. Ekranın adı "Bas ve
Konuş" ise basılacak şey ekranın en büyük nesnesi olmalıdır.
========================================================================== */
/* Sıfır kipinde menü boşluğu kalmasın; diğer kiplerin ölçüsü korunur. */
.shell--sifir .main { padding-bottom: var(--safe-b); }
.sifir-sayfa { max-width: 680px; }
.sifir-baslangiclar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sifir-baslangiclar > button { flex: 1 1 180px; min-height: 44px; }
.sifir-cikis { align-self: center; margin: 16px; min-height: 44px; }
.bas-konus { display: flex; flex-direction: column; align-items: center;
gap: 10px; margin-bottom: 14px; }
.bas-konus > .row { flex-direction: column; align-items: center; gap: 8px; }
/* Sıfır ekranında genel .btn:hover arka planı mikrofonun altın zeminini
silmesin; koyu yazı koyu zeminde okunamaz hâle geliyordu. */
.mic-buyuk, .sifir-sayfa .mic-buyuk {
/* 👆 Dokunma alanı 44×44'ün çok üstünde — bu düğme bulunmak için var. */
min-height: 84px; min-width: min(320px, 100%);
padding: 20px 30px; font-size: 18px; font-weight: 800; letter-spacing: .04em;
border-radius: 999px;
background: linear-gradient(135deg, var(--gold, #d9b45a), #b8923d);
color: #0b111d; border: 0;
box-shadow: 0 10px 28px rgba(217, 180, 90, .28);
}
.mic-buyuk:hover { filter: brightness(1.05); }
.mic-buyuk:active { transform: scale(.98); }
/* ♿ Klavye odağı GÖRÜNÜR olmalı — fareyle kullanılmayan bir düğme de
bulunabilmeli. */
.mic-buyuk:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* 🔴 Dinlerken nabız — ama hareket duyarlılığı olan kullanıcıya değil. */
.mic-buyuk[data-dinliyor="1"] { animation: mic-nabiz 1.6s ease-in-out infinite; }
@keyframes mic-nabiz {
0%, 100% { box-shadow: 0 10px 28px rgba(217, 180, 90, .28); }
50% { box-shadow: 0 10px 40px rgba(217, 180, 90, .55); }
}
@media (prefers-reduced-motion: reduce) {
.mic-buyuk[data-dinliyor="1"] { animation: none; }
}
/* ⚠ Mikrofon yoksa kullanıcı BOŞ bir satır görüyordu; neden düğme
olmadığını anlamıyordu. iOS Safari ve masaüstü Firefox'ta
SpeechRecognition yoktur — uç bir durum değil. */
.mic-yok { width: 100%; text-align: center; padding: 14px 16px;
border: 1px dashed var(--line, #253149); border-radius: 12px;
color: var(--muted, #93a1bb); font-size: 14px; }
/* ✅ Başarı ekranı — teknik ayrıntı değil SONUÇ (md.13). */
.basari { border-color: rgba(52, 211, 153, .45); }
.basari__baslik { font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.basari__liste { list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 8px; }
.basari__liste li { font-size: 15px; }
/* 🔗 Birleşmiş parça — ayrı kayıt değil, üstteki kaydın niteliği.
"Bütçe 4 milyon lira." kendi başına bir iş değildir; ayrı kart olarak
durunca listede anlamsız bir "Not" satırı oluşuyor, fırsatın tutarı
ise boş kalıyordu. Cümle kaybolmaz — ne yapıldığı yazılı gösterilir. */
.birlesik { display: flex; gap: 8px; align-items: flex-start;
padding: 8px 12px 8px 22px; border-left: 2px solid var(--line, #253149);
margin-left: 14px; }
.birlesik__ok { color: var(--gold, #d9b45a); flex: none; }
/* 🔢 Üç sayı — ana ekranda grafiklerden ÖNCE (kurucu şartnamesi md.8.3).
Üçü FARKLI şeylerdir: elinizdeki iş · satış ihtimali · başkasında olan
iş. Tek sayıda toplamak bilgiyi yok eder. */
.ucsayi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
margin: 16px 0 4px; }
.ucsayi__hucre { display: flex; flex-direction: column; align-items: center;
gap: 2px; padding: 12px 8px; border-radius: 14px;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(229, 184, 75, .18);
color: inherit; font: inherit; text-align: center;
/* 👆 Dokunma alanı 44 px'in üstünde (md.12). */
min-height: 78px; }
button.ucsayi__hucre { cursor: pointer; }
button.ucsayi__hucre:hover { background: rgba(255, 255, 255, .08); }
button.ucsayi__hucre:focus-visible { outline: 2px solid var(--gold, #d9b45a);
outline-offset: 2px; }
.ucsayi__ikon { font-size: 15px; line-height: 1; opacity: .85; }
.ucsayi__deger { font-size: 26px; font-weight: 800; line-height: 1.1;
font-variant-numeric: tabular-nums; }
.ucsayi__etiket { font-size: 11.5px; color: var(--muted, #93a1bb);
line-height: 1.25; }
/* 🙋 Salt okunur alan (Sorumlu) — girdi kutusu gibi durur ama
düzenlenemez. Devre dışı bir yerine kullanıldı: devre
dışı girdi ekran okuyucuya "boş, kapalı alan" diye okunur; buradaki
bilgi ise OKUNMASI gereken bir bilgidir. */
.input--donuk { display: flex; align-items: center; opacity: .85;
cursor: default; }
/* Masaüstü ölçeği: mevcut bileşen kurallarından sonra gelir ki geniş
ekrandaki clamp başlıkları bunu ezmesin. Mobil ve dokunma alanları
değişmez; büyük eylem düğmesinin vurgusu da korunur. */
@media (min-width: 1000px) {
h1, .page__title { font-size: var(--desktop-page-title); }
.panel__head,
.panel__head h2,
.panel__head h3 { font-size: var(--desktop-panel-title); }
.item, .item__title { font-size: var(--desktop-list-text); }
.btn:not(.btn--sm):not(.btn--lg) { font-size: var(--desktop-button-text); }
.badge { font-size: var(--desktop-badge-text); }
}
/* 🎭 ÖRNEK VERİ ŞERİDİ — deneme turunda ekranın en üstünde durur.
Şartname bölüm 21: "Seed veriler 'Örnek' olarak açıkça işaretli."
⚠ Dikkat çekmeli ama alarm gibi durmamalı: ziyaretçi korkutulmaz,
bilgilendirilir. Bu yüzden uyarı kırmızısı değil altın kullanılıyor. */
.ornek-serit {
margin: 0 0 12px;
padding: 10px 14px;
border: 1px solid var(--gold-dim, #6b5a2a);
border-left: 4px solid var(--gold, #d4af37);
border-radius: 10px;
background: color-mix(in srgb, var(--gold, #d4af37) 8%, transparent);
color: var(--text, #e8e6e1);
font-size: 13px;
line-height: 1.5;
}
/* 🩺 CİHAZ TANISI — ekran görüntüsü alınmak ÜZERE tasarlandı.
⚠ Kurucu bunu arkadaşının telefonunda açıp fotoğrafını gönderecek.
O yüzden: her satır tek başına okunur, işaret ile ad arasındaki
hizalama sabit, ve renk TEK BAŞINA anlam taşımaz — ✓ / ✕ / ?
işaretleri renk körü bir ekranda da, siyah-beyaz bir ekran
görüntüsünde de okunur. */
.tani { display: flex; flex-direction: column; gap: 10px; }
.tani__baslik {
font-size: 17px;
font-weight: 700;
color: var(--gold-light);
}
/* Grup başlığı — "Ses", "Kurulum", "Cihaz". */
.tani__grup {
margin-top: 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--line);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--faint);
}
.tani__satir {
display: grid;
grid-template-columns: 26px 1fr; /* işaret sütunu SABİT: satırlar hizalı okunur */
gap: 10px;
align-items: start;
padding: 8px 0;
border-bottom: 1px solid var(--line-soft);
}
.tani__isaret {
font-size: 15px;
font-weight: 700;
line-height: 1.35;
text-align: center;
}
.tani--var { color: var(--ok); }
.tani--yok { color: var(--danger); }
.tani--belirsiz { color: var(--muted); }
.tani__ad { font-size: 14px; font-weight: 600; color: var(--ink); }
.tani__not {
margin-top: 2px;
font-size: 12px;
line-height: 1.45;
color: var(--ink-2);
overflow-wrap: anywhere; /* uzun codec adları taşmasın */
}
/* Kurulum yönergesi — bilgi, alarm değil. */
.tani__uyari {
margin-top: 10px;
padding: 12px 14px;
border: 1px solid var(--gold-line);
border-left: 4px solid var(--gold);
border-radius: var(--r-sm);
background: var(--gold-dim);
color: var(--ink);
line-height: 1.5;
}
.tani__uyari b { display: block; margin-bottom: 4px; color: var(--gold-light); }
/* Pano reddedilirse metin BURAYA basılır — sessiz düşme yok. */
.tani__ham {
margin-top: 10px;
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--bg-2);
color: var(--ink-2);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
user-select: all; /* tek dokunuşla seçilsin */
}
/* ==========================================================================
🧭 EKRAN HİYERARŞİSİ — dar telefon (9 Eyl 2026, kurucu: "görüntü çok önemli")
Gerçek tarayıcıda 375 ve 360 px genişlikte ölçülerek yazıldı.
========================================================================== */
/* Üst çubuk TEK satır. 375 px'te marka (94) + boşluk (10) + eylemler (280)
+ dolgu (24) = 388 > 375 olduğu için avatar tek başına ikinci satıra
düşüyor, çubuk 93 px oluyordu. Dokunma hedefleri 40 px'in altına inmez;
yalnız "Sıfır Mod" hapı ve marka boşluğu sıkışır. */
@media (max-width: 430px) {
.topbar { gap: 8px; }
.topbar .brand { gap: 8px; }
.topbar__actions { flex-wrap: nowrap; gap: 2px; }
.topbar__actions .btn--ghost:not(.btn--icon) { padding-left: 8px; padding-right: 8px; font-size: 13px; }
.topbar__actions .btn--icon { width: 40px; flex: 0 0 40px; }
}
/* 360 px Android: marka adı bir kademe küçülür, simgeler 38 px (hâlâ ≥ 36). */
@media (max-width: 380px) {
.topbar { padding-left: 10px; padding-right: 10px; }
.topbar .brand__name { font-size: 18px; }
.topbar__actions .btn--icon { width: 38px; flex: 0 0 38px; min-height: 38px; }
}
/* Sayfa başlığında BİRİNCİL eylem önce gelir ve tam genişliktir; ikinciller
(İçe/Dışa Aktar gibi) arkasında kalır. Müşteriler'de "+ Yeni Firma"
ikincillerin altına, ikinci satıra düşüyor ve aynı ağırlıkta görünüyordu. */
@media (max-width: 640px) {
.page__head .row > .btn--primary { order: -1; flex: 1 1 100%; justify-content: center; }
}
/* Gruplu menü (§4.4 C). Yerel : klavye ve erişilebilirlik hazır gelir;
ok işareti tek çizgi ikon ailesiyle uyumlu, emoji değil. */
.menu-gruplar { display: flex; flex-direction: column; gap: 8px; }
.menu-konus {
background: var(--gold-dim); border: 1px solid var(--gold-line); border-radius: 12px;
margin-bottom: 4px; font-weight: 700;
}
.menu-konus .nav__label { color: var(--gold-light); }
.menu-grup { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.menu-grup__baslik {
list-style: none; cursor: pointer; user-select: none;
display: flex; align-items: center; gap: 8px;
padding: 11px 14px; min-height: 44px; /* dokunma hedefi */
font-weight: 650; color: var(--ink-2);
}
.menu-grup__baslik::-webkit-details-marker { display: none; }
.menu-grup__baslik::after {
content: ""; margin-left: auto; width: 8px; height: 8px;
border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
transform: rotate(45deg); transition: transform var(--t-fast);
}
.menu-grup[open] > .menu-grup__baslik { color: var(--gold-light); }
.menu-grup[open] > .menu-grup__baslik::after { transform: rotate(-135deg); border-color: var(--gold); }
.menu-grup__sayi { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.menu-grup__baslik .nav__count { margin-left: 0; }
.menu-grup__govde { padding: 2px 6px 8px; border-top: 1px solid var(--line-soft); }
.menu-grup__govde .nav__item { min-height: 42px; }
/* Ana ekran: tarih, selamlamayla YARIŞMAZ. Tarih 22 px kalın başlıkken
kahraman kartın "İyi günler" satırı 20 px kalıyordu; göz önce tarihe gidiyordu.
Yalnız .hero taşıyan sayfada (ana ekran) tarih üst etikete iner, selamlama büyür.
(.hero, başlığın kardeşi değil sonraki kapsayıcının torunu — bu yüzden `~ * .hero`.) */
.page__head:has(~ * .hero) .page__title {
font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--muted);
}
.page__head:has(~ * .hero) + * { margin-top: 0; }
.hero__title { font-size: clamp(24px, 4vw, 30px); }
/* 💰 Kasa Defteri (kurucu V3 Paket C/D, 11 Eyl 2026): büyük rakam, alt bilgi ızgarası, bütçe çubuğu, nakit tahmin eğrisi */
.kasa-buyuk { font-size: 2rem; font-weight: 700; line-height: 1.15; margin: 4px 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kasa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
.kasa-hucre { padding: 6px 8px; border: 1px solid var(--soluk, #e5e7eb); border-radius: 8px; }
.kasa-cubuk { height: 6px; background: var(--soluk, #e5e7eb); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.kasa-cubuk__dolu { height: 100%; background: var(--ok, #16a34a); }
.kasa-cubuk__dolu[data-asim="true"] { background: var(--danger, #dc2626); }
.kasa-egri-kutu svg { width: 100%; height: 84px; display: block; }
.kasa-egri__tahmin { stroke: var(--primary, #2563eb); stroke-width: 2; fill: none; }
.kasa-egri__ihtiyatli { stroke: var(--gold, #d97706); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.kasa-egri__sifir { stroke: var(--danger, #dc2626); stroke-width: 1; stroke-dasharray: 2 2; }
/* 🌀 Mekânsal kabuk içinde mevcut parçalar (MEKAN-03): örnek şeridi (dürüstlük) sahnenin üstünde; üst şerit düğmeleri */
.mekan > .ornek-serit { position: absolute; top: 88px; left: 50%; transform: translateX(-50%); z-index: 6; max-width: min(92%, 900px); margin: 0; font-size: 12px; padding: 6px 12px; }
.mekan:has(> .ornek-serit) .mekan-stage { top: 150px; } /* şerit pencerenin üstüne binmesin */
.mekan .mekan-header-actions .btn--icon { min-width: 44px; min-height: 44px; }
.mekan .mekan-header-actions .badge--gold { align-self: center; }
/* 🏙 Manzara (kurucu 11 Eyl 2026): gökdelenden aşağı bakış — vektör şehir + ara sıra yavaş uçan anka; pencerelerin arkasında, etkileşimsiz */
.mekan-manzara { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mekan-manzara__sehir { position: absolute; left: -6%; right: -6%; top: 20%; height: 48%; opacity: .55;
transform: perspective(900px) rotateX(24deg); transform-origin: 50% 100%;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 76%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 76%, transparent 100%); }
.mekan-manzara__sehir svg { width: 100%; height: 100%; display: block; }
/* Kurucu 11 Eyl ("bunu kullan; flu bile yapma, sadece yazıları sil"): sanal ofis salonu — sütunlar, cam paneller (yazıları
boyanarak kaldırıldı, ikonlar/çerçeveler duruyor), podyum, gece şehri. TAM EKRAN, NET, karartma/erime yok; podyum halkanın altına
gelir. Vektör şehir ve yer ızgarası yalnız görsel yüklenmezse belirgin. */
.mekan-manzara__foto { position: absolute; inset: 0; opacity: 1;
background: url(/static/assets/mekan-salon.jpg) center center / contain no-repeat; }
.mekan-manzara__sehir { opacity: 0; }
.mekan:has(.mekan-manzara__foto)::before { opacity: .18; }
/* Üst şerit parlak manzara üstünde okunur kalsın: koyu bant aşağı doğru erir (marka, arama, düğmeler) */
.mekan .mekan-header { position: relative; z-index: 2; background: linear-gradient(180deg, #050c18f0 0, #050c18b8 70%, transparent 100%); }
.mekan-manzara .isik { animation: mekan-isik 4s ease-in-out infinite; }
@keyframes mekan-isik { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* Anka: 150 saniyede bir kez geçer (~35 s süren yavaş uçuş), dönüşte öteki yöne; 'slow' — dikkat dağıtmaz */
/* 🕊 Süzülen anka: kurucunun AÇILIŞ VİDEOSUNDAN kesilen kuşun kendisi (kurucu 11 Eyl: "arkada
süzülen anka açılıştaki anka olsun"). Amblem değil, videodaki altın kuş. Oran 300×179 olduğu
için yükseklik otomatik; kare kutuya sıkıştırılırsa kuş ezilir. */
.mekan-anka { position: absolute; top: 17%; left: 0; width: 118px; height: auto; opacity: 0; will-change: transform;
filter: drop-shadow(0 0 14px #f0d88555); animation: mekan-anka-ucus 150s linear infinite alternate; }
@keyframes mekan-anka-ucus {
0% { transform: translate(-12vw, 0) scale(.9); opacity: 0; }
3% { opacity: .85; }
9% { transform: translate(22vw, -14px) scale(.95); }
16% { transform: translate(60vw, 8px) scale(1); }
21% { opacity: .85; }
24% { transform: translate(112vw, -6px) scale(.9); opacity: 0; }
100% { transform: translate(112vw, -6px) scale(.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.mekan-anka { animation: none; opacity: .55; transform: translate(82vw, 0); }
.mekan-manzara .isik { animation: none; opacity: .6; }
}
@media (max-width: 700px) {
.mekan-manzara__sehir { top: 12%; height: 42%; opacity: .45; }
.mekan > .ornek-serit { top: 90px; font-size: 11px; padding: 4px 10px; max-width: 94%; }
.mekan:has(> .ornek-serit) .mekan-stage { top: 200px; }
.mekan-manzara__foto { background-image: url(/static/assets/mekan-salon.jpg); background-position: center 60%; }
.mekan-anka { width: 78px; height: auto; top: 13%; }
}
/* 🎬 Açılış anka uçuşu (kurucu 11 Eyl 2026 videosu): oturumda bir kez, pencerelerin üstünde, modal/toast altında; 'Geç' düğmesi; bitince erir */
.mekan-acilis { position: absolute; inset: 0; z-index: 60; background: #050c18; display: flex; align-items: center; justify-content: center;
transition: opacity 650ms ease; cursor: pointer; }
.mekan-acilis--bitti { opacity: 0; pointer-events: none; }
.mekan-acilis__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mekan-acilis__gec { position: absolute; right: 24px; bottom: 24px; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .mekan-acilis { display: none; } }
/* 🪟 Cam pencere — YALNIZ öndeki (aktif) pencere (kurucu 11 Eyl akşam: "açılan pencerelerin arka planlarını flu yap, arkası
görünsün, şeffaf bir camda etrafında ışık süzmesi olan bir ekran gibi" + "biraz daha flulaştır, arkadakiler görünür görünmez
gibi olsun"). Arkaya giden pencereler kurucunun isteğiyle İLK hâlinde bırakıldı ("arkadakiler ilk hâliyle süperdi, onlara
dokunma") — onlara yalnız kenar çizgisi ve ışık eklendi. mekan.css Codex'in dosyası; burada .mekan öneki ile geçersiz kılınır. */
.mekan .mekan-window[data-layer="active"] {
background: linear-gradient(160deg, rgba(30, 50, 84, .55), rgba(8, 18, 38, .66) 70%);
-webkit-backdrop-filter: blur(40px) saturate(1.4) brightness(1.06);
backdrop-filter: blur(40px) saturate(1.4) brightness(1.06);
border: 1px solid rgba(240, 216, 133, .74);
box-shadow: 0 0 0 1px rgba(240, 216, 133, .3), 0 0 0 7px rgba(6, 14, 30, .3), 0 0 0 8px rgba(240, 216, 133, .42),
inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 36px rgba(140, 185, 255, .5), 0 0 120px rgba(212, 175, 55, .26),
0 30px 70px rgba(0, 0, 0, .6);
}
.mekan .mekan-window[data-layer="active"] .mekan-window-tools {
background: rgba(4, 10, 24, .34); border-bottom: 1px solid rgba(232, 205, 138, .28);
}
.mekan .mekan-window[data-layer="active"] .mekan-window-body { text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.mekan .mekan-window-cover { background: rgba(3, 8, 20, .12); }
@media (max-width: 700px) {
.mekan .mekan-window[data-layer="active"] {
-webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3);
}
}
/* Arkaya giden pencereler (kurucu: "yanda duran ekranlar gibi çift katmanlı bir kenar çizgisi yap ki derinlik vererek uzaysal
bir görünüm olsun") — salondaki cam panellerin çift altın çerçevesi: dış ince çizgi, karanlık boşluk, ikinci çizgi + mavi hale.
Dolgu, opaklık ve ölçek mekan.css'te olduğu gibi kalır: kurucu arka pencerelerin görünür şeklini onayladı. */
.mekan .mekan-window[data-layer="1"] {
border-color: rgba(232, 205, 138, .6);
box-shadow: 0 0 0 1px rgba(232, 205, 138, .34), 0 0 0 7px rgba(6, 14, 30, .38), 0 0 0 8px rgba(232, 205, 138, .46),
inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 30px rgba(120, 172, 255, .38), 0 18px 44px rgba(0, 0, 0, .5);
}
.mekan .mekan-window[data-layer="2"] {
border-color: rgba(232, 205, 138, .48);
box-shadow: 0 0 0 1px rgba(232, 205, 138, .26), 0 0 0 6px rgba(6, 14, 30, .34), 0 0 0 7px rgba(232, 205, 138, .34),
inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 24px rgba(120, 172, 255, .28), 0 14px 36px rgba(0, 0, 0, .45);
}
/* 📣 Kayan bantlar (kurucu 11 Eyl): salonun kırpılmamasından kalan lacivert boşluk iş görsün —
üstte sürüm yenilikleri (metin sürüm kaydından gelir), altta C@T'nin kendi tanıtımı. Her şerit yavaş ilerler; görünür düğmeyle durdurulabilir. Hareket azaltmada
kullanıcı Başlat demeden kaymaz. */
.mekan { --bant-h: 26px; }
.mekan .mekan-bant {
position: absolute; left: 0; right: 0; z-index: 6; overflow: hidden; height: var(--bant-h); display: flex; align-items: center;
background: linear-gradient(90deg, rgba(5, 12, 24, .72), rgba(5, 12, 24, .3) 50%, rgba(5, 12, 24, .72));
border-top: 1px solid rgba(232, 205, 138, .16); border-bottom: 1px solid rgba(232, 205, 138, .16);
}
.mekan .mekan-bant__ic { display: flex; align-items: center; height: 100%; gap: 34px; white-space: nowrap;
width: max-content; flex: 0 0 auto; will-change: transform; animation: mekan-bant-kay 180s linear infinite; animation-duration: var(--bant-sure, 180s); }
.mekan .mekan-bant[data-hareket="kapali"] .mekan-bant__ic,
.mekan .mekan-bant:has(.mekan-bant__oge:focus-visible) .mekan-bant__ic { animation-play-state: paused !important; }
.mekan .mekan-bant__kontrol { position: absolute; right: 0; top: 0; height: 100%; width: 32px;
border: 0; border-left: 1px solid #526078; background: #101a2b; color: #ecd08f; cursor: pointer; z-index: 1; }
.mekan .mekan-bant__kontrol:focus-visible { outline: 2px solid #ecd08f; outline-offset: -2px; }
/* ⚠ Emoji yedek yazı tipi satır kutusunu ~33 px'e çıkarıyordu ve 24 px'lik bant yazıyı kırpıyordu:
yükseklik bantla eşitlenir, içerik dikey ortalanır. */
.mekan .mekan-bant__oge { display: inline-flex; align-items: center; height: var(--bant-h); line-height: 1;
background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 12px;
letter-spacing: .01em; color: #cfe0ff; opacity: .9; }
.mekan .mekan-bant__oge > span { display: inline-flex; align-items: center; height: var(--bant-h); line-height: 1; }
.mekan .mekan-bant__oge:hover, .mekan .mekan-bant__oge:focus-visible { color: #fff; opacity: 1; text-decoration: underline; }
.mekan .mekan-bant--ust .mekan-bant__oge { color: #ecd08f; }
@keyframes mekan-bant-kay { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 17px)); } }
.mekan .mekan-bant--ust { top: 86px; }
.mekan .mekan-bant--alt { bottom: 62px; }
/* Masaüstünde halka ayak çubuğunun hemen üstünde duruyor; alt bant girince halka bant kadar yukarı
alınır, yoksa bant halkanın kartlarının üstüne biner (kurucunun onayladığı halka görüntüsü bozulmaz). */
.mekan:has(.mekan-bant--alt) .mekan-ring { bottom: calc(55px + var(--bant-h) + 6px); }
/* Bantlar yer kapladığı için örnek şeridi ve sahne aşağı kayar; nokta göstergesi alt bandın üstünde kalır. */
.mekan:has(.mekan-bant--ust) > .ornek-serit { top: calc(88px + var(--bant-h)); }
.mekan:has(.mekan-bant--ust) .mekan-stage { top: calc(110px + var(--bant-h)); }
.mekan:has(.mekan-bant--ust):has(> .ornek-serit) .mekan-stage { top: calc(150px + var(--bant-h)); }
.mekan:has(.mekan-bant--alt) .mekan-stage { bottom: calc(258px + var(--bant-h)); }
@media (max-width: 700px) {
.mekan { --bant-h: 24px; }
.mekan .mekan-bant--ust { top: 88px; }
.mekan .mekan-bant--alt { bottom: 86px; }
.mekan:has(.mekan-bant--ust) > .ornek-serit { top: calc(90px + var(--bant-h)); }
.mekan:has(.mekan-bant--ust) .mekan-stage { top: calc(126px + var(--bant-h)); }
.mekan:has(.mekan-bant--ust):has(> .ornek-serit) .mekan-stage { top: calc(200px + var(--bant-h)); }
.mekan:has(.mekan-bant--alt) .mekan-stage { bottom: calc(160px + var(--bant-h)); }
.mekan:has(.mekan-bant--alt) .mekan-dots { bottom: calc(100px + var(--bant-h)); }
}
@media (max-width: 700px) {
.mekan .mekan-bant { height: 24px; }
.mekan .mekan-bant__oge { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.mekan .mekan-bant__ic { animation: none; }
.mekan .mekan-bant { overflow-x: auto; }
}
/* Hareket azaltmada otomatik başlatılmaz; yalnız şeridin Başlat düğmesi izin verir. */
.mekan .mekan-bant[data-hareket="acik"] .mekan-bant__ic {
animation: mekan-bant-kay var(--bant-sure, 180s) linear infinite !important;
animation-duration: var(--bant-sure, 180s) !important;
animation-iteration-count: infinite !important;
}
/* ═══ 🟡 C@T RoundTable — yuvarlak masa (CRT Faz B2, şartname §6) ═══
⚠ İLK DENEMEM YANLIŞTI: düz bir daire çizmiştim ve kurucu "bu bizim şu andaki
ekranlarımızla aynı" dedi — haklıydı. Onaylı referansta (01-donen-calisma-alani)
masa YATIK durur: geniş ve BASIK bir elips, altın kenarlı, iç halkaları olan.
Bu dosyada YENİ bir dil UYDURULMAZ: ölçüler ve renkler `mekan.css`'teki
`.mekan-orbit` ve `.mekan-ring-item` kurallarıyla aynı aileden gelir (9. tuzak —
aynı tasarım iki yerde yaşarsa biri eskir). Konum JS'te hesaplanır. */
.masa {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: 62vmin;
margin-inline: auto;
perspective: 1400px;
}
/* Masa yüzeyi: ayrı bir DOM ögesi DEĞİL. Odadan ayrılınca kutucuklar
temizleniyor; masa da silinmesin diye yüzey sözde-ögeyle çizilir. */
.masa::before {
content: '';
position: absolute; top: 50%; left: 8%; right: 8%; height: 34%;
transform: translateY(-50%);
border: 2px solid #dfbd7a99;
border-radius: 50%;
box-shadow: 0 0 14px #eccb7655, inset 0 0 14px #72acff55;
pointer-events: none;
}
/* İç halkalar — referanstaki derinlik çizgileri. */
.masa::after {
content: '';
position: absolute; top: 50%; left: 22%; right: 22%; height: 19%;
transform: translateY(-50%);
border: 1px solid #7bafffc4;
border-radius: 50%;
box-shadow: 0 0 15px #6aa8fa66;
pointer-events: none;
}
.masa__kisi {
position: absolute;
width: 20%; min-width: 96px;
padding: 5px;
border: 1px solid #95b4e7aa;
border-radius: 12px;
background: linear-gradient(150deg, #2d4262fa, #09162afc 70%);
box-shadow: inset 0 1px 2px #fff4, 0 6px 16px #0007;
color: var(--ink);
text-align: center;
transition: transform 380ms ease, left 380ms ease, top 380ms ease,
box-shadow 240ms ease, border-color 240ms ease;
will-change: transform, left, top;
}
.masa__yuz {
width: 100%; aspect-ratio: 4 / 3;
border-radius: 9px;
overflow: hidden;
background: #09162ab8;
}
.masa__yuz video { width: 100%; height: 100%; object-fit: cover; display: block; }
.masa__ad {
margin-top: .3rem;
font-size: .78rem; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Konuşan kişi — referanstaki seçili kartın birebir dili. BÜYÜME ve ÖNE GELME
satır içi stille (JS) yapılır; burada yalnız "konuşmacı olduğu açıkça anlaşılsın". */
.masa__kisi--konusan {
border: 2px solid #ffe0a0;
color: #fff3da;
background: linear-gradient(135deg, #6b593c, #252b33 70%);
box-shadow: 0 0 20px #ffc55780, inset 0 0 20px #e9ca7155;
}
/* Kalabalıkta arayüz kendiliğinden sadeleşir (şartname §6 son satır). */
.masa--kalabalik .masa__kisi { width: 13%; min-width: 68px; }
.masa--kalabalik .masa__ad { font-size: .66rem; }
@media (prefers-reduced-motion: reduce) {
.masa__kisi { transition: none; }
}
/* ═══ 🏛 C@T RoundTable — salon sahnesi (CRT Faz B2, kurucu 11 Eyl 2026) ═══
"Yazıları sildiğimiz dikey duran ışıklarda insanların görüntüsü olacak, sonra
konuşmak isteyenin görüntüsü ortada var olan masaya gelecek; iki kişi
konuşuyorsa ortada iki kişi olacak."
⚠ SAHNE GÖRSELİN KUTUSUNA ASILIR, EKRANIN KUTUSUNA DEĞİL. Salon `contain` ile
yerleşiyor; pencere oranı 2000/1116'dan farklıysa görselin kenarında boşluk
kalır. Yüzdeler ekrana göre verilseydi katılımcılar camların DIŞINA düşerdi.
Aşağıdaki kutu `contain` yerleşimini birebir taklit eder (aspect-ratio +
max-width/height + margin:auto), böylece her ekran boyutunda camlara yapışır. */
.toplanti-sahnesi { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.toplanti-sahnesi__kutu {
position: absolute; inset: 0; margin: auto;
aspect-ratio: 2000 / 1116;
max-width: 100%; max-height: 100%;
}
.sahne__kisi {
position: absolute;
transform: translate(-50%, -50%);
display: flex; flex-direction: column; gap: 4px;
transition: left 420ms ease, top 420ms ease, width 420ms ease, height 420ms ease;
will-change: left, top, width, height;
}
.sahne__yuz {
flex: 1; min-height: 0;
border-radius: 14px; overflow: hidden;
background: linear-gradient(150deg, #33496e, #101a2c 70%);
border: 1px solid #95b4e7aa;
box-shadow: inset 0 1px 2px #fff3, 0 8px 22px #0008;
}
.sahne__yuz video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sahne__ad {
text-align: center; font-size: .7rem; font-weight: 600; line-height: 1.15;
color: var(--ink); text-shadow: 0 1px 4px #000a;
/* ⚠ KIRPILMAZ: sütunlar dar, tek satırda "ABC kiş..." diye kesiliyordu. */
overflow-wrap: anywhere;
}
/* ⚠ TOPLANTI KİPİNDE SAHNE ÖNE GELİR. Asıl kusur buydu: sahne z-index 0,
pencereler 1-4 — toplantı penceresi açıkken katılımcılar TAMAMEN örtülüyordu.
Manzara yerinde kalır (kurucu: "arka fon aynen kalsın"); yalnız sahne katmanı
öne alınır ve toplantı bitince geri gönderilir. */
.toplanti-sahnesi--onde { z-index: 6; }
/* Toplantı başkanı arkadaki üç sütunun ORTASINDA: en belirgin çerçeve. */
.sahne__kisi--baskan, .sahne__kisi--merkez { z-index: 5; }
:is(.sahne__kisi--baskan, .sahne__kisi--merkez) .sahne__yuz {
border: 2px solid #ffe0a0;
box-shadow: 0 0 30px #ffc55780, inset 0 0 18px #e9ca7144, 0 14px 34px #000a;
}
:is(.sahne__kisi--baskan, .sahne__kisi--merkez) .sahne__ad { color: #fff3da; }
/* Kalabalık gelince alt sıra: küçük KARELER. Yüz kare kalsın diye `flex: none`
verilir; yoksa ad satırı yüzü yiyor ve kare ince bir şeride dönüyor. */
.sahne__kisi--alt .sahne__yuz { border-radius: 10px; flex: none; aspect-ratio: 1 / 1; }
.sahne__kisi--alt .sahne__ad { font-size: .6rem; }
/* Konuşan kişi başkanın yanındaki sütunda: altın çerçeve, öne çıkar. Konum JS'te. */
.sahne__kisi--konusan { z-index: 5; }
.sahne__kisi--konusan .sahne__yuz {
border: 2px solid #ffe0a0;
background: linear-gradient(135deg, #6b593c, #252b33 70%);
box-shadow: 0 0 26px #ffc55790, inset 0 0 20px #e9ca7155, 0 14px 34px #000a;
}
.sahne__kisi--konusan .sahne__ad { color: #fff3da; }
@media (prefers-reduced-motion: reduce) {
.sahne__kisi { transition: none; }
}
/* Oda kartinda listelenen katilimcilar: salon yerlesimi (mutlak konum) KULLANILMAZ.
Kurucu "goruntu nerede olacak ki" dedi; kutucuklar bakilan kartin icinde durur. */
[data-rol="oda-kutucuklar"] { display: flex; flex-wrap: wrap; gap: 8px; }
[data-rol="oda-kutucuklar"] .sahne__kisi {
position: static; transform: none; left: auto; top: auto;
width: min(220px, 46%); height: auto;
}
[data-rol="oda-kutucuklar"] .sahne__yuz { aspect-ratio: 4 / 3; }
/* ═══ 🎬 TOPLANTI KIPI (kurucu, 12 Eyl 2026) ═══
"Toplantiya katildiktan sonra bu ana ekranda hicbirsey kalmamasi, altta sohbet
yazi penceresi olmasi, goruntulerin ortaya gelmesi."
Oteki bolumleri JS gizler; burada kalan uc parca yerlesir: cikis yolu USTTE,
goruntuler ORTADA (esneyen bant), sohbet ALTTA. Sira satir ici `order` ile
verilir (urunden okunabilsin diye); burada yalnizca OLCU vardir. */
.view--toplanti-kipi { display: flex; flex-direction: column; min-height: 0; }
.card.oda--kip {
display: flex; flex-direction: column; flex: 1 1 auto;
min-height: min(62vh, 520px); margin-top: 0;
}
.oda--kip [data-rol="oda-kutucuklar"] {
flex: 1 1 auto; min-height: 0;
align-items: center; align-content: center; justify-content: center;
overflow: auto;
}
/* Iki kisilik toplantida goruntu kucuk kalmasin: orta bant ne veriyorsa alsin. */
.oda--kip [data-rol="oda-kutucuklar"] .sahne__kisi { width: min(340px, 46%); }
.oda--kip [data-rol="oda-yazi-kutu"] {
margin-top: auto; padding-top: 8px;
border-top: 1px solid var(--cizgi, #ffffff26);
}
/* Sohbet penceresi: kendi icinde kayar, goruntulerin yerini yemez. */
.oda-sohbet {
display: flex; flex-direction: column; gap: 4px;
max-height: min(26vh, 170px); overflow-y: auto;
/* Yeni satır altta kalsın: liste dolunca son söz görünür olmalı. */
scroll-behavior: smooth;
}
/* Toplantı kipinde canlı dinleme kutusu karta taşınır; dar yerde sıkışmasın. */
.oda--kip [data-bolum="canli"] { flex: 0 0 auto; }
.oda--kip [data-bolum="canli"] h3 { margin: 0 0 4px; }
.oda-sohbet__satir { font-size: .85rem; overflow-wrap: anywhere; }
/* ═══ 🎬 TOPLANTI KİPİNDE KABUK (kurucu canlı deneme, 12 Eyl 2026 14:41) ═══
v346 yalnız pencerenin İÇİNİ kipe soktu: pencere ortada dar kaldı, görüntü
pencerenin üstüne bindi, sohbet altta değildi. Kip artık BODY sınıfıyla kabuğa
da geçer: halka menü, alt bilgi, kayan bantlar ve arka pencereler gizlenir;
etkin pencere TÜM GENİŞLİKTE ALTA yaslanır (sohbet penceresi); salonun üst
kısmı ve arka üç sütun görüntülere kalır. Salon görseli hiç değişmez.
⚠ `!important`: mekan.css/app.css'teki `:has()` zincirleri (bant yüksekliği,
tam pencere) daha yüksek özgüllüktedir; kip onların hepsinin ÖNÜNDEDİR. */
body.toplanti-kipi .mekan-ring,
body.toplanti-kipi .mekan-ring-arrow,
body.toplanti-kipi .mekan-footer,
body.toplanti-kipi .mekan-demo,
body.toplanti-kipi .mekan-bant,
body.toplanti-kipi .mekan > .ornek-serit,
body.toplanti-kipi .mekan-window:not([data-layer="active"]) { display: none !important; }
body.toplanti-kipi .mekan-stage { top: 96px !important; bottom: 0 !important; }
body.toplanti-kipi .mekan-window[data-layer="active"] {
top: auto !important; bottom: 10px !important;
height: min(30%, 320px) !important; width: calc(100% - 48px) !important;
transform: translateX(-50%) !important;
}
body.toplanti-kipi .mekan-window-body { padding: 6px 16px 10px; }
body.toplanti-kipi .card.oda--kip { min-height: 0; height: 100%; gap: 4px; }
body.toplanti-kipi .oda-sohbet { max-height: none; flex: 1 1 auto; min-height: 48px; }
/* Canlı dinleme satırı dar pencerede tek sıra: başlık, düğme, kısa açıklama.
Açıklama gizlenmez — gizlilik uyarısı mikrofon açılmadan ÖNCE görünmeli (karar 25.37). */
body.toplanti-kipi .oda--kip [data-bolum="canli"] {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
}
body.toplanti-kipi .oda--kip [data-bolum="canli"] p { margin: 0; font-size: .72rem; flex: 1 1 100%; }
body.toplanti-kipi .oda--kip [data-rol="oda-yazi-kutu"] { padding-top: 4px; }
/* 🧭 Canlı bağlam paneli (CRT md. 25): kartın içinde katlanır, görüntüleri itmez,
kendi içinde kayar. Kapalıyken hiç yer kaplamaz. */
.oda-baglam {
border: 1px solid var(--cizgi, #ffffff26); border-radius: 12px;
padding: 8px 10px; max-height: 34vh; overflow-y: auto;
background: #0a1424b8;
}
/* 🧩 HİZMET ALANI KARTLARI (başvuru formu · kurucu kararı 16 Eyl 2026)
⚠ ÖNCE TELEFON: kartlar iki sütuna oturur (auto-fit + minmax(min(140px,100%),1fr)); `100%`
alt sınırı, 431px gibi dar ekranlarda satırın TAŞMASINI engeller — taşma canlıda bir kez
yaşandı ve düzeltmesi ayrı bir iş oldu.
⚠ SEÇİLİ DURUM YALNIZ RENKLE ANLATILMAZ: ✓ işareti ve `aria-pressed` ekranda birlikte durur
(renk körü kullanıcı ve ekran okuyucu için). Renk yalnız DESTEKLEYİCİDİR. */
.hizmet-grid {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}
.hizmet-kart {
display: flex; align-items: center; gap: 8px;
min-height: 56px; padding: 10px 12px; width: 100%;
border: 1px solid var(--cizgi, #ffffff26); border-radius: 12px;
background: #0a142480; color: var(--ink, #e8eefc);
font: inherit; text-align: left; cursor: pointer;
touch-action: manipulation;
}
.hizmet-kart:hover { border-color: var(--gold-line, #d4af3766); }
.hizmet-kart:focus-visible { outline: 2px solid var(--gold, #d4af37); outline-offset: 2px; }
.hizmet-kart.is-on { border-color: var(--gold, #d4af37); background: #d4af371f; }
.hizmet-kart__ikon { font-size: 1.35rem; line-height: 1; flex: 0 0 auto; }
/* ⚠ `min-width:0` + kelime kırma: uzun alan adı ("Hasta ve engelli bakımı") dar ekranda
kartı taşırmaz, satır içinde kırılır. */
.hizmet-kart__ad { flex: 1 1 auto; min-width: 0; font-size: .86rem; overflow-wrap: anywhere; }
.hizmet-kart__tik { flex: 0 0 auto; width: 1em; color: var(--gold, #d4af37); font-weight: 700; }