/* ========================================================================== deskos — tasarım sistemi Sektör standartlarına göre yeniden yazıldı: IBM Carbon (tablo spesifikasyonu), Refactoring UI (hiyerarşi/ölçek), Tailwind + Ahlin/Comeau (katmanlı gölge). İlkeler: 4px ızgara · 14px temel · hiyerarşi ÖNCE ağırlık+renk sonra boyut · dar radius (4–10px) · katmanlı düşük-alfa gölge · saf siyah/beyaz YOK · VERSAL (UPPERCASE) yok · süs amaçlı monospace yok. ========================================================================== */ :root{ /* --- tipografi ------------------------------------------------------ */ --f:"Inter var","Inter","Segoe UI Variable Text","Segoe UI Variable", ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* Başlıklar DISPLAY kesimini kullanır: büyük boyda daha sıkı ve daha az kontrastlı çizilir. Aynı ailenin doğru kesimi. */ --f-baslik:"Inter var","Inter","Segoe UI Variable Display",var(--f); --fm:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace; --fs-xs:12px; --fs-sm:13px; --fs:14px; --fs-md:15px; --fs-lg:17px; --fs-xl:19px; --fs-2xl:22px; --fs-3xl:28px; /* Rakamlar ekranın ASIL içeriği — kendi basamakları olsun. */ --fs-num:25px; --lh-tight:1.25; --lh-snug:1.4; --lh:1.5; /* --- boşluk (4px ızgara) -------------------------------------------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; /* --- radius: dar = profesyonel (16px+ amatör okunur) ---------------- */ --r-xs:4px; /* rozet · çip */ --r-sm:6px; /* buton · input */ --r-md:8px; /* kart */ --r-lg:10px; /* geniş konteyner */ --r-full:9999px; /* --- nötrler: hafif SOĞUK tonlu (<%5 doygunluk), saf siyah/beyaz yok - */ --bg:#F6F7F9; /* sayfa (çukur) */ --surface:#FFFFFF; /* kart */ --surface-2:#F1F3F5; /* dolgu · hover */ --surface-3:#E8ECEF; --border:#E3E7EB; --border-2:#D2D8DE; --text:#15181C; /* near-black */ --text-2:#5A6472; --text-3:#8993A1; /* --- vurgu + semantik ----------------------------------------------- */ --accent:#0F766E; --accent-2:#0B5F58; --accent-soft:#0f766e12; --accent-line:#0f766e33; --accent-ink:#FFFFFF; --green:#15803D; --green-soft:#15803d14; --red:#B42318; --red-soft:#b4231814; --amber:#B54708; --amber-soft:#b5470814; --blue:#1D4ED8; --blue-soft:#1d4ed814; /* rozet dolguları — Radix 3/11 ikilisi: pastel zemin + KOYU aynı-ton metin (8% alfa dolgu soluk okunur; profesyonel sistemler doygun pastel kullanır) */ --fill-green:#E6F6EB; --ink-green:#218358; --fill-red:#FEEBEC; --ink-red:#CE2C31; --fill-amber:#FFF3D6; --ink-amber:#AB6400; --fill-blue:#E6F4FE; --ink-blue:#0D74CE; --fill-teal:#E0F8F3; --ink-teal:#008573; --fill-mut:#EDEFF2; --ink-mut:#5A6472; /* AI = menekşe/iris (Chatwoot bot deseni) — "web" mavisiyle çakışmasın diye */ --fill-iris:#E6E7FF; --ink-iris:#5B5BD6; /* iç not = dolu kehribar (Chatwoot #FFE4B5 / Help Scout #FFF7DD) — %8 alfa soluk kalıyordu */ --note-bg:#FFF6E5; --note-line:#F0C880; --note-ink:#8A5A16; --note-bg-strong:#FBEEB6; /* besteci not modu — Intercom'un ölçülen tonu */ /* --- gölge: katmanlı, düşük alfa, blur ≈ 2× offset, negatif spread --- */ --sh-xs:0 1px 2px 0 rgb(16 24 40 / .04); --sh-sm:0 1px 3px 0 rgb(16 24 40 / .07), 0 1px 2px -1px rgb(16 24 40 / .05); --sh-md:0 4px 8px -2px rgb(16 24 40 / .08), 0 2px 4px -2px rgb(16 24 40 / .05); --sh-lg:0 12px 20px -6px rgb(16 24 40 / .10), 0 4px 8px -4px rgb(16 24 40 / .06); /* --- eski değişken adları (şablonlardaki satır-içi stiller için) ----- */ --ink:var(--text); --mut:var(--text-2); --faint:var(--text-3); --line:var(--border); --line2:var(--border-2); --card:var(--surface); --card2:var(--surface-2); } /* --- KOYU TEMA ----------------------------------------------------------- Artık yalnızca işletim sistemi ayarına bağlı DEĞİL: üst çubuktaki ay/güneş düğmesi yazar ve tercih tarayıcıda saklanır. İlk girişte sistem ayarı kullanılır (base.html başlangıç betiği). */ :root[data-theme="dark"]{ /* Zemin DERİNLEŞTİ, kart YÜKSELDİ. Eskiden ikisi arasında çok az fark vardı ve panel düz bir sayfa gibi okunuyordu; kenarlık tek başına katman taşımak zorunda kalıyordu. */ --bg:#0A0C10; --surface:#151A21; --surface-2:#1E242D; --surface-3:#28313B; --border:#232B35; --border-2:#3A4450; --text:#E9ECEF; --text-2:#9AA4B0; --text-3:#6B7683; --accent:#2DD4BF; --accent-2:#5EEAD4; --accent-soft:#2dd4bf14; --accent-line:#2dd4bf3d; --accent-ink:#04211F; --green:#4ADE80; --green-soft:#4ade8014; --red:#F87171; --red-soft:#f8717114; --amber:#FBBF24; --amber-soft:#fbbf2414; --blue:#60A5FA; --blue-soft:#60a5fa14; /* karanlıkta gölge yerine hairline halka (araştırma kuralı) */ --sh-xs:0 0 0 1px rgb(255 255 255 / .05); --sh-sm:0 0 0 1px rgb(255 255 255 / .06); --sh-md:0 0 0 1px rgb(255 255 255 / .08), 0 8px 16px -8px rgb(0 0 0 / .5); --sh-lg:0 0 0 1px rgb(255 255 255 / .09), 0 16px 32px -12px rgb(0 0 0 / .6); /* karanlıkta rozet: koyu ton zemin + açık metin */ --fill-green:#0F2E1C; --ink-green:#4ADE80; --fill-red:#331715; --ink-red:#F87171; --fill-amber:#332612; --ink-amber:#FBBF24; --fill-blue:#12233D; --ink-blue:#60A5FA; --fill-teal:#0D2D2A; --ink-teal:#2DD4BF; --fill-mut:#242930; --ink-mut:#9AA4B0; --fill-iris:#1E1F3D; --ink-iris:#A5A6F6; --note-bg:#2A2113; --note-line:#6B5220; --note-ink:#FBBF24; --note-bg-strong:#3A2E17; } /* --- taban --------------------------------------------------------------- */ *{box-sizing:border-box} html{text-size-adjust:100%} /* yumuşatma AYARLANMIYOR: `antialiased` alt piksel render'ını kapatıp yazıyı inceltiyor ve bulanıklaştırıyordu */ html,body{height:100%;overflow:hidden} /* sayfa düzeyinde kaydırma YOK — uygulama kabuğu */ body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f);font-size:var(--fs);line-height:var(--lh)} /* ---- KAYDIRMA ÇUBUĞU: KAYAN HER YERDE GÖRÜNÜR ---- Panel "hiçbir yerde kaydırma yok" kuralıyla kuruldu ve o dönemde çubuk TÜM PANELDE gizlenmişti (`*{scrollbar-width:none}`), yalnız İşler muaftı. Kural bugün doğru değil: İşler kayıyor, ölçülemeyen sayfalar kayıyor (bkz. `.pad.kayar`), emniyet kilidi kutuları kaydırılabilir bırakıyor (`.kaydir`) ve brifing kayıyor. Gizli çubuk bunların hiçbirinde "buradan aşağı devam var" demiyordu. GÖREMEDİĞİN ÇUBUK, KAYDIRILABİLDİĞİNİ SÖYLEMEZ. Artık kural ters: kayan her yerde çubuk var; gizleme YALNIZ bilerek kaydırılan yatay çip şeritlerinde (`.subbar .seg`, `.kfiltre`, `.bigtabs`) ve orada kendi kurallarıyla yapılıyor. ÇUBUK GERÇEKTEN YER KAPLAR. İki kez ıskalandı: önce "üstüne gelince belirsin" yapıldı — kaydırılabildiğini ancak deneyince öğreniyordunuz; sonra `scrollbar-color` ile hep görünür sanıldı, ölçünce çubuğun 0px yer kapladığı çıktı (ÖRTÜ çubuğu: yalnız kaydırırken beliriyor). Chrome'da kalıcı, yer kaplayan çubuk YALNIZ `::-webkit-scrollbar` ile olur — VE `scrollbar-width` VERİLMEMELİDİR: verilince Chrome standart (örtü) yolu seçip webkit kurallarını yok sayar. Bu yüzden aşağıda `scrollbar-width` yok; Firefox için ayrı bir @supports bloğu var. */ ::-webkit-scrollbar{width:11px;height:11px;background:transparent} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--text-3);border-radius:var(--r-full); border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--text-2);background-clip:content-box} ::-webkit-scrollbar-corner{background:transparent} /* Firefox'ta `::-webkit-scrollbar` yok; oradaki tek yol bu iki özellik. `selector()` sınaması ikisini ayırıyor: Chrome webkit'i destekler ve bu blok ONDA ÇALIŞMAZ — çalışsaydı yukarıdaki kuralları iptal ederdi. */ @supports (scrollbar-width: thin) and (not selector(::-webkit-scrollbar)) { *{scrollbar-width:thin;scrollbar-color:var(--text-3) transparent} } /* kaydırma zincirlemesini durdur: bir bölme bittiğinde arkadaki kaymasın */ .conv-list,.thread,.rail,.pad{overscroll-behavior:none} /* `.conv-list` ve `.thread` bu kuraldan ÇIKTI — ikisi de yalnız İşler ekranında var ve orası artık kayıyor. `:not(.inbox) > .conv-list` diye kurnazlık denedim; işe yaramadı çünkü listenin ebeveyni `.col`, `.inbox` değil — kural yine eşleşiyordu. Sınıf zaten başka yerde geçmiyorsa kuraldan çıkarmak, seçiciyle uğraşmaktan doğru. */ .rail,.pad{overflow:hidden!important} a{text-decoration:none;color:inherit} h1,h2,h3,h4{margin:0;font-weight:600;line-height:var(--lh-tight)} p{margin:0} .num,.money,td.n,th.n,.kv b{font-variant-numeric:tabular-nums} .hidden{display:none} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)} :focus:not(:focus-visible){outline:none} .nav-item:focus-visible{outline-offset:-2px} @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}} /* ========================================================================== İSKELET — açık nötr kenar çubuğu (Stripe · Attio · Shopify deseni) ========================================================================== */ /* KRİTİK: satır AÇIKÇA 1fr olmalı. Örtük satır 'auto'dur → içerikle birlikte büyür, height:100vh onu SINIRLAMAZ; sonuç: içerik taşar, sayfa boyu kaydırma çubuğu çıkar ya da (overflow:hidden ile) alt kısım hiç ulaşılamaz. minmax(0,1fr) doğru biçim. */ .app{display:grid;grid-template-columns:236px 1fr;grid-template-rows:minmax(0,1fr); height:100vh;height:100dvh;overflow:hidden} .side{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:var(--s3);min-height:0;overflow:hidden} /* MARKA KİLİDİ — işaret + yazı. Eskisi 9 piksellik bir NOKTAYDI: bir işaret değil, hiçbir yerde hatırlanmayan ve favicon olamayan bir leke. */ .brand{display:flex;align-items:center;gap:9px; padding:var(--s3) var(--s2) var(--s5);color:inherit;text-decoration:none} /* 32 ve 48: viewBox 32 olduğu için ölçek tam 1 ve 1,5 — çizgi tam sayı aygıt pikseline oturur. Ara boy (26, 34) çizgiyi 2,03/2,66 yapıp bulandırıyordu. */ .ds-logo{width:32px;height:32px;flex:none;display:block; border-radius:8.5px;box-shadow:0 1px 2px rgb(16 24 40/.20)} .ds-logo.lg{width:48px;height:48px;border-radius:12.75px} /* Yazı: SIKI aralık. Varsayılan aralıkla logotype değil, cümle gibi okunuyordu. "os" vurgu renginde — ad bir bileşik (desk + OS). */ .ds-ad{font-weight:640;font-size:var(--fs-lg);letter-spacing:-.035em; line-height:1} .ds-ad em{font-style:normal;color:var(--brand-2,var(--accent))} .brand.lg .ds-ad,.giris-marka .ds-ad{font-size:23px} .giris-marka{justify-content:center;padding:0 0 var(--s4);gap:11px} .brand:hover .ds-logo{box-shadow:0 2px 6px rgb(14 165 164/.45)} .nav{display:flex;flex-direction:column;gap:1px} .nav-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);color:var(--text-2);font-size:var(--fs);font-weight:500;line-height:1.2;min-height:34px;transition:background .1s,color .1s} .nav-item svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.7} .nav-item:hover{background:var(--surface-2);color:var(--text)} .nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600} .nav-item.active svg{opacity:1} .nav-item .badge{margin-left:auto;font-size:var(--fs-xs);font-weight:600;font-variant-numeric:tabular-nums;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-full);min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px} .side-foot{margin-top:auto;padding:var(--s3) 10px 2px;border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-3);line-height:1.5} .main{display:grid;grid-template-rows:52px minmax(0,1fr);min-width:0;min-height:0} .topbar{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s5);border-bottom:1px solid var(--border);background:var(--surface)} .shop{font-weight:600;font-size:var(--fs)} .shop small{display:block;color:var(--text-3);font-weight:400;font-size:var(--fs-xs)} .aistat{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-2);border:1px solid var(--border);border-radius:var(--r-full);padding:4px 10px} .aistat i{width:6px;height:6px;border-radius:var(--r-full);background:var(--green);display:inline-block} .topbtn{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:500;color:var(--text-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 10px;min-height:30px} .topbtn:hover{color:var(--text);background:var(--surface-2)} .topbtn.on{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)} .avatar{width:28px;height:28px;border-radius:var(--r-full);background:var(--surface-2);color:var(--text-2);display:grid;place-items:center;font-weight:600;font-size:var(--fs-xs);border:1px solid var(--border)} .cikis{font-size:var(--fs-sm);color:var(--text-3);padding:5px 9px;border-radius:var(--r-sm)} .cikis:hover{color:var(--text);background:var(--surface-2)} .content{overflow:hidden;min-height:0} /* ========================================================================== SAYFA BAŞLIĞI + SEKMELER ========================================================================== */ /* içerik genişliği sınırlı: geniş ekranda tablolar/kartlar uçtan uca gerilmesin (Linear 1024 · Shopify ~1200 · Notion 708 — hepsi sınırlar) */ /* 1240px VARSAYILAN, sabit değil: yönetici sağ kenardan çekerek genişletir (bkz. bolme.js). Tek çerçeveli ekranlarda ayarlanabilecek tek ölçü budur. */ .pad{padding-block:var(--s5); padding-inline:max(var(--s6),(100% - var(--icerik-en,1240px))/2); height:100%;overflow:hidden;position:relative; display:flex;flex-direction:column;min-height:0} .h{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.015em;margin:0 0 3px} .sub{color:var(--text-2);font-size:var(--fs-sm);margin:0 0 var(--s4);max-width:74ch;line-height:var(--lh-snug)} .sec-h{font-size:var(--fs-md);font-weight:600;letter-spacing:-.008em;margin:var(--s5) 0 var(--s2)} .hint{font-weight:400;font-size:var(--fs-sm);color:var(--text-3);letter-spacing:0} .subtabs{display:flex;gap:var(--s1);margin:0 0 var(--s4);border-bottom:1px solid var(--border)} .subtabs a{font-size:var(--fs);font-weight:500;color:var(--text-2);padding:8px 12px;border-bottom:2px solid transparent;margin-bottom:-1px} .subtabs a:hover{color:var(--text)} .subtabs a.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600} /* ========================================================================== KONTROLLER — yatay padding ≈ 2× dikey · 32px yükseklik ========================================================================== */ .btn{font:inherit;font-size:var(--fs-sm);font-weight:550;line-height:1; border-radius:var(--r-sm);padding:0 13px;height:33px;display:inline-flex; align-items:center;justify-content:center;gap:6px;cursor:pointer; border:1px solid var(--border-2);background:var(--surface);color:var(--text); white-space:nowrap; transition:background .12s ease,border-color .12s ease,transform .06s ease} .btn:active{transform:translateY(.5px)} .btn:hover{background:var(--surface-2)} .btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink); font-weight:650;box-shadow:0 1px 2px rgb(0 0 0 / .25)} .btn.pri:hover{background:var(--accent-2);border-color:var(--accent-2)} .btn.ghost{background:transparent;border-color:transparent;color:var(--accent)} .btn.ghost:hover{background:var(--accent-soft)} .btn.warn{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 32%,transparent);background:var(--amber-soft)} .btn.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent);background:transparent} .btn.danger:hover{background:var(--red-soft)} .btn.xs{height:26px;font-size:var(--fs-xs);padding:0 9px} input,select,textarea{font:inherit;font-size:var(--fs-sm);color:var(--text);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-sm)} input,select{height:32px;padding:0 10px} textarea{padding:8px 10px;line-height:var(--lh-snug);resize:vertical} input::placeholder,textarea::placeholder{color:var(--text-3)} input:hover,select:hover,textarea:hover{border-color:var(--text-3)} .crow{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap;align-items:center} .fakeinput{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-sm);height:32px;padding:0 10px;color:var(--text);font-size:var(--fs-sm)} /* ========================================================================== ROZET / PİLL — 12px, sentence-case, yumuşak zemin ========================================================================== */ .pill,.chan,.flag,.tag,.wchip,.cbadge,.rcode,.ornek{ display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:500; line-height:1;padding:3px 7px;border-radius:var(--r-xs);white-space:nowrap;min-height:20px} .chan svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.9} .p-whatsapp{color:var(--ink-green);background:var(--fill-green)} .p-telefon{color:var(--ink-teal);background:var(--fill-teal)} .p-web{color:var(--ink-blue);background:var(--fill-blue)} .p-sms{color:var(--ink-amber);background:var(--fill-amber)} .p-red{background:var(--fill-red);color:var(--ink-red)} .p-amber{background:var(--fill-amber);color:var(--ink-amber)} .p-green{background:var(--fill-green);color:var(--ink-green)} .p-blue{background:var(--fill-blue);color:var(--ink-blue)} .p-accent{background:var(--fill-teal);color:var(--ink-teal)} .p-mut{background:var(--fill-mut);color:var(--ink-mut)} /* Kanal = SESSİZ ikon+metin (dolgu değil) — dolgulu rozet yalnız DURUM içindir */ .chan{background:transparent;padding:2px 0;color:var(--text-3);font-weight:500} /* ÜÇ kanal var, üçünün de rengi olmalı. E-posta'nınki eksikti: satırda Telefon teal, WhatsApp yeşil, E-posta ise renksiz duruyordu — sanki eksik ya da ikinci sınıf bir kanalmış gibi. Renk zaten `KANAL_RENK`te tanımlıydı (mavi), yalnız buraya yazılmamıştı. `web` ve `sms` kuralları da silindi: o kanallar kaldırıldı. */ .chan-eposta{color:var(--ink-blue)} .chan-telefon{color:var(--ink-teal)} .chan-whatsapp{color:var(--ink-green)} .flag.you{background:var(--fill-red);color:var(--ink-red);font-weight:600} .flag.ai{background:transparent;color:var(--text-3);padding-left:0} .flag.esc{background:var(--fill-amber);color:var(--ink-amber);font-weight:600} .flag.snooze{background:var(--fill-mut);color:var(--ink-mut)} .flag.kapali{background:transparent;color:var(--text-3);padding-left:0} .tag{background:var(--fill-blue);color:var(--ink-blue)} .tag.rm{border:0;cursor:pointer;font-family:inherit} .rcode{background:var(--amber);color:#fff;font-weight:600;padding:2px 6px} .ornek{background:var(--surface-2);color:var(--text-3)} .wchip.open{background:var(--green-soft);color:var(--green)} .wchip.closed{background:var(--amber-soft);color:var(--amber)} .cbadge{cursor:pointer;border:1px solid transparent;font-family:inherit} .cbadge.ok{background:var(--green-soft);color:var(--green)} .cbadge.no{background:var(--surface-2);color:var(--text-3);border-color:var(--border)} /* ========================================================================== TABLO — Carbon: 13–14px yarı-kalın başlık (VERSAL DEĞİL), 16px padding, yalnız yatay hairline (zebra YOK), yapışkan başlık, tabular rakam ========================================================================== */ /* Tablo kutusu EKRANI DOLDURUR ve gerekirse KENDİ İÇİNDE kaydırır. Kutu ekranı DOLDURUR ama KAYMAZ. İkisi birden nasıl oluyor: kaç satır sığdığını tarayıcı ölçüp sunucuya söylüyor (base.html'deki ölçüm), sunucu da tam o kadar satır gönderiyor. Bu yüzden `overflow:hidden` — kesecek bir şey kalmıyor, kesilirse de bu bir HATADIR ve görünür olmalıdır. */ .wrapb{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-xs); flex:1 1 auto;min-height:0;overflow:auto} /* separate + inset gölge: collapse ile yapışkan th kenarlığı BOYANMAZ (bilinen CSS hatası) */ table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs)} th,td{text-align:left;padding:9px var(--s3);vertical-align:middle} td{box-shadow:inset 0 -1px 0 var(--border)} th:first-child,td:first-child{padding-left:var(--s5)} th:last-child,td:last-child{padding-right:var(--s5)} /* başlık gövdeden DAHA KOYU/AĞIR (Carbon·Tremor·Chatwoot deseni) */ thead th{position:sticky;top:0;z-index:1;background:var(--surface);color:var(--text);font-size:var(--fs-sm);font-weight:600;height:38px;padding-top:0;padding-bottom:0;box-shadow:inset 0 -1px 0 var(--border)} tbody td{color:var(--text-2)} tbody td b,tbody td strong{color:var(--text);font-weight:600} tbody tr:last-child td{box-shadow:none} tbody tr{transition:background-color .12s ease} tbody tr:hover{background:var(--surface-2)} tbody tr:hover td{color:var(--text)} td.n,th.n,td.r,th.r{text-align:right} /* boş durum: 80px/40px iç boşluk, başlık + açıklama (Primer Blankslate ölçüsü) */ .empty,td.empty{color:var(--text-3);text-align:center;padding:48px 32px;font-size:var(--fs-sm);line-height:var(--lh-snug)} .empty b{display:block;color:var(--text);font-size:var(--fs-md);font-weight:600;margin-bottom:4px} .toolbar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap} /* ========================================================================== KPI KUTULARI ========================================================================== */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:var(--s3);margin-bottom:var(--s4)} .tile{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:var(--s4);box-shadow:var(--sh-xs)} .tile .lb{font-size:var(--fs-sm);color:var(--text-2);margin-bottom:6px;font-weight:500} .tile .v{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15} .tile .dl{font-size:var(--fs-xs);margin-top:5px;color:var(--text-3)} .up{color:var(--green)} .dn{color:var(--red)} /* ========================================================================== GELEN KUTUSU — 3 bölme ========================================================================== */ /* Liste panosu genişledi: beş süzgeç (Sizi bekleyenler · AI halletti · Tümü · Telefon notları · Çağrı kaydı) 340px'e sığmıyor, kenarda kesiliyordu. Sağ ray daraldı; oradaki içerik zaten kısa. */ .inbox{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr) 300px; height:100%;min-height:0} @media (max-width:1500px){.inbox{grid-template-columns:340px minmax(0,1fr) 280px}} .col{min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--surface)} .chanbar{display:flex;gap:var(--s1);padding:var(--s2) var(--s3);border-bottom:1px solid var(--border);flex-wrap:wrap} .cf{font-size:var(--fs-sm);font-weight:500;padding:4px 9px;border-radius:var(--r-sm);color:var(--text-2);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;min-height:26px} .cf:hover{background:var(--surface-2);color:var(--text)} .cf.on{background:var(--accent-soft);color:var(--accent);font-weight:600} .cf svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8} .subbar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3); border-bottom:1px solid var(--border);flex-wrap:wrap} /* Süzgeçler dar panoda KESİLMEZ, yatay kayar — ulaşılamayan sekme, olmayan sekmeden kötüdür. */ .subbar .seg{max-width:100%;overflow-x:auto;scrollbar-width:none} .subbar .seg::-webkit-scrollbar{display:none} .subbar .seg a{padding:5px 10px;color:var(--text-2);border-right:1px solid var(--border-2);font-weight:500} .subbar .seg a:last-child{border-right:0} .subbar .seg a:hover{background:var(--surface-2);color:var(--text)} .subbar .seg a.on{background:var(--accent);color:var(--accent-ink)} .search{margin-left:auto} .search input{height:28px;font-size:var(--fs-sm);min-width:132px} /* Kanal süzgeci — hepsi tek listede; bu satır yalnızca daraltır. Yatay kaydırma bilinçli: kanal sayısı arttıkça satır BÜYÜMEZ, kayar. */ /* Kanal çipleri SARAR, kaymaz: yatay kayan bir şeritte "WhatsA…" diye kesilen çip, olmayan çipten kötü — kullanıcı orada bir şey olduğunu bilmiyor. */ .kfiltre{display:flex;align-items:center;gap:6px;flex:0 0 auto;flex-wrap:wrap; padding:7px var(--s3);border-bottom:1px solid var(--border)} .kfiltre{scrollbar-width:none} .kfiltre::-webkit-scrollbar{display:none} .kfiltre a{display:inline-flex;align-items:center;gap:5px;white-space:nowrap; padding:4px 9px;border-radius:999px;border:1px solid var(--border-2); font-size:var(--fs-xs);color:var(--text-2);font-weight:500} .kfiltre a:hover{background:var(--surface-2);color:var(--text)} .kfiltre a.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .kfiltre a.on .chan,.kfiltre a.on b{color:inherit} .kfiltre b{font-variant-numeric:tabular-nums;color:var(--text-3);font-weight:600} .kfiltre .chan{padding:0} /* konuşma satırı — seçili: sol vurgu çubuğu */ /* Sunucu tam sığacak kadar konuşma gönderir; geri kalanı sayfa 2'dedir. Ne kaydırma, ne de "+2 konu daha" diye gizlenmiş ulaşılmaz iş. */ /* `scrollbar-width` YOK — verilince Chrome örtü (overlay) çubuğuna geçer ve aşağıdaki `::-webkit-scrollbar` kurallarını yok sayar. */ .conv-list{overflow:auto;flex:1 1 auto;min-height:0} .conv{display:grid;grid-template-columns:24px 1fr auto;gap:10px;padding:11px var(--s3) 11px 13px;border-bottom:1px solid var(--border);align-items:start;position:relative;transition:background-color .12s ease} .conv:hover{background:var(--surface-2)} /* seçim = NÖTR (marka tonu değil) + sol vurgu şeridi — Chatwoot/Polaris deseni */ .conv.sel{background:var(--surface-2)} .conv.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)} .conv .pic{width:24px} /* görünüş .pic'in kendisinde */ /* okunmamış = AĞIRLIK + BİRİNCİL RENK (arka plan dolgusu değil) */ .conv .nm{font-weight:500;font-size:var(--fs);color:var(--text-2)} .conv.unread .nm{font-weight:600;color:var(--text)} .conv .pv{color:var(--text-3);font-size:var(--fs-sm);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:196px;line-height:20px;height:20px} .conv.unread .pv{color:var(--text-2)} .conv .rt{text-align:right;font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums} .conv .chan,.conv .flag,.conv .tag{margin-top:5px;margin-right:6px} /* iş parçacığı */ .thread-col{min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--surface)} .col-h{padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);font-weight:600;font-size:var(--fs);display:flex;align-items:center;gap:var(--s2);min-height:48px;flex-wrap:wrap} .hactions{margin-left:auto;display:flex;align-items:center;gap:6px} .hactions form{margin:0} /* İş parçacığı: DÜZ SATIRLAR (baloncuk değil) — kurumsal gelen kutusu deseni (Help Scout/FreeScout · Chatwoot e-posta varyantı). Tür, 3px sol şeritle belirtilir. */ /* mesaj alanı ASLA sıfıra inmemeli: kısa ekranda besteci tüm yeri yiyordu */ /* Mesajlar da sayfalanır (en yeni sayfa 1'dedir), bu yüzden kaymaz. */ .thread{flex:1 1 0;min-height:0;overflow:auto;padding:0;display:flex;flex-direction:column; background-color:var(--surface)} .msg{max-width:100%;align-self:stretch;padding:12px var(--s5) 12px calc(var(--s5) - 3px); border-left:3px solid transparent;border-bottom:1px solid var(--border); font-size:var(--fs);line-height:var(--lh);white-space:pre-line;background:transparent;box-shadow:none;border-radius:0} .msg:last-child{border-bottom:0} .msg .who{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text);margin-bottom:2px} .msg.in{border-left-color:var(--border-2)} .msg.in .who{color:var(--text)} .msg.out{border-left-color:var(--accent)} .msg.out .who{color:var(--accent)} .msg.out.ai{border-left-color:var(--ink-iris)} .msg.out.ai .who{color:var(--ink-iris)} .msg.note-msg{background:var(--note-bg);border-left-color:var(--note-line)} .msg.note-msg .who{color:var(--note-ink)} /* --- Yanlış yanıtı düzeltme ------------------------------------------------ Özerk yanıtın onay adımı yoktur; düzeltme hem müşteriye doğrusunu iletir hem de sistemin öğrendiği tek andır. Düğme SESSİZ durur (her yanıtın altında kırmızı bir uyarı, iyi çalışan bir sistemi bozukmuş gibi gösterir), üzerine gelince belirir. */ .msg-duzelt{display:inline-block;margin-top:6px;padding:2px 8px;font:inherit; font-size:var(--fs-xs);font-weight:500;color:var(--text-3);cursor:pointer; background:transparent;border:1px solid var(--border);border-radius:var(--r-full); opacity:.55;transition:opacity .12s,color .12s,border-color .12s} .msg:hover .msg-duzelt,.msg-duzelt:focus-visible{opacity:1} .msg-duzelt:hover{color:var(--ink-amber);border-color:var(--ink-amber)} .duzeltme{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap} .duzeltme input{flex:1 1 220px;min-width:0;height:30px;font-size:var(--fs-sm)} /* Düzeltilen yanıt silinmez — ne dendiği kayıtta kalır, ama solar. */ .msg.out.yanlis{opacity:.6;border-left-color:var(--ink-amber)} .msg.out.yanlis .who i{font-style:normal;font-weight:500;color:var(--ink-amber)} .note{font-size:var(--fs-sm);color:var(--text-3);align-self:center;text-align:center;padding:var(--s8) var(--s4)} .disclose{font-size:var(--fs-xs);color:var(--text-3);background:var(--surface-2);border-bottom:1px solid var(--border);padding:7px var(--s5);text-align:center} /* besteci */ /* besteci = thread içinde YÜZEN kenarlıklı kart (tam-genişlik çubuk değil) */ .composer{flex:0 0 auto;min-height:0;overflow:hidden; margin:var(--s2) var(--s3) var(--s3);padding:var(--s3);background:var(--surface); border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--sh-xs); transition:background-color .15s ease,border-color .15s ease} .simbar{flex:0 0 auto} /* not modunda TÜM besteci kehribara döner — mod kaçırılamaz (5 üründe ortak desen) */ .composer.note-mode{background:var(--note-bg-strong);border-color:var(--note-line)} .composer.note-mode textarea{background:var(--surface);border-color:var(--note-line)} .composer.note-mode .ctab.on{background:var(--note-line);color:var(--note-ink)} .escnote{font-size:var(--fs-sm);color:var(--amber);background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 26%,transparent);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:var(--s3);line-height:var(--lh-snug)} .suggest{background:var(--surface);border:1px solid var(--accent-line);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:10px 12px} .suggest .lb{font-size:var(--fs-xs);font-weight:600;color:var(--accent);margin-bottom:4px} .suggest .tx{font-size:var(--fs);line-height:var(--lh-snug);white-space:pre-line} .why{margin-top:8px;font-size:var(--fs-xs);color:var(--text-2);background:var(--surface-2);border-radius:var(--r-xs);padding:4px 8px;display:inline-block;font-variant-numeric:tabular-nums} .odeme{font-size:var(--fs-xs);color:var(--text-2);display:inline-flex;align-items:center;gap:6px} .odeme select,.odeme input{height:30px;font-size:var(--fs-xs)} .ctabs{display:flex;gap:var(--s1);margin-bottom:var(--s2)} .ctab{font:inherit;font-size:var(--fs-sm);font-weight:500;padding:5px 11px;border:1px solid transparent;background:transparent;color:var(--text-2);border-radius:var(--r-sm);cursor:pointer;min-height:28px} .ctab:hover{background:var(--surface-2);color:var(--text)} .ctab.on{background:var(--surface-2);color:var(--text);font-weight:600} .macros{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s2)} .chipbtn{font:inherit;font-size:var(--fs-xs);font-weight:500;padding:4px 10px;border:1px solid var(--border-2);background:var(--surface);color:var(--text-2);border-radius:var(--r-full);cursor:pointer;min-height:24px} .chipbtn:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)} .cpane{display:block} .cpane.hidden,.macros.hidden,.setgrid textarea.hidden{display:none} .composer textarea{width:100%;font-size:var(--fs)} .composer select{height:32px;font-size:var(--fs-sm)} .winclosed{font-size:var(--fs-sm);color:var(--text-2);background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 24%,transparent);border-radius:var(--r-sm);padding:9px 11px;margin-bottom:var(--s3);line-height:var(--lh-snug)} .winclosed b{color:var(--amber)} .winclosed a{color:var(--accent);font-weight:500} .ok{color:var(--text-2);font-size:var(--fs-sm);display:flex;align-items:center;gap:6px} .simbar{border-top:1px solid var(--border);padding:var(--s2) var(--s4) var(--s3);background:var(--bg)} .simlb{font-size:var(--fs-xs);color:var(--text-3);font-weight:500} .simbar .crow{margin-top:6px} /* sağ ray */ /* Sağ ray: DÜZ, hairline ile bölünmüş bölümler — kenarlıklı panel içinde kenarlıklı kart "çifte çerçeve"dir (Intercom/Chatwoot deseni: kart yok, ince çizgi var). */ .rail{padding:0;overflow:hidden;height:100%;min-height:0;display:flex;flex-direction:column;background-color:var(--surface)} .rcard{border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;padding:var(--s4);box-shadow:none} /* bölüm başlığı: cümle düzeni — VERSAL/harf aralığı YOK (7 sistemin hiçbiri yapmıyor) */ .rcard h4{margin:0 0 var(--s2);font-size:var(--fs);letter-spacing:0;text-transform:none;color:var(--text);font-weight:600} /* Ad uzun olduğunda numara üstüne biniyordu: ad sarsın, değer sabit dursun. */ .kv{display:flex;justify-content:space-between;align-items:baseline; font-size:var(--fs-sm);padding:4px 0;gap:12px} .kv>span:first-child{min-width:0;overflow-wrap:anywhere} .kv b{font-weight:600;text-align:right;white-space:nowrap;flex:0 0 auto} .kv b{font-weight:600;text-align:right} .money{font-weight:600}.money.owe{color:var(--red)} .rail>.action{margin:var(--s4);border-radius:var(--r-sm)} .action{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r-sm);padding:var(--s3)} .action .t{font-size:var(--fs-xs);font-weight:600;color:var(--accent);margin-bottom:5px} .action .d{font-size:var(--fs-sm);line-height:var(--lh-snug)} .esc-card{border-color:color-mix(in srgb,var(--amber) 32%,transparent);background:var(--amber-soft)} .esc-card h4{color:var(--amber)} .esc-card p{font-size:var(--fs-sm);line-height:var(--lh-snug);color:var(--text)} .ohist{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:6px 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)} .ohist:last-child{border-bottom:0} .consent{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border)} .clabel{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:6px} .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:var(--s2);align-items:center} .taginline{margin:0;display:inline-flex} .tagin{font-size:var(--fs-xs);padding:0 8px;height:24px;border:1px dashed var(--border-2);border-radius:var(--r-xs);background:transparent;width:88px} .teach{display:flex;flex-direction:column;gap:6px;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid color-mix(in srgb,var(--amber) 24%,transparent)} .teach-l{font-size:var(--fs-xs);color:var(--amber);font-weight:600} .teach button{align-self:flex-start} /* ========================================================================== AYARLAR · KANALLAR · RAPOR · FORMLAR ========================================================================== */ .chgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:var(--s3);margin-bottom:var(--s4)} .chcard{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s3);box-shadow:var(--sh-xs)} .chcard .ic{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none} .chcard .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7} .chcard .nm{font-weight:600;font-size:var(--fs)} .chcard .st{font-size:var(--fs-xs);color:var(--text-3);margin-top:1px} .dotok{width:7px;height:7px;border-radius:var(--r-full);background:var(--green);margin-left:auto;flex:none} .ladder{display:flex;flex-direction:column;gap:6px} .lrow{display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:center;border:1px solid var(--border);border-radius:var(--r-md);padding:10px var(--s4);background:var(--surface)} .lrow-d{font-size:var(--fs-sm);color:var(--text-2);margin:2px 0 0;line-height:var(--lh-snug)} .modform{margin:0} .segbtns{display:inline-flex;border:1px solid var(--border-2);border-radius:var(--r-sm);overflow:hidden} .segbtns button{font:inherit;font-size:var(--fs-xs);font-weight:500;padding:0 11px;height:28px;border:0;border-right:1px solid var(--border-2);background:var(--surface);color:var(--text-2);cursor:pointer} .segbtns button:last-child{border-right:0} .segbtns button.on{background:var(--accent);color:var(--accent-ink);font-weight:600} .segbtns button:hover:not(.on){background:var(--surface-2);color:var(--text)} .seg{display:inline-flex;border:1px solid var(--border-2);border-radius:var(--r-sm);overflow:hidden;font-size:var(--fs-xs)} .seg span{padding:6px 10px;color:var(--text-2)} .seg span.on{background:var(--accent);color:var(--accent-ink)} .seg.locked span.on{background:var(--amber-soft);color:var(--amber)} /* Karo sayısı arttıkça satır BÜYÜMEZ, yan yana dizilir: 620px'lik bir dizüstünde ayar ekranı tek bakışta bitmeli. */ .setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s3);margin-top:var(--s2)} .setgrid textarea{width:100%;font-size:var(--fs-sm)} .sabform{display:flex;flex-direction:column;gap:var(--s2);max-width:560px} .sabform button{align-self:flex-start} .escrow{display:flex;justify-content:space-between;font-size:var(--fs-sm);padding:7px 0;border-bottom:1px solid var(--border)} .escrow:last-child{border-bottom:0} .kanrow{display:grid;grid-template-columns:104px 1fr 44px;gap:var(--s3);align-items:center;font-size:var(--fs-sm);margin-bottom:10px} .kanbar{height:6px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden} .kanbar>div{height:100%;border-radius:var(--r-full)} /* ========================================================================== GİRİŞ ========================================================================== */ /* İKİ SÜTUN: solda ne yaptığı, sağda giriş. Eskiden boş bir zeminin ortasında tek kart vardı; panel yoğun ve ölçülü bir arayüzken giriş ekranı hiçbir şey söylemiyordu — ilk izlenim ürünün geri kalanına benzemiyordu. Ölçüler panelin kendi belirteçlerinden geliyor, giriş için ayrı bir dil uydurulmadı. */ .giris-sayfa{min-height:100vh;background:var(--bg); display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} /* SOL: tanıtım. Zemin, vurgu renginin çok düşük alfalı hâli — panelde `--accent-soft` zaten bu iş için var; giriş ekranına özel bir renk katmak, iki ayrı marka gibi görünmesine yol açardı. */ .giris-tanit{display:flex;align-items:center;justify-content:flex-end; padding:var(--s8) var(--s6);border-right:1px solid var(--border); background: radial-gradient(1100px 520px at 8% 12%, var(--accent-soft), transparent 62%), var(--surface)} .giris-tanit-ic{max-width:460px} .giris-baslik{font-size:clamp(26px,2.6vw,36px);line-height:1.18;font-weight:600; letter-spacing:-.02em;color:var(--text);margin:var(--s6) 0 var(--s4)} .giris-aciklama{font-size:var(--fs-md);line-height:1.6;color:var(--text-2); margin:0 0 var(--s8);max-width:42ch} .giris-madde{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s5)} .giris-madde li{display:flex;gap:var(--s3);align-items:flex-start} .giris-madde b{display:block;font-size:var(--fs);font-weight:600;color:var(--text)} .giris-madde span:not(.gm-ic){display:block;font-size:var(--fs-sm);color:var(--text-3); margin-top:2px;line-height:1.5} .gm-ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center; background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent)} .gm-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* SAĞ: giriş alanı */ .giris-alan{display:grid;place-items:center;padding:var(--s8) var(--s6)} .giris-card{width:100%;max-width:352px;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg);padding:var(--s8) var(--s6);box-shadow:var(--sh-md)} .giris-bas{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.015em;color:var(--text)} .giris-alt{font-size:var(--fs-sm);color:var(--text-3);margin:3px 0 var(--s5)} .giris-l{display:block;font-size:var(--fs-sm);color:var(--text-2);font-weight:500;margin-bottom:var(--s4)} .giris-l input{display:block;width:100%;height:38px;margin-top:6px;font-size:var(--fs)} .giris-hata{font-size:var(--fs-sm);color:var(--red);background:var(--red-soft);border-radius:var(--r-sm);padding:8px 11px;margin-bottom:var(--s3)} /* Demo kimliği bir NOT, çağrı değil: kutuya alınıp sessiz tutuluyor. */ .giris-demo{font-size:var(--fs-xs);color:var(--text-3);margin:var(--s5) 0 0;text-align:center; line-height:1.7;padding-top:var(--s4);border-top:1px solid var(--border)} .giris-demo b{color:var(--text-2);font-weight:600} /* Düğme tam genişlikte (girişte alışılmış olan bu) ama SLAB değil: giriş alanlarıyla aynı yükseklik ailesinde kalıyor. SEÇİCİ İKİ SINIFLI OLMAK ZORUNDA: dosyanın çok altında (yoğunluk turu) genel bir `.btn{height:28px}` duruyor. Tek sınıflı bir kural onunla aynı ağırlıkta olduğu için SIRAYLA kaybediyor ve düğme 40 değil 28 çıkıyordu. */ .giris-card .giris-dugme{width:100%;height:40px;justify-content:center; margin-top:var(--s2);font-size:var(--fs);font-weight:600} .giris-marka-dar{display:none} /* TEK SÜTUN: tanıtım düşer. Telefonda giriş yapan kişi tanıtım değil klavye ister; markayı da kartın içinde görür. */ @media (max-width:900px){ .giris-sayfa{grid-template-columns:1fr} .giris-tanit{display:none} .giris-alan{padding:var(--s6) var(--s5)} /* İKİ SINIF ŞART: aşağıda, kenar çubuğu için yazılmış iki mobil kural `.brand{display:none}` diyor (satır ~649 ve ~1109). Onlar panelin markasını kastediyor ama seçici HER `.brand`i tutuyor — giriş kartının içindeki markayı da. Tek sınıflı bir kural aynı ağırlıkta olduğu için sırayla kaybediyor ve telefonda marka hiç görünmüyordu. */ .giris-card .giris-marka-dar{display:flex;justify-content:center;margin-bottom:var(--s5)} } /* İlk kurulum kartı: giriş kartından biraz geniş, alanlar sıkı — tek ekranda bitmeli, sahip daha ilk dakikada kaydırmakla uğraşmasın. */ .kurulum{max-width:420px} .kurulum .giris-l{margin-bottom:var(--s2)} .kurulum .giris-l small{font-weight:400;color:var(--text-3);margin-left:5px} .kur-not{font-size:var(--fs-xs);color:var(--text-3);margin:0 0 var(--s4);line-height:1.55} .kur-ayir{font-size:var(--fs-xs);font-weight:600;color:var(--text-3); margin:var(--s4) 0 var(--s3);padding-top:var(--s3);border-top:1px solid var(--border)} /* ========================================================================== DUYARLI ========================================================================== */ @media (max-width:1180px){.inbox{grid-template-columns:288px 1fr}.rail{display:none}} @media (max-width:900px){ .app{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)} .side{flex-direction:row;align-items:center;gap:var(--s2);padding:var(--s2);overflow-x:auto;border-right:0;border-bottom:1px solid var(--border)} .nav{flex-direction:row;gap:var(--s1)} .side-foot,.brand{display:none} /* minmax(0,1fr) ŞART. Yalın `1fr` aslında minmax(auto,1fr)'dir: sütun içeriğin min-content genişliğinin altına İNMEZ. Ölçtüm — 375px'lik telefonda gelen kutusu 489px kalıyor, taşan kısım da (overflow:hidden yüzünden) kaydırılamıyordu; yani ekranda duran ama ULAŞILAMAYAN iş. Aynı tuzağın satır hâli dosyanın başında zaten yazılı. */ .inbox{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)} .col{border-right:0;border-bottom:1px solid var(--border);max-height:38vh} .setgrid{grid-template-columns:1fr} .pad{padding:var(--s4)} } /* NOT: telefon düzeninin tamamı aşağıdaki `max-width:820px` bloğunda — liste→ayrıntı geçişi, geri düğmesi, alt menü hepsi orada zaten vardı. Buraya ikinci bir blok yazmak aynı kuralları iki yerden yönetmek olurdu; ölçünce görülen tek gerçek kusur `1fr` tuzağıydı ve orada düzeltildi. */ /* ---- SAYFALAMA (kaydırma yerine) ---------------------------------------- `min-height` şart: düğmeler yalnız 2. sayfa varken çıkıyor. Yüksekliği sabit olmasaydı çubuk büyür → liste kısalır → bir satır eksilir → 2. sayfa doğar → düğmeler gelir → ... ölçüm sonsuza kadar salınırdı. */ .pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s3); padding:10px 2px 0;flex:0 0 auto;flex-wrap:wrap;min-height:38px} .pager-info{font-size:var(--fs-sm);color:var(--text-3);font-variant-numeric:tabular-nums} .pager-btns{display:flex;align-items:center;gap:6px} .pager-num{font-size:var(--fs-sm);color:var(--text-2);font-variant-numeric:tabular-nums;min-width:44px;text-align:center} .btn.off{opacity:.4;pointer-events:none} .pager.compact{padding:8px var(--s3);border-top:1px solid var(--border);justify-content:space-between} .pager.thread-pager{justify-content:center;gap:var(--s2);padding:8px var(--s5); border-bottom:1px solid var(--border);background:var(--surface-2)} /* ---- sayfa başlığı · sekme sayacı · satır-içi form · zengin boş durum ---- */ .phead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);flex:0 0 auto} .phead .sub{margin-bottom:var(--s3)} .subtabs .cnt{display:inline-block;margin-left:6px;font-size:11px;font-weight:600; background:var(--surface-2);color:var(--text-3);border-radius:var(--r-full);padding:1px 6px; font-variant-numeric:tabular-nums} .subtabs a.on .cnt{background:var(--accent-soft);color:var(--accent)} .inline-form{display:flex;gap:var(--s2);margin-bottom:var(--s3);flex-wrap:wrap;flex:0 0 auto} .inline-form input{flex:1 1 200px;min-width:0} .inline-form button{flex:0 0 auto} .tile-h{font-size:var(--fs-md);font-weight:600;letter-spacing:-.008em;margin-bottom:6px} /* Yapay zekânın sınırı: iki sütun, "yapar" ve "yapmaz". Ayar değil SÖZLEŞME — o yüzden form gibi değil, okunacak bir metin gibi duruyor. */ .sinir{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:8px} .sinir-g{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-xs);color:var(--text-2)} .sinir-g span{padding-left:14px;position:relative} .sinir-g span::before{content:"·";position:absolute;left:4px;color:var(--text-3)} .sinir-b,.sinir-k{padding-left:0!important;font-weight:600;font-size:var(--fs-xs); letter-spacing:.02em;margin-bottom:2px} .sinir-b{color:var(--ink-green)} .sinir-k{color:var(--ink-red)} .sinir-b::before,.sinir-k::before{content:none!important} @media (max-width:820px){.sinir{grid-template-columns:1fr}} .empty b{display:block;color:var(--text);font-size:var(--fs-md);font-weight:600;margin-bottom:4px} .sabform.inline{flex-direction:row;flex-wrap:wrap;align-items:center;max-width:none} .sabform.inline input,.sabform.inline select{flex:1 1 170px;min-width:0} .sabform.inline textarea{flex:1 1 100%;min-height:34px;height:34px} .sabform.inline button{align-self:auto;flex:0 0 auto} .wrapb.card-pad{padding:var(--s4)} .sabform.inline textarea{flex:1 1 240px;min-height:34px;height:34px} /* AI önerisi varken el yazımı formu gizli — sade ekran, daha çok mesaj alanı */ .compose-toggle{display:flex;align-items:center;gap:8px;margin-top:10px} .compose-toggle.hidden{display:none} .linkbtn{font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--accent); background:none;border:0;padding:2px 0;cursor:pointer} .linkbtn:hover{text-decoration:underline} .dot-sep{color:var(--text-3)} /* sabit yükseklikte daha çok mesaj alanı */ .aichip{font-size:11px;font-weight:500;color:var(--text-3);background:var(--surface-2); border-radius:var(--r-full);padding:2px 8px;white-space:nowrap} /* Telefon konuşması ↔ çağrı kaydı köprüsü. Aynı görüşme iki ekranda duruyor; en azından biri diğerine götürmeli. */ .cagribag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500; color:var(--ink-teal);background:var(--fill-teal);border-radius:var(--r-full); padding:2px 8px;white-space:nowrap;font-variant-numeric:tabular-nums} .cagribag:hover{text-decoration:underline} .pager.thread-pager{padding:5px var(--s5)} .pager.thread-pager .btn.xs{height:22px} .msg{padding:10px var(--s5) 10px calc(var(--s5) - 3px)} .simbar{padding:8px var(--s4)} .simbar .crow{margin-top:0} /* mesajlar bestecinin hemen üstüne yaslanır — ortada boşluk kalmaz */ .thread{justify-content:flex-end} /* ========================================================================== GÖRSEL KİMLİK — v2 "cockpit" Koyu mürekkep kenar çubuğu · canlı vurgu · derinlik · güçlü tipografi. (Önceki sürüm düz beyaz + soluk teal idi; ayırt edici değildi.) ========================================================================== */ :root{ --ink-900:#0B1220; --ink-800:#111A2B; --ink-700:#18243A; --brand:#0EA5A4; /* canlı teal */ --brand-2:#14C7C4; --brand-ink:#04211F; --violet:#6366F1; } /* --- kenar çubuğu: koyu, degradeli, markalı --- */ .side{ background:linear-gradient(180deg,var(--ink-900) 0%,var(--ink-800) 100%); border-right:0;color:#93A3B8; box-shadow:inset -1px 0 0 rgba(255,255,255,.06); } .brand{color:#fff} .nav-item{color:#94A3B8;border-radius:8px;font-weight:500} .nav-item svg{opacity:.6} .nav-item:hover{background:rgba(255,255,255,.06);color:#E2E8F0} .nav-item.active{background:rgba(14,165,164,.16);color:#fff;font-weight:600; box-shadow:inset 2px 0 0 var(--brand)} .nav-item.active svg{opacity:1;color:var(--brand-2)} .nav-item .badge{background:var(--brand);color:var(--brand-ink);font-weight:700} .side-foot{border-top:1px solid rgba(255,255,255,.08);color:#64748B} /* --- üst bar: hafif yükseltilmiş --- */ .topbar{background:var(--surface);box-shadow:0 1px 0 var(--border),0 1px 3px rgb(16 24 40/.04);z-index:2} .shop{font-size:var(--fs-md);letter-spacing:-.01em} .avatar{background:linear-gradient(135deg,var(--brand),var(--violet));color:#fff;border:0;font-weight:700} /* --- vurgu rengini canlıya çek --- */ .btn.pri{background:var(--brand);border-color:var(--brand);color:#fff; box-shadow:0 1px 2px rgb(14 165 164/.35),0 2px 8px -2px rgb(14 165 164/.35)} .btn.pri:hover{background:var(--brand-2);border-color:var(--brand-2)} .subtabs a.on{color:var(--brand);border-bottom-color:var(--brand)} .cf.on,.nav-item.active{color:#fff} .cf.on{background:var(--brand);color:#fff} .conv.sel::before{background:var(--brand);width:3px} .suggest{border-left-color:var(--brand)} .suggest .lb{color:var(--brand)} /* --- FİRMA İŞARETİ: logo varsa logo, yoksa monogram -------------------- Sahibin sözü: *"Right now it looks ugly square."* Haklıydı ve sebebi ölçülebilir: 22 piksellik bir kutuya SABİT 6px köşe yarıçapı konunca köşe neredeyse hiç yuvarlanmıyor, 32 pikselde ise fazla yuvarlanıyordu. Yarıçap artık ORANSAL (%28), yani her boyda aynı yumuşaklıkta duruyor. Renk OKLCH ile veriliyor, HSL ile değil. HSL'de aynı "62% 94%" farklı tonlarda farklı PARLAKLIK veriyor: sarı bandı uçuk, mavi bandı koyu çıkıyor ve bazı monogramlar okunmuyordu. OKLCH'nin L'si algısal, yani on iki tonun on ikisi de aynı ağırlıkta duruyor. `color-mix` zaten kullanılıyor; ikisi de aynı kuşak tarayıcı özelliği. Zemin DÜZ DEĞİL: iki duraklı yumuşak bir eğim, içeride kılcal bir halka ve üstte ince bir ışık çizgisi. Düz dolgu + 1px kenarlık, ekranda "kutu" gibi okunuyordu; bu üçlü onu bir ROZETE çeviriyor. */ .pic{ --h:210; width:24px;aspect-ratio:1/1;flex:0 0 auto; border-radius:28%; display:grid;place-items:center;overflow:hidden; border:0; font-weight:640;font-size:11px;letter-spacing:-.02em; background:linear-gradient(157deg,oklch(.968 .032 var(--h)),oklch(.912 .058 var(--h))); color:oklch(.46 .118 var(--h)); box-shadow:inset 0 0 0 1px oklch(.845 .055 var(--h)), inset 0 1px 0 oklch(1 0 0/.85), 0 1px 1.5px oklch(.5 .06 var(--h)/.14); } .pic.lg{width:34px;font-size:13px} .pic.sm{width:22px;font-size:10px} /* LOGO. Amblemler beyaz zemin için çizilir; koyu temada da beyaz plaka kalıyor — koyu zemine oturtulan siyah bir logo kaybolurdu. */ .pic.logolu{background:#fff;color:inherit; box-shadow:inset 0 0 0 1px rgb(16 24 40/.12),0 1px 2px rgb(16 24 40/.08)} .pic img{width:100%;height:100%;object-fit:contain;padding:2px;display:block} /* ADSIZ KAYIT. Eskiden telefonun ilk iki hanesi ("90") yazılıyordu; "90" bir kısaltma değil, herkeste aynı çıkan gürültü. Yerine firma simgesi. */ .pic.anon{color:oklch(.52 .02 var(--h))} .pic.anon::before{content:"";width:56%;height:56%;background:currentColor; -webkit-mask:var(--firma-simge) center/contain no-repeat; mask:var(--firma-simge) center/contain no-repeat} :root{--firma-simge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V7l7-4v18M10 21h11V11l-7-2M6 10h1M6 13h1M6 16h1M14 13h2M14 16h2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E")} /* --- derinlik: kartlar yüzeyden ayrılsın --- */ .tile,.wrapb,.chcard,.lrow{box-shadow:0 1px 2px rgb(16 24 40/.05),0 1px 3px -1px rgb(16 24 40/.04)} .tile{border-radius:10px} .tile:hover{box-shadow:0 2px 4px rgb(16 24 40/.06),0 8px 16px -8px rgb(16 24 40/.10)} .tile .v{font-size:26px;letter-spacing:-.025em} .tile .lb{font-size:var(--fs-sm);color:var(--text-3)} /* --- başlıklar daha güçlü --- */ .h{font-size:22px;letter-spacing:-.02em} .col-h{font-size:var(--fs-md);letter-spacing:-.01em} .col-h .pic{margin-right:2px} /* --- konuşma satırı: seçili durum daha belirgin --- */ .conv.sel{background:linear-gradient(90deg,rgba(14,165,164,.10),rgba(14,165,164,.03))} .conv .nm{font-size:var(--fs)} /* --- mesajlar: yazar rengi kimlikle uyumlu --- */ .msg.in{border-left-color:hsl(var(--h,200) 45% 70%)} .msg.out.ai{border-left-color:var(--violet)} .msg.out.ai .who{color:var(--violet)} /* --- composer: hafif yükseltilmiş kart --- */ .composer{box-shadow:0 -1px 0 var(--border),0 2px 8px -4px rgb(16 24 40/.10)} /* pager mesajlarla birlikte altta dursun — ortada beyaz boşluk kalmasın */ .thread>.pager.thread-pager{margin-top:auto;border-bottom:0;border-top:1px solid var(--border); background:transparent;order:-1} .thread{gap:0} /* ========================================================================== 3-EKRAN SADELEŞTİRME — Bugün · Sohbetler · Dükkân (+ gizli Ayarlar) ========================================================================== */ .side-foot{margin-top:auto;padding-top:var(--s3);display:flex;flex-direction:column;gap:1px} .nav-item.small{font-size:var(--fs-sm);padding:6px 10px;min-height:30px;color:#64748B} .nav-item.small svg{width:15px;height:15px} .nav-item.small:hover{color:#CBD5E1} /* --- BUGÜN --- */ .home{gap:var(--s4);display:flex;flex-direction:column} .hero{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex:0 0 auto} .hero-h{font-size:26px;font-weight:600;letter-spacing:-.025em} .hero-s{font-size:var(--fs-md);color:var(--text-2);margin-top:3px} .hero-s b{color:var(--text)} .btn.lg{height:40px;padding:0 18px;font-size:var(--fs)} .statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);flex:0 0 auto} .stat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px; box-shadow:0 1px 2px rgb(16 24 40/.05)} .stat-v{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2} .stat-v.warn{color:var(--red)} .stat-l{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px} .sec-t{font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em;flex:0 0 auto} .approvals{display:flex;flex-direction:column;gap:var(--s2);flex:0 0 auto} .apr{display:flex;align-items:center;gap:var(--s3);background:var(--surface); border:1px solid var(--border);border-left:3px solid var(--brand);border-radius:10px;padding:12px 14px; box-shadow:0 1px 2px rgb(16 24 40/.05)} .apr.karar{border-left-color:var(--amber);background:linear-gradient(90deg,var(--amber-soft),transparent 60%)} .apr-b{flex:1;min-width:0} .apr-n{font-weight:600;font-size:var(--fs-md)} .apr-d{font-size:var(--fs-sm);color:var(--text-2);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .apr-t{font-weight:700;font-size:var(--fs-lg);white-space:nowrap} .apr-a{display:flex;gap:6px;flex:0 0 auto} .apr-a form{margin:0} .allclear{background:var(--surface);border:1px dashed var(--border-2);border-radius:10px; padding:26px;text-align:center} .ac-t{font-weight:600;font-size:var(--fs-md)} .ac-d{font-size:var(--fs-sm);color:var(--text-3);margin-top:3px} .alertbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-sm); background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;flex:0 0 auto} .alertbar a{color:var(--brand);font-weight:500} /* --- büyük sekmeler (Dükkân) --- */ .bigtabs{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px; margin-bottom:var(--s4);flex:0 0 auto;align-self:flex-start} .bigtabs a{font-size:var(--fs);font-weight:500;color:var(--text-2);padding:8px 18px;border-radius:8px} .bigtabs a:hover{color:var(--text)} .bigtabs a.on{background:var(--surface);color:var(--text);font-weight:600; box-shadow:0 1px 2px rgb(16 24 40/.08)} /* --- ayarlar listesi --- */ /* BÖLÜM BAŞLIĞI: Ayarlar on bir satırlık tek düz listeydi ve kimlik, yapay zekâ davranışı, başvuru verisi, arşiv, uyum, kullanıcı yönetimi yan yana duruyordu. Ayar ekranları, bölümlemenin gerçekten işe yaradığı az sayıda yerden biri: aranan şey "hangi başlığın altında" diye bulunur. */ .setbas{font-size:var(--fs-sm);font-weight:600;color:var(--text-3); letter-spacing:.3px;margin:22px 0 8px;max-width:720px} .setbas:first-of-type{margin-top:14px} .setlist{display:flex;flex-direction:column;gap:var(--s2);max-width:720px} .setrow{display:flex;align-items:center;gap:var(--s3);background:var(--surface); border:1px solid var(--border);border-radius:10px;padding:13px 16px; box-shadow:0 1px 2px rgb(16 24 40/.04);transition:border-color .12s,transform .12s} .setrow:hover{border-color:var(--brand);transform:translateX(2px)} .setrow .ic{width:34px;height:34px;border-radius:9px;background:var(--surface-2); display:grid;place-items:center;flex:0 0 auto;color:var(--brand)} .setrow .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7} .setrow b{display:block;font-size:var(--fs);font-weight:600} .setrow span{display:block;font-size:var(--fs-sm);color:var(--text-3);margin-top:1px} /* Listenin ilk satırı ürünün en kritik ayarı — gözle de öyle görünmeli. */ .setrow.one{border-color:var(--accent-line);background:var(--accent-soft)} .setrow.one .ic{background:var(--accent);color:var(--accent-ink)} .setrow.one b{color:var(--accent)} .pic.sm{display:inline-grid;vertical-align:middle;margin-right:5px} /* yetki listesi 620px ekrana sığsın */ .ladder .lrow{padding:8px var(--s4)} .ladder .lrow-d{font-size:var(--fs-xs);margin-top:0} .ladder{gap:4px} /* ========================================================================== YÖNETİM KONTROLLERİ — ekleme · düzenleme · stok · tahsilat · telefon ========================================================================== */ /* üstte duran "yeni kayıt" satırı */ .addbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;flex:0 0 auto; background:var(--surface);border:1px solid var(--border);border-radius:10px; padding:10px 12px;margin-bottom:var(--s3);box-shadow:0 1px 2px rgb(16 24 40/.04)} .addbar.plain{margin:0;border:0;background:transparent;box-shadow:none;padding:6px 0} .addlb{font-size:var(--fs-sm);font-weight:600;color:var(--text-2);white-space:nowrap} .addbar input{flex:1 1 150px;min-width:0} .addbar button{flex:0 0 auto} .editrow>td{background:var(--surface-2);padding:4px var(--s4)} tr.editrow.hidden{display:none} /* Düzenleme panelinin alt şeridi: seyrek eylemler. Silme en sağda ve diğerlerinden UZAKTA — komşusuna yanlışlıkla basılması pahalıdır. */ .satir-eylem{display:flex;align-items:center;gap:var(--s2); margin:6px 0 4px;padding-top:6px;border-top:1px solid var(--border)} /* Teklif kalemleri: uzun bir teklif SAYFAYI değil, kendi kutusunu kaydırsın. Kalem sayısı müşteriden gelir; ekranı ona teslim edemeyiz. */ /* Tedarikçi teklifleri kalemin altına girince kutu uzuyor. Kaç tedarikçiye sorulduğu MÜŞTERİDEN ve tedarikçi listesinden gelir — ekranı ona teslim edemeyiz, kutu kendi içinde kaydırır, sayfa asla kaymaz. */ .kalemkutu{max-height:118px;overflow-y:auto} /* Bir kalem = ne istendi + AI'ın topladığı tedarikçi teklifleri. Teklifler girintili duruyor: "bunlar o kalemin altındaki bilgi" demek. */ .kalem{padding:4px 0;border-bottom:1px solid var(--border)} .kalem:last-child{border-bottom:0} .kalem-b{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs)} .kalem-f{margin-left:auto;font-variant-numeric:tabular-nums} .topla{margin:3px 0 2px 12px;padding-left:8px;border-left:2px solid var(--border)} .topla-h{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-bottom:2px} .tekl{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);padding:1px 0} .tekl-a{min-width:120px;color:var(--text-2)} .tekl .num{font-variant-numeric:tabular-nums} .nowrap{white-space:nowrap} td.c,th.c{text-align:center} /* -------------------------------------------------------------------------- ÖNCE ÖZET, SONRA GİRİŞ — sayfa açılınca form değil DURUM görünür. Sahip: "önce ne olduğunu göreyim; değiştireceksem düğmeye basarım." .gizli kapalı başlar, .ekle-ac düğmesi açar (formAc — base.html). -------------------------------------------------------------------------- */ .gizli{display:none} .ekle-ac{flex:0 0 auto;align-self:flex-start;margin-bottom:var(--s3)} .ekle-ac.acik{background:var(--surface-2);border-color:var(--border-2)} /* aynı bölümde birden çok giriş varsa tek satırda dursun — yeni bant açmasın */ .acbar{display:flex;gap:var(--s2);flex:0 0 auto;flex-wrap:wrap} .acbar .ekle-ac{margin-bottom:var(--s3)} /* önerilen boş randevu saatleri */ .slot{display:inline-block;margin:0 6px 4px 0;padding:2px 8px;border-radius:var(--r-xs); background:var(--fill-teal);color:var(--ink-teal);font-style:normal; font-size:var(--fs-xs);font-variant-numeric:tabular-nums} /* resepsiyonistin yapabildikleri — düz liste, her satır bir yetenek */ .yetenek{display:flex;flex-direction:column;gap:2px;overflow:auto;padding:2px var(--s4) var(--s3)} .yetenek span{display:flex;align-items:flex-start;gap:8px;padding:5px 0; font-size:var(--fs-sm);color:var(--text-2);line-height:1.45; border-bottom:1px solid var(--border)} .yetenek span:last-child{border-bottom:0} .yetenek span::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:6px; border-radius:50%;background:var(--ink-green)} .yetenek b{color:var(--text-1);font-weight:600} /* halledilen mesaj listeden çıkmaz, sadece geri çekilir */ tr.halledildi>td{opacity:.5} tr.halledildi b{font-weight:500;text-decoration:line-through;text-decoration-thickness:1px} /* stok ± */ .stepper{display:inline-flex;align-items:center;gap:6px} .stepper form{margin:0} .stepbtn{width:26px;height:26px;border-radius:7px;border:1px solid var(--border-2); background:var(--surface);color:var(--text-2);font-size:15px;line-height:1;cursor:pointer; display:grid;place-items:center;font-weight:600} .stepbtn:hover{background:var(--brand);border-color:var(--brand);color:#fff} .stepper b{min-width:26px;text-align:center;font-weight:600} .stepper .unit{font-size:var(--fs-xs);color:var(--text-3)} /* tahsilat */ .paybar{display:inline-flex;gap:6px;margin:0} .paybar input{width:96px;height:28px;font-size:var(--fs-xs)} .paybar .btn{height:28px;font-size:var(--fs-xs)} /* telefon ayarları */ .telgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);flex:0 0 auto} .fld{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--text-2);margin-bottom:10px} .fld input,.fld textarea{display:block;width:100%;margin-top:4px;font-size:var(--fs-sm)} .fhint{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--text-3);margin-top:3px} .chk{display:flex;gap:9px;align-items:flex-start;padding:7px 0;cursor:pointer} .chk input{margin-top:2px;width:16px;height:16px;accent-color:var(--brand);flex:0 0 auto} .chk span{font-size:var(--fs-sm);color:var(--text-2)} .chk b{display:block;color:var(--text);font-weight:600;font-size:var(--fs)} .radiorow{display:flex;gap:var(--s3);flex-wrap:wrap} .rad{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:var(--fs-sm)} .rad input{accent-color:var(--brand);width:15px;height:15px} /* arama listesi */ .calllist{display:flex;flex-direction:column;gap:6px;flex:0 0 auto} .callrow{display:flex;align-items:center;gap:var(--s3);background:var(--surface); border:1px solid var(--border);border-radius:9px;padding:9px 13px} .callrow:hover{border-color:var(--brand)} .callrow div{flex:1;min-width:0} .callrow b{display:block;font-size:var(--fs)} .callrow span{display:block;font-size:var(--fs-sm);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .calltime{font-size:var(--fs-xs);color:var(--text-3);flex:0 0 auto} @media (max-width:1100px){.telgrid{grid-template-columns:1fr}} /* 620px ekranda sığdırma son rötuşları */ .setlist{gap:6px} .setrow{padding:10px 14px} .setrow .ic{width:30px;height:30px} .setrow span{font-size:var(--fs-xs)} .addbar{padding:8px 12px;margin-bottom:10px} .setrow{padding:9px 14px} .setrow b{font-size:var(--fs-sm)} .setlist .setrow{padding:7px 13px} .setlist{gap:5px} /* AI özet şeridi — "kendi hallettiklerini" tek satırda özetler */ .aisum{padding:9px var(--s3);border-bottom:1px solid var(--border);font-size:var(--fs-sm); color:var(--text-2);background:var(--surface-2);flex:0 0 auto} .aisum b{color:var(--text)} .aisum-d{color:var(--text-3)} .quiet{padding:34px 20px;text-align:center} .q-t{font-weight:600;font-size:var(--fs-md)} .q-d{font-size:var(--fs-sm);color:var(--text-3);margin-top:4px;line-height:1.5} /* ayarlar son sıkıştırma */ .setrow .ic{width:28px;height:28px} .setrow .ic svg{width:16px;height:16px} .setlist .setrow{padding:6px 12px} .setrow b{font-size:var(--fs-sm);line-height:1.3} .setrow span{line-height:1.3} .pad .phead .sub{margin-bottom:10px} /* ========================================================================== MOBİL — telefon/tablet. Kabuk SABİT kalır (yerel uygulama gibi), yalnız içerik listesi kayar; alt sekme çubuğu başparmakla erişilir. ========================================================================== */ .backbtn{display:none} @media (max-width:820px){ /* dokunma hedefleri en az 44px (Apple HIG) */ .btn{height:38px;padding:0 14px;font-size:var(--fs)} .btn.xs{height:32px;font-size:var(--fs-sm);padding:0 11px} input,select{height:40px;font-size:16px} /* 16px: iOS otomatik zoom yapmasın */ textarea{font-size:16px} /* kabuk: içerik + alt sekme çubuğu */ .app{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 62px} .main{grid-row:1;grid-template-rows:52px minmax(0,1fr)} .content{min-height:0} /* kenar çubuğu -> ALT SEKME ÇUBUĞU SEKMELER SIĞMIYORDU VE BU SESSİZ BİR HATAYDI. 375px'lik telefonda şerit 576px geliyor; Sevkiyat, Rapor, Arama demosu ve Ayarlar ekranın DIŞINDA kalıyordu. Sayfa yatay kaymadığı için (html,body overflow:hidden) o sekmelere ulaşmanın hiçbir yolu yoktu — kaydırma çubuğu bile çıkmadığından kullanıcı eksik sekme olduğunu anlayamıyordu bile. Ölçüldü: 11 öğe, 4'ü dışarıda. `flex:1` bunu ÇÖZMEZ: esnek öğe kendi min-content genişliğinin altına inmez, o da en uzun etiketin ("Tedarikçiler") genişliğidir. Sığacak kadar daraltmak da yanlış olurdu: 375/10 = 37px, dokunma hedefi için kabul edilen 44px'in altı. Şerit artık YATAY KAYIYOR ve sekmeler dokunulabilir boyutta kalıyor. */ .side{grid-row:2;flex-direction:row;align-items:stretch;padding:0; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch; border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -2px 12px rgb(0 0 0/.18)} .side::-webkit-scrollbar{display:none} .brand{display:none} .nav{flex-direction:row;flex:0 0 auto;gap:0} /* position:relative ŞART — rozet (aşağıda) mutlak konumlanıyor ve konumunu en yakın KONUMLANDIRILMIŞ atadan alır. Sekme static kalınca rozetin çıpası oluyordu: şerit kaydığında sekme kayıyor, rozet EKRANDA ÇAKILI kalıyor ve başka bir sekmenin üstüne biniyordu ("9" İşler'e aitken İletişim'in üstünde duruyordu). Şerit kaymadığı sürece gizli kalan bir hataydı; yatay kaydırma onu görünür yaptı. Ölçüldü: şerit 120px kaydığında sekme 120px kayıyor, rozet 0. */ .nav-item{flex:0 0 auto;min-width:64px;position:relative; flex-direction:column;justify-content:center;gap:3px;border-radius:0; min-height:62px;font-size:11px;font-weight:600;padding:8px 2px;box-shadow:none} .nav-item svg{width:21px;height:21px;opacity:.75} .nav-item.active{background:transparent;color:var(--brand-2);box-shadow:inset 0 2px 0 var(--brand)} .nav-item.active svg{opacity:1} .nav-item .badge{position:absolute;transform:translate(14px,-12px)} .side-foot{flex-direction:row;margin:0;padding:0;border:0;width:auto} .side-foot .nav-item.small{min-height:62px;flex-direction:column;font-size:11px;padding:8px 6px} .topbar{padding:0 14px;gap:10px} .shop{font-size:var(--fs-sm)} .shop small{display:none} .aistat{display:none} /* sayfa içeriği: kabuk sabit, liste kayar */ .pad{padding:14px;overflow-y:auto!important;-webkit-overflow-scrolling:touch} .h{font-size:20px} .phead .sub{display:none} /* SOHBETLER: tek bölme — liste VEYA konuşma. minmax(0,1fr) ŞART: yalın `1fr` aslında minmax(auto,1fr)'dir ve sütun içeriğin min-content genişliğinin altına inmez. Ölçtüm — 375px'lik telefonda gelen kutusu 489px kalıyordu ve taşan kısım overflow:hidden yüzünden kaydırılamıyordu: ekranda duran ama ULAŞILAMAYAN iş. Aynı tuzağın satır hâli dosyanın başında zaten yazılı. */ .inbox{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)} .rail{display:none} .col{border-right:0;max-height:none} .inbox.has-sel .col{display:none} .inbox:not(.has-sel) .thread-col{display:none} .backbtn{display:grid;place-items:center;width:34px;height:34px;margin-left:-6px; font-size:24px;line-height:1;color:var(--text-2);border-radius:8px;flex:0 0 auto} .backbtn:active{background:var(--surface-2)} .thread{overflow-y:auto!important} .conv{padding:12px 14px} .conv .pv{max-width:60vw} /* BUGÜN */ .hero{flex-direction:column;align-items:flex-start;gap:10px} .hero-h{font-size:22px} .hero .btn.lg{width:100%} .statrow{grid-template-columns:1fr 1fr;gap:10px} .stat{padding:12px} .stat-v{font-size:20px} .apr{flex-wrap:wrap;gap:10px} .apr-b{flex:1 1 100%;order:1} .apr .pic.lg{order:0} .apr-t{order:0;margin-left:auto} .apr-a{flex:1 1 100%;order:2} .apr-a .btn,.apr-a form{flex:1} .apr-a .btn{width:100%} /* DÜKKÂN: form dikey, tablo sadeleşir */ .addbar{flex-direction:column;align-items:stretch} .addbar input{flex:1 1 auto;width:100%} .addbar button{width:100%} .bigtabs{width:100%;display:grid;grid-template-columns:repeat(3,1fr)} .bigtabs a{text-align:center;padding:10px 6px} th,td{padding:10px 10px} /* dar ekranda ikincil sütunları gizle */ table th:nth-child(n+4),table td:nth-child(n+4){display:none} .dukkan-keep th,.dukkan-keep td{display:table-cell} /* SÜTUN GİZLEME HER TABLOYA UYMAZ. Kaçan talep tablosunda 4. sütun "Kaçan"dır — ekranın bütün sebebi o. Müşteriler'de 5. sütun cari durumudur. Gizlemek burada sadeleştirme değil, ekranın konusunu silmek olurdu; o tablolar KAYAR. Yarım okunan bir tablo, kaydırmaktan kötüdür: yönetici gördüğü eksik sayıya güvenip karar verir. */ .tam-tablo th:nth-child(n+4),.tam-tablo td:nth-child(n+4){display:table-cell} .tam-tablo{overflow-x:auto} .tam-tablo table{min-width:620px} /* Kutular telefonda ikişerli — tek sıra 5 kutu okunmaz olur. */ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .subtabs{overflow-x:auto;white-space:nowrap} /* AYARLAR / TELEFON */ .setgrid,.telgrid{grid-template-columns:1fr} .pager{gap:8px} .pager-info{font-size:var(--fs-xs)} } @media (max-width:420px){ .statrow{grid-template-columns:1fr 1fr} .conv .pv{max-width:52vw} .nav-item{font-size:10px} } /* mobil düzeltmeleri */ .cikis-top{display:none} .apr .pic{flex:0 0 auto;align-self:flex-start} @media (max-width:820px){ .cikis-top{display:grid;place-items:center;width:34px;height:34px;border-radius:9px; color:var(--text-3);flex:0 0 auto} .cikis-top:active{background:var(--surface-2)} .cikis-side{display:none} /* çıkış alt sekmede yer kaplamasın */ /* Yetki kadranı: 390px'de üç düğme metnin yanına sığmıyor ve KIRPILIYORDU (seçenekler görünmez oluyordu). Telefonda kadran alt satıra geçer. */ .lrow{grid-template-columns:1fr} .lrow .segbtns,.lrow .seg{width:100%;justify-content:stretch} .lrow .segbtns button{flex:1 1 0;padding:0 6px;min-height:34px} .lrow .seg{justify-content:center} .apr .pic.lg{width:30px;font-size:11px} .apr-t{font-size:var(--fs-md)} } /* baş harf rozetleri hiçbir yerde esnemesin */ .pic{flex:0 0 auto} .col-h .pic.lg{width:30px;font-size:11px;flex:0 0 auto} /* --- müşteri kartı: sağ panel gizliyken boş alanı doldurur --- */ .custcard{display:none} @media (max-width:1180px){ .custcard{display:block;order:-2;margin-bottom:auto;flex:0 0 auto; padding:14px var(--s5);border-bottom:1px solid var(--border);background:var(--surface-2)} .cc-row{display:flex;align-items:center;gap:9px;margin-bottom:10px} .cc-row b{font-size:var(--fs-md)} .cc-tel{margin-left:auto;font-size:var(--fs-sm);color:var(--brand);font-weight:500; font-variant-numeric:tabular-nums} .cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px} .cc-grid>div{min-width:0} .cc-grid span{display:block;font-size:var(--fs-xs);color:var(--text-3)} .cc-grid b{display:block;font-size:var(--fs-sm);font-weight:600;margin-top:1px; overflow:hidden;text-overflow:ellipsis} .cc-grid b.owe{color:var(--red)} .cc-wide{grid-column:1 / -1} .cc-wide b{white-space:normal;line-height:1.4;font-weight:500} .cc-warn b{color:var(--amber)} } @media (max-width:820px){ .cc-grid{grid-template-columns:1fr} } /* müşteri kartı boş alanı GERÇEKTEN doldursun (sağ panel gizliyken) */ @media (max-width:1180px){ .custcard{flex:1 1 auto;margin-bottom:0;overflow:hidden;display:flex;flex-direction:column;gap:12px} .cc-sec{border-top:1px solid var(--border);padding-top:10px} .cc-h{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:6px} .cc-ord{display:flex;justify-content:space-between;align-items:center;gap:8px; font-size:var(--fs-sm);padding:4px 0} .cc-ord i{font-style:normal;font-size:10px;padding:1px 6px} .cc-perms{display:flex;flex-wrap:wrap;gap:5px} .cc-perms .cbadge{font-size:11px} } /* ---- MOBİL: menü çubuğu ÜSTTE (alt yerine) ---- */ @media (max-width:820px){ .app{grid-template-rows:56px minmax(0,1fr)} .side{grid-row:1;border-top:0;border-bottom:1px solid rgba(255,255,255,.10); box-shadow:0 2px 10px rgb(0 0 0/.16)} .main{grid-row:2;grid-template-rows:44px minmax(0,1fr)} .nav-item{min-height:56px;padding:6px 2px;gap:2px} .side-foot .nav-item.small{min-height:56px;padding:6px 6px} .nav-item svg{width:19px;height:19px} /* aktif sekme göstergesi artık ALTTA */ .nav-item.active{box-shadow:inset 0 -2px 0 var(--brand)} .nav-item .badge{transform:translate(13px,-11px)} .topbar{height:44px;padding:0 12px} .avatar{width:26px;height:26px;font-size:10px} } .col-h .pic,.cc-row .pic{align-self:center;aspect-ratio:1/1} /* ekrana sığdırma göstergeleri + kart artık esnemesin */ .gizli-not{order:-1;flex:0 0 auto;font-size:var(--fs-xs);color:var(--text-3); padding:6px var(--s5);border-bottom:1px solid var(--border);background:var(--surface-2)} .gizli-not:empty{display:none} .liste-not{flex:0 0 auto;font-size:var(--fs-xs);color:var(--text-3);padding:6px var(--s3); border-top:1px solid var(--border)} .liste-not:empty{display:none} @media (max-width:1180px){ .custcard{flex:0 0 auto;margin-bottom:0} } /* İçerik YUKARIDAN aksın: kısa bir sohbette boşluk ortada delik gibi değil, bestecinin üstünde doğal bir nefes payı olarak görünür (WhatsApp deseni). */ .thread{justify-content:flex-start} .thread>.pager.thread-pager{margin-top:0} @media (max-width:1180px){ .custcard{margin-bottom:0} } /* kısa ekranlarda (dizüstü) mesajlar biraz daha sıkı — son 12px'i kurtarır */ @media (max-height:720px){ .msg{padding-top:8px;padding-bottom:8px} .gizli-not{padding-top:4px;padding-bottom:4px} } /* ---- MOBİL GİRİŞ: alanlar ÜSTTE dursun — klavye açılınca kapanmasın ---- Seçiciler `.giris-wrap`ı hedefliyordu; o kapsayıcı iki sütunlu düzene geçerken `.giris-sayfa`/`.giris-alan` oldu ve bu blok sessizce ölü kaldı. Ölü kural, telefonda klavye açılınca alanların kapanması demekti. */ @media (max-width:820px){ .giris-alan{ place-items:unset; /* dikey ortalamayı iptal et */ align-items:start; justify-items:center; padding:14px 14px 24px; min-height:100dvh; /* klavye açılınca görünür alana uy */ overflow-y:auto; /* klavye alanı daraltırsa erişilebilir kalsın */ } .giris-card{margin:0;padding:20px 18px;max-width:100%;box-shadow:var(--sh-sm)} .giris-l{margin-bottom:14px} .giris-l input{height:46px;font-size:16px} /* 16px: iOS zoom yapmaz */ .giris-card .giris-dugme{height:46px;font-size:var(--fs-md)} .giris-demo{margin-top:14px} } /* çok kısa görünür alan (klavye açık): en üste yapış, gereksizi gizle */ @media (max-height:560px){ .giris-alan{padding-top:8px;align-items:start} .giris-card{padding:14px} .giris-alt,.giris-demo{display:none} .giris-l{margin-bottom:10px} } /* ---- TEMA DÜĞMESİ (üst çubuk) — açık/koyu arası geçiş ---- */ .tema-btn{display:grid;place-items:center;width:30px;height:30px;padding:0; border:1px solid var(--border);border-radius:var(--r-sm); background:var(--surface);color:var(--text-2);cursor:pointer} .tema-btn:hover{background:var(--surface-2);color:var(--text)} .tema-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .tema-btn .gunes{display:none} :root[data-theme="dark"] .tema-btn .gunes{display:block} :root[data-theme="dark"] .tema-btn .ay{display:none} @media (max-width:820px){ .tema-btn{margin-left:auto;width:34px;height:34px;border-radius:9px} /* aistat gizli: sağa iten bu */ .tema-btn svg{width:17px;height:17px} } /* ========================================================================== TİCARET KATMANI — fiyat listeleri · çek/senet · KVKK · içe aktarma ========================================================================== */ /* --- ortak küçük parçalar --- */ .sub2{display:block;font-size:var(--fs-xs);color:var(--text-3);font-weight:400;margin-top:1px} .mlauto{margin-left:auto} .mut{color:var(--text-3)} .chkinline{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap} .chkinline input{margin:0} .lnkbtn{background:none;border:0;padding:0 2px;font:inherit;font-size:var(--fs-xs); color:var(--accent);text-decoration:underline;cursor:pointer} .xrm{background:none;border:0;color:var(--text-3);cursor:pointer;font-size:15px;line-height:1;padding:0 2px} .xrm:hover{color:var(--red)} .pill.p-mut{background:var(--fill-mut);color:var(--ink-mut)} /* cari limit doluluk çubuğu — riski bir bakışta göster */ .limitbar{display:block;height:3px;margin-top:4px;border-radius:2px;background:var(--surface-3);overflow:hidden} .limitbar i{display:block;height:100%;background:var(--accent);border-radius:2px} .limitbar.dolu i{background:var(--red)} /* --- fiyat listeleri --- */ .listeler{display:flex;flex-direction:column;gap:10px;min-height:0} .lcard{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:12px 14px} .lhead{display:flex;align-items:center;gap:8px;margin-bottom:8px} .lhead b{font-size:var(--fs-md)} .lrows{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} /* Barem çipi. Adı ESKİDEN `.lrow` idi — yetki merdiveninin satırıyla AYNI ad, iki ayrı bileşen için. Dosyada sonra geldiği için merdivenin grid düzenini sessizce eziyordu: telefonda kadran düğmeleri kırpılıp görünmez oluyordu. Bir ad, bir bileşen. */ .lchip{display:inline-flex;align-items:center;gap:7px;padding:4px 8px;border:1px solid var(--border); border-radius:var(--r-sm);background:var(--surface-2);font-size:var(--fs-sm)} .lchip i{font-style:normal;color:var(--text-3);font-size:var(--fs-xs)} .lchip em{font-style:normal;font-weight:600} .lempty{margin:0 0 8px;font-size:var(--fs-sm);color:var(--text-3)} .addbar.sm input,.addbar.sm select{height:30px;font-size:var(--fs-sm)} /* --- çek/senet özet --- */ .kpirow{display:flex;gap:10px;margin-bottom:10px} .kpi{flex:1;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:10px 12px} .kpi b{display:block;font-size:var(--fs-xl);font-weight:650} .kpi span{font-size:var(--fs-xs);color:var(--text-3)} .kpi.bad b{color:var(--red)} .alertbar.vade{border-color:var(--amber);background:var(--amber-soft)} /* --- KVKK --- */ .kvgrid{display:grid;grid-template-columns:1fr 300px;gap:14px;min-height:0} .kvform{display:flex;flex-direction:column;gap:10px;min-width:0} .kvrow{display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:start} .fld.tight{margin:0} .ayrik{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-full); font-size:var(--fs-xs);font-weight:600;background:var(--fill-amber);color:var(--ink-amber)} .uyari{border:1px solid var(--note-line);background:var(--note-bg);color:var(--note-ink); border-radius:var(--r-sm);padding:9px 11px;font-size:var(--fs-sm)} .uyari.big{padding:14px 16px} .uyari.big b{display:block;margin-bottom:4px;font-size:var(--fs-md)} .uyari p{margin:0} .kvyan{border-left:1px solid var(--border);padding-left:14px;min-width:0} .kvlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .kvlist li{display:flex;gap:9px;font-size:var(--fs-sm)} .kvlist b{display:block;font-weight:600;color:var(--text)} .kvlist span{color:var(--text-3);font-size:var(--fs-xs);line-height:1.45} .kvlist .tik{flex:0 0 18px;height:18px;border-radius:var(--r-full);display:grid;place-items:center; font-size:11px;font-weight:700;margin-top:1px} .kvlist .ok .tik{background:var(--fill-green);color:var(--ink-green)} .kvlist .eksik .tik{background:var(--fill-red);color:var(--ink-red)} .temizbar{margin-top:14px;padding-top:12px;border-top:1px solid var(--border); display:flex;align-items:center;gap:10px;font-size:var(--fs-sm)} /* --- içe aktarma --- */ .yukle{display:grid;grid-template-columns:1fr 320px;gap:14px;min-height:0} .yukbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; border:2px dashed var(--border-2);border-radius:var(--r-lg);background:var(--surface);padding:26px 20px} .yukic{text-align:center;color:var(--text-3)} .yukic b{display:block;margin-top:6px;font-size:var(--fs-md);color:var(--text)} .yukic span{font-size:var(--fs-sm)} .yukbox input[type=file]{max-width:280px;font-size:var(--fs-sm)} .yukyan{border-left:1px solid var(--border);padding-left:14px} .ynot{margin:0 0 10px;font-size:var(--fs-sm);color:var(--text-2);line-height:1.5} .ynot.mut{color:var(--text-3);font-size:var(--fs-xs)} .ornek{width:100%;margin-bottom:10px;font-size:var(--fs-xs)} .ornek th{background:var(--surface-2);color:var(--text-3);font-weight:600;padding:4px 6px;text-align:left;white-space:nowrap} .ornek td{padding:4px 6px;border-top:1px solid var(--border);white-space:nowrap} .ozetbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px; border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:9px 12px} .oz{font-size:var(--fs-sm);color:var(--text-2)} .oz b{font-size:var(--fs-lg);font-weight:650;margin-right:3px} .oz.yeni b{color:var(--ink-green)} .oz.gun b{color:var(--ink-blue)} .oz.hata b{color:var(--ink-red)} .ozalan{font-size:var(--fs-xs);color:var(--text-3)} .ozalan i{font-style:normal;margin-left:6px;padding:1px 6px;border-radius:var(--r-xs);background:var(--surface-2)} tr.hatali td{background:var(--red-soft)} /* --- dar ekran --- */ @media (max-width:980px){ .kvgrid,.yukle{grid-template-columns:1fr} .kvyan,.yukyan{border-left:0;border-top:1px solid var(--border);padding-left:0;padding-top:12px} .kvrow{grid-template-columns:1fr} } @media (max-width:820px){ .kpirow{gap:8px} .bigtabs{overflow-x:auto;scrollbar-width:none} .bigtabs::-webkit-scrollbar{display:none} .bigtabs a{white-space:nowrap} .ozetbar{gap:8px} .ozalan{display:none} } /* ========================================================================== SIĞDIRMA — yeni ekranlar 1366×620 dizüstünde de kaydırmasız kalmalı. Ölçülen taşmalar: Bugün +26 · Müşteriler +97 · Ayarlar +76 · KVKK +233/+96 ========================================================================== */ /* Ayarlar listesi iki sütun: 8 satır tek sütunda 620px'e sığmıyordu */ @media (min-width:900px){ .setlist{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);max-width:1000px;align-content:start} } /* KVKK: metin alanları ekran yüksekliğine göre — kendi içinde kayar (düzenleme alanı olduğu için normal), sayfa kaymaz. */ .kvform textarea{height:clamp(74px,13vh,180px);resize:vertical} .kvgrid{align-items:start} .kvyan{max-height:100%} /* İçe aktarma örnek tablosu dar ekranda taşmasın */ .yukyan{min-width:0} .ornek{display:block;overflow-x:auto} @media (max-height:720px){ /* Bugün: uyarı şeritleri ve kartlar sıkışsın */ .alertbar{padding:6px 10px} .stat{padding:10px 13px} .home .hero{margin-bottom:8px} /* Müşteri satırı: limit çubuğu süs — dar ekranda gizle */ .limitbar{display:none} td .sub2{font-size:11px} .wrapb td{padding-top:7px;padding-bottom:7px} /* KVKK yan sütunu ve form sıkışsın */ .kvlist{gap:6px} .kvlist span{display:none} /* açıklamalar: geniş ekranda kalsın */ .kvform{gap:7px} .kvform textarea{height:clamp(64px,11vh,120px)} .setrow{padding:8px 12px} .fld{margin-bottom:8px} } /* Ölçülen son iki taşma: Bugün +10px · KVKK metin +79px (1366×620) */ @media (max-height:720px){ /* Bugün: iki uyarı şeridi alt alta gelince 10px taşıyordu */ .home .hero{margin-bottom:4px} .home .sec-t{margin-top:2px;margin-bottom:2px} .approvals{gap:6px} .apr{padding-top:9px;padding-bottom:9px} .statrow{gap:8px} /* KVKK metin sekmesi: başlık + sekme + metin alanları sıkışsın */ .pad .phead{margin-bottom:6px} .pad .phead .sub{margin-bottom:4px} .bigtabs{margin-bottom:8px} .kvform textarea{height:clamp(56px,9vh,110px)} .kvform .fhint{line-height:1.3} } /* KVKK metinleri ayrı sekmelere bölündü — tek metin kalınca alan büyüyebilir. Yükseklik ekrana göre: 620px dizüstünde de, 900px masaüstünde de kaydırmasız. */ .fld.buyuk{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-bottom:0} .fld.buyuk textarea{flex:1 1 auto;min-height:110px;height:auto;resize:none} .kvform{min-height:0} @media (max-height:720px){ .fld.buyuk textarea{min-height:90px} } /* .pad zaten flex sütun — kvgrid/yukle onun kalan yüksekliğini DOLDURSUN. (align-items:start esnemeyi engelliyordu: metin alanı küçük kalıp altta 380px boşluk bırakıyordu.) */ .kvgrid,.yukle{flex:1 1 auto;min-height:0;align-items:stretch} .kvform{height:100%} .yukbox{min-height:0} .kvyan,.yukyan{overflow:hidden} /* Dar ekranda .pad zaten kayıyor (tasarım kararı) — yan sütunu kırpma, doğal yüksekliğinde aksın. overflow:hidden yalnız geniş ekranda gerekli. */ @media (max-width:980px){ .kvgrid,.yukle{flex:0 0 auto;min-height:auto} .kvyan,.yukyan{overflow:visible;max-height:none} .kvform{height:auto} .fld.buyuk textarea{min-height:150px} } /* ========================================================================== MAĞAZA YÖNETİMİ — tezgâh (POS) · kasa · alış · iade · kullanıcılar ========================================================================== */ /* --- tezgâh: solda sepet, sağda toplam+ödeme --- */ .posgrid{display:grid;grid-template-columns:1fr 300px;gap:14px;flex:1 1 auto;min-height:0} .possol{display:flex;flex-direction:column;min-width:0;min-height:0;gap:10px} .possag{display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--border); padding-left:14px;min-width:0} .okutbar{display:flex;gap:8px;align-items:center} .okutbar input[name=arama]{flex:1;height:40px;font-size:var(--fs-md)} .postoplam{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:12px} .pt-l{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-sm); color:var(--text-2);padding:3px 0} .pt-l.sm{font-size:var(--fs-xs);color:var(--text-3)} .pt-l.buyuk{margin-top:6px;padding-top:8px;border-top:1px solid var(--border); font-size:var(--fs-md);color:var(--text)} .pt-l.buyuk b{font-size:var(--fs-2xl);font-weight:700} .pt-adet{font-size:var(--fs-xs);color:var(--text-3);text-align:right;margin-top:2px} .odeme{display:flex;flex-direction:column;gap:8px} .odemesec{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .orad{position:relative} .orad input{position:absolute;opacity:0;pointer-events:none} .orad span{display:block;text-align:center;padding:9px 4px;border:1px solid var(--border); border-radius:var(--r-sm);font-size:var(--fs-sm);cursor:pointer;background:var(--surface)} .orad input:checked + span{border-color:var(--accent);background:var(--accent-soft); color:var(--accent);font-weight:600} .orad input:focus-visible + span{outline:2px solid var(--accent);outline-offset:1px} .btn.blok{width:100%;justify-content:center} /* --- kasa --- */ .kasabar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px} .kasabar .addbar{flex:1 1 320px} /* --- alış toplamı --- */ .alistoplam{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px; border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:10px 14px} .at-l{display:flex;flex-direction:column;font-size:var(--fs-xs);color:var(--text-3)} .at-l b{font-size:var(--fs-md);color:var(--text);font-weight:600} .at-l.buyuk b{font-size:var(--fs-xl);font-weight:700} .at-l.sm b{font-size:var(--fs-sm);font-weight:500} .alistoplam form{margin-left:auto} /* --- iade --- */ .iadeform{display:flex;flex-direction:column;gap:10px;min-height:0} .iadealt{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .iadealt select,.iadealt input{height:34px} /* --- kullanıcılar --- */ .rolnot{margin-top:12px;font-size:var(--fs-sm);color:var(--text-3);line-height:1.6} .rolnot b{color:var(--text-2)} @media (max-width:980px){ .posgrid{grid-template-columns:1fr;flex:0 0 auto} .possag{border-left:0;border-top:1px solid var(--border);padding-left:0;padding-top:12px} } @media (max-height:720px){ .pt-l.buyuk b{font-size:var(--fs-xl)} .postoplam{padding:9px 11px} .orad span{padding:7px 4px} } /* ========================================================================== STOK — anlatımdan kayıt · sayım · hareket defteri ========================================================================== */ /* Ürünler üstü: arama + "Anlat" düğmesi */ .urunbar{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap} /* `.arabar` yatay bir şeridin (.urunbar) içinde "kalan genişliği al" diye flex:1 idi. Stoklar sadeleşince doğrudan `.pad`in (bir flex SÜTUNU) çocuğu oldu ve aynı kural onu DİKEY büyüttü: arama ile tablo arasında 400px boşluk. Genişlikte büyüsün, yükseklikte asla. */ .arabar{display:flex;gap:8px;flex:0 0 auto;min-width:260px;margin-bottom:10px} .urunbar .arabar{flex:1 1 auto} .arabar input{flex:1;height:34px} .anlatbtn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .raf{display:inline-block;padding:0 5px;border-radius:var(--r-xs);background:var(--surface-3); color:var(--text-2);font-size:11px;font-weight:600;margin-right:4px} /* GÜNLÜK KAYAR — ama BU DOSYADAKİ bir `.gunluk` kuralıyla değil. Bu bir DEFTER: satırlar cümle + kanıt taşıdığı için uzun ve sayfalama satır başına üçe düşüyordu (37 kayıt = 13 sayfa). İşler kuyruğu da aynı sebeple kaydırmaya geçmişti. Kaydıran şey İÇ kutu: `.wrapb` zaten `overflow:auto` (yukarıda) ve ölçüm oturunca base.html'deki emniyet kilidi ona `.kaydir` ekleyip `html.sigdi .kaydir{overflow:auto!important}` ile açık tutuyor. Ölçtüm: 37 kayıtta .wrapb 520px'lik kutuda 1872px içeriği kaydırıyor. Burada bir zamanlar `.gunluk{overflow-y:auto}` ve `.gunluk .wrapb {overflow:visible}` vardı; ikisi de HİÇ İŞLEMEDİ. Dosyanın başındaki `.rail,.pad{overflow:hidden!important}` `.gunluk` ile aynı ağırlıkta ama `!important` taşıyor — niyeti yiyordu. Buraya `overflow` yazmayın, yine yenilir; bu ekranın kaydırmasını `.wrapb` ya da emniyet kilidi belirler. */ /* GÜNLÜK: kanıt satırı. Cümlenin altında, rakamın NEREDEN geldiği — bu ürünün her ekranındaki kural. Birden çok kanıt alt alta dizilir. */ .kan{display:block} .kan + .kan{margin-top:1px} .arabar select{height:34px;border:1px solid var(--border);border-radius:var(--r-sm); background:var(--surface);color:var(--text);padding:0 8px;font:inherit;font-size:var(--fs-sm)} /* --- SABAH BRİFİNGİ ------------------------------------------------------- Panelin geri kalanı KAYMAZ; burası bilerek kayar. Brifing bir çalışma ekranı değil bir METİNDİR: yukarıdan aşağı okunur. Ekrana sığdırmak için kısaltmak brifingin işini bozardı. `!important` ŞART — ve burada Günlük'ten farklı olarak GERÇEK bir hata düzeltiyor. Yalın `overflow-y:auto` yazılmıştı ve hiç işlemedi: dosyanın başındaki `.rail,.pad{overflow:hidden!important}` aynı ağırlıkta olduğu için `!important` olan kazanıyordu. Ölçtüm: 1280x620'de brifingin son 207px'i — "4 · Dün" bölümü ve kaynak dipnotu — ekranda yoktu ve kaydırılamıyordu. Emniyet kilidi burayı KURTARMIYOR: base.html yalnız `.wrapb, .conv-list, .thread, .blok-liste` tarar, brifingde bunların hiçbiri yok. Ölçülecek liste olmadığı için ``e `sigdi` bile eklenmiyor — yani kaydırmayı sağlayan tek şey aşağıdaki kural. Çubuk artık burada AYRICA açılmıyor: dosya başındaki genel kural kayan her yerde görünür bir çubuk veriyor. (Eskiden burada `scrollbar-width:thin!important` vardı; çubuğu TÜM PANELDE gizleyen bir kuralı yenmek için gerekiyordu — o kural kalktı.) */ .brifing{overflow-y:auto!important} .bri-kagit{max-width:840px;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);padding:22px 26px 18px} .bri-bas{display:flex;justify-content:space-between;align-items:baseline; border-bottom:2px solid var(--border-2);padding-bottom:10px;margin-bottom:6px} .bri-bas span{color:var(--text-2);font-size:var(--fs-xs)} .bri-tarih{font-size:var(--fs-sm);color:var(--text-2);font-weight:500;margin-left:8px} .bri-b{padding:14px 0;border-bottom:1px solid var(--border)} .bri-b:last-of-type{border-bottom:0} .bri-b h3{font-size:var(--fs-sm);margin:0 0 8px;letter-spacing:.01em; display:flex;align-items:baseline;gap:10px} .bri-tut{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text-2);font-weight:600} .bri-oz{margin:0;line-height:1.7} .bri-liste{margin:8px 0 0;padding-left:18px;line-height:1.8;color:var(--text-2)} .bri-tablo{width:100%;border-collapse:collapse} .bri-tablo td{padding:5px 8px 5px 0;border-bottom:1px dashed var(--border);vertical-align:top} .bri-tablo tr:last-child td{border-bottom:0} .bri-no,.bri-tur{white-space:nowrap;color:var(--text-2);font-variant-numeric:tabular-nums} .bri-hamle{color:var(--text-2)} .bri-alt{margin:14px 0 0;font-size:var(--fs-xs);color:var(--text-3);line-height:1.6} /* KÂĞIT. Brifing toplantıya girer, iletilir, asılır — o yüzden yazdırmada panelin kabuğu (menü, üst çubuk, düğmeler) tamamen kalkar ve sayfa siyah-beyaz okunur olur. */ @media print{ .side,.topbar,.psatir,.btn,.nav,.side-foot{display:none !important} .pad,.brifing{padding:0 !important;overflow:visible !important} .bri-kagit{max-width:none;border:0;padding:0;background:#fff;color:#000} .bri-kagit *{color:#000 !important;background:transparent !important} .pill{border:1px solid #999;padding:0 4px} .bri-b{break-inside:avoid} } /* --- MÜŞTERİLER: sıralama ve sınıf --------------------------------------- Sıralanabilir başlık. Hangi sütuna göre bakıldığı GÖRÜNMEZSE tablo sessizce yanlış okunur — seçili sütun kalınlaşır ve ok alır. */ .sirala{color:inherit;text-decoration:none;white-space:nowrap} .sirala:hover{color:var(--text);text-decoration:underline} .sirala.on{color:var(--text);font-weight:700} /* Sınıf rozeti. Renk SIRA bildirir (A en koyu), uyarı değil: geciken parayı ayrı bir işaret taşır, ikisini aynı renge yüklemek bilgiyi yok ederdi. */ .sinif{display:inline-block;padding:1px 7px;border-radius:var(--r-full); font-size:11px;font-weight:700;letter-spacing:.02em} .s-A{background:var(--fill-teal);color:var(--ink-teal)} .s-B{background:var(--fill-blue);color:var(--ink-blue)} .s-C{background:var(--fill-mut);color:var(--ink-mut)} .s-YENI{background:var(--fill-iris);color:var(--ink-iris)} /* RFM üçlüsü: puanın bileşenleri. Tek bir "skor" kara kutu olurdu. */ .rfm{font-variant-numeric:tabular-nums} /* Geçmiş çizgisindeki kalem satırı: "ne aldı" sorusunun cevabı tutarda değil kalemdedir, o yüzden talep satırı kalemleriyle açılır. */ .kalemsat{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;line-height:1.7} .kalemsat + .kalemsat{border-top:1px dashed var(--border);padding-top:2px} /* Depodan mı karşılandı, tedarikçiden mi soruldu — müşterinin bizi ne kadar zahmete soktuğunu gösteren asıl işaret. */ .kaynak{font-size:10px;font-weight:700;padding:0 5px;border-radius:var(--r-xs); text-transform:uppercase;letter-spacing:.03em} .k-depo{background:var(--fill-green);color:var(--ink-green)} .k-tedarik{background:var(--fill-amber);color:var(--ink-amber)} /* Müşteri adı hücresi — resim + ad tek tıklanabilir alan. */ .mad{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;min-width:0} .mad:hover b{text-decoration:underline} .mad > span:last-child{min-width:0} /* PASLANMAZ KİMLİĞİ — kalite · ölçü · yüzey. Ölçüler rakamdır ve tabular-nums ile hizalanınca göz "2×1500×3000" ile "3×1500×3000" satırını tarayarak ayırabiliyor; orantısal rakamlarda bu iki satır neredeyse aynı görünüyordu. KALİTE ayrı renkte, çünkü yanlış kalite yakın eşleşme değil YANLIŞ MALZEMEDİR. */ .kim{display:inline-block;padding:0 5px;border-radius:var(--r-xs); background:var(--surface-3);color:var(--text-2);font-size:11px;font-weight:600; margin-right:4px;font-variant-numeric:tabular-nums} /* Kalite, panelin HAZIR teal çifti ile ayrılır: --fill-teal/--ink-teal her iki temada da okunur diye ölçülmüş bir eştir. Kendi renk karışımımı yazmıştım; `--text-1` diye bir değişken bu panelde YOK (ad `--text`) ve renk sessizce miras alınıp çip sıradanlaşıyordu — tarayıcıda ölçmesem fark etmezdim. */ .kim.kal{background:var(--fill-teal);color:var(--ink-teal);letter-spacing:.02em} /* «Anlat, ben yazayım» */ .anlatgrid{display:grid;grid-template-columns:1fr 300px;gap:14px;flex:1 1 auto;min-height:0} .anlatform{display:flex;flex-direction:column;gap:10px;min-height:0} .anlatform textarea{flex:1 1 auto;min-height:150px;resize:none;line-height:1.65; font-size:var(--fs-md);padding:12px 14px} .anlatalt{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .anlatalt .mut{flex:1;font-size:var(--fs-sm);line-height:1.5} .anlatyan{border-left:1px solid var(--border);padding-left:14px;min-width:0;overflow:hidden} .anlatyan .ornek td{padding:4px 6px;border-top:1px solid var(--border);vertical-align:top} .anlatyan .ornek td:first-child{color:var(--text-3);white-space:nowrap;font-size:var(--fs-xs)} .anlatyan .ornek i{font-style:normal;background:var(--surface-2);padding:1px 5px; border-radius:var(--r-xs);font-size:var(--fs-xs);display:inline-block;margin:1px 0} /* Kanıt sütunu: modelin hangi sözden çıkardığı */ .kanit{font-size:var(--fs-xs);color:var(--text-3);font-style:italic;max-width:280px} tr.atlanan{opacity:.45} tr.atlanan td{text-decoration:line-through} @media (max-width:980px){ .anlatgrid{grid-template-columns:1fr;flex:0 0 auto} .anlatyan{border-left:0;border-top:1px solid var(--border);padding-left:0;padding-top:12px;overflow:visible} .anlatform textarea{min-height:180px} } @media (max-height:720px){ .anlatform textarea{min-height:110px} .anlatyan .ornek td{padding:2px 6px} } /* Ürünler sekmesine arama çubuğu eklendi (+30px) — dar ekranda sıkışsın */ @media (max-height:720px){ .urunbar{margin-bottom:6px} .arabar input{height:30px} .urunbar .btn{min-height:30px;padding-top:4px;padding-bottom:4px} } /* ========================================================================== SAHİPLE SOHBET — ana sayfa. Panel düğme ormanı değil, konuşma. ========================================================================== */ .konus{gap:0} .khead{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px} .khead .sub{margin-bottom:0;max-width:62ch} .khead-a{margin-left:auto;display:flex;gap:8px;align-items:center;flex:0 0 auto} /* İKİ SÜTUN — arama demosundaki ayrımın aynısı: solda konuşma, sağda kararın kendisi. Oran demonun TERSİ ve bilerek: demoda satılan şey motorun çözümü olduğu için sağ sütun geniştir; burada asıl iş sohbetin kendisidir, sağdaki sütun ona eşlik eder. Yükseklik ekrandan gelir (.pad zaten sabit yükseklikli ve kaydırmıyor); iki sütun da KENDİ İÇİNDE kayar, sayfa kaymaz. */ .ks-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:16px;align-items:stretch;flex:1 1 auto;min-height:0} .ks-sol{display:flex;flex-direction:column;min-height:0} .ks-yan{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto; border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface); box-shadow:var(--sh-xs);padding:12px} .ks-bas{font-weight:600;color:var(--text);font-size:var(--fs-md)} .ks-kart{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px} .ks-kart-bas{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:7px} .ks-bos{color:var(--text-2);font-size:var(--fs-sm);line-height:var(--lh-snug);margin:0} /* Sağ sütundaki onay kutusu sohbetin içindeki hâlinden farklı: üstte durur, kendi kenar boşluğuna ihtiyacı yoktur. */ .ks-yan .konay{margin-top:0} .ks-yan .kdurumkart{grid-template-columns:1fr 1fr;margin:0} /* Sohbette artık yalnız İZ var; iş sağda. */ .kdurum.bekle{color:var(--ink-amber);font-weight:600} @media (max-width:1100px){ /* Dar ekranda iki sütun yan yana durmaz: sağdaki sütun okunmaz genişliğe iner. Alt alta geçerler ve SAYFA kayar — kutular birbirini kesmez. */ .konus .ks-grid{grid-template-columns:1fr;align-items:start;flex:0 0 auto;min-height:auto} .konus.pad{overflow-y:auto} .ks-sol{min-height:60vh} .ks-yan{overflow:visible;min-height:auto} } .kthread{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column; gap:12px;padding:4px 2px 8px} .kmsg{display:flex;gap:10px;max-width:78%} .kmsg.ben{margin-left:auto;flex-direction:row-reverse} .kavatar{flex:0 0 26px;height:26px;border-radius:var(--r-full);display:grid;place-items:center; background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13px;margin-top:2px} .kbody{min-width:0} .ktext{padding:10px 13px;border-radius:12px;font-size:var(--fs-md);line-height:1.55; white-space:pre-wrap;word-break:break-word} .kmsg.ai .ktext{background:var(--surface);border:1px solid var(--border);border-top-left-radius:4px} .kmsg.ben .ktext{background:var(--accent-soft);border:1px solid var(--accent-line); color:var(--text);border-top-right-radius:4px} /* Tablo cevabı (borçlular, kritik stok…) */ .ktablo{margin-top:7px;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden} .ksatir{display:flex;justify-content:space-between;gap:10px;padding:6px 11px; font-size:var(--fs-sm);border-top:1px solid var(--border);background:var(--surface)} .ksatir:first-child{border-top:0} .ksatir span:last-child{color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap} /* Onay kartı — yazma işlemi ASLA onaysız çalışmaz */ .konay{margin-top:8px;border:1px solid var(--amber);background:var(--amber-soft); border-radius:var(--r-sm);padding:10px 12px} .konay-o{font-size:var(--fs-sm);margin-bottom:8px} .konay-a{display:flex;gap:8px} .kdurum{margin-top:6px;font-size:var(--fs-xs)} .kdurum.ok{color:var(--ink-green)} .kdurum.iptal{color:var(--text-3)} .klink{display:inline-block;margin-top:6px;font-size:var(--fs-sm);color:var(--accent)} /* Örnek komut çipleri (sohbet boşken) */ .kornek{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0} .kchip{border:1px solid var(--border);background:var(--surface);color:var(--text-2); border-radius:var(--r-full);padding:5px 12px;font:inherit;font-size:var(--fs-sm);cursor:pointer} .kchip:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)} .kyaz{display:flex;gap:8px;flex:0 0 auto;padding-top:10px;border-top:1px solid var(--border)} /* min-width:0 ŞART: flex ögesi varsayılan olarak içeriğinden dar olamaz, yani mikrofon düğmesi eklendiğinde kutu daralmak yerine satırı taşırırdı. */ .kyaz input{flex:1;min-width:0;height:42px;font-size:var(--fs-md)} /* --- MOTORUN ÇÖZÜMÜ (sağ sütun) -------------------------------------- Arama demosunun sağ sütunundan (`.dm-motor`) geri getirildi. Demo tek sohbete katılırken bu ayrıntı düşmüş, sağ sütun çoğu zaman boş duran bir yer tutucuya dönmüştü. Adlar `dm-` değil `mc-`: artık bir demonun değil, sohbetin kendi parçası. */ .mc-k{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:10px} .mc-soy{font-size:11px;color:var(--text-2);margin-bottom:7px} .mc-cip{display:inline-block;font-size:11px;padding:2px 7px;border-radius:20px; background:var(--fill-mut);color:var(--ink-mut);margin:0 5px 5px 0} .mc-cip b{font-weight:600;color:var(--text)} /* Çözülemeyen alan KIRMIZI durur — eksiği gizlemek ekranı yalancı yapar. */ .mc-cip.bos{background:var(--fill-red);color:var(--ink-red)} .mc-cip.bos b{color:var(--ink-red)} .mc-stok{margin-top:7px;padding-top:7px;border-top:1px dashed var(--border-2);font-size:12px} .mc-stok.var{color:var(--ink-green)} .mc-stok.yok{color:var(--ink-red)} .mc-not{font-size:11px;color:var(--ink-amber);margin-top:5px} /* --- sesli sohbet: mikrofon + sesli cevap ---------------------------- */ .kmic{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center; border:1px solid var(--border);background:var(--surface);color:var(--text-2); border-radius:var(--r-md);cursor:pointer} .kmic:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)} .kmic.kapali{opacity:.55} /* KAYITTAYKEN BELLİ OLSUN: açık mikrofonun sessizce durması olmaz. */ .kmic.kayitta{border-color:var(--red);color:#fff;background:var(--red); animation:kmicNabiz 1.4s ease-in-out infinite} @keyframes kmicNabiz{50%{opacity:.62}} @media (prefers-reduced-motion:reduce){.kmic.kayitta{animation:none}} .ksesli.on{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)} /* Durum satırı yer TUTMAZ: boşken yüksekliği sıfır, yoksa yazı kutusu her mikrofon kullanımında aşağı zıplardı. */ .kses-durum{font-size:var(--fs-sm);color:var(--text-3);min-height:0;line-height:1.5} .kses-durum.var{min-height:22px;padding:2px 0} @media (max-width:820px){ .kmsg{max-width:92%} .khead{flex-wrap:wrap} .khead-a{margin-left:0;width:100%} } @media (max-height:720px){ .khead .sub{display:none} .kyaz input{height:36px} .ktext{padding:8px 11px} } /* ========================================================================== YOĞUNLUK GEÇİŞİ — "kocaman düğmeler ve boşa giden alan" geri bildirimi. Yönetim paneli bir tanıtım sayfası değil, ÇALIŞMA ekranıdır: aynı ekranda daha çok bilgi görünmeli. Dokunma hedefi ≥24px kalır (WCAG 2.2 AA). ========================================================================== */ /* --- kontroller küçülür --- */ .btn{height:28px;padding:0 10px;font-size:var(--fs-sm)} .btn.lg{height:32px;padding:0 14px;font-size:var(--fs-sm)} .btn.xs{height:24px;padding:0 8px} input,select,textarea{font-size:var(--fs-sm)} .addbar{padding:7px 10px;margin-bottom:8px;gap:6px} .addbar input,.addbar select{height:28px} .addbar .addlb{font-size:var(--fs-xs)} .arabar input{height:28px} .stepbtn{width:22px;height:22px} /* --- sekmeler ve başlıklar --- */ .bigtabs{padding:2px;border-radius:8px} .bigtabs a{padding:5px 12px;font-size:var(--fs-sm);border-radius:6px} .phead{margin-bottom:8px} .phead .h{font-size:var(--fs-xl);margin-bottom:1px} .phead .sub{margin-bottom:6px;font-size:var(--fs-sm)} .sec-t{font-size:var(--fs-sm);margin-bottom:6px} /* --- tablolar: daha çok satır sığsın --- */ thead th{height:30px;font-size:var(--fs-xs)} .wrapb td{padding-top:7px;padding-bottom:7px} .pager{padding-top:6px;font-size:var(--fs-xs)} /* --- kartlar --- */ .kpi{padding:8px 11px} .kpi b{font-size:var(--fs-lg)} .stat{padding:10px 12px} .apr{padding:9px 11px;gap:10px} .setrow{padding:8px 12px} /* ========================================================================== BUGÜN — işletmenin genel durumu. Bölümlere girmeden önce rakamlar. Tasarım kuralı: BÜYÜK KART DEĞİL, YOĞUN BİLGİ. Aynı ekranda para durumu, bekleyen işler, dikkat isteyenler, varlık ve son hareketler birlikte. ========================================================================== */ .home{gap:0} /* --- para şeridi: 6 rakam tek satırda --- */ /* auto-fit: 3 metrik de 6 metrik de düzgün dursun, 6'ya zorlanmasın. */ /* auto-FILL (auto-fit değil): üç metrik geniş ekranda balon gibi şişmesin, kendi ölçüsünde kalıp sola yaslansın. */ .ozet{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px;margin-bottom:14px;flex:0 0 auto} /* "Yapay zekâ bugün" — para şeridinin altında TEK satır. Kart yapılmadı: bu bir rakam tablosu değil, bir cümle. Ekranda yer kaplamadan "gece gelen mesajlar karşılandı"yı söylemesi yeterli. */ .aibar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex:0 0 auto; margin-bottom:14px;padding:10px 14px;border:1px solid var(--border); border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-xs); font-size:var(--fs-sm);color:var(--text-2)} .aibar b{color:var(--text-1);font-weight:650;font-variant-numeric:tabular-nums} .aibar em{font-style:normal;color:var(--text-3);margin:0 2px} .ai-i{display:inline-flex;align-items:center;gap:6px;font-weight:600; color:var(--text-1);margin-right:4px} .ai-i i{width:6px;height:6px;border-radius:var(--r-full);background:var(--green)} .aibar .ai-uyar{color:var(--ink-amber);font-weight:600} .aibar .ai-uyar:hover{text-decoration:underline} .aibar .blok-l{margin-left:auto} /* Metrik kartı RAKAMLA konuşur. Eskiden etiket ile değer neredeyse aynı ağırlıktaydı ve ekranın en üst şeridi "0,00 ₺" diye fısıldıyordu. */ .oz-k{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface); padding:12px 14px;min-width:0;box-shadow:var(--sh-xs); transition:border-color .14s ease} .oz-k:hover{border-color:var(--border-2)} .oz-l{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-bottom:5px; font-weight:500;letter-spacing:.005em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .oz-k b{display:block;font-size:var(--fs-num);font-weight:640;line-height:1.05; letter-spacing:-.02em;font-variant-numeric:tabular-nums; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .oz-k b.iyi{color:var(--ink-green)} .oz-k b.kotu{color:var(--ink-red)} .oz-k small{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-top:4px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* --- iki sütunlu bloklar --- */ /* İki sütun EKRANI DOLDURUR: eskiden içerik kadar yer kaplıyor ve altta 400px boşluk bırakıyordu. Liste uzunsa blok kendi içinde kayar. */ .ikili{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px; flex:1 1 auto;min-height:0} .blok{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface); padding:12px 14px;min-width:0;display:flex;flex-direction:column;min-height:0; box-shadow:var(--sh-xs)} .blok>.sat:first-of-type{margin-top:2px} .blok-liste{flex:1 1 auto;min-height:0;overflow:auto} .blok-b{display:flex;align-items:center;gap:7px;margin-bottom:5px;flex:0 0 auto} .blok-b .sec-t{margin-bottom:0} .blok-l{margin-left:auto;font-size:var(--fs-xs);color:var(--text-3)} .blok-l:hover{color:var(--accent)} .rozet{background:var(--accent);color:var(--accent-ink);border-radius:var(--r-full); font-size:10px;font-weight:700;padding:1px 6px} /* --- satır: liste öğesi, kart değil --- */ .sat{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border); min-width:0} .sat:first-of-type{border-top:0} .sat.ince{padding:4px 0} .sat-b{min-width:0;flex:1} .sat-b b{display:block;font-size:var(--fs-sm);font-weight:600;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} /* Açıklama satırı GEREKSİZ kırpılmasın: 2000px'lik bir ekranda "Proformayı göndermek sizin kararı…" diye kesiliyordu. İki satıra kadar sarsın, ondan sonra kırpsın. */ .sat-b span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; font-size:var(--fs-xs);color:var(--text-2);overflow:hidden;line-height:1.45} .sat-t{font-size:var(--fs-sm);font-weight:600;white-space:nowrap} .sat.karar{border-left:2px solid var(--amber);padding-left:7px} .ikon{flex:0 0 20px;height:20px;border-radius:var(--r-sm);display:grid;place-items:center; font-size:11px;font-weight:700} .ikon.red{background:var(--fill-red);color:var(--ink-red)} .ikon.amber{background:var(--fill-amber);color:var(--ink-amber)} .ikon.mut{background:var(--fill-mut);color:var(--ink-mut)} .bos{margin:4px 0 0;font-size:var(--fs-xs);color:var(--text-3)} /* --- varlık üçlüsü --- */ .varlik{flex:0 0 auto;display:flex;gap:14px;flex-wrap:wrap} .varlik span{display:flex;flex-direction:column;min-width:0} .varlik i{font-style:normal;font-size:var(--fs-xs);color:var(--text-3)} .varlik b{font-size:var(--fs-md);font-weight:650} .varlik small{font-size:10px;color:var(--text-3)} .varlik .net{margin-left:auto;text-align:right} .varlik b.iyi{color:var(--ink-green)} .varlik b.kotu{color:var(--ink-red)} @media (max-width:1100px){ .ozet{grid-template-columns:repeat(3,1fr)} } @media (max-width:820px){ .ozet{grid-template-columns:repeat(2,1fr)} .ikili{grid-template-columns:1fr} } @media (max-height:720px){ .ozet{gap:6px;margin-bottom:7px} .oz-k{padding:6px 9px} .oz-k b{font-size:var(--fs-md)} .oz-k small{display:none} .blok{padding:7px 10px} .ikili{gap:8px;margin-bottom:8px} } /* Sohbet boşken ortadaki boşluğu dolduran durum kartı — ana sayfa da işletme hakkında bir şey söylesin. Tıklanabilir: ilgili bölüme gider. */ .kdurumkart{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:6px 0 0} .kd{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface); padding:9px 11px;min-width:0;display:block} .kd:hover{border-color:var(--accent-line);background:var(--accent-soft)} .kd i{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--text-3); margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kd b{display:block;font-size:var(--fs-md);font-weight:650;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .kd b.kotu{color:var(--ink-red)} @media (max-width:1100px){ .kdurumkart{grid-template-columns:repeat(3,1fr)} } @media (max-width:820px){ .kdurumkart{grid-template-columns:repeat(2,1fr)} } /* Bugün 1366×620'de 64px taşıyordu — kısa ekranda son bloğu gizle, üst iki blok zaten en önemlisi (para + bekleyen iş). */ @media (max-height:700px){ .home .ikili:last-of-type{display:none} .ozet{margin-bottom:6px} } /* Varlık artık tam genişlik ŞERİT — kart içinde 250px boşluk kalmasın. Son hareketler de tam genişlik, iki sütuna akar. */ .varlik{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start; border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface); padding:8px 12px;margin-bottom:10px;flex:0 0 auto} .varlik small.kotu{color:var(--ink-red)} .blok.son{flex:1 1 auto;min-height:0;overflow:hidden} .hlist{columns:2;column-gap:20px} .hlist .sat{break-inside:avoid;border-top:1px solid var(--border)} /* Bloklar ARTIK EKRANI DOLDURUR. Eskiden `align-items:start` vardı — içerik kadar yer kaplasınlar diye. Sonuç: 900px'lik ekranda kartların altında 250px boşluk. Şimdi eşit yükseklikte uzuyorlar, uzun liste kendi içinde kayıyor (.blok-liste). Sayfa yine kaymıyor. */ .ikili{align-items:stretch} @media (max-width:820px){ .hlist{columns:1} } @media (max-height:700px){ .home .ikili:last-of-type{display:grid} /* artık gizlemeye gerek yok */ .blok.son{display:none} /* kısa ekranda son hareketler gizli */ .varlik{padding:6px 10px;margin-bottom:6px} } /* Telefonda .pad zaten kayıyor — son hareketler bloğu kırpılmasın, aksın */ @media (max-width:820px){ .blok.son{flex:0 0 auto;overflow:visible} .varlik{gap:12px} } /* ========================================================================== ODAK + HAREKET — klavye kullanıcısı nerede olduğunu görsün ========================================================================== */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* Satırlar tıklanabilir hissettirsin — imleç ve zemin birlikte söylesin. */ tbody tr{transition:background-color .12s ease} .wrapb tbody tr:hover{background:var(--surface-2)} /* ---- ÖLÇÜM OTURDU: artık kesecek bir şey yok ---------------------------- Yukarıdaki kaplar varsayılan olarak KAYDIRILABİLİR. Sebebi savunma: sunucu ilk yüklemede bilerek fazla satır basar (ölçüm tek turda tam sonuç versin diye) ve JS çalışmazsa o fazlalık kaydırmayla ULAŞILABİLİR kalmalıdır — ekranda duran ama erişilemeyen iş, bu panelde daha önce iki kez hataya yol açtı. base.html'deki ölçüm oturunca gelir: sunucu artık tam sığacak kadar gönderiyordur, kaydırma da gereksizdir. Kapanır. */ /* KESMEK YERİNE KAYDIRMAK. Burası bir süre `overflow:hidden` idi ve gerekçesi şuydu: ölçüm oturduysa sunucu tam sığacak kadar satır gönderiyordur, kesecek bir şey kalmaz. Gerekçe TAHMİNE dayanıyordu ve tahmin bir satır şaştığında sonuç sessiz KAYIP oluyordu. Ölçtüm (780×400, Stoklar): kutu taşıyor (`scrollHeight > clientHeight`) ama çubuk 0px ve `.kaydir` de eklenmemiş — yani ekranda duran ama ulaşılamayan satır. `emniyet()` kilidi bunu ancak kendi çalıştığı anda yakalıyor; yazı tipi sonradan oturunca ya da pencere değişince kaçırıyor. `auto` ile taşma varsa çubuk çıkar, yoksa çıkmaz. Yanlış tahminin bedeli ince bir çubuk; eskisinde bedel kaybolan satırdı. */ html.sigdi .wrapb, html.sigdi .conv-list, html.sigdi .thread, html.sigdi .blok-liste{overflow:auto} /* ========================================================================== TEK SATIRLIK BAŞLIK — "bir bakışta anlaşılsın" -------------------------------------------------------------------------- Her sayfa aynı dört katmanla açılıyordu: başlık, üç satırlık açıklama paragrafı, sekme şeridi, metrik kartları. Dördü birden ~330px yiyordu; asıl iş (tablo) ekranın alt yarısına sıkışıyordu ve göz nereye bakacağını bilemiyordu. Dördü tek satıra iniyor: BAŞLIK · sekmeler · ————— · rakamlar Metrikler kart değil METİN: "0,00 ₺" yazan 190×90px'lik bir kutu, aynı şeyi söyleyen bir cümleden daha fazla yer kaplıyor ama daha az anlatıyor. ========================================================================== */ .psatir{display:flex;align-items:center;gap:var(--s4);flex:0 0 auto; margin-bottom:var(--s4);min-height:38px;flex-wrap:wrap} .psatir .h{font-size:var(--fs-xl);font-weight:660;letter-spacing:-.02em; margin:0;flex:0 0 auto} .psatir .bigtabs{margin:0} /* Rakamlar sağa yaslanır: solda "neredeyim", sağda "durum ne". */ .psatir .ozet{margin:0 0 0 auto} /* Metrik şeridi: kart ızgarası değil, tek satır metin. */ .ozet{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap; margin:0 0 var(--s4);flex:0 0 auto;font-size:var(--fs-sm);color:var(--text-3)} .oz-k{display:inline-flex;align-items:baseline;gap:6px;border:0;padding:0; background:none;box-shadow:none;min-width:0} .oz-k + .oz-k{border-left:1px solid var(--border);padding-left:var(--s3)} .oz-l{display:inline;font-size:var(--fs-sm);color:var(--text-3);margin:0; font-weight:450;white-space:nowrap} .oz-k b{display:inline;font-size:var(--fs);font-weight:650;color:var(--text-1); letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap} .oz-k small{display:inline;font-size:var(--fs-xs);color:var(--text-3);margin:0} /* Sayfanın kuralını söyleyen TEK satır. Üç satırlık ders değil. */ .pkural{font-size:var(--fs-sm);color:var(--text-3);margin:0 0 var(--s4); flex:0 0 auto} .pkural b{color:var(--text-2);font-weight:600} .pkural a{color:var(--accent)} /* ÇERÇEVE TABLONUN, ÖLÇÜ KUTUNUN. Az kayıt varken ortada 300px'lik ÇERÇEVELİ boşluk kalıyordu; çerçeveli boşluk, çerçevesizden çok daha gürültülü. İlk denemem kutuyu içeriği kadar yapmaktı — ama ölçüm kutunun KULLANILABİLİR yüksekliğini okuyor. İçerik kadar olunca "sığan satır sayısı = şu anki satır sayısı" oldu ve sayı her turda aşağı indi: Stoklar 6 üründen 2'sini gösterir hâle geldi. Doğrusu: kutu görünmez bir ÖLÇÜ KABI olarak ekranı doldurmaya devam etsin, çerçeveyi içindeki tablo taşısın. Ölçü doğru, boşluk çerçevesiz. */ .wrapb:not(.card-pad){border:0;background:none;box-shadow:none;flex:1 1 auto} .wrapb:not(.card-pad) > table{border:1px solid var(--border); border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-xs)} /* border-collapse:separate ile köşeler tek tek yuvarlanır. */ .wrapb > table thead tr:first-child th:first-child{border-top-left-radius:var(--r-lg)} .wrapb > table thead tr:first-child th:last-child{border-top-right-radius:var(--r-lg)} .wrapb > table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r-lg)} .wrapb > table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-lg)} .wrapb > table tbody tr:last-child td{border-bottom:0} /* ---- GELEN KUTUSU: üç süzgeç satırı yerine iki -------------------------- */ /* Arama + kanal aynı satırda. Kanal çip şeridi (.kfiltre) kaldırıldı: listeden önce üçüncü bir satır ve durum süzgeciyle yarışan ikinci bir boyuttu. */ .subbar.alt{display:flex;flex-wrap:nowrap;gap:var(--s2); border-bottom:1px solid var(--border);background:var(--surface)} /* `flex:1 1 0` şart: `auto` iken temel genişlik input'un %100'ü oluyor, açılır liste alt satıra düşüyor ve tek satıra indirmenin anlamı kalmıyordu. */ .subbar.alt .search-i{flex:1 1 0;min-width:0;width:auto;height:28px;font-size:var(--fs-sm)} .subbar.alt select{flex:0 0 auto;width:auto;height:28px;font-size:var(--fs-sm); max-width:46%} /* Sekmeler ve hazır yanıtlar tek satır; çipler kalanı doldurur. */ .ctabs{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s2); flex-wrap:wrap} .ctabs .macros{display:inline-flex;flex-wrap:wrap;gap:6px;margin:0 0 0 var(--s2)} /* ---- İKİNCİL SAYFALAR: açıklama başlığın ÜSTÜNDE değil, YANINDA --------- Ayarlar, KVKK, Kullanıcılar gibi ara sıra girilen ekranlarda cümleyi silmek doğru olmaz — kural anlatıyor. Ama başlığın altında üç satır body metni olarak durmasına da gerek yok; yanına, küçük ve sessiz. */ .phead > div:first-child{display:flex;align-items:baseline;gap:var(--s4); flex-wrap:wrap;min-width:0} .phead .h{flex:0 0 auto;margin-bottom:0} .phead .sub{flex:1 1 340px;margin:0;font-size:var(--fs-sm);color:var(--text-3); max-width:78ch} .phead{margin-bottom:var(--s4);align-items:center} /* Üç ayrı sekme bileşeni (bigtabs · subtabs · seg) üç ayrı görsel dil demekti. subtabs artık bigtabs gibi görünür — aynı iş, aynı biçim. */ .subtabs{display:inline-flex;gap:2px;margin:0 0 var(--s4);border-bottom:0; background:var(--surface-2);border-radius:10px;padding:3px} .subtabs a{font-size:var(--fs);font-weight:500;color:var(--text-2); padding:8px 18px;border-radius:8px;border-bottom:0;margin-bottom:0} .subtabs a:hover{color:var(--text)} .subtabs a.on{background:var(--surface);color:var(--text);font-weight:600; border-bottom:0;box-shadow:var(--sh-xs)} /* Bugün'ün tek satırlık yapay zekâ cümlesi. `.aibar` kutusundan bu satıra taşınınca ayraçlar ve sağdaki bağlantı biçimsiz kaldı — cümle "…sizi bekliyorçağrı kaydı →" diye bitişik okunuyordu. */ .pkural.aicumle{display:flex;align-items:center;gap:5px;flex-wrap:wrap} .pkural.aicumle > i{width:6px;height:6px;border-radius:var(--r-full); background:var(--green);flex:0 0 auto} .pkural.aicumle b{color:var(--text-1);font-weight:650; font-variant-numeric:tabular-nums} .pkural.aicumle em{font-style:normal;color:var(--border-2);margin:0 3px} .pkural.aicumle .ai-uyar{color:var(--ink-amber);font-weight:600} .pkural.aicumle .ai-uyar:hover{text-decoration:underline} .pkural.aicumle .blok-l{margin-left:auto;color:var(--text-3)} .pkural.aicumle .blok-l:hover{color:var(--accent)} /* Bugün'ün blokları içerikleri kadar. Burada ölçüm YOK (aşağıya bakın): Bugün bir özet ekranı, listeleri doğası gereği kısa ve her birinin altında "tümü →" var — yani hiçbir şey ulaşılmaz olmuyor. Germek, 2 satırlık bir listenin altında 700px'lik çerçeveli boşluk demekti. */ .ikili{align-items:start} .blok-liste{flex:0 1 auto} /* Emniyet kilidi: ölçüm oturduktan sonra hâlâ taşan kap kaydırılabilir kalır. `html.sigdi` kuralını yener — kesmektense kaydırmak. */ html.sigdi .kaydir{overflow:auto!important} /* ========================================================================== PARA ŞERİDİ — Bugün ekranından kalan tek satır -------------------------------------------------------------------------- Bugün ayrı bir ekrandı ve "Kararınızı bekleyenler" bloğu, Sohbetler'in "Bekleyen" süzgeciyle AYNI kuyruktu: aynı iş iki ekranda iki farklı biçimde. Ekran katıldı; geriye kalan gerçek içerik — günün parası ve yapay zekânın bugün ne yaptığı — kuyruğun üstünde tek satır. ========================================================================== */ .paraserit{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap; flex:0 0 auto;padding:9px var(--s5);border-bottom:1px solid var(--border); background:var(--surface);font-size:var(--fs-sm);color:var(--text-3)} .paraserit .oz-k + .oz-k{border-left:1px solid var(--border);padding-left:var(--s3)} .ps-ai{display:inline-flex;align-items:center;gap:5px;margin-left:auto; color:var(--text-3)} /* Buradaki yeşil nokta KALDIRILDI: koşulsuz yeşildi — hiçbir veriye bakmıyor, hiçbir zaman başka renk olmuyordu. Üst çubukta zaten ETİKETLİ bir durum ışığı var ("deskos çalışıyor"); bu onun etiketsiz ikinci kopyasıydı ve "bir şeyi bildiriyor" izlenimi veriyordu. Satırın kendisi ("bugün 7 talep geldi · 5 yanıt deskos'tan") zaten rakamla konuşuyor. */ .ps-ai b{color:var(--text-2);font-weight:650;font-variant-numeric:tabular-nums} .ps-ai em{font-style:normal;color:var(--border-2);margin:0 3px} .ps-ai .ai-uyar{color:var(--ink-amber);font-weight:600} .ps-ai .ai-uyar:hover{text-decoration:underline} /* Şerit ızgaranın DIŞINDA olduğu için gelen kutusu artık kalan yeri alır. */ /* Şerit ızgaranın DIŞINDA; gelen kutusu kalan yeri alır. NOT: buraya bir süre ısrarla esnek kutu/ızgara kuralı yazdım çünkü dosya bölmesi 900px'lik ekranda 1244px oluyordu. Hiçbiri tutmadı — çünkü sorun CSS'te değildi: `.paraserit`in KAPANIŞ ETİKETİ eksikti ve `.inbox` onun İÇİNDE kalıyordu. Dört tur CSS'i suçladım. Önce yapıyı doğrula. */ .content:has(.paraserit){display:grid;grid-template-rows:auto minmax(0,1fr)} .content:has(.paraserit) .inbox{min-height:0;height:auto} /* Sistem uyarısı satırı: müşteri değil, sistem söylüyor — ama yine de iş. */ .conv.uyari{grid-template-columns:24px 1fr auto;align-items:center} .conv.uyari .pic.ikon{width:24px;height:24px;font-size:13px;font-weight:700; border-radius:var(--r-sm);display:grid;place-items:center} .conv.uyari .pic.ikon.amber{background:var(--fill-amber);color:var(--ink-amber)} .conv.uyari .pic.ikon.red{background:var(--fill-red);color:var(--ink-red)} .conv.uyari .rt{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap} .conv.uyari:hover .rt{color:var(--accent)} @media (max-width:900px){ .paraserit{padding:8px var(--s4);gap:var(--s2)} .ps-ai{display:none} /* dar ekranda para kalsın, anlatı gitsin */ } /* ---- Tahsilat takibi ---------------------------------------------------- */ /* Ad ile telefon aynı satırda birbirine giriyordu; tutar da sıkışıp "340,00 / ₺" diye ikiye bölünüyordu. Hazırlanan metin sütunu açgözlü. */ .tahs-ad{display:flex;align-items:center;gap:8px;min-width:0} .tahs-ad b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tahs-tel{display:block;font-size:var(--fs-xs);color:var(--text-3); margin-top:2px;white-space:nowrap} .tahs t,.wrapb td.tahs-tutar{white-space:nowrap} .tahs-metin{color:var(--text-3);font-size:var(--fs-sm);line-height:var(--lh-snug); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden} /* ---- Kuyruk satırı: para ve yaş görünür ---------------------------------- */ /* Yönetici iki şeye bakıp seçiyor: kaç para, ne kadar bekledi. İkisi de satırda yoktu; sıralama da konuşmanın AÇILDIĞI sıraydı. */ .conv .nm{display:flex;align-items:baseline;gap:8px} .nm-tutar{margin-left:auto;font-size:var(--fs-sm);font-weight:650; color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap} .conv.sel .nm-tutar,.conv.unread .nm-tutar{color:var(--text-1)} /* İki gündür bekleyen iş, saatinden belli olsun. */ .conv .rt.bekledi{color:var(--ink-amber);font-weight:600} /* Şerit rakamları TIKANMIŞ parayı gösteriyor; tıklanınca tıkanıklığa gider. */ a.oz-k{text-decoration:none;border-radius:6px;padding:2px 4px;margin:-2px -4px} a.oz-k:hover{background:var(--surface-2)} a.oz-k:hover .oz-l{color:var(--text-2)} /* ---- "Bekleyen karar": aşama adı değil, HAMLE ----------------------------- Sütun bir karar vaat edip "Taslak" veriyordu. Üç ton var: sizde (top sizde) · bekliyor (başkasında) · bitti (iş kapandı). */ .hamle{display:inline-block;font-size:var(--fs-sm);font-weight:600; line-height:1.3} .hamle-sizde{color:var(--accent)} .hamle-bekliyor{color:var(--text-2);font-weight:500} .hamle-bitti{color:var(--text-3);font-weight:500} .sub2.uyari{color:var(--ink-amber)} .sub2.kotu{color:var(--ink-red)} /* ---- Müşteri sayfası: üç sütun, üçü de içeriği kadar ---------------------- */ .ucul{display:grid;grid-template-columns:repeat(3,1fr);gap:12px; align-items:start;min-height:0} @media (max-width:1200px){.ucul{grid-template-columns:1fr 1fr}} @media (max-width:820px){.ucul{grid-template-columns:1fr}} .ucul .sat{text-decoration:none} .ucul .hamle{font-size:var(--fs-xs)} /* Sağ paneldeki cari limit doluluğu — "ne kadar yer kalmış" tek bakışta. */ .limitbar{height:5px;border-radius:var(--r-full);background:var(--surface-3); overflow:hidden;margin:6px 0 8px} .limitbar i{display:block;height:100%;background:var(--green); border-radius:var(--r-full)} .limitbar i.yari{background:var(--amber)} .limitbar i.dolu{background:var(--red)} .odeme-uyari{font-size:var(--fs-xs);color:var(--ink-amber);margin-top:6px} .odeme-iyi{font-size:var(--fs-xs);color:var(--ink-green);margin-top:6px} .rcard h4 a{color:inherit;text-decoration:none} .rcard h4 a:hover{color:var(--accent)} .pkural .uyari{color:var(--ink-amber)} /* ========================================================================== DOSYA — "topladığı bilgilerin hepsini gösterir" -------------------------------------------------------------------------- Özimeks'in üçüncü bileşeni. Ekranın ortasında eskiden YAZIŞMA vardı ve toplanan bilgiler (özellikle tedarikçi cevapları) başka bir ekranda, açılır bir kutunun içindeydi: sistemin en çok emek verdiği şey en derindeydi. Artık dosya ürün, yazışma kanıt. ========================================================================== */ .dtabs{display:flex;align-items:center;gap:var(--s1);flex:0 0 auto; padding:8px var(--s5);border-bottom:1px solid var(--border); background:var(--surface)} .dtab{font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--text-3); background:none;border:0;padding:5px 12px;border-radius:8px;cursor:pointer} .dtab:hover{color:var(--text-1)} .dtab.on{background:var(--surface-2);color:var(--text-1)} .dtoplam{margin-left:auto;font-size:var(--fs);font-weight:680;color:var(--text-1); font-variant-numeric:tabular-nums} /* Aşama: boru hattının neresindeyiz. HAZIR "sıra sende" demek. */ .asama{font-size:var(--fs-xs);font-weight:650;padding:3px 9px; border-radius:var(--r-full);white-space:nowrap} .asama-hazir{background:var(--fill-green);color:var(--ink-green)} .asama-tedarikci{background:var(--fill-amber);color:var(--ink-amber)} .asama-depo,.asama-talep{background:var(--surface-3);color:var(--text-2)} .asama-gitti{background:var(--fill-blue);color:var(--ink-blue)} .asama-bitti{background:var(--surface-2);color:var(--text-3)} .dosya{flex:1 1 0;min-height:0;overflow:auto; padding:var(--s4) var(--s5);background:var(--surface); display:flex;flex-direction:column;gap:var(--s4)} .dblok{flex:0 0 auto} .dblok h5{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3);margin:0 0 8px} .dref{font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2); font-variant-numeric:tabular-nums} .dsat{display:flex;align-items:center;gap:10px;padding:7px 0; border-bottom:1px solid var(--border);font-size:var(--fs)} .dsat:last-child{border-bottom:0} .dad{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .dsat .num{font-weight:650;font-variant-numeric:tabular-nums} /* Tedarikçi cevapları — kaç adet, kaça, ne zaman. */ .dgrup{border:1px solid var(--border);border-radius:var(--r-lg); padding:10px 12px;margin-bottom:8px;background:var(--surface-2)} .dgrup-b{font-size:var(--fs-sm);font-weight:650;margin-bottom:6px; display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} .dgrup-b .mut{font-weight:500;font-size:var(--fs-xs)} .dcevap{display:flex;align-items:center;gap:10px;padding:6px 0; font-size:var(--fs-sm);border-top:1px solid var(--border)} .dcevap.yok{opacity:.62} .dadet{flex:0 0 auto;color:var(--text-2);white-space:nowrap} .dcevap .num{flex:0 0 auto;font-weight:680;font-variant-numeric:tabular-nums} .dgun{flex:0 0 auto;font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap; min-width:96px;text-align:right} .dnot{font-size:var(--fs-xs);color:var(--text-3);padding:0 0 6px 2px} /* Kuyruk satırında aşama rozeti. */ .conv .asama{margin-left:6px} /* `.thread{display:flex}` dosyadaki `.hidden{display:none}` kuralından SONRA geldiği için onu yeniyordu: Dosya sekmesindeyken yazışma altta duruyordu. */ .thread.hidden,.composer.hidden,.dosya.hidden{display:none} /* Dosya KARARLA biter — "önce bulgular, sonra karar, en son mesaj". */ .dkarar{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--border)} .dkarar-r{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap} .dkarar-t{font-size:var(--fs);color:var(--text-2)} .dkarar-t b{font-size:var(--fs-lg);font-weight:700;color:var(--text-1); font-variant-numeric:tabular-nums;margin-left:6px} .dbekle{font-size:var(--fs-sm);color:var(--ink-amber);margin:0; line-height:var(--lh-snug)} /* Toplanan tutar bir TEKLİF değil, bir BİLGİdir: fiyat kararı Özimeks'in ve deskos'un dışında veriliyor. Rakamın yanındaki not bunu söyler. */ .dkarar-t small{display:block;font-size:var(--fs-xs);color:var(--text-3); font-weight:400;margin-top:2px} /* ---- Gelen kutusu ızgarası GERÇEKTEN sınırlansın ------------------------- `.inbox{height:100%}` yetmiyordu: ızgara satırı örtük olarak `auto` ve `auto` satır, içeriğe göre BÜYÜR. Yani sütunlardan biri uzayınca satır da uzuyor, `min-height:0` olan çocuklar da onunla birlikte uzuyordu. Dosya bölmesi 900px'lik ekranda 1276px oluyor ve sonundaki "Bulgular" bloğu ekranın ALTINDA kalıyordu — HTML'de vardı, gözle görünmüyordu. `minmax(0,1fr)` satırı kaba kilitler; çocuklar artık gerçekten kaydırır. */ /* ========================================================================== İŞLER KAYDIRILIR — sahibin izniyle -------------------------------------------------------------------------- Bütün panel "hiçbir yerde kaydırma yok" kuralıyla kuruluydu ve o kural tablo ekranlarında hâlâ doğru. Ama İşler bir GELEN KUTUSU: gelen kutusu sayfalanmaz, kaydırılır. "1–5 / 7 · sayfa 1/2" demek, yedi işi görmek için tıklamak demekti — kuyruğun bütününü görmemek, tam da kuyruğun varlık sebebine aykırı. Bu yüzden üç bölme `html.sigdi` kesme kuralından MUAF: liste, dosya ve yazışma kendi içlerinde kayar. Sayfa yine kaymaz — uygulama kabuğu sabit. Tablo ekranları (Stoklar, arşiv, kayıtlar) eskisi gibi tam sığar. ========================================================================== */ html.sigdi .inbox .conv-list, html.sigdi .inbox .thread, html.sigdi .inbox .dosya{overflow:auto} /* ÇUBUK HEP GÖRÜNÜR — ve GERÇEKTEN yer kaplar. İki kez ıskaladım. Önce "üstüne gelince belirsin" yaptım: kaydırılabildiğini ancak kaydırmayı deneyince öğreniyordunuz. Sonra `scrollbar-color` ile hep görünür sandım; ölçünce çıktı ki çubuk 0px yer kaplıyor — yani ÖRTÜ (overlay) çubuğu: yalnız kaydırırken beliriyor, sonra soluyor. Chrome'da kalıcı, yer kaplayan çubuk YALNIZ `::-webkit-scrollbar` ile olur — VE `scrollbar-width` verilmemelidir: verilince Chrome standart (örtü) yolu seçip webkit kurallarını YOK SAYAR. O yüzden burada `scrollbar-width`/`scrollbar-color` bilerek YOK. */ .inbox .conv-list::-webkit-scrollbar, .inbox .thread::-webkit-scrollbar, .inbox .dosya::-webkit-scrollbar{ width:11px;height:11px;display:block;background:transparent} .inbox .conv-list::-webkit-scrollbar-thumb, .inbox .thread::-webkit-scrollbar-thumb, .inbox .dosya::-webkit-scrollbar-thumb{ background:var(--text-3);border-radius:var(--r-full); border:3px solid transparent;background-clip:content-box} .inbox .conv-list::-webkit-scrollbar-thumb:hover, .inbox .thread::-webkit-scrollbar-thumb:hover, .inbox .dosya::-webkit-scrollbar-thumb:hover{ background:var(--text-2);background-clip:content-box} .inbox .conv-list::-webkit-scrollbar-track, .inbox .thread::-webkit-scrollbar-track, .inbox .dosya::-webkit-scrollbar-track{background:transparent} /* ---- "DEVAMI VAR" GÖLGESİ ------------------------------------------------- Kaydırma çubuğuna GÜVENİLEMEZ. Sunucudaki Chrome örtü (overlay) çubuğu kullanıyor: 0px yer kaplıyor, yalnız kaydırırken beliriyor ve ekran görüntüsünde hiç çıkmıyor — yani çubuğun görünüp görünmediğini CSS'ten de ölçümden de kesin bilemiyorum, tarayıcıdan tarayıcıya değişiyor. Bu yüzden "aşağıda devamı var" bilgisini çubuğa bırakmıyoruz: bölmenin alt kenarında bir gölge beliriyor ve dibe inilince kayboluyor. Kendi öğemiz olduğu için her tarayıcıda aynı ve ölçülebilir. */ .kayan-kap{position:relative;min-height:0;display:flex;flex-direction:column} .kayan-kap::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:44px; pointer-events:none;opacity:1;transition:opacity .18s ease; background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--surface) 92%, transparent)); } .kayan-kap.dipte::after{opacity:0} /* ========================================================================== ÇERÇEVE BOYU — yönetici paneli kendine göre ayarlar (bkz. bolme.js) ========================================================================== Tutamak İNCE durur, ele geldiğinde belli olur. Kalın bir ayraç her ekranda sürekli görünen bir çizgi demekti; oysa bu bir ayar, işin kendisi değil. Tıklama alanı çizgiden geniş (11px): 1px'lik bir hedefi fareyle yakalamak yorucudur ve dokunmatikte imkânsız. */ [data-bolme]{position:relative} /* Sabit piksel iz, içeriği kendi izinden geniş olan bir bölmede komşuya taşabilir; bölmeler kendi içinde daralabilmeli. */ [data-bolme] > *{min-width:0} /* IZGARA İZİ ANİMASYONSUZ DEĞİŞİR — sürüklemenin doğruluğu buna bağlı. `prefers-reduced-motion` açıkken panelde `*{transition-duration:.001ms}` kuralı var; `transition-property` varsayılanı `all` olduğu için o kural ızgara izlerini de geçişe sokuyordu. Ölçtüm: sürüklerken yazdığım `600px 464px 300px` uygulanmıyor, hem hesaplanan değer hem de `getBoundingClientRect` eski ölçüyü veriyordu — her hareket yeni bir geçiş başlatıyor, bir sonraki hareket BAŞLANGICI ara değerden okuyordu. Ölçüsü sürüklenen çerçeve anlık değişmelidir. */ [data-bolme],.pad{transition-property:none} .bolme-tutamak,.en-tutamak{ position:absolute;top:0;bottom:0;width:11px;margin-left:-5px;z-index:5; cursor:col-resize;background:transparent;border:0;padding:0; border-radius:var(--r-sm); transition:background-color .14s ease; } .en-tutamak{cursor:ew-resize;margin-left:0} /* Çizginin kendisi: 1px, ortada. */ .bolme-tutamak::before,.en-tutamak::before{ content:"";position:absolute;left:50%;top:0;bottom:0;width:1px; transform:translateX(-50%);background:transparent; transition:background-color .14s ease,width .14s ease; } .bolme-tutamak:hover::before,.en-tutamak:hover::before, .bolme-tutamak.tutuluyor::before,.en-tutamak.tutuluyor::before{ background:var(--accent);width:2px; } .bolme-tutamak:focus-visible,.en-tutamak:focus-visible{ outline:2px solid var(--accent);outline-offset:-1px;border-radius:2px; } /* Sürüklerken metin seçilmesin ve imleç her yerde aynı kalsın: fare tutamaktan bir an kaysa bile sürükleme bozulmuş gibi görünmemeli. */ body.bolme-suruklerken{user-select:none;cursor:col-resize} body.bolme-suruklerken *{cursor:col-resize !important} /* Kâğıda basılan brifingde ayar tutamağının işi yok. */ @media print{.bolme-tutamak,.en-tutamak{display:none}} /* Dar ekranda düzen zaten tek sütun (bolme.js de orada kurulum yapmaz); bu satır JS'ten önce açılan sayfada da tutamağın görünmemesini garanti eder. */ @media (max-width:820px){.bolme-tutamak,.en-tutamak{display:none}} /* ========================================================================== ÇİZELGE — Rapor artık kutucuk değil, ÇİZELGE (Rapor · İşlem dökümü) ========================================================================== Sahibin sözü: *"rather than bubble style, I want a professional system where everything is listed as excel style."* Haklı. Rapor ekranı yuvarlak köşeli kartlar, renkli hap rozetler ve bir çubuk grafikle doluydu. Bunların ortak kusuru şu: hepsi rakamı GÖZ KARARIYLA okutur. Yönetici raporu göz kararıyla okumaz — sayar, karşılaştırır, toplar, kopyalayıp muhasebeye gönderir. Bu yüzden rapor ekranındaki tablolar artık ekranda da CSV'deki tabloyla AYNI: aynı sütunlar, aynı sıra. Kalite/Form/Ölçü künye rozeti değil üç ayrı sütun; "%61" yeşil hap değil bir sayı; kanal dağılımı çubuk değil pay sütunu. Ekranda gördüğü tabloyu indirdiğinde başka bir şeyle karşılaşmamalı. Biçim çizelgenin kendi kuralları: her hücrenin kenarı var, satırlar sık, başlık dondurulmuş, sayılar sağa dayalı ve eş genişlikte rakamla, en altta toplam satırı çift çizgiyle ayrılmış (muhasebe geleneği). */ /* Köşeler KARE. Yuvarlak köşe kartın işaretidir; çizelgenin değil. */ .wrapb > table.cetvel{border-radius:0} .cetvel thead tr:first-child th:first-child, .cetvel thead tr:first-child th:last-child, .cetvel tbody tr:last-child td:first-child, .cetvel tbody tr:last-child td:last-child{border-radius:0} /* HER HÜCRENİN kenarı var: sağ + alt. `border-collapse:collapse` kullanamıyoruz — yapışkan başlıkta kenarlık boyanmıyor (bilinen tarayıcı hatası, tablonun temel kuralında da yazılı) — o yüzden kenarlar iç gölgeyle çiziliyor. */ .cetvel th,.cetvel td{box-shadow:inset -1px -1px 0 var(--border); padding:5px 9px;line-height:1.35;vertical-align:top} .cetvel th:last-child,.cetvel td:last-child{box-shadow:inset 0 -1px 0 var(--border)} /* Temel tablo ilk/son sütuna geniş boşluk veriyor (kart görünümü için). Çizelgede sütun genişlikleri eşit olmalı, yoksa ızgara eğri görünür. */ .cetvel th:first-child,.cetvel td:first-child{padding-left:9px} .cetvel th:last-child,.cetvel td:last-child{padding-right:9px} .cetvel tbody tr:last-child td{box-shadow:inset -1px -1px 0 var(--border)} .cetvel tbody tr:last-child td:last-child{box-shadow:inset 0 -1px 0 var(--border)} /* DONDURULMUŞ BAŞLIK: uzun listede sütunun adı kaybolursa sayı anlamını kaybeder. Zaten yapışkandı; burada dolgusuyla da başlık gibi duruyor. */ .cetvel thead th{background:var(--surface-2);color:var(--text); font-weight:650;font-size:var(--fs-sm);height:auto;padding:6px 9px; box-shadow:inset -1px -1px 0 var(--border-2)} .cetvel thead th:last-child{box-shadow:inset 0 -1px 0 var(--border-2)} /* Satır bandı: gözün satırı kaydırmadan izlemesi için. Çok soluk — şeritler veriden daha çok görünürse çizelge süse döner. */ .cetvel tbody tr:nth-child(even){ background:color-mix(in srgb, var(--surface-2) 45%, var(--surface))} .cetvel tbody tr:hover{background:var(--surface-3)} /* SATIR NUMARASI. Çizelgenin en tanıdık işareti ve işe de yarar: toplantıda "yedinci satır" denebiliyor. Şablonda sayaç tutmuyoruz, CSS sayıyor. */ .cetvel tbody{counter-reset:satir} .cetvel tbody tr{counter-increment:satir} .cetvel .sn{width:1%;white-space:nowrap;text-align:right; color:var(--text-3);font-size:var(--fs-xs);font-variant-numeric:tabular-nums; background:var(--surface-2);user-select:none} .cetvel tbody td.sn::before{content:counter(satir)} /* Sayı sütunları: eş genişlikte rakam olmadan alt alta duran sayılar karşılaştırılamaz. */ .cetvel .num,.cetvel td.c,.cetvel td.n,.cetvel td.r{font-variant-numeric:tabular-nums} .cetvel td.c,.cetvel th.c{text-align:center} /* TOPLAM satırı çift çizgiyle ayrılır — muhasebe geleneği, ve gözü "buradan aşağısı veri değil" diye uyarır. */ .cetvel tfoot td{background:var(--surface-2);color:var(--text);font-weight:650; border-top:3px double var(--border-2); box-shadow:inset -1px 0 0 var(--border)} .cetvel tfoot td:last-child{box-shadow:none} /* Hücre içindeki ikincil bilgi: ayrı satır değil, küçük ve soluk. */ .cetvel .not{display:block;font-size:var(--fs-xs);color:var(--text-3); font-weight:400;margin-top:1px} .cetvel .uyar{color:var(--ink-amber)} .cetvel .kot{color:var(--ink-red)} .cetvel .iyi{color:var(--ink-green)} /* ŞERİT — sekmenin başındaki özet. Eskiden beş ayrı karttı; artık iki satırlık bir çizelge: üstte ölçünün adı, altında değeri. Aynı bilgi, daha az yer, ve rapor boyunca tek bir görsel dil. */ /* Kâğıtta ızgara daha da gerekli: çizgisiz bir tablo fotokopide dağılır. */ @media print{ .cetvel th,.cetvel td{box-shadow:none;border:1px solid #999} .cetvel tbody tr:nth-child(even){background:#f2f2f2} .cetvel thead th{background:#e6e6e6} } /* ========================================================================== BULGU — çizelgenin söylediği şeyi cümleyle de söyler (bkz. bulgu.py) ========================================================================== Izgara kanıttır, sonuç değil. Bulgu satırı sonucu yazar; altındaki çizelge onu doğrular. Aynı biçim: kutucuk değil, yine bir çizelge — bölüm boyunca tek görsel dil. */ .bulgular,.kanal-cetvel{flex:0 0 auto;margin-bottom:var(--s3); border:1px solid var(--border)} .bulgular{width:100%} /* Kanal dağılımı üç sütunluk küçük bir tablo; sayfa boyunca gerilmesi ona hak ettiğinden fazla ağırlık verirdi. `align-self` şart: `.pad` bir dikey esnek kap ve çocuklarını varsayılan olarak GERER — `width:auto` tek başına ölçtüğümde 1240px veriyordu. */ .kanal-cetvel{width:auto;min-width:340px;align-self:flex-start} /* Durum sözcüğü RENKLE değil, önce SÖZCÜKLE anlaşılır: renk körlüğünde de, siyah-beyaz çıktıda da okunur. Renk yalnız hızlandırır. */ .bulgular td.dur{width:1%;white-space:nowrap;font-weight:650; font-size:var(--fs-sm);color:var(--text-3)} .bulgular td.dur.uyari{color:var(--ink-amber)} .bulgular td.dur.iyi{color:var(--ink-green)} .bulgular td a{color:var(--accent);white-space:nowrap} .bulgular tbody tr:nth-child(even){background:transparent} .bulgular tbody tr:hover{background:var(--surface-2)} /* DİPNOT — yöntem açıklaması tablonun ALTINDA durur. Üstte dururken yöneticiyle veri arasına giriyordu; raporda yöntem, sonucun ardından okunacak şeydir. */ .dipnot{flex:0 0 auto;font-size:var(--fs-sm);color:var(--text-3); margin:8px 0 0;max-width:96ch;line-height:var(--lh-snug)} .dipnot b{color:var(--text-2);font-weight:600} .dipnot a{color:var(--accent)} /* Başlık satırındaki tek cümlelik amaç yazısı. */ .psatir .sub{margin:0;font-size:var(--fs-sm);color:var(--text-3);max-width:52ch} /* ========================================================================== TIKLANABİLİR BİLGİ — her sayı bir yere gider ========================================================================== Sahibin kuralı: *"anytime there is information on control panel, it should be clickable and take administrator to the details of that information."* Bunun görsel sorunu şu: panelin neredeyse her hücresi artık bir bağlantı. Hepsini mavi yapmak tabloyu okunmaz hâle getirirdi — göz rengi bilgi sanır ve satırı tarayamaz. O yüzden veri tablosundaki bağlantı rengini METİNDEN alır; tıklanabilirliği İMLEÇ, üzerine gelince beliren alt çizgi ve klavye halkası söyler. Fare gerektirmeyen ipuçları da var: her bağlantıda `title` (nereye gittiğini yazar) ve `:focus-visible` halkası. Dokunmatikte hücrenin kendisi zaten dokunma hedefi. */ .wrapb a,.cetvel a{color:inherit;cursor:pointer} .wrapb a:hover,.cetvel a:hover{color:var(--accent); text-decoration:underline;text-underline-offset:2px} .wrapb a:focus-visible,.cetvel a:focus-visible{ outline:2px solid var(--accent);outline-offset:1px;border-radius:2px} /* ÇİP bağlantıları (kalite · ölçü · yüzey · raf) altı çizili durmaz — çipin kendisi zaten bir kutu; altını çizmek iki ayrı sınır demek. Onlarda vurgu dolgunun koyulaşmasıyla verilir. */ .wrapb a.kim:hover,.wrapb a.raf:hover{text-decoration:none;color:inherit; background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--border-2)} /* Bulgu satırındaki "→" bağlantısı bir EYLEM çağrısıdır, veri değil; orada vurgu rengi kalır (yukarıdaki .bulgular kuralı daha ağır). */ /* Açık süzgeç etiketi: hangi daraltmanın yürürlükte olduğunu SÖYLER ve tek tıkla kaldırtır. Boş bir liste, süzgeç görünmüyorsa bozukluk gibi okunur — Rapor'dan bir güne tıklayıp gelen kişi tam bunu yaşıyordu. */ .suzgec-etiket{display:inline-flex;align-items:center;gap:6px; font-size:var(--fs-sm);color:var(--text-2);background:var(--surface-2); border:1px solid var(--border);border-radius:var(--r-sm);padding:3px 8px} .suzgec-etiket a{color:var(--text-3);font-weight:700;line-height:1;padding:0 2px} .suzgec-etiket a:hover{color:var(--ink-red)} /* Kanal kartı artık bir bağlantı: bağlıysa o kanalın konuşmalarına, değilse kurulum ekranına gider. "Kurulum eksik" yazıp nereden kurulacağını söylememek yarım bilgiydi. Kart zaten `display:flex` — bağlantı olması yerleşimi bozmuyor; eklenen tek şey ele geldiğinin belli olması. */ .chcard{transition:border-color .14s ease,box-shadow .14s ease} a.chcard:hover{border-color:var(--border-2);box-shadow:var(--sh-sm)} a.chcard:hover .nm{color:var(--accent)} a.chcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* HİZMET sütunları İKİNCİL. Sahibin düzeltmesi: bir tedarikçiyle ilgili asıl iş bilgisi ondan ne aldığımızdır; telefona çıkması hizmet kalitesidir. Sütunlar bu yüzden hem SIRAYLA hem de tonla ayrılıyor — aynı ağırlıkta duran on sütun, hangisinin karar verdirdiğini söylemez. */ .cetvel th.hizmet,.cetvel td.hizmet{color:var(--text-3)} .cetvel th.hizmet{font-weight:500} .cetvel td.hizmet.kot{color:var(--ink-red)} .cetvel td.hizmet.uyar{color:var(--ink-amber)} .cetvel td.hizmet.iyi{color:var(--ink-green)} /* Nakliyede ÜÇ rakamdan biri öneri: geçmişe dayanan "beklenen". Diğer ikisi uçlar. Vurgu bu yüzden yalnız ortadakinde — üçü aynı ağırlıkta dururken yönetici hangisiyle teklif vereceğini ekrandan okuyamıyordu. */ .dsat.vurgu{background:var(--surface-2);border-radius:var(--r-sm); padding-left:6px;padding-right:6px} .dsat.vurgu .num{color:var(--text);font-weight:680} /* Ağırlık girişi çizelgenin içinde: ayrı bir düzenleme ekranına gitmek, "şu üç kalemi doldur" işini üç sayfa gezmeye çevirirdi. */ .kgin{width:110px;text-align:right;padding:3px 6px;font-size:var(--fs-sm)} /* --- FİRMA İŞARETİ · koyu tema ----------------------------------------- Aynı ton, ters parlaklık. Açık temanın uçuk pastel dolgusu koyu zeminde ışıldayan bir leke gibi duruyordu. Gölge yerine kılcal halka — panelin koyu temadaki genel kuralı (bkz. --sh-*). */ :root[data-theme="dark"] .pic{ background:linear-gradient(157deg,oklch(.345 .055 var(--h)),oklch(.278 .045 var(--h))); color:oklch(.855 .105 var(--h)); box-shadow:inset 0 0 0 1px oklch(1 0 0/.09),inset 0 1px 0 oklch(1 0 0/.06); } :root[data-theme="dark"] .pic.anon{color:oklch(.72 .015 var(--h))} /* Logo plakası koyu temada da BEYAZ: amblemler beyaz zemin için çizilir, koyu zemine oturtulan siyah bir logo kaybolur. */ :root[data-theme="dark"] .pic.logolu{background:#fff; box-shadow:inset 0 0 0 1px rgb(255 255 255/.14),0 1px 2px rgb(0 0 0/.4)} /* --- üst çubuktaki işletme işareti + logo yükleme kutusu ---------------- */ .shop{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;min-width:0} .shop:hover .shop-ad{color:var(--accent)} .shop .pic{width:26px} .shop-ad{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* KİŞİ YUVARLAK, FİRMA KÖŞELİ. İkisi de aynı şekil olduğunda "bu bir firma mı yoksa çalışan mı" ayrımı yalnız yazıdan okunuyordu. */ .pic.kisi{border-radius:var(--r-full)} /* Dosya seçici gizli, etiket düğme gibi: tarayıcının kendi "Dosya Seç" kutusu her tarayıcıda başka görünüyor ve panelin diliyle konuşmuyor. */ .logo-form{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)} .logo-sec{position:relative;overflow:hidden;cursor:pointer} .logo-sec input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0} .logo-sec:focus-within{outline:2px solid var(--accent);outline-offset:2px} .logo-sil{color:var(--red)} /* ========================================================================== SAYFA KAYAR — ölçülemeyen ekranlarda kesme YOK -------------------------------------------------------------------------- Sığdırma düzeni "bu kutuya kaç satır girer" sorusuna dayanıyor ve cevabı çerezle sunucuya yolluyor. Sorunun bir ön kabulü var: SAYFADA ÖLÇÜLECEK TEK KUTU. Sevkiyat'ta ise yön sayısı kadar çizelge var; ölçüm yalnız EN UZUN olanı ölçüyor, öbürleri hesaba hiç girmiyor. Ölçtüm: /sevkiyat'ta iki çizelgenin 14 ve 9 pikseli gizli kalıyordu — yani her grubun SON SATIRI ikiye bölünmüş hâlde duruyordu. Ekranda bu "kutular birbirini kesiyor" diye görünüyor ve sahibin gördüğü de buydu. Kural: birden çok kaydırma kutusu olan sayfa BÜTÜN olarak kayar, kutular kesmez. İşler ekranı için verilmiş kararın aynısı — orada da "kaç satır sığar" sorusunun anlamı yoktu. */ .pad.kayar{overflow-y:auto!important;overscroll-behavior:contain} /* Kutu KENDİ BOYUNDA olsun: `.wrapb:not(.card-pad){flex:1 1 auto}` kuralı kutuyu esnetip artan yeri paylaştırıyor ve içerik sığmayınca kesiyordu. Kayan sayfada boyu içerik belirler, sayfa da uzar. */ .pad.kayar .wrapb, .pad.kayar .blok-liste{overflow:visible;max-height:none;flex:0 0 auto} html.sigdi .pad.kayar .wrapb, html.sigdi .pad.kayar .blok-liste{overflow:visible} /* Kayan sayfada son bloğun altı ekranın dibine yapışmasın. */ .pad.kayar > *:last-child{margin-bottom:var(--s5)} /* Ayarlar'daki tek başına duran satır: bağlantı değil, İÇİNDE form olan bir kutu. `.setrow` bir için yazılmıştı; burada
. */ .setrow.tek{display:flex;gap:var(--s4);align-items:flex-start;cursor:default} .setrow.tek:hover{background:inherit} .setrow.tek .pic{margin-top:2px} /* ========================================================================== GÖRSEL KİMLİK v3 — "daha modern" -------------------------------------------------------------------------- Sahibin isteği: *"the control panel should look more modern."* Sorun süs eksikliği değildi; ölçtükçe üç somut şey çıktı: 1 · YAZI. Inter hiç yüklenmiyor, Windows'ta panel Segoe UI'ye düşüyordu. Yığına Windows 11'in kendi optik-boyutlu yüzü eklendi ve başlıklar DISPLAY kesimini kullanıyor. Tek satırlık değişiklik, her ekranda görünen fark. 2 · KENARLIK ENFLASYONU. Her şeyin 1px çizgisi vardı: üst bar, durum hapı, ayraçlar. Çok çizgi, kalabalık okunur. Çizgi yerine ZEMİN FARKI ve yumuşak yükselti. 3 · 2019 GÖLGELERİ. Birincil düğmede renkli "glow" gölge vardı. Bugünün dili: düz zemin + içeride ince ışık çizgisi + kısa gölge. Tersine gitmeyen şeyler: dar radius (4–10px), VERSAL yok, süs monospace yok. Bunlar zaten doğruydu ve moda değil karar. */ /* --- tipografi: başlıklar kendi kesiminde, rakamlar hizalı -------------- */ .h,.sec-h,.tile .v,.bri-bas h1{font-family:var(--f-baslik); font-optical-sizing:auto;letter-spacing:-.022em;text-wrap:balance} .num,td.n,th.n,.oz-k b,.tile .v{font-variant-numeric:tabular-nums} body{font-optical-sizing:auto} /* --- kenar çubuğu: daha az çizgi, daha net seçili durum ----------------- */ .nav-item{min-height:36px;padding:8px 11px;border-radius:8px;gap:11px} .nav-item svg{width:17px;height:17px;stroke-width:1.7} /* Seçili satır: içeride ray + hafif ışık. Eskiden yalnız zemin rengiydi ve koyu çubukta seçili ile hover birbirine yakın duruyordu. */ .nav-item.active{background:linear-gradient(90deg,rgb(14 165 164/.22),rgb(14 165 164/.10)); box-shadow:inset 3px 0 0 var(--brand-2)} .side-foot{border-top:0;color:#5A6B80} /* --- üst bar: çizgi yerine zemin farkı --------------------------------- */ .main{grid-template-rows:56px minmax(0,1fr)} .topbar{border-bottom:0;box-shadow:0 1px 0 rgb(16 24 40/.06)} /* Durum göstergesi HAP olmaktan çıktı: kenarlıklı bir rozet, hiçbir karar taşımadığı hâlde göz çekiyordu. */ .aistat{border:0;padding:0;color:var(--text-3);font-size:var(--fs-sm)} .aistat i{box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)} /* --- düğmeler: renkli glow yerine düz zemin + ince ışık ---------------- */ .btn.pri{box-shadow:inset 0 1px 0 rgb(255 255 255/.18),0 1px 2px rgb(16 24 40/.16)} .btn.pri:hover{box-shadow:inset 0 1px 0 rgb(255 255 255/.22),0 2px 6px -1px rgb(16 24 40/.22)} .btn{transition:background .12s,border-color .12s,box-shadow .12s} /* --- kişi rozeti: iki renkli degrade yerine tek tonda sakin -------------- */ .avatar{background:color-mix(in srgb,var(--brand) 16%,var(--surface)); color:var(--brand);border:1px solid color-mix(in srgb,var(--brand) 26%,transparent); font-weight:650;letter-spacing:-.02em} :root[data-theme="dark"] .avatar{ background:color-mix(in srgb,var(--brand) 22%,var(--surface));color:var(--brand-2)} /* ========================================================================== PİKSEL IZGARASI — "kenarlar bulanık görünüyor" -------------------------------------------------------------------------- Sahibin gördüğü şey ÖLÇÜLEBİLİR bir hataydı. Simgeler 24 birimlik bir viewBox'tan 17 piksellik kutuya çiziliyordu (ölçek 0,708) ve çizgi kalınlığı 1,7 idi: 1,7 × 0,708 = 1,204 AYGIT PİKSELİ Bir piksele oturamayan çizgi, iki piksel sütununa yayılarak çizilir; yani siyah bir çizgi yerine iki gri sütun. Panelin BÜTÜN simgeleri böyleydi — 0,871'den 1,488'e kadar, hiçbiri tam sayı değil. "Bulanık" dediği şey tam olarak bu. KURAL: kutu boyu ve çizgi kalınlığı, çarpımları TAM SAYI olacak şekilde seçilir. 24 birimlik viewBox için: 16px kutu → 1,5 kalınlık (16/24 × 1,5 = 1,0) 12px kutu → 2,0 kalınlık (12/24 × 2,0 = 1,0) 20px kutu → 1,2 kalınlık (20/24 × 1,2 = 1,0) Çift piksel yoğunluğunda (DPR 2) bunlar tam 2,0 piksel eder; yani kural retina ekranda da geçerli. Ara boy (17, 18, 21) KULLANILMAZ: tam sayı veren boy yoktur ve bir piksellik kazanç için bulanıklık alınmaz. */ .nav-item svg{width:16px;height:16px;stroke-width:1.5} .chan svg{width:12px;height:12px;stroke-width:2} .cf svg{width:12px;height:12px;stroke-width:2} .chcard .ic svg{width:16px;height:16px;stroke-width:1.5} .setrow .ic svg{width:16px;height:16px;stroke-width:1.5} .tema-btn svg{width:16px;height:16px;stroke-width:1.5} .nav-item.small svg{width:12px;height:12px;stroke-width:2} @media (max-width:820px){ .nav-item svg{width:20px;height:20px;stroke-width:1.2} } @media (max-height:620px){ .nav-item svg{width:20px;height:20px;stroke-width:1.2} } /* Firma simgesi de maske olarak çiziliyor; aynı kural. */ :root{--firma-simge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V7l7-4v18M10 21h11V11l-7-2M6 10h1M6 13h1M6 16h1M14 13h2M14 16h2' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")} /* KILCAL ÇİZGİLER YARIM PİKSELE OTURMASIN. Küçük yazının satır kutusu 1,4 çarpanıyla 19,6 piksel çıkıyor ve tarayıcı 19,5'e yuvarlıyordu; üst üste binen kutular da 0,25/0,75 kaymalara oturunca her 1px kenarlık iki satıra yayılıp griye dönüyordu. Küçük boylarda satır yüksekliği artık PİKSEL cinsinden ve tam sayı. */ .sub,.hint,.dipnot,.pkural,.oz-l,.sub2{line-height:18px} .oz-k{line-height:20px} .nav-item{line-height:16px} /* SATIR YÜKSEKLİĞİ TAM SAYI OLSUN. Ölçtüm: müşteri satırı 54,5 piksel çıkıyordu; yarım piksel, satırlar arasındaki her yatay çizgiyi iki piksele yayıp griye çeviriyor — çizelge ekranında "her şey puslu" hissinin kaynağı bu. Yarım, hücrenin kendi metin dayanağından (strut) geliyordu: 21 piksellik satır kutusu içindeki 14 piksellik yazının yükselen/alçalan payları küsurat bırakıyor. Dayanak tam sayıya sabitlenince satır 54,0 oluyor. */ .cetvel td,.cetvel th,table td,table th{line-height:20px} /* SATIR KUTUSU PİKSEL CİNSİNDEN — küsurat kaynağı kurutuldu. Ölçtüm: paneldeki kesirli satır yüksekliklerinin neredeyse tamamı 19,50 piksel. Sebep basit — çarpan olarak yazılmış 1,5 ile 13 piksellik yazı: 1,5 × 13 = 19,5. Aynı şekilde 15px → 22,5, 11px → 16,5. Yarım piksellik satır kutusu, üstüne binen her kutuyu da yarım piksele kaydırıyor; 1 piksellik kenarlıklar iki satıra yayılıp griye dönüyor. Çizelge ekranındaki "puslu" his buydu. ÇÖZÜM: gövdeye PİKSEL cinsinden satır yüksekliği. Piksel değer, çarpan gibi her yazı boyuna göre yeniden hesaplanmaz — olduğu gibi miras kalır, yani küsurat üretmesi imkânsız. Farklı yükseklik gerçekten gereken yerler (başlıklar, küçük yazı, okuma metni) aşağıda tam sayı olarak ayrıca veriliyor. */ body{line-height:21px} .h{line-height:28px} h1,h2,h3{line-height:28px} h4,.sec-h{line-height:22px} .tile .v,.oz-k b{line-height:30px} .sub2,.hint,.oz-l,.fhint,.aichip,.tik,.chan{line-height:16px} .sub,.pkural,.dipnot,.msg,.pv,textarea,p{line-height:20px} .nm,.conv .nm{line-height:20px} /* Kendi çarpanını yazan son birkaç yer: 1,3 × 13 = 16,9 · 1,2 × 12 = 15,6 · 1,7 × 14 = 23,8 · 1,8 × 14 = 25,2. Hepsi tam sayıya çekildi. */ .hamle{line-height:17px} .setrow,.setrow *,.setlist,.setlist *{line-height:16px} .setrow b{line-height:20px} .bri-oz,.bri-oz b{line-height:24px} .bri-liste,.bri-liste li{line-height:26px} .bri-alt{line-height:19px} /* ========================================================================== İLETİŞİM — izleme ekranı -------------------------------------------------------------------------- Solda konuşan herkes, sağda yazışmanın kendisi. Telefon için ayrı bir biçim YOK: çağrının turları da mesaj olarak yazıldığı için aynı balonlarla akıyor — sahibin istediği "text message style even for phone calls" tam olarak bu. */ .iletisim .cnl{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s4); flex:1 1 auto;min-height:0} .cnl-liste{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0; padding-right:2px} .cnl-sat{display:block;padding:9px 11px;border-radius:var(--r-md); background:var(--surface);box-shadow:var(--sh-xs);border:1px solid var(--border)} .cnl-sat:hover{background:var(--surface-2)} .cnl-sat.sel{border-color:var(--accent-line);background:var(--accent-soft)} /* AÇIK HAT göze batmalı: telefonda saniye önemli. */ .cnl-sat.canli-cagri{border-color:var(--red);box-shadow:0 0 0 1px var(--red)} .cnl-ust{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .cnl-ust b{font-size:var(--fs);letter-spacing:-.01em} .cnl-dk{font-size:var(--fs-xs);color:var(--text-3);flex:none} .cnl-alt{font-size:var(--fs-sm);color:var(--text-2);margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cnl-etiket{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px} .kanal-cip{font-size:var(--fs-xs);padding:1px 7px;border-radius:var(--r-full); background:var(--fill-mut);color:var(--ink-mut);line-height:16px} /* RENKLER PANELİN GERİ KALANIYLA AYNI. Ölçülen tutarsızlık: her yerde e-posta MAVİ (.chan-eposta), telefon TEAL, WhatsApp YEŞİL. Bu çipler ise e-postayı gri bırakıp maviyi telefona vermişti — yani aynı kanal iki ekranda iki renkti ve e-postanın rengini telefon almıştı. */ .kanal-cip.k-eposta{background:var(--fill-blue);color:var(--ink-blue)} .kanal-cip.k-telefon{background:var(--fill-teal);color:var(--ink-teal)} .kanal-cip.k-whatsapp{background:var(--fill-green);color:var(--ink-green)} .kanal-cip.k-ted{background:var(--fill-iris);color:var(--ink-iris)} .cnl-akis{display:flex;flex-direction:column;min-height:0; background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg);box-shadow:var(--sh-xs)} .cnl-bas{display:flex;justify-content:space-between;align-items:center;gap:var(--s3); flex-wrap:wrap;padding:10px var(--s4);border-bottom:1px solid var(--border)} .cnl-kim{display:flex;align-items:center;gap:8px;min-width:0} .cnl-eylem{display:flex;gap:6px;align-items:center} .cnl-eylem form{display:inline} .cnl-uyari{margin:0;padding:8px var(--s4);font-size:var(--fs-sm); background:var(--note-bg);color:var(--note-ink); border-bottom:1px solid var(--note-line)} .cnl-balonlar{flex:1 1 auto;min-height:0;overflow:auto; padding:var(--s4);display:flex;flex-direction:column;gap:10px} .bln{max-width:74%;padding:8px 12px;border-radius:12px;font-size:var(--fs); line-height:20px} .bln-govde{white-space:pre-wrap;word-break:break-word} .bln-alt{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px;line-height:16px} /* KİM KONUŞUYOR RENKTEN DEĞİL YERDEN de okunur: karşı taraf solda, biz sağda. Yalnız renge güvenmek, renk körü bir yöneticide ayrımı siler. */ .bln-musteri,.bln-tedarikci{align-self:flex-start;background:var(--surface-2); border-bottom-left-radius:4px} .bln-deskos{align-self:flex-end;background:var(--fill-teal);color:var(--ink-teal); border-bottom-right-radius:4px} .bln-yonetici{align-self:flex-end;background:var(--accent);color:var(--accent-ink); border-bottom-right-radius:4px} .bln-yonetici .bln-alt{color:color-mix(in srgb,var(--accent-ink) 72%,transparent)} .bln-not{background:var(--note-bg);color:var(--note-ink);align-self:center; max-width:88%;border:1px dashed var(--note-line)} .cnl-yaz{display:flex;gap:var(--s3);align-items:flex-end; padding:var(--s3) var(--s4);border-top:1px solid var(--border)} .cnl-yaz textarea{flex:1 1 auto;min-height:44px} @media (max-width:820px){ .iletisim .cnl{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)} .cnl-liste{max-height:34vh} .bln{max-width:88%} } /* Kanal bölümü sekmesindeki sayaç + kapalı pencere uyarısı */ .tabsay{font-size:var(--fs-xs);font-weight:600;background:var(--surface-3); color:var(--text-2);border-radius:var(--r-full);padding:0 6px;margin-left:4px; line-height:16px;display:inline-block;vertical-align:1px} .bigtabs a.on .tabsay{background:var(--accent);color:var(--accent-ink)} .cnl-kapali{flex:1 1 100%;font-size:var(--fs-sm);color:var(--note-ink); background:var(--note-bg);border:1px solid var(--note-line); border-radius:var(--r-sm);padding:6px 10px;margin-bottom:6px;line-height:18px} .cnl-yaz select{min-width:200px} .cnl-yaz{flex-wrap:wrap}