/* Panel tasarım sistemi. shadcn/ui'nin görünümü örnek alındı — bileşenleri değil. Onlar React+Radix ve Tailwind sınıfları; bizde derleme adımı yok (deploy dosya yükleyerek yapılıyor). Alınan şey zaten iyi görünmesini sağlayan kısım: token'lar, 8px yarıçap, nötr gri ölçeği, ince kenarlıklar, odak halkası, 14px taban tipografi ve sıkı satır yükseklikleri. Marka rengimiz "primary" olarak duruyor; gerisi nötr. */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid var(--border)} :root{ /* Tarayıcının kendi çizdiği parçalar da temayı izlesin. Açılır kutu, tarih seçici, kaydırma çubuğu ve otomatik doldurma zeminini tarayıcı çiziyor; CSS'imiz onlara ulaşmıyor. Bu satır olmadan koyu temada beyaz bir açılır liste açılıyordu. */ color-scheme:light; /* --- nötr ölçek --- */ --bg:#F7F8FA; --card:#FFFFFF; --fg:#0F172A; --muted:#F1F5F9; --muted-fg:#64748B; --border:#E2E8F0; --input:#E2E8F0; /* Marka rengi — uygulamadaki mercanın canlı hâli. Uygulamada `#FC8375` (Figma: coral koyu). O renk **zemin** olarak kullanılıyor ve üstüne koyu yazı yazılıyor; panelde ise düğme zemini olup üstünde beyaz yazı taşıyor. Beyazla kontrastı 2,4 — okunmuyor. Aynı ton (H=8°) doygunluğu korunarak koyulaştırıldı: 4,5 kontrast, yani beyaz yazı okunur. Pastel değil; eskisi (#E8867B) pasteldi. */ --primary:#DB3C24; --primary-fg:#FFFFFF; --primary-soft:#FEEAE7; --primary-border:#F6C8C1; --ring:#DB3C24; /* --- durumlar --- */ --ok:#4D7C2F; --ok-soft:#F2F8EC; --ok-border:#CFE4BC; --warn:#B45309; --warn-soft:#FFF7ED; --warn-border:#FED7AA; --danger:#D92D20; --danger-soft:#FEF2F2; --danger-border:#FECACA; /* Yan menü — kart ve sayfa zemininden **ayrı** bir yüzey. Önce koyuydu (#18181B). Motor paneliyle aynı dili konuşsun diye açığa alındı; ayrımı renk değil katman veriyor: sayfa #F7F8FA, menü #FBFCFD, kart #FFFFFF. Üçü de açık ama üçü de farklı ve kenarlıkla ayrılıyor. */ --sb:#FBFCFD; --sb-fg:#0F172A; --sb-muted:#64748B; --sb-border:#E2E8F0; --sb-hover:#F1F5F9; /* --- gölge --- */ --golge-xs:0 1px 2px 0 rgb(15 23 42 / .05); --golge-sm:0 1px 3px 0 rgb(15 23 42 / .08); --golge-md:0 8px 24px -6px rgb(15 23 42 / .14); --golge-lg:0 24px 48px -12px rgb(15 23 42 / .22); --kaplama:rgb(15 23 42 / .72); /* Boşluk ölçeği — 4px tabanlı. Ekranlarda elle piksel yazmak yerine bunlar kullanılır; "bu kadar mı olsun" tartışması bir kez burada yapılır, her ekranda tekrar edilmez. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --radius:10px; --radius-sm:8px; --sidebar-w:240px; --bar-h:56px; --icerik-en:1152px; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } /* Koyu tema. Yalnızca **belirteçler** yeniden tanımlanıyor; hiçbir bileşen kuralı `.dark` altında yazılmıyor. Bileşenin rengi tek yerden geliyor, iki yerden değil: ikincisi eklendiği an biri güncellenip diğeri unutuluyor ve o bileşen bir temada yanlış renkte kalıyor. Sınıf `` üzerinde ve sunucudan değil sayfanın en başındaki küçük betikten geliyor (bkz. layout) — sonradan verilseydi sayfa bir an açık temada çizilip koyuya atlardı. */ .dark{ color-scheme:dark; --bg:#0B0D12; --card:#14171F; --fg:#E8EAF0; --muted:#1C2029; --muted-fg:#98A2B3; --border:#252A35; --input:#252A35; /* Koyu zeminde aynı mercan sönük kalıyor; bir tık açığı kullanılıyor. */ --primary:#F0563B; --primary-fg:#FFFFFF; --primary-soft:#2A1512; --primary-border:#4D231C; --ring:#F0563B; --ok:#7CB35C; --ok-soft:#16200F; --ok-border:#2E4420; --warn:#E8A33D; --warn-soft:#241A0B; --warn-border:#4A3616; --danger:#F2685C; --danger-soft:#2A1210; --danger-border:#4D1F1A; --sb:#0F1218; --sb-fg:#E8EAF0; --sb-muted:#98A2B3; --sb-border:#252A35; --sb-hover:#1C2029; /* Koyu zeminde siyah gölge görünmüyor; kenarlık işi devralıyor. */ --golge-xs:0 1px 2px 0 rgb(0 0 0 / .4); --golge-sm:0 1px 3px 0 rgb(0 0 0 / .5); --golge-md:0 8px 24px -6px rgb(0 0 0 / .6); --golge-lg:0 24px 48px -12px rgb(0 0 0 / .7); --kaplama:rgb(0 0 0 / .78); } html{-webkit-text-size-adjust:100%} body{ font-family:var(--sans); background:var(--bg);color:var(--fg); font-size:14px;line-height:1.5; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} ul{list-style:none} button,input,select,textarea{font:inherit;color:inherit} /* Odak halkası: shadcn'in ring'i — kenarlık değil, dışarıda bir halka. */ :focus-visible{ outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--radius-sm); } /* ============ yerleşim ============ */ /* Kabuk. Üst çubuk sayfanın **tamamını** kaplıyor ve markanın olduğu sol bloğu yan menüyle aynı genişlikte, kendi sağ kenarlığıyla duruyor: böylece dikey çizgi ekranın en tepesinden aşağı kesintisiz iniyor. Önceki düzende çubuk yalnızca içerik tarafındaydı, çizgi menünün yanından başlıyor ve üstte kopuk kalıyordu. */ .layout{display:flex;flex-direction:column;min-height:100svh} .ust{ position:sticky;top:0;z-index:30;flex:none; display:flex;align-items:center;height:var(--bar-h); background:var(--sb);border-bottom:1px solid var(--border); } .ust-marka{ display:flex;align-items:center;gap:10px;flex:none;height:100%; width:var(--sidebar-w);padding:0 var(--s4); border-right:1px solid var(--border); } .ust-marka img{width:26px;height:26px;flex:none} .ust-marka .txt{display:flex;flex-direction:column;line-height:1.2;min-width:0} .ust-marka .txt b{font-size:14px;font-weight:600;letter-spacing:-.01em} .ust-marka .txt i{font-style:normal;font-size:11px;color:var(--muted-fg);font-weight:400} .ust-govde{ display:flex;align-items:center;gap:var(--s2); flex:1;min-width:0;padding:0 var(--s4); } .ust-govde h1{font-size:15px;font-weight:600;letter-spacing:-.01em} .ust-govde .crumb{font-size:13px;color:var(--muted-fg)} .ust-govde .right{margin-left:auto;display:flex;align-items:center;gap:var(--s2)} .govde{display:flex;flex:1;min-height:0} /* Yan menü **ekrana yapışık**: uzun bir listede aşağı inince hesap kartı ekrandan çıkmıyor. Yüksekliği üst çubuğun altından başlıyor. */ .side{ width:var(--sidebar-w);flex:none;background:var(--sb);color:var(--sb-fg); display:flex;flex-direction:column; position:sticky;top:var(--bar-h);height:calc(100svh - var(--bar-h)); border-right:1px solid var(--border); } /* `.side-brand` kaldırıldı: marka artık üst çubukta (`.ust-marka`). */ .side-nav{flex:1;overflow-y:auto;padding:8px} /* Bölüm başlıkları. Küçük, büyük harfli ve aralıklı: menü satırlarıyla aynı yazı boyunda olduklarında göz onları da tıklanacak bir şey sanıyordu. Yedi bölüm var; her birinin üstündeki boşluk tek başına önemsiz ama toplamı menünün ekrana sığıp sığmamasını belirliyor — bu yüzden ölçülü. */ .side-group{ font-size:10.5px;font-weight:600;color:var(--muted-fg); text-transform:uppercase;letter-spacing:.06em; padding:12px 10px 5px; } .side-group:first-child{padding-top:8px} .side-nav a{ position:relative; display:flex;align-items:center;gap:10px; height:32px;padding:0 10px;border-radius:var(--radius-sm); color:var(--sb-muted);font-size:13px;font-weight:500; transition:background .12s,color .12s; } .side-nav svg{width:16px;height:16px;flex:none;stroke-width:2;color:var(--sb-muted);transition:color .12s} .side-nav a:hover{background:var(--sb-hover);color:var(--sb-fg)} .side-nav a:hover svg{color:var(--sb-fg)} /* Etkin satır — nötr hap. Menü açık zeminde ve hap ondan bir kademe koyu (`--sb-hover`); marka rengi burada kullanılmıyor. Renk, panelde **anlamı olan** yerlere ayrıldı: bekleyen iş rozeti ve birincil düğme. Her satırın vurgusu da renkliyse rengin söylediği bir şey kalmıyor. */ .side-nav a.on{ background:var(--sb-hover); color:var(--sb-fg);font-weight:600; } .side-nav a.on svg{color:var(--sb-fg)} .side-nav .tail{ margin-left:auto;font-size:10.5px;color:var(--muted-fg); border:1px solid var(--sb-border);border-radius:4px;padding:1px 5px; } /* Bekleyen iş rozeti — kurallar **`.side-nav` altında** yazılmak zorunda. `.tail-n` tek sınıf, `.side-nav .tail` iki sınıf: CSS'te ikincisi daha özgül ve her zaman kazanıyordu. Sonuç, rozetin kendi rengini ve hap biçimini hiç alamaması: menüde gri rakamlı kırmızı bir kare duruyordu ve rakam okunmuyordu. Aynı sınıf şeritte doğru çiziliyordu, çünkü orada onu ezen bir kural yok — bu yüzden fark gözden kaçıyordu. */ .side-nav .tail-n{ background:var(--primary);color:var(--primary-fg); border:0;border-radius:999px; min-width:18px;height:18px;line-height:18px;padding:0 5px; font-weight:600;text-align:center; } /* Menünün altındaki solma. Menü kayıyor ve alttaki satır çoğu ekranda yarısından kesiliyor. Solma olmadan bu, yanlış hizalanmış bir satır gibi görünüyordu; solmayla "aşağıda devamı var" oluyor. Kaydıracak bir şey yoksa zaten menünün kendi rengine açılan bir geçiş — görünmüyor. */ /* `.side` zaten `position:sticky` — mutlak konumlu çocuk için kapsayıcı kuruyor, ayrıca `relative` vermek gerekmiyor (verilseydi sticky'yi ezerdi ve menü sayfayla birlikte kayardı). */ .side-nav{position:relative} .side-who::before{ content:'';position:absolute;left:0;right:0;bottom:100%;height:24px; background:linear-gradient(transparent,var(--sb));pointer-events:none; } .side-who{position:relative} /* Menü uzun ve kayıyor; macOS varsayılanı çubuğu gizlediği için ince bir iz. */ .side-nav::-webkit-scrollbar{width:6px} .side-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} .side-nav::-webkit-scrollbar-thumb:hover{background:var(--muted-fg)} /* Giren kişi — markanın hemen altında, menünün üstünde. Altta olduğunda menü uzadıkça oraya iniyordu: "hangi hesapla girdim" ve "çıkış" ekranın en dibindeydi ve küçük ekranda menüyle birlikte kayıp gidiyordu. Üstte, kaymayan bir yerde duruyor. */ /* Hesap kartı menünün **altında** ve kaymıyor. Menü kayan liste; kart onun dışında, `flex:none` ile sabit. İçeride olsaydı uzun menüde aşağı inince ekrandan çıkardı ve "hangi hesapla girdim" sorusu tam da o noktada soruluyor. */ .side-who{ padding:var(--s3);flex:none; display:flex;align-items:center;gap:var(--s1); } /* Hesap kartının kendi kenarlığı var; altına ayrıca çizgi çekilmiyor. İkisi üst üste gelince kalın, kirli bir şerit oluşuyordu. */ .side-who .who-link{ background:var(--card);border:1px solid var(--border); box-shadow:var(--golge-xs);padding:var(--s2); } .side-who .who-link:hover{background:var(--muted)} .who-av{ width:32px;height:32px;border-radius:var(--radius-sm);flex:none; background:var(--muted);color:var(--fg); display:grid;place-items:center;font-weight:600;font-size:13px; } .side-who .txt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3} .who-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .who-role{ font-size:11.5px;color:var(--sb-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* Çıkış düğmesi üst çubuğa taşındı; oradaki `.tema-btn` biçimini kullanıyor. Yan menüdeki kurallar buradan kaldırıldı. */ .main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)} /* İçerik ortada ve genişliği sınırlı. Sınırsız bırakıldığında geniş ekranda tablo satırları 2000 pikseli buluyor; gözün satır başına dönerken kaybolduğu genişlik. Sol kenara yaslı bırakmak da çalışmıyordu: menü zaten solda ve sayfa hep sola yığılmış görünüyordu. */ .content{ padding:var(--s6);flex:1;width:100%; max-width:calc(var(--icerik-en) + 2 * var(--s6)); margin:0 auto; display:flex;flex-direction:column;gap:var(--s6); } /* Dikey yığın. Boşluğu "sonraki kardeş" kuralıyla vermek, araya bir
girdiği anda sessizce çalışmayı bırakıyor — kartlar formun çocuğu oluyor ve kural onlara ulaşmıyordu. Açık bir sınıf, sarmalayıcı ne olursa olsun çalışır. */ .stack{display:flex;flex-direction:column;gap:var(--s4)} .stack-sm{display:flex;flex-direction:column;gap:var(--s2)} .row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap} .row-end{margin-left:auto} /* ============ sayfa başlığı ============ */ .page-head{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap} .page-head h2{font-size:17px;font-weight:600;letter-spacing:-.02em} .page-head p{font-size:13.5px;color:var(--muted-fg);margin-top:4px;max-width:620px;line-height:1.55} .page-head .right{margin-left:auto;display:flex;gap:var(--s2);align-items:center} /* Kendi içinde kayan tam ekran araçlar (sohbet). Kenar boşluğu ve 1200px sınırı kalkıyor: sohbet zaten kendi kenarlıklarını çiziyor ve iki sütunu kendi içinde kayıyor. Dışarıdan bir boşluk daha eklemek, ekranın üçte birini kullanılmayan zemine ayırmak demekti. ------------------------------------------------------------------------ */ .content-flush{padding:0;max-width:none;margin:0;gap:0} /* ==================================================== ipucu (hover) Uzun bir açıklamayı sayfanın tepesinde sürekli tutmak yerine bir düğmeye bağlamak. Açıklama önemli ama her gün okunacak bir şey değil; ekranın üstünde durduğunda yalnızca yer kaplıyor. `title` yerine bunun sebebi: tarayıcının kendi ipucu bir saniye gecikiyor, biçimlenmiyor ve dokunmatikte hiç çıkmıyor. ------------------------------------------------------------------------ */ .tip{position:relative;display:inline-flex} .tip>.tip-body{ position:absolute;top:calc(100% + 8px);right:0;z-index:60; width:min(320px,calc(100vw - 32px)); background:var(--card);color:var(--fg); border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--golge-md); padding:10px 12px;font-size:12.5px;line-height:1.55;font-weight:400; opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .14s ease,transform .14s ease,visibility .14s; pointer-events:none;text-align:left; } .tip:hover>.tip-body, .tip:focus-within>.tip-body{opacity:1;visibility:visible;transform:translateY(0)} /* Düğmenin kendisi — üst çubuktaki diğer eylemlerle aynı ölçüde. */ .tip-btn{ width:32px;height:32px;border-radius:var(--radius-sm); display:grid;place-items:center;flex:none; background:transparent;border:1px solid transparent; color:var(--muted-fg);cursor:help; } .tip-btn:hover,.tip:focus-within .tip-btn{background:var(--muted);color:var(--fg)} .tip-btn svg{width:17px;height:17px} /* ============ card ============ */ .card{ background:var(--card);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--golge-xs); } .card-head{ display:flex;align-items:center;gap:var(--s3); padding:var(--s4) var(--s5);border-bottom:1px solid var(--border); } /* * Başlığın altındaki açıklama kendi satırına iner. * * .card-head bir flex satırı; açıklama h2'nin yanına yapışıyor ve iki * cümle tek satırda eziliyordu. width:100% flex sarmasını zorluyor. */ .card-head{flex-wrap:wrap} .card-head h2{font-size:14.5px;font-weight:600;letter-spacing:-.01em} .card-head .sub{width:100%;margin-top:2px} .sub{font-size:12.5px;color:var(--muted-fg);line-height:1.55} .card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center} .card-body{padding:var(--s5)} .card-body+.card-body{border-top:1px solid var(--border)} /* Paragraflar birbirine yapışmasın; sonuncusu kartın altına boşluk eklemesin. */ .card-body>p{margin-bottom:var(--s3)} .card-body>p:last-child{margin-bottom:0} .grid{display:grid;gap:16px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .stat{ background:var(--card);border:1px solid var(--border);border-radius:var(--radius); padding:18px 20px;box-shadow:var(--golge-xs); } .stat .k{font-size:13px;font-weight:500;color:var(--muted-fg);margin-bottom:8px} .stat .v{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1} .stat .n{font-size:12.5px;color:var(--muted-fg);margin-top:6px} /* ============ button ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; height:36px;padding:0 14px;border-radius:var(--radius-sm); font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap; border:1px solid transparent;transition:background .12s,border-color .12s,opacity .12s; } .btn svg{width:15px;height:15px} .btn-primary{background:var(--primary);color:var(--primary-fg)} .btn-primary:hover{opacity:.9} .btn-ghost{background:var(--card);border-color:var(--input);color:var(--fg)} .btn-ghost:hover{background:var(--muted)} .btn-danger{background:var(--card);border-color:var(--danger-border);color:var(--danger)} .btn-danger:hover{background:var(--danger-soft)} .btn-sm{height:30px;padding:0 10px;font-size:13px} .btn:disabled{opacity:.5;cursor:not-allowed} /* ============ form ============ */ .field{margin-bottom:16px} .field label{display:block;font-size:13.5px;font-weight:500;margin-bottom:7px} /* Tür tür saymak yerine "metin girişi olmayan"ları dışlıyoruz. Önce her tür tek tek yazılmıştı ve `number` listede yoktu: sayı alanları çerçevesiz, düz yazı gibi görünüyordu. Yeni bir tür eklendiğinde aynı hata tekrar eder — dışlama listesi bir kez yazılır. */ .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select,.field textarea, .filters input:not([type=checkbox]),.filters select{ width:100%;height:36px;padding:0 11px;font-size:13.5px; background:var(--card);border:1px solid var(--input);border-radius:var(--radius-sm); transition:border-color .12s,box-shadow .12s; } .field textarea{height:auto;padding:9px 11px;min-height:88px;resize:vertical} .field input:not([type=checkbox]):not([type=radio]):focus, .field select:focus,.field textarea:focus, .filters input:focus,.filters select:focus{ outline:none;border-color:var(--ring);box-shadow:0 0 0 3px var(--primary-soft); } .field input:disabled{background:var(--muted);color:var(--muted-fg);cursor:not-allowed} /* * Yardım metni ve hata — her yerde. * * Önce `.field .hint` diye yazılmıştı; alanın dışında kullanılan her .hint * hiçbir stil almıyor ve normal gövde metni gibi çıkıyordu. Bir sınıfın * çalışıp çalışmaması, hangi kutunun içinde durduğuna bağlı olmamalı. */ .hint{font-size:12.5px;color:var(--muted-fg);margin-top:7px;line-height:1.5} .err{font-size:12.5px;color:var(--danger);margin-top:6px} /* Onay kutusu — tarayıcının kendisi değil. accent-color ile boyanan yerel kutu her işletim sisteminde başka görünüyor ve boyandığında ucuz duruyordu. Kendi kutumuz: 16px, ince kenarlık, işaret SVG maskesiyle. */ .chk{ appearance:none;-webkit-appearance:none; width:16px;height:16px;flex:none;cursor:pointer; border:1px solid var(--input);border-radius:4px;background:var(--card); display:inline-grid;place-content:center;transition:background .12s,border-color .12s; } .chk::before{ content:"";width:10px;height:10px;transform:scale(0);transition:transform .12s; background:var(--primary-fg); clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%); } .chk:checked{background:var(--primary);border-color:var(--primary)} .chk:checked::before{transform:scale(1)} .chk:focus-visible{outline:2px solid var(--ring);outline-offset:2px} .check{display:flex;align-items:center;gap:9px;font-size:13.5px;margin-bottom:18px;cursor:pointer} /* ============ table ============ */ table{width:100%;border-collapse:collapse} th{ text-align:left;font-size:12.5px;font-weight:500;color:var(--muted-fg); padding:0 20px;height:40px;border-bottom:1px solid var(--border); white-space:nowrap; } td{padding:12px 20px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--muted)} td.num,th.num{font-variant-numeric:tabular-nums} .muted{color:var(--muted-fg);font-size:12.5px} .mono{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--muted-fg)} /* ============ badge ============ */ /* * Etiket — shadcn Badge ölçüleri. * * Geometri birebir shadcn'in güncel Badge'i: rounded-md (yarıçap - 2), * px-2 py-0.5, gap-1, text-xs/leading-4, font-medium, whitespace-nowrap, * w-fit, ikonlar 12px. Tam yuvarlak (rounded-full) eski sürümdü ve * shadcn'in kendisi de ondan vazgeçti — iyi bir sebeple: yuvarlak bir * kutuda sarılan metin kenarları badem şekline çeviriyor. * * Renkler soft tonda kalıyor. shadcn'in varsayılanı dolu bir arkaplan ama * o, sayfada tek başına duran bir rozet için; burada her tablo satırında * bir tane var ve dolu renkler listeyi okunmaz hâle getiriyor. * * Etiket yalnızca kısa durum kelimeleri için: "dizinde", "taslak", "pasif". * Bir ad etikete sığmıyorsa çözüm etiketi büyütmek değil, onu düz metin * yazmak. */ .tag{ display:inline-flex;align-items:center;justify-content:center; width:fit-content;flex:none;gap:4px;white-space:nowrap;overflow:hidden; font-size:12px;line-height:16px;font-weight:500; padding:2px 8px;border-radius:calc(var(--radius) - 2px); background:var(--muted);color:var(--muted-fg);border:1px solid var(--border); } .tag>svg{width:12px;height:12px;flex:none;pointer-events:none} /* Aynı hücrede birden fazla etiket varsa birbirine yapışmasın. */ .tag+.tag{margin-left:6px} .tag-ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-border)} .tag-warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-border)} .tag-danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)} .tag-peach{background:var(--primary-soft);color:var(--primary);border-color:var(--primary-border)} /* * Raporlu içerik — listedeki tek yanıp sönen şey. * * Yanıp sönme rahatsız edici bir etkidir ve tam da o yüzden buraya konuldu: * şikayet edilmiş içerik, listede gözün kaçırmaması gereken tek satır. * İkinci bir yerde kullanılırsa ikisi de dikkat çekmez olur. * * Nefes alır gibi, 1,6 saniyede bir. Daha hızlısı okumayı zorlaştırıyor, * daha yavaşı fark edilmiyor. Metin hep okunur kalıyor — sönen kısım * yalnızca zemin ve kenar; opacity ile söndürmek yazıyı da siliyordu. * * Hareketi kapatanlar için sabit kırmızı kalıyor (aşağıdaki * prefers-reduced-motion kuralı animasyonu kaldırıyor, renk duruyor). */ /* * Kenar çubuğunda vurgulu satır — şu an yalnızca Mesajlar. * * Menüdeki diğer satırlar yönetilen içeriğe götürüyor; bu ise karşılık * bekleyen bir insana. Aynı görünmesi, bekleyen mesajın cevapsız kalması * demek. Vurgu marka rengiyle: dikkat çekiyor ama uyarı gibi durmuyor — * kırmızı olsaydı "bir şey ters gitti" diye okunurdu. */ /* "Mesajlar" — yalnızca **simgesi** mercan. Bu satır karşılık bekleyen bir insana götürüyor ve diğerlerinden ayrılması gerekiyor. Ama önceden metni de mercandı ve etkin satır da mercan zeminli: ikisi yan yana durunca Mesajlar sürekli seçiliymiş gibi görünüyordu. Ayrım simgede kalıyor, seçili olmak zeminde. */ .side-nav a.accent svg{color:var(--primary)} .side-nav a.accent.on svg{color:var(--primary)} .tag-report{ background:var(--danger-soft);color:var(--danger);border-color:var(--danger); animation:raporlu 1.6s ease-in-out infinite } @keyframes raporlu{ 0%,100%{background:var(--danger-soft);border-color:var(--danger-border)} 50%{background:var(--primary-soft);border-color:var(--danger)} } /* * Satır içi uyarı — bir cümle, bir etiket değil. * * Önce .tag-warn ile yazılmıştı; cümle uzunluğunda bir metin çipin içine * girince hem sarıyor hem satırı şişiriyordu. Uyarı okunacak bir şey, * rozet değil. */ .warn-line{ display:flex;gap:6px;margin-top:6px; font-size:12px;line-height:1.5;color:var(--warn); } .warn-line svg{width:13px;height:13px;flex:none;margin-top:2px;color:var(--warn); fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .warn-line b{font-weight:600} /* ============ boş durum / uyarı ============ */ .empty{padding:56px 20px;text-align:center;color:var(--muted-fg)} .empty svg{width:32px;height:32px;margin-bottom:12px;opacity:.4;stroke-width:1.5} .empty p{font-size:13.5px} .note{ display:flex;gap:10px;padding:13px 16px;border-radius:var(--radius); background:var(--card);border:1px solid var(--border); font-size:13.5px;line-height:1.55;color:var(--muted-fg); } .note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--fg)} .note b{color:var(--fg);font-weight:600} /* Düzeltilmesi gereken bir durum — bilgi notundan ayrılsın diye sarı. */ .note-warn{background:var(--warn-soft);border-color:var(--warn-border);color:var(--warn)} .note-warn svg,.note-warn b{color:var(--warn)} .flash{ padding:12px 16px;border-radius:var(--radius);font-size:13.5px; border:1px solid transparent; } .flash-ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-border)} .flash-err{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)} /* ============ filtre çubuğu ============ */ .filters{ display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end; padding:16px 20px;border-bottom:1px solid var(--border); } .filters .f{display:grid;gap:6px} .filters label{font-size:12.5px;font-weight:500;color:var(--muted-fg)} /* Genişlik yalnızca gerçek giriş alanlarına. Onay kutusu bu satırda da 16px kalmalı — açılır çoklu seçim filtre çubuğunun içinde duruyor ve min-width onun listesindeki kutuları da uzatıyordu. */ .filters input:not([type=checkbox]):not([type=radio]), .filters select{min-width:160px;width:auto} .filters .ms input[type=text]{min-width:0;width:100%} /* ============ yetki matrisi ============ */ /* Kaynak solda bir kez, eylem sütun başlığında bir kez, kesişimde yalnızca işaret. Sütun başlığındaki "tümü" veriye benzemesin diye başlığın yanında küçük bir düğme olarak duruyor. */ .matrix thead th{background:var(--card);text-align:center} .matrix thead th:first-child{text-align:left;width:34%} .matrix .th-in{display:inline-flex;align-items:center;gap:7px} .matrix tbody td{padding:0;text-align:center} .matrix tbody td:first-child{padding:11px 20px;text-align:left} .mx-name{font-size:13.5px;font-weight:500;line-height:1.35} .mx-name small{display:block;font-weight:400;color:var(--muted-fg);font-size:12px} .mx-cell{display:grid;place-items:center;height:46px;cursor:pointer} .mx-cell:hover{background:var(--muted)} .mx-all{ font-size:11px;font-weight:500;color:var(--muted-fg); background:var(--card);border:1px solid var(--input); cursor:pointer;padding:1px 6px;border-radius:4px; } .mx-all:hover{background:var(--muted);color:var(--fg)} .extra-list{padding:8px} .perm{ display:flex;align-items:center;gap:10px;padding:9px 12px; border-radius:var(--radius-sm);cursor:pointer;font-size:13.5px; } .perm:hover{background:var(--muted)} .perm code{ margin-left:auto;font-size:11.5px;color:var(--muted-fg); background:var(--muted);border:1px solid var(--border); padding:1px 6px;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } /* Alt işlem çubuğu */ .actionbar{ position:sticky;bottom:0;z-index:15; display:flex;gap:8px;align-items:center; padding:14px 20px; background:var(--card);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--golge-sm); } .actionbar .spacer{flex:1} /* Hesap bloğu — profil sayfasına bağlantı. Satırın tamamını kaplıyor: önce yalnızca yazı tıklanabilirdi, avatar ve aradaki boşluk ölü hedefti. */ .who-link{ display:flex;align-items:center;gap:10px;flex:1;min-width:0; padding:6px;border-radius:var(--radius-sm); transition:background .12s; } .who-link:hover{background:var(--muted)} /* ============ profil ============ */ .avatar-edit{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap} .avatar-lg{ width:72px;height:72px;border-radius:999px;object-fit:cover;flex:none; background:var(--muted);display:grid;place-items:center; font-size:24px;font-weight:600;color:var(--muted-fg); } .file-btn{position:relative;overflow:hidden;display:inline-flex} .file-btn input[type=file]{ position:absolute;inset:0;opacity:0;cursor:pointer;font-size:100px; } /* ============ ek bileşenler ============ */ /* Ayırıcı */ /* * Ayırıcı çizgi kendi boşluğunu taşır. * * Boşluksuz bir çizgi, ayırdığı iki şeyi birbirine yapıştırıyordu ve her * kullanan yere elle margin yazmak gerekiyordu — 26 kullanımın 22'sinde * yazılmamıştı. Araç çubuğundaki dikey ayırıcı (.md-bar .sep) kendi * boşluğunu ayrıca tanımlıyor. */ .sep{height:1px;background:var(--border);border:0;margin:var(--s4) 0} /* Avatar */ .avatar{ width:32px;height:32px;border-radius:999px;flex:none;object-fit:cover; background:var(--muted);display:grid;place-items:center; font-size:12px;font-weight:600;color:var(--muted-fg); } .avatar-sm{width:24px;height:24px;font-size:10px} /* Baş harf hâli: zemin rengi kişiye göre satır içinde geliyor. */ .avatar-init{color:#fff;letter-spacing:.02em;text-transform:uppercase} .avatar-lg.avatar-init{font-size:24px} /* Kişi satırı — tabloda tekrar eden kalıp */ /* Seçiciler .txt altına kapatıldı. Önceden ikinci satır `.person span` ile yazılıyordu; avatar da .person içinde bir olduğu için o kural avatarı da yakalıyor ve baş harfleri gri yapıp display:block'a çeviriyordu — daire renkli görünüyor ama harf okunmuyordu. Bir elemana göre seçmek, aynı etiketi kullanan her kardeşi yakalar. */ .person{display:flex;align-items:center;gap:var(--s3);min-width:0} .person .txt{min-width:0;display:flex;flex-direction:column;gap:1px} .person .txt b{ display:flex;align-items:center;gap:6px; font-size:13.5px;font-weight:500;line-height:1.35; } .person .txt>span{ display:block;font-size:12.5px;color:var(--muted-fg);line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* Açılır seçim — tablo içinde kullanılan küçük select */ .select{ height:32px;padding:0 28px 0 10px;font-size:13px; background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center; border:1px solid var(--input);border-radius:var(--radius-sm); appearance:none;-webkit-appearance:none;cursor:pointer; } .select:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px var(--primary-soft)} /* Tablo sarmalayıcı — dar ekranda yatay kaydırma */ .table-wrap{overflow-x:auto} /* İşlem sütunu */ /* Tabloya bağlı değil: kart içinde de aynı hizalama gerekebiliyor. */ .actions{text-align:right;white-space:nowrap} .actions>*+*{margin-left:var(--s1)} /* ============ sayfalama ============ */ .pager{display:flex;gap:4px;justify-content:center;padding:16px;flex-wrap:wrap} .pager a,.pager span{ min-width:32px;height:32px;padding:0 9px;border-radius:var(--radius-sm); display:inline-flex;align-items:center;justify-content:center; font-size:13px;font-weight:500;border:1px solid var(--input);background:var(--card); } .pager a:hover{background:var(--muted)} .pager .active{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)} .pager .off{opacity:.45} /* ============ giriş ekranı ============ */ .auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)} .auth-box{ width:100%;max-width:384px;background:var(--card); border:1px solid var(--border);border-radius:var(--radius); padding:32px 28px;box-shadow:var(--golge-sm); } .auth-logo{width:44px;height:44px;display:block;margin:0 auto 16px} .auth-box h1{font-size:18px;font-weight:600;text-align:center;letter-spacing:-.02em;margin-bottom:6px} .auth-box .sub{text-align:center;color:var(--muted-fg);font-size:13.5px;margin-bottom:24px} .alert{ background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger-border); border-radius:var(--radius-sm);padding:11px 13px;font-size:13px;margin-bottom:16px; } .auth-foot{text-align:center;margin-top:20px;font-size:13px;color:var(--muted-fg)} .menu-btn{display:none;background:none;cursor:pointer;padding:8px} .menu-btn i{display:block;width:18px;height:1.5px;background:var(--fg);border-radius:2px} .menu-btn i+i{margin-top:4px} /* ============ duyarlı ============ */ @media (max-width:900px){ .grid-4{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr} /* Dar ekranda menü üstten değil, üst çubuğun **altından** açılıyor: çubuk zaten yapışık ve menü onun üstüne binince marka kayboluyordu. */ .side{ position:fixed;left:0;top:var(--bar-h);z-index:60; height:calc(100svh - var(--bar-h)); transform:translateX(-100%);transition:transform .2s; box-shadow:var(--golge-md); } .side.open{transform:none} .content{padding:16px} /* Menü açma düğmesi yalnızca menünün gizlendiği genişlikte görünüyor. */ .menu-btn{display:block} .ust-marka{width:auto;border-right:0;padding-right:var(--s2)} .ust-marka .txt i{display:none} .ust-govde{padding:0 var(--s3)} .matrix thead th:first-child{width:auto} } @media (max-width:560px){ .grid-4{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ---------------- ekip ---------------- */ /* Bulunan kullanıcı satırı — kart içinde vurgulu bir şerit. */ .found{ display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap; margin-top:var(--s4);padding:var(--s3) var(--s4); background:var(--muted);border:1px solid var(--border);border-radius:var(--radius); } /* Durum noktası */ .dot{width:7px;height:7px;border-radius:999px;display:inline-block;flex:none} .dot-ok{background:var(--ok)} .dot-off{background:var(--muted-fg)} /* ---------------- gruplu tablo ---------------- */ /* Aşı takvimi gibi bir eksene göre gruplanan listelerde ara başlık satırı. */ .group-row td{ background:var(--muted);padding:8px 20px; border-bottom:1px solid var(--border); } .group-row .group-label{ font-size:12.5px;font-weight:600;color:var(--fg);margin-right:var(--s2); } tbody tr.group-row:hover td{background:var(--muted)} /* Pasif satır — silinmiş gibi görünmesin, sadece geri planda dursun. */ tr.is-off td{opacity:.55} tr.is-off:hover td{opacity:.8} .code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px; background:var(--muted);border:1px solid var(--border); padding:1px 6px;border-radius:4px;color:var(--muted-fg); } /* ---------------- switch ---------------- */ /* İki durumlu ayarlar için onay kutusu yerine anahtar. Onay kutusu "bu listeden şunları seç" demek; anahtar "bu özellik açık mı" demek. Aşının takvimde olup olmaması bir seçim değil, bir durum — ve anahtarın açık/kapalı hâli tek bakışta okunuyor. */ .switch{ appearance:none;-webkit-appearance:none; width:38px;height:22px;flex:none;cursor:pointer;position:relative; background:var(--input);border-radius:999px;transition:background .16s; } .switch::after{ content:"";position:absolute;top:2px;left:2px;width:18px;height:18px; background:var(--card);border-radius:999px;transition:transform .16s; box-shadow:var(--golge-xs); } .switch:checked{background:var(--primary)} .switch:checked::after{transform:translateX(16px)} .switch:focus-visible{outline:2px solid var(--ring);outline-offset:2px} .switch-row{display:flex;align-items:center;gap:var(--s3);cursor:pointer} .switch-row .txt{flex:1;min-width:0} .switch-row b{display:block;font-size:13.5px;font-weight:500} .switch-row span{display:block;font-size:12.5px;color:var(--muted-fg)} /* ---------------- açılır çoklu seçim ---------------- */ /* shadcn'deki Popover + Command kalıbının Blade karşılığı. Önce çip sırası denendi: sekiz on grup olunca satırı dolduruyor ve süzgeç ekranın yarısını kaplıyordu. Açılır liste tek bir düğmeye iniyor, seçilen sayısını düğmenin üstünde gösteriyor.
kullanılmıyor: açık panelin dışına tıklayınca kapanması, Escape ile kapanması ve düğmenin durumunu göstermesi gerekiyor — bunlar zaten JS istiyor, yarı yolda bir yerel öğe kullanmak iki farklı davranış demek. */ .ms{position:relative;display:inline-flex} .ms-btn{ display:inline-flex;align-items:center;gap:8px; height:36px;padding:0 12px;border-radius:var(--radius-sm); border:1px solid var(--input);background:var(--card); font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap; } .ms-btn:hover{background:var(--muted)} .ms-btn .caret{ width:14px;height:14px;color:var(--muted-fg);transition:transform .14s; } .ms.open .ms-btn{border-color:var(--ring);box-shadow:0 0 0 3px var(--primary-soft)} .ms.open .ms-btn .caret{transform:rotate(180deg)} .ms-count{ font-size:11.5px;font-weight:600;padding:1px 6px;border-radius:999px; background:var(--primary-soft);color:var(--primary); } .ms-panel{ position:absolute;top:calc(100% + 6px);left:0;z-index:40; min-width:260px;max-width:340px; background:var(--card);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--golge-md); display:none; } .ms.open .ms-panel{display:block} .ms-search{padding:8px;border-bottom:1px solid var(--border)} .ms-search input{ width:100%;height:32px;padding:0 10px;font-size:13.5px; border:1px solid var(--input);border-radius:var(--radius-sm);background:var(--card); } .ms-search input:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px var(--primary-soft)} .ms-list{max-height:260px;overflow-y:auto;padding:6px} .ms-opt{ display:flex;align-items:center;gap:10px; padding:7px 9px;border-radius:var(--radius-sm);cursor:pointer;font-size:13.5px; } .ms-opt:hover{background:var(--muted)} .ms-opt small{margin-left:auto;font-size:11.5px;color:var(--muted-fg); font-variant-numeric:tabular-nums} .ms-empty{padding:18px 12px;text-align:center;color:var(--muted-fg);font-size:13px} .ms-foot{ display:flex;align-items:center;gap:6px; padding:8px;border-top:1px solid var(--border); } .ms-foot .spacer{flex:1} .ms-link{ background:none;border:0;cursor:pointer;font-size:12.5px;font-weight:500; color:var(--muted-fg);padding:4px 7px;border-radius:5px; } .ms-link:hover{background:var(--muted);color:var(--fg)} /* ---------------- form yerleşimi ---------------- */ /* Alan grupları: tek sütun, iki sütun, üç sütun. Ekranlar kendi grid'ini yazmasın diye burada. */ .form-grid{display:grid;gap:var(--s4) var(--s5)} .form-grid-2{grid-template-columns:repeat(2,1fr)} .form-grid-3{grid-template-columns:repeat(3,1fr)} .form-grid .field{margin-bottom:0} .field-wide{grid-column:1/-1} /* Kart içinde bölüm ayrımı */ .card-section{padding:var(--s5)} .card-section+.card-section{border-top:1px solid var(--border)} .card-section>h3{ font-size:13px;font-weight:600;margin-bottom:var(--s4); color:var(--fg); } .card-section>h3 small{display:block;font-weight:400;color:var(--muted-fg); font-size:12.5px;margin-top:3px} @media (max-width:900px){ .form-grid-2,.form-grid-3{grid-template-columns:1fr} } /* ---------------- sayfalama çubuğu ---------------- */ /* Sayı aralığı solda, sayfa düğmeleri sağda — "kaçıncı kayıttayım" sorusunun cevabı düğmelere bakmadan görünsün. */ .pager-bar{ display:flex;align-items:center;justify-content:space-between;gap:var(--s4); padding:var(--s3) var(--s5);border-top:1px solid var(--border);flex-wrap:wrap; } .pager-bar .pager{padding:0} /* ---------------- görsel yükleme alanı ---------------- */ .imgfield{display:flex;flex-direction:column;gap:var(--s2)} .field-label{display:block;font-size:13.5px;font-weight:500} /* Görselin tamamı görünüyor — kırpılmıyor. Önce kutu sabit 1.6 orana kilitliydi ve görsel `cover` ile kırpılıyordu: yüklenen dikey bir fotoğrafın yarısı görünmüyordu ve kullanıcı neyi yüklediğini anlayamıyordu. Şimdi kutu sabit yükseklikte, görsel `contain` ile tamamı sığacak şekilde duruyor; kendi oranı korunuyor. Uygulamadaki kırpma ayrı bir katmanda gösteriliyor (aşağıdaki .imgfield-crop). */ .imgfield-box{ position:relative;width:100%;max-width:560px;height:280px; border:1.5px dashed var(--input);border-radius:var(--radius); background: linear-gradient(45deg,var(--muted) 25%,transparent 25%,transparent 75%,var(--muted) 75%), linear-gradient(45deg,var(--muted) 25%,transparent 25%,transparent 75%,var(--muted) 75%), var(--card); background-size:16px 16px;background-position:0 0,8px 8px; overflow:hidden;display:grid;place-items:center; transition:border-color .14s,background-color .14s; } .imgfield-box.drag{border-color:var(--primary);background-color:var(--primary-soft)} /* Kesin boyut + object-fit. Önce `max-width/max-height:100%` kullanılmıştı: yüzdelik max-height bir grid öğesinde çözülmüyor, görsel doğal oranında 558×372 çiziliyor ve 280px yükseklikteki kutu alttan kesiyordu — tam da "sığmıyor" denen şey. Elemana kesin boyut verilince object-fit devreye giriyor ve görseli kutunun içine harflendirerek (letterbox) yerleştiriyor. */ .imgfield-preview{ width:100%;height:100%;object-fit:contain;display:block; /* Grid öğelerinin varsayılan min-height değeri `auto`; görselin doğal yüksekliği küçülmeyi engelliyor ve height:100% hiçbir işe yaramıyordu. Sıfırlamadan bu kutu çalışmıyor. */ min-width:0;min-height:0; } /* Uygulamada görünecek alanın çerçevesi — oran farklıysa neyin kırpılacağı belli olsun. Sadece görsel varken çizilir. */ .imgfield-crop{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); border:2px dashed var(--primary);border-radius:4px; pointer-events:none;display:none; } .imgfield-crop::after{ content:"uygulamada görünen alan"; position:absolute;left:0;bottom:-22px; font-size:11px;font-weight:600;color:var(--primary); background:var(--card);padding:1px 5px;border-radius:4px;white-space:nowrap; } .imgfield-empty{text-align:center;color:var(--muted-fg);padding:var(--s4);pointer-events:none} .imgfield-empty svg{width:28px;height:28px;opacity:.5;margin-bottom:var(--s2)} .imgfield-empty p{font-size:13.5px;font-weight:500;color:var(--fg)} .imgfield-empty span{font-size:12.5px;display:block;margin-top:3px} .imgfield-box input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer} .imgfield-foot{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap} /* Afiş formundaki kırpıcı: yüksekliği sınırlı, kırpıcı içini kendisi ölçekliyor. */ .kirpici{max-width:560px;height:320px;margin-top:var(--s2);border-radius:var(--radius);overflow:hidden;background:var(--muted)} .kirpici img{display:block;max-width:100%} .imgfield-meta{display:flex;gap:var(--s3);flex-wrap:wrap;font-size:12.5px;color:var(--muted-fg)} .imgfield-meta b{color:var(--fg);font-weight:500} @media (max-width:600px){ .imgfield-box{height:200px} .imgfield-crop::after{display:none} } /* Tabloda görsel küçük resmi */ /* Listedeki görsel — tamamı görünür. Önce `cover` ile kırpılıyordu: bir banner'ı listede tanımanın tek yolu görseli, kırpılmış hâli hangi banner olduğunu söylemiyor. Kutu banner oranında (1.6), farklı oranlı görseller kendi oranıyla ortalanıyor. */ .thumb{ width:128px;height:80px;object-fit:contain;border-radius:var(--radius-sm); border:1px solid var(--border);display:block; background: linear-gradient(45deg,var(--muted) 25%,transparent 25%,transparent 75%,var(--muted) 75%), linear-gradient(45deg,var(--muted) 25%,transparent 25%,transparent 75%,var(--muted) 75%), var(--card); background-size:12px 12px;background-position:0 0,6px 6px; } /* ============================================================ metin editörü Makale metni: araç çubuğu, yazma alanı ve canlı önizleme. Önizleme kutusunun tipografisi bilerek uygulamadakine yakın tutuldu — panelin kendi yazı ölçüleriyle çizilseydi, yazar burada gördüğü satır uzunluğunun telefonda da öyle olacağını sanardı. ------------------------------------------------------------------------ */ .md{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .md-bar{ display:flex;flex-wrap:wrap;gap:2px;align-items:center; padding:6px;background:var(--muted);border-bottom:1px solid var(--border); } .md-bar button{ height:30px;min-width:30px;padding:0 8px; display:inline-flex;align-items:center;justify-content:center; background:transparent;border:1px solid transparent;border-radius:var(--radius-sm); color:var(--fg);cursor:pointer;font-size:13px;line-height:1; } .md-bar button:hover{background:var(--card);border-color:var(--border)} .md-bar button:focus-visible{outline:2px solid var(--ring);outline-offset:-1px} .md-bar button svg{width:15px;height:15px;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .md-bar .sep{width:1px;height:18px;background:var(--border);margin:0 4px} .md-bar .busy{margin-left:auto;font-size:12.5px;color:var(--muted-fg);padding-right:6px} /* İki sütun: solda kaynak, sağda önizleme. Dar ekranda alt alta. */ .md-panes{display:grid;grid-template-columns:1fr 1fr} .md-panes>*+*{border-left:1px solid var(--border)} @media (max-width:980px){ .md-panes{grid-template-columns:1fr} .md-panes>*+*{border-left:0;border-top:1px solid var(--border)} } /* .field textarea kuralını ezmesi gerekiyor: burada çerçeve kutunun kendisinde. */ .md-panes textarea{ width:100%;min-height:420px;border:0;border-radius:0;padding:var(--s4); resize:vertical;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace); font-size:13px;line-height:1.7;background:var(--card); } .md-panes textarea:focus{outline:0;box-shadow:none} .md-preview{ padding:var(--s4);background:var(--muted);overflow-wrap:anywhere; max-height:560px;overflow-y:auto; } .md-empty{color:var(--muted-fg);font-size:13px} .md-p{font-size:15px;line-height:1.6;color:var(--fg);margin:0 0 14px} .md-center{text-align:center} .md-h2{font-size:19px;line-height:1.35;font-weight:700;margin:10px 0 8px} .md-h3{font-size:16px;line-height:1.4;font-weight:600;margin:8px 0 6px} .md-li{display:flex;gap:8px;margin-bottom:8px;font-size:15px;line-height:1.6} .md-li>span:first-child{color:var(--muted-fg);min-width:18px} .md-link{color:var(--primary);text-decoration:underline} .md-img{ display:block;width:100%;height:auto;border-radius:12px;margin:12px 0; background:var(--muted); } .md-foot{ display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap; padding:8px var(--s4);border-top:1px solid var(--border); background:var(--muted);font-size:12.5px;color:var(--muted-fg); } /* ============================================================ ürün galerisi Sürükleyerek sıralanan görsel şeridi. Sıra kendiliğinden kaydedildiği için ayrı bir "kaydet" düğmesi yok; numara ve "kapak" etiketi bırakıldığı anda güncelleniyor. ------------------------------------------------------------------------ */ .gal{display:flex;flex-wrap:wrap;gap:var(--s3)} .gal-item{ position:relative;width:118px;height:118px;flex:none;cursor:grab; border:1px solid var(--border);border-radius:var(--radius);overflow:hidden; background:var(--muted);transition:box-shadow .12s,opacity .12s; } .gal-item:hover{box-shadow:var(--golge-sm)} .gal-item.dragging{opacity:.45;cursor:grabbing} .gal-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} /* Sıra numarası — sürüklerken hangi konumda olduğu görünsün. */ .gal-no{ position:absolute;top:6px;left:6px;min-width:20px;height:20px;padding:0 5px; display:grid;place-items:center;border-radius:var(--radius-sm); background:var(--kaplama);color:#fff;font-size:11px;font-weight:600; } .gal-cover{ position:absolute;bottom:6px;left:6px;padding:2px 7px;border-radius:var(--radius-sm); background:var(--primary);color:var(--primary-fg);font-size:10.5px;font-weight:600; } .gal-del{ position:absolute;top:5px;right:5px;width:22px;height:22px; display:grid;place-items:center;border-radius:var(--radius-sm); background:var(--kaplama);color:#fff;cursor:pointer;opacity:0; transition:opacity .12s,background .12s; } .gal-item:hover .gal-del{opacity:1} .gal-del:hover{background:var(--danger)} .gal-del svg{width:12px;height:12px} .gal-del:focus-visible{opacity:1;outline:2px solid var(--ring);outline-offset:1px} /* ================================================================== sekmeler shadcn Tabs ölçüleri: soluk zeminli bir şerit, seçili olan kart rengine çıkıyor. Bölümleri gizlemek yerine yan yana koymak uzun sayfayı kısaltıyor — ama yalnızca her sekme kendi başına anlamlıysa. Tek bir formun alanlarını sekmelere bölmek, gizli sekmedeki doğrulama hatasını görünmez yapar. ------------------------------------------------------------------------ */ .tabs{ display:inline-flex;gap:2px;padding:3px;flex-wrap:wrap; background:var(--muted);border-radius:var(--radius); } .tabs button, .tabs a{ display:inline-flex;align-items:center;gap:6px; height:30px;padding:0 12px;border-radius:var(--radius-sm); background:transparent;color:var(--muted-fg); font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap; transition:background .12s,color .12s; } .tabs button:hover, .tabs a:hover{color:var(--fg)} .tabs button[aria-selected="true"], .tabs a[aria-selected="true"]{ background:var(--card);color:var(--fg); box-shadow:var(--golge-xs); } .tabs button:focus-visible{outline:2px solid var(--ring);outline-offset:1px} /* Sekmedeki sayı — kaç görsel, kaç fiyat olduğu açılmadan görünsün. */ .tabs .n{ min-width:18px;height:18px;padding:0 5px;border-radius:999px; display:inline-grid;place-items:center; background:var(--border);color:var(--muted-fg);font-size:11px;font-weight:600; } .tabs button[aria-selected="true"] .n{background:var(--muted)} /* Panel, .stack'in yaptığı dikey aralığı sürdürüyor. Sekme içeriği doğrudan .content'in çocuğu olmadığı için oradaki gap ona ulaşmıyordu; kartlar birbirine yapışıyordu. */ .tab-panel{display:flex;flex-direction:column;gap:var(--s4)} .tab-panel[hidden]{display:none} /* Hatalı sekme — kaydetmeyi engelleyen alan hangi sekmedeyse orada. */ .tabs button[data-tab-error]{color:var(--danger)} .tabs .n-err{background:var(--danger);color:#fff} .tabs button[aria-selected="true"] .n-err{background:var(--danger);color:#fff} /* =========================================================== kitle seçimi Bildirimde kime gideceği. Kaç kişi olduğu seçenekle birlikte duruyor: yayınlanan duyuru geri alınabilse de herkesin kutusuna düşüyor, sayıyı seçtikten sonra aramak geç oluyor. ------------------------------------------------------------------------ */ .aud{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3)} .aud-opt{ display:flex;gap:10px;padding:12px 14px;cursor:pointer; border:1px solid var(--border);border-radius:var(--radius); transition:border-color .12s,background .12s; } .aud-opt:hover{background:var(--muted)} .aud-opt:has(input:checked){border-color:var(--primary);background:var(--primary-soft)} .aud-opt input{margin-top:3px;flex:none;accent-color:var(--primary)} .aud-body{display:flex;flex-direction:column;gap:2px;min-width:0} .aud-body b{font-size:13.5px;font-weight:600} .aud-body .muted{font-size:12px;line-height:1.45} .aud-n{font-size:12.5px;font-weight:600;color:var(--primary)} /* ============================================================ beden seçimi Dokuz kutucuk; beden numarası büyük, yaş karşılığı altında küçük. ------------------------------------------------------------------------ */ .sizes{display:flex;flex-wrap:wrap;gap:var(--s2)} .size-opt{ display:flex;align-items:center;gap:8px;cursor:pointer; padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm); transition:border-color .12s,background .12s; } .size-opt:hover{background:var(--muted)} .size-opt:has(input:checked){border-color:var(--primary);background:var(--primary-soft)} .size-opt input{accent-color:var(--primary);flex:none} .size-opt span{display:flex;flex-direction:column;line-height:1.25} .size-opt b{font-size:13.5px;font-weight:600} .size-opt .muted{font-size:11px} /* Fiyat seyri — tek çizgi, kütüphanesiz. */ .spark{width:100%;height:90px;display:block;margin-top:10px;overflow:visible} .spark-line{fill:none;stroke:var(--primary);stroke-width:2; stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .spark-fill{fill:var(--primary-soft);stroke:none} /* Arkasında veri kaynağı olmayan kutu — sayı yokluğu görünür olmalı, yoksa "0" sanılıyor. */ .stat.is-off{background:var(--muted);border-style:dashed} .stat.is-off .v{color:var(--muted-fg)} /* ============================================================ onay penceresi Yerel : odak tuzağı, Esc ile kapanma ve arka plan karartması tarayıcıdan geliyor — elle yazılan modal bunların hepsini kaçırıyor. ------------------------------------------------------------------------ */ .dlg{ /* margin:auto ortalamayı sağlıyor. Tarayıcının kendi biçimi bunu zaten veriyor ama sayfanın sıfırlaması (*{margin:0}) eziyordu — o yüzden burada geri konuluyor, yoksa pencere sol üst köşede açılıyor. */ margin:auto; width:min(560px,calc(100vw - 32px));padding:0;border:1px solid var(--border); border-radius:var(--radius);background:var(--card);color:var(--fg); box-shadow:var(--golge-lg); } .dlg::backdrop{background:var(--kaplama)} .dlg-head{ display:flex;align-items:center;justify-content:space-between;gap:var(--s3); padding:var(--s4) var(--s5);border-bottom:1px solid var(--border); } .dlg-head h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em} .dlg-x{ display:grid;place-items:center;width:30px;height:30px;flex:none; border:0;border-radius:var(--radius-sm);background:none;color:var(--muted-fg);cursor:pointer; } .dlg-x:hover{background:var(--muted);color:var(--fg)} .dlg-x svg{width:16px;height:16px} .dlg-body{ padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4); max-height:min(62vh,560px);overflow-y:auto; } /* Ne gönderileceğinin birebir önizlemesi. */ .dlg-preview{display:flex;gap:var(--s3);align-items:flex-start} .dlg-preview img{ width:72px;height:36px;flex:none;object-fit:cover; border-radius:var(--radius-sm);border:1px solid var(--border); } .dlg-preview b{display:block;font-size:14.5px;line-height:1.35} .dlg-preview p{margin:4px 0 0;font-size:13px;line-height:1.45} .dlg-facts{margin:0;display:flex;flex-direction:column;gap:8px} .dlg-facts > div{display:flex;gap:var(--s3);align-items:baseline} .dlg-facts dt{ flex:none;width:132px;font-size:12.5px;color:var(--muted-fg); } .dlg-facts dd{margin:0;font-size:13.5px} /* Seçilen zamanla birlikte tek cümlelik özet — kaydet düğmesinin üstünde. */ .dlg-summary{ margin:0;padding:var(--s3) var(--s4);border-radius:var(--radius-sm); background:var(--primary-soft);font-size:13px;line-height:1.5; } .dlg-summary.is-err{background:var(--danger-soft);color:var(--danger)} .dlg-foot{ display:flex;justify-content:flex-end;gap:var(--s2); padding:var(--s4) var(--s5);border-top:1px solid var(--border);background:var(--muted); border-radius:0 0 var(--radius) var(--radius); } .dlg-foot .btn[disabled]{opacity:.5;pointer-events:none} /* "Düzenle" solda, onay ve vazgeç sağda: düzenleme kipini açmak gönderimden ayrı bir iş, aynı öbekte durunca yanlışlıkla basılıyor. */ .dlg-foot .spacer{flex:1} /* Pencere içindeki bölüm başlığı — hemen altındaki alan etiketine yapışmasın. */ .dlg-body .field-label{margin-bottom:var(--s3)} @media (max-width:560px){ .dlg-facts > div{flex-direction:column;gap:2px} .dlg-facts dt{width:auto} } /* Pencere içindeki kip değişimi. `hidden` yerine sınıf kullanılıyor: alanlar formda kalmalı ki gizliyken de gönderilsinler — yalnızca görünmesinler. */ .is-hidden{display:none} .dlg-thumb{ width:64px;height:32px;flex:none;object-fit:cover; border-radius:var(--radius-sm);border:1px solid var(--border); } /* Kimseye ulaşmayacak gönderim gibi, engellemediğimiz ama sessiz de geçmediğimiz durumlar. */ .dlg-summary.is-warn{background:var(--warn-soft);color:var(--warn); border:1px solid var(--warn-border)} /* ============================================================ seçim kartları Birkaç seçenekten birini seçtiren radyo öbeği (yayın durumu gibi). Kitle seçimindeki `.aud-opt` ile aynı görsel dil; orası kendi sayısal düzenine bağlı olduğu için ayrı duruyor. ------------------------------------------------------------------------ */ .choices{display:flex;flex-direction:column;gap:var(--s2)} .choice{ display:flex;gap:10px;padding:12px 14px;cursor:pointer; border:1px solid var(--border);border-radius:var(--radius); transition:border-color .12s,background .12s; } .choice:hover{background:var(--muted)} .choice:has(input:checked){border-color:var(--primary);background:var(--primary-soft)} .choice input{margin-top:3px;flex:none;accent-color:var(--primary)} .choice-body{display:flex;flex-direction:column;gap:2px;min-width:0} .choice-body b{font-size:13.5px;font-weight:600} .choice-body span{font-size:12px;line-height:1.45;color:var(--muted-fg)} /* ======================================================= ilan görselleri Kullanıcının yüklediği fotoğraflar. Kırpılmıyor — inceleyen kişi ürünün tamamını görmeli; kırpılmış bir fotoğrafta kusur gizlenebilir. ------------------------------------------------------------------------ */ .shots{display:flex;flex-wrap:wrap;gap:var(--s3)} .shot{ display:block;width:150px;height:150px;flex:none;overflow:hidden; border:1px solid var(--border);border-radius:var(--radius);background:var(--muted); transition:border-color .12s; } .shot:hover{border-color:var(--primary)} .shot img{width:100%;height:100%;object-fit:contain;display:block} /* Kullanıcının yazdığı serbest metin. Satır sonları korunuyor: ilan açıklamaları madde madde yazılıyor ve tek paragrafa sıkışınca okunmuyor. */ .userbody{ margin:6px 0 0;padding:var(--s3) var(--s4); background:var(--muted);border-radius:var(--radius-sm); font-size:13.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word; } /* Menüdeki bekleyen sayısı — "yakında" etiketiyle aynı yeri kullanıyor ama bu bir uyarı, o yüzden vurgulu. */ .tail-n{ background:var(--primary);color:#fff;font-weight:600; min-width:18px;height:18px;line-height:18px;font-size:10.5px; text-align:center;border-radius:999px;padding:0 5px;border:0; } /* ==================================================== inceleme kontrol listesi Hangi alanın düzeltilmesi gerektiği işaretleniyor; işaretlenince o satırın not kutusu açılıyor. ------------------------------------------------------------------------ */ .checklist{display:flex;flex-direction:column;gap:6px;margin-top:var(--s3)} .check-row{ padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm); transition:border-color .12s,background .12s; } .check-row:hover{background:var(--muted)} .check-row.is-on{border-color:var(--danger);background:var(--danger-soft)} .check-head{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px} .check-head input{accent-color:var(--danger);flex:none} .check-head span{font-weight:600} .check-row input[type=text]{ width:100%;margin-top:8px;font-size:13px; } /* Verilen kararın okunur özeti — panelde ve sahibinde aynı sıra. */ .checklist-out{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0} .checklist-out li{ padding:9px 12px;border-left:3px solid var(--danger); background:var(--danger-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0; } .checklist-out b{display:block;font-size:13px;font-weight:600} .checklist-out span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--muted-fg)} /* ===================================================== sıra düğmeleri Listede satırı yukarı/aşağı taşımak. Numara alanı, araya bir kayıt eklemek isteyeni bütün listeyi yeniden numaralamaya zorluyordu. ------------------------------------------------------------------------ */ .ord{display:inline-flex;gap:2px} .ord button{ width:26px;height:26px;line-height:1; border:1px solid var(--border);border-radius:var(--radius-sm); background:var(--card);color:var(--muted-fg); font-size:13px;cursor:pointer;transition:background .12s,color .12s; } .ord button:hover:not(:disabled){background:var(--muted);color:var(--fg)} .ord button:disabled{opacity:.35;cursor:default} .ord form{display:inline} /* ========================================================== yıldız puanı Salt okunur gösterim. Yıldızlar metin karakteri: tek renkli bir simge için SVG yüklemek gereksiz ve hizalaması daha zor. ------------------------------------------------------------------------ */ .stars{display:inline-flex;gap:1px;font-size:13px;line-height:1;color:var(--border)} .stars .on{color:var(--warn)} .stars-lg{font-size:22px;gap:2px} /* ==================================================== yıldız dağılımı Kaç kişi kaç yıldız vermiş. Ortalama tek başına yanıltıcı: 3,0 puan herkesin "orta" demesi de olabilir, yarısının 5 yarısının 1 demesi de. ------------------------------------------------------------------------ */ .bars{display:flex;flex-direction:column;gap:6px;margin-top:10px} .bar-row{display:flex;align-items:center;gap:10px;font-size:12.5px} .bar-k{flex:none;width:34px;color:var(--muted-fg)} .bar-t{flex:1;height:8px;border-radius:999px;background:var(--muted);overflow:hidden} .bar-f{display:block;height:100%;background:var(--warn);border-radius:999px} .bar-n{flex:none;width:28px;text-align:right;color:var(--muted-fg)} /* ---------------------------------------------- makale önizlemesi: yeni bloklar * * Önizlemenin uygulamadaki görüntüye benzemesi gerekiyor; birebir aynı * olamaz (font ve genişlik farklı) ama **aynı şeyi anlatmalı**: alıntı * solunda çizgiyle ve eğik, bilgi kutusu şeftali zeminde, ayraç ince bir * çizgi, altyazı görselin altında küçük ve ortalı. */ .md-quote{ margin:14px 0;padding:2px 0 2px 14px; border-left:3px solid var(--primary); color:var(--muted);font-style:italic; } .md-note{ margin:14px 0;padding:2px 14px; background:var(--primary-soft);border-radius:14px; } .md-rule{ margin:22px 0;border:0;border-top:1px solid var(--border); } .md-fig{margin:14px 0} .md-fig figcaption{ margin-top:6px;text-align:center; font-size:12.5px;color:var(--muted); } /* ==================================================== sekme şeridi Aynı işi yapan ekranlar arasında geçiş — moderasyon kuyrukları, hesap ekranları. Menüde dört ayrı satır yerine burada yan yana. Üst çubuğun hemen altında ve sayfa başlığının üstünde: hangi bölümde olduğunu üst çubuk söylüyor, hangi ekranında olduğunu bu şerit. ------------------------------------------------------------------------ */ .sekme-serit{ flex:none;display:flex;align-items:center;gap:var(--s1); background:var(--card);border-bottom:1px solid var(--border); padding:0 var(--s6);overflow-x:auto; } .sekme-serit a{ display:flex;align-items:center;gap:6px; padding:0 var(--s3);height:42px; font-size:13.5px;font-weight:500;color:var(--muted-fg); border-bottom:2px solid transparent;margin-bottom:-1px; white-space:nowrap;transition:color .12s,border-color .12s; } .sekme-serit a:hover{color:var(--fg)} /* Etkin sekme alt çizgiyle işaretleniyor, zeminle değil: şerit üst çubuğa bitişik ve zeminli bir sekme oradaki kartla karışıyordu. */ .sekme-serit a.on{color:var(--fg);font-weight:600;border-bottom-color:var(--primary)} /* Şeritteki rozet menüdekinden küçük: burada satır değil sekme var. */ .sekme-serit .tail-n{min-width:17px;height:17px;line-height:17px;font-size:10px} /* ==================================================== tema seçici Açık / koyu / sistem. Seçim `localStorage`'da; sayfanın en başındaki küçük betik onu okuyup ``'e `dark` sınıfını **çizimden önce** veriyor. Sonradan verilseydi sayfa bir an açık temada çizilip koyuya atlardı — her gezinmede gözü rahatsız eden bir çakma. ------------------------------------------------------------------------ */ .ust-govde form{display:flex;flex:none} .tema-btn{ width:32px;height:32px;border-radius:var(--radius-sm);flex:none; display:grid;place-items:center;background:transparent;cursor:pointer; color:var(--muted-fg);border:1px solid transparent; } .tema-btn:hover{background:var(--muted);color:var(--fg)} .tema-btn svg{width:16px;height:16px;stroke-width:2} /* Yalnızca etkin temanın simgesi çiziliyor; üçü birden duruyor olsaydı düğme üç simge genişliğinde bir kutuya dönerdi. */ .tema-btn [data-tema-simge]{display:none} html:not(.dark) .tema-btn [data-tema-simge="acik"]{display:block} html.dark .tema-btn [data-tema-simge="koyu"]{display:block} /* ==================================================== reklam raporu Günlük seyir sütunları ve kırılım tabloları — afiş ve sponsor raporu, reklam verenin gizli sayfası aynı parçayı kullanıyor. ------------------------------------------------------------------------ */ .grid-2{grid-template-columns:repeat(2,1fr)} @media (max-width:900px){.grid-2{grid-template-columns:1fr}} .seyir{display:flex;align-items:flex-end;gap:3px;height:140px;padding-top:8px} .seyir-gun{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:1px} .seyir-g{display:block;background:var(--primary);opacity:.85;border-radius:3px 3px 0 0;min-height:1px} .seyir-t{display:block;background:var(--fg);border-radius:0 0 3px 3px;min-height:0} .seyir-alt{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted-fg);margin-top:6px} .seyir-lejant{display:flex;gap:14px;font-size:12px;color:var(--muted-fg);margin-top:8px} .seyir-lejant i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}