/* ===========================================================================
   ESTACELL PANELİ — "RENKLİ HÜCRE" KABUĞU (2026-11-06)
   Hakan tasarım örneklerinden B'yi seçti ("Renkli Hücre olacak o da"):
   anasayfanın dört ayağı panelin kabuğuna taşındı.
     · Sosyal medya pembe · YZ temsilci mor · Santral kehribar · Ekip mavi
     · Gri zemin + gölgeli beyaz kart · ana düğme mürekkep (siyah)
     · Köşe: düğme 8, kart 12, pencere 14; hap yok
   app.css'teki eski kurallar yerinde duruyor; bu dosya üstüne biner.
   Menü kuralları `.rail.hucre` altında: master kabuğu (aynı .rail sınıfı)
   etkilenmesin. Koyu tema app.css'in html[data-theme=dark] jetonlarıyla
   çalışmaya devam eder (seçicisi :root'tan güçlü).
   =========================================================================== */
@font-face { font-family: 'P Lira'; src: url('/assets/fonts/lira.woff2') format('woff2'); font-weight: 100 900; unicode-range: U+20BA; }
:root {
  --bg: #EDF0F6; --surface-2: #F6F8FB; --surface-3: #EEF1F6;
  --border: #E3E7EF; --border-2: #CED5E1;
  --text: #0D1220; --muted: #5E6779; --ink: #0D1220;
  /* Eski lacivert yalnız "seçili / vurgulu" anlamında kullanılıyordu (sekmeler,
     kapsam düğmeleri, avatar): B'de seçili sekme mürekkep. */
  --navy: #262C3B; --navy-2: #0D1220;
  --shadow-sm: 0 1px 2px rgba(13,18,32,.05), 0 8px 24px -12px rgba(13,18,32,.16);
  --shadow-md: 0 2px 6px rgba(13,18,32,.06), 0 24px 56px -20px rgba(13,18,32,.3);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius: var(--radius-md);
  --font-display: 'P Lira', 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'P Lira', 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Dört ayak: dolgu / koyu (yazı) / açık (zemin) */
  --h-pembe: #FF4D6D; --h-pembe-k: #C81B42; --h-pembe-a: #FFEEF2;
  --h-mor: #7A5CFF;   --h-mor-k: #5032E0;   --h-mor-a: #F1EDFF;
  --h-amber: #FF9F1C; --h-amber-k: #9F5300; --h-amber-a: #FFF3E2;
  --h-mavi: #12A4F0;  --h-mavi-k: #0B6FA8;  --h-mavi-a: #E6F5FE;
  --h-marka: #0B78B8; --h-marka-k: #085F93; --h-marka-a: #E4F2FB;
  --e-out: cubic-bezier(.23, 1, .32, 1);
  /* Etkin sayfanın ayağı (body[data-ayak]) */
  --p: var(--h-marka); --pk: var(--h-marka-k); --pa: var(--h-marka-a);
}
html[data-theme="dark"] {
  --h-pembe-a: rgba(255,77,109,.14); --h-mor-a: rgba(122,92,255,.18); --h-amber-a: rgba(255,159,28,.14);
  --h-mavi-a: rgba(18,164,240,.15); --h-marka-a: rgba(11,120,184,.2);
  --h-pembe-k: #FF8CA2; --h-mor-k: #B3A2FF; --h-amber-k: #FFC069; --h-mavi-k: #6CCBFF; --h-marka-k: #6CC0F0;
}
body[data-ayak="pembe"] { --p: var(--h-pembe); --pk: var(--h-pembe-k); --pa: var(--h-pembe-a); }
body[data-ayak="mor"]   { --p: var(--h-mor);   --pk: var(--h-mor-k);   --pa: var(--h-mor-a); }
body[data-ayak="amber"] { --p: var(--h-amber); --pk: var(--h-amber-k); --pa: var(--h-amber-a); }
body[data-ayak="mavi"]  { --p: var(--h-mavi);  --pk: var(--h-mavi-k);  --pa: var(--h-mavi-a); }
body { -webkit-font-smoothing: antialiased; }
h1 { font-weight: 800; letter-spacing: -.03em; }
h2 { font-weight: 700; letter-spacing: -.015em; }

/* ======================================================================= DÜĞMELER
   Üç kademe: dolu ana (mürekkep) · renkli zeminli ikincil · beyaz belge. */
.btn { border-radius: 8px; font-weight: 600; transition: background-color .15s, border-color .15s, color .15s, transform .14s var(--e-out), box-shadow .15s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 14px -8px rgba(13,18,32,.6); }
.btn-primary:hover { background: #262C3B; transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -8px rgba(13,18,32,.6); }
html[data-theme="dark"] .btn-primary { background: var(--sky); }
.btn-ghost { background: var(--card); border-color: var(--border-2); box-shadow: 0 1px 2px rgba(13,18,32,.06); }
.btn-ghost:hover { border-color: var(--muted); background: var(--card); }
.btn-ghost .icon { color: var(--pk); }
.card, .stat-card { border-color: rgba(13,18,32,.05); }
html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card { border-color: var(--border); }

/* ======================================================================= SAYFA İÇLERİ
   Bütün sayfalarda ortak parçalar; sayfa şablonlarına dokunmadan. */
/* Rozet: şeritsiz düz zemin. Eski "sol şeritli çip" 8px köşeyle "(" gibi görünüyordu. */
.badge { border-left: 0; border-radius: 6px; padding: 3px 8px; }
/* Sayfa başlığı: önünde sayfanın ayağı renginde logo hücresi */
.page-head h1, .inbox-baslik h1, .rc-menu-ust h1 { display: flex; align-items: center; gap: 10px; }
.page-head h1::before, .inbox-baslik h1::before, .rc-menu-ust h1::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 40% 15% 15% 15%; background: var(--p);
}
/* Eski başlık altı mavi çizgi: yerini öndeki hücre aldı */
.page-head h1::after { display: none; }
/* Paket dönemi seçici (pk-anahtar için hiç kural yoktu, çıplak tarayıcı düğmesiydi) */
.pk-anahtar { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(13,18,32,.05); }
.pk-anahtar button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); font: 600 13.5px/1 var(--font-body); cursor: pointer; transition: background-color .15s, color .15s; }
.pk-anahtar button:hover { color: var(--text); }
.pk-anahtar button[aria-pressed="true"] { background: var(--ink); color: #fff; }
html[data-theme="dark"] .pk-anahtar button[aria-pressed="true"] { background: var(--sky); }
.pk-indirim { font-size: 11px; font-weight: 700; padding: 3px 6px; border-radius: 6px; background: var(--mint-tint); color: var(--mint); }
.pk-anahtar button[aria-pressed="true"] .pk-indirim { background: rgba(255,255,255,.18); color: #fff; }
/* İstatistik simgesi logo hücresi biçiminde */
.stat-icon { width: 34px; height: 34px; border-radius: 34% 12% 12% 12%; }
.stat-card { border-radius: 12px; }
.stat-value { font-weight: 800; letter-spacing: -.03em; }
.card-head h2, .card-head h3 { font-family: var(--font-display); letter-spacing: -.015em; }
/* Seçili = mürekkep (sekme, kapsam, yaşam döngüsü, danışman seçimi) */
.kisi-yonga.active { background: var(--ink); border-color: var(--ink); }
html[data-theme="dark"] .kisi-yonga.active { background: var(--sky); border-color: var(--sky); }
/* İkincil süzgeç ve seçili liste satırı: sayfanın ayağı renginde */
.inbox-hal a.active { background: var(--pa); color: var(--pk); border-color: transparent; }
.inbox-satir.secili { background: var(--pa); border-left-color: var(--p); }
.table tbody tr:hover { box-shadow: inset 3px 0 0 var(--p); }
/* Ayrıntı sayfasının baş kartı ayağın renginde (çağrı kehribar, kişi mavi) */
.cd-page .card.cd-hero { --kat: var(--p); }
.cd-hero { border-left-color: var(--p); }
/* Biçim girdileri: marka odağı */
input:focus, select:focus, textarea:focus { border-color: var(--h-marka); box-shadow: 0 0 0 3px var(--h-marka-a); outline: none; }
.flash { border-radius: 10px; }
/* Tüm Konuşmalar (konusmalar-rc.css jetonları): seçili satır pembe ayakta, gönder mürekkep */
/* konusmalar-rc.css sayfada SONRA yüklenir: seçiciler bir kademe güçlü */
body .rc, body .rc-modal { --rc-secili: var(--h-pembe-a); }
body .rc .rc-sekme.aktif { color: var(--text); }
body .rc .rc-sekme.aktif::after { background: var(--h-pembe); }
body .rc .rc-gonder, body .rc-modal .rc-gonder { background: var(--ink); }
body .rc .rc-not-yaz .rc-gonder { background: #b7791f; }
/* Pasif "Gönder / Cevapla" (yazı alanı boş): saydamlıkla soluklaşınca gri üstüne
   gri yazı okunmuyordu (madde 23). Düz zemin + okunur yazı, saydamlık yok. */
body .rc .rc-gonder:disabled, body .rc-modal .rc-gonder:disabled, body .rc .rc-not-yaz .rc-gonder:disabled {
  opacity: 1; background: var(--surface-3); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border);
}
html[data-theme="dark"] body .rc .rc-gonder:disabled, html[data-theme="dark"] body .rc-modal .rc-gonder:disabled {
  background: rgba(255,255,255,.07); color: #9aa4b2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
html[data-theme="dark"] body .rc .rc-gonder, html[data-theme="dark"] body .rc-modal .rc-gonder { background: var(--sky); }

/* ======================================================================= MENÜ (geniş, dört renkli grup) */
.rail.hucre {
  width: 264px; flex: 0 0 264px; background: var(--card); border-right: 1px solid var(--border);
  padding: 14px 12px 10px; gap: 10px;
}
.rail.hucre .rail-firma {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; text-align: left;
  flex-direction: row; font-size: inherit; line-height: 1.25; transition: border-color .15s;
}
.rail.hucre .rail-firma:hover { border-color: var(--border-2); background: var(--surface-2); }
.rail.hucre .rail-firma img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }
.rail-firma-harf { width: 34px; height: 34px; border-radius: 34% 12% 12% 12%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--ink); color: #fff; font: 700 12.5px/1 var(--font-body); }
html[data-theme="dark"] .rail-firma-harf { background: var(--sky); }
.rail.hucre .rail-firma > span:last-child { min-width: 0; display: block; max-width: none; }
.rail.hucre .rail-firma b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail.hucre .rail-firma small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }

.rail.hucre .rail-nav { padding: 0; gap: 6px; }
.rail.hucre .rail-grup {
  --gk: var(--h-marka-k); --ga: transparent; --gr: var(--h-marka);
  gap: 1px; padding: 4px; border-radius: 14px; background: var(--ga); flex: 0 0 auto;
}
.rail.hucre .rail-grup[data-ayak="pembe"] { --gk: var(--h-pembe-k); --ga: var(--h-pembe-a); --gr: var(--h-pembe); }
.rail.hucre .rail-grup[data-ayak="mor"]   { --gk: var(--h-mor-k);   --ga: var(--h-mor-a);   --gr: var(--h-mor); }
.rail.hucre .rail-grup[data-ayak="amber"] { --gk: var(--h-amber-k); --ga: var(--h-amber-a); --gr: var(--h-amber); }
.rail.hucre .rail-grup[data-ayak="mavi"]  { --gk: var(--h-mavi-k);  --ga: var(--h-mavi-a);  --gr: var(--h-mavi); }
.rail.hucre .rail-grup[data-ayak="marka"] { padding: 0 4px; }
.rail.hucre .rail-grup + .rail-grup::before, .rail.hucre .rail-fazla::before { display: none; }
.rail-grup-ad { display: flex; align-items: center; gap: 7px; padding: 7px 8px 5px; font: 700 10.5px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--gk); }
/* grup adının önünde logo hücresi biçimi */
.rail-grup-ad::before { content: ""; width: 10px; height: 10px; border-radius: 40% 15% 15% 15%; background: var(--gr); flex: 0 0 auto; }
.rail.hucre .rail-grup[data-ayak="marka"] .rail-grup-ad { color: var(--muted); }
.rail.hucre .rail-grup[data-ayak="marka"] .rail-grup-ad::before { background: var(--border-2); }

.rail.hucre a, .rail.hucre .rail-dugme {
  flex-direction: row; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 10px;
  color: var(--text); font: 500 14px/1.2 var(--font-body); letter-spacing: 0; text-align: left; position: relative;
  transition: background-color .15s, box-shadow .15s;
}
.rail.hucre a > span, .rail.hucre .rail-dugme > span { max-width: none; flex: 1; min-width: 0; }
/* avatar ve firma harfi esnemez (yukarıdaki kural span'leri esnetiyor) */
.rail.hucre .rail-firma > .rail-firma-harf { display: grid; flex: 0 0 34px; max-width: 34px; }
.rail.hucre .rail-dugme > .avt, .rail.hucre a > .avt { display: inline-flex; flex: 0 0 auto; max-width: none; white-space: normal; }
.rail.hucre a .icon, .rail.hucre .rail-dugme .icon { width: 18px; height: 18px; opacity: 1; color: var(--gk, var(--muted)); }
.rail.hucre a:hover, .rail.hucre .rail-dugme:hover { background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--text); }
.rail.hucre .rail-grup[data-ayak="marka"] a:hover, .rail.hucre .rail-foot .rail-dugme:hover, .rail.hucre .rail-foot a:hover { background: var(--surface-3); }
.rail.hucre a.active {
  background: var(--card); color: var(--text); font-weight: 700; border-left: 0;
  box-shadow: 0 1px 2px rgba(13,18,32,.08), 0 4px 12px -6px rgba(13,18,32,.22);
}
.rail.hucre a.active::before { content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gr); }
.rail.hucre .rail-grup[data-ayak="marka"] a.active { background: var(--ink); color: #fff; box-shadow: none; }
.rail.hucre .rail-grup[data-ayak="marka"] a.active .icon { color: #fff; }
.rail.hucre .rail-grup[data-ayak="marka"] a.active::before { display: none; }
html[data-theme="dark"] .rail.hucre .rail-grup[data-ayak="marka"] a.active { background: var(--sky); }
/* Rozet: satırın sağında, ayağın renginde */
.rail.hucre .rail-badge {
  position: static; margin-left: auto; min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px; border-radius: 6px;
  background: var(--gr, var(--coral)); color: #fff; font: 700 11px/20px var(--font-body); box-shadow: none; flex: 0 0 auto;
}
.rail.hucre .rail-nokta { position: static; margin-left: auto; box-shadow: none; }
.rail.hucre .rail-fazla { padding: 0 4px; }
.rail.hucre .rail-dugme[aria-expanded="true"] { background: var(--surface-3); color: var(--text); }

/* Alt: araç satırı (Ara · Bildirimler · Kullanıcılar · Ayarlar) + kişi kartı */
.rail.hucre .rail-foot { border-top: 1px solid var(--border); padding: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.rail-arac { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
/* Yalnız simge (ad title'da ve ekran okuyucuda); dört etiket 240px'e sığmıyordu */
.rail.hucre .rail-arac a, .rail.hucre .rail-arac .rail-dugme { justify-content: center; min-height: 40px; padding: 0; }
.rail.hucre .rail-arac a > span, .rail.hucre .rail-arac .rail-dugme > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; flex: none;
}
.rail.hucre .rail-arac .icon { color: var(--text); }
.rail.hucre .rail-arac a.active { background: var(--ink); color: #fff; box-shadow: none; }
.rail.hucre .rail-arac a.active .icon { color: #fff; }
.rail.hucre .rail-arac a.active::before { display: none; }
.rail.hucre .rail-arac .rail-badge { position: absolute; top: 3px; left: calc(50% + 4px); margin: 0; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; font-size: 10px; background: var(--coral); box-shadow: 0 0 0 2px var(--card); }
.rail.hucre .rail-profil { min-height: 50px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--border); }
.rail.hucre .rail-profil .avt { border: 0; }
.rail.hucre .rail-profil > span { display: block; line-height: 1.25; }
.rail.hucre .rail-profil b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail.hucre .rail-profil small { display: block; font-size: 11.5px; color: var(--muted); }
.rail.hucre .rail-profil > .icon { width: 16px; height: 16px; color: var(--muted); }

/* Açılır pencereler menünün sağında */
.rail-acilir { left: 272px; max-width: calc(100vw - 284px); border-radius: 12px; box-shadow: var(--shadow-md); }
.rail-acilir a, .rail-acilir button { border-radius: 8px; }
.rail-acilir a.active { background: var(--pa); color: var(--pk); }

/* Sabit alt çubuklar menünün genişliğine göre (app.css 76px varsayıyordu) */
.cd-alt { left: 264px; }

/* Kısa ekran (768 px dizüstü, tarayıcıda ~650 px): menü sıkılaşır ki Ekip
   grubu "Daha fazla"ya düşmesin. Önce satırlar incelir, sonra grup adları
   gizlenir (renkli bloklar kalır). */
@media (min-width: 901px) and (max-height: 860px) {
  .rail.hucre { padding-top: 10px; gap: 8px; }
  .rail.hucre .rail-nav { gap: 4px; }
  .rail.hucre a, .rail.hucre .rail-dugme { min-height: 34px; }
  .rail-grup-ad { padding: 6px 8px 3px; }
  .rail.hucre .rail-firma { padding: 6px 8px 6px 6px; }
  .rail.hucre .rail-foot { gap: 6px; padding-top: 8px; }
  .rail.hucre .rail-arac a, .rail.hucre .rail-arac .rail-dugme { min-height: 36px; }
  .rail.hucre .rail-profil { min-height: 44px; padding: 4px 8px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .rail.hucre a, .rail.hucre .rail-dugme { min-height: 31px; font-size: 13.5px; }
  .rail.hucre .rail-grup { padding: 3px 4px; }
  .rail-grup-ad { display: none; }
  .rail.hucre .rail-firma small, .rail.hucre .rail-profil small { display: none; }
  .rail.hucre .rail-profil { min-height: 38px; }
}

/* ======================================================================= TELEFON */
@media (max-width: 900px) {
  .rail.hucre { position: fixed; left: -290px; width: min(288px, 86vw); flex-basis: auto; transition: left .22s var(--e-out); padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .rail.hucre.open { left: 0; box-shadow: 0 0 40px rgba(13,18,32,.35); }
  .rail-acilir { left: 12px; right: 12px; max-width: none; }
  .cd-alt { left: 0; }
  .mobilebar { background: linear-gradient(90deg, var(--pa) 0%, var(--card) 70%); border-bottom: 1px solid var(--border); }
  .mobilebar-title { font-weight: 800; letter-spacing: -.02em; }
  /* Sayfa başlığı düğmeleri: tek kalan tam genişlik (form içindeki düğme dahil) */
  /* form display:contents → ızgaraya düğme girer: yayılma düğmeye */
  .page-head .row-actions > form:last-child:nth-child(odd) > .btn { grid-column: 1 / -1; width: 100%; }
  .mobilebar .hamburger { width: 40px; height: 40px; margin: -6px 0; border-radius: 10px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--border); }
}
/* Telefonda tablo kartı: işlem hücresi tam genişlik, düğmeler YAN YANA
   (önce etiket sütununun yanında dar kalıp alt alta diziliyordu: Leads, Bildirim hattı). */
@media (max-width: 720px) {
  .table td:has(> .row-actions) { flex-direction: column; gap: 6px; }
  .table td:has(> .row-actions)::before { max-width: none; flex: none; }
  .table td > .row-actions { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; width: 100%; }
  .table td > .row-actions > form { display: contents; }
  .table td > .row-actions .btn { width: 100%; justify-content: center; }
  .table td > .row-actions > .btn:last-child:nth-child(odd),
  .table td > .row-actions > form:last-child:nth-child(odd) > .btn { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .rail.hucre, .btn { transition: none; } }