/* =========================================================
WORKSHOP SEPETI — PANEL TASARIM SISTEMI (Blok 30)
Kaynak: design_handoff "Workshop Sepeti Admin" (README §2–§4).
KAPSAM: YALNIZ panel sayfalari (/admin, /saglayici, /hesabim).
Public site (ana sayfa/kesfet/etkinlik) NEO-BRUTALIST kalir ve bu dosyayi
HIC yuklemez — base.html linki `panel_menu` varsa basar. Geri alma:
bu dosyayi + base.html'deki tek satirini sil, panel eski haline doner.
Fontlar site.css'te @font-face ile SELF-HOST edilmistir (Archivo Black /
Space Grotesk / Space Mono). Google Fonts CDN YOK — siki CSP harici fontu
bloklar; handoff'taki BILINCLI olarak alinmadi.
ILKE (README §3): once bilesen katmani, sonra ekranlar. Sinif ISIMLERI
korunur — 60 panel sablonu degismeden bu katmana gecer (Blok 21 yontemi).
========================================================= */
/* ---------- 1. TOKENLAR (README §2 — kaynak-dogru) ---------- */
.ws-panel {
/* Blok 34: okunur en kucuk arayuz puntosu — TEK KAYNAK.
Tur denetiminde panelde 10-11.5px etiketler bulundu (README esigi 12px). */
--ws-punto-min: 12px;
--ws-ink: #17150F;
--ws-ink-hover: #2E2921;
--ws-ink-2: #3D382F;
--ws-muted: #6E685C;
/* Blok 34: #8A8377 beyaz zeminde 3.75:1 idi (AA 4.5 alti) — panelde
ikincil metnin TAMAMI (gri-metin, th, card-meta, kokpit-alt, kirinti)
bu tokendan geliyordu. Koyulastirildi: beyazda 5.04, en acik panel
zemininde (#F7F4EF) 4.60. */
--ws-muted-2: #756E62;
/* KOYU sidebar uzerindeki ikincil metin AYRI tokendir — yukaridaki koyu
ton orada tersine okunmaz olurdu (#17150F uzerinde 5.55:1). */
--ws-sidebar-muted: #948D82;
--ws-disabled: #A9A29A;
--ws-bg: #F7F4EF;
--ws-surface: #FFFFFF;
--ws-surface-2: #FBF9F5;
--ws-surface-3: #F2EEE7;
--ws-line: #E4DFD6;
--ws-line-2: #EFEAE2;
--ws-line-3: #F4F0E9;
--ws-input-border: #D9D3C8;
--ws-pink: #E8336D;
--ws-pink-hover: #C6134F;
--ws-pink-deep: #96063A;
--ws-pink-soft: #FDEBF1;
--ws-pink-ring: #FBD6E2;
--ws-sidebar-active: #312A22;
--ws-sidebar-hover: #241F1A;
--ws-sidebar-text: #B4AEA5;
--ws-sidebar-line: #2C2822;
--ws-sidebar-chip: #3A352D;
/* Durum cifti (README §2 — YALNIZ bu 6 cift; yedinci cift eklenmez) */
--ws-olumlu-bg: #E7F3EC; --ws-olumlu-fg: #166B41;
--ws-bekleyen-bg: #FBF0DC; --ws-bekleyen-fg: #8A5900;
--ws-hata-bg: #FBE9E7; --ws-hata-fg: #A81E1A;
--ws-bilgi-bg: #E8EEFA; --ws-bilgi-fg: #274FA0;
--ws-notr-bg: #F2EEE7; --ws-notr-fg: #5C564C;
--ws-dolu-bg: #17150F; --ws-dolu-fg: #F7F4EF;
--ws-yikici-kenar: #E7BCB9;
--ws-yikici-fg: #B4231F;
--ws-r-kart: 12px;
--ws-r-btn: 9px;
--ws-r-kucuk: 8px;
/* Satir yogunlugu — README §2: YALNIZ iki deger, ucuncu yoktur.
Ust bardaki dugme yazar, asagida okunur. */
--ws-satir-pad: 11px 12px;
--ws-satir-pad-sol: 11px 12px 11px 16px;
--ws-satir-pad-sag: 11px 16px 11px 12px;
}
html[data-yogunluk="ferah"] .ws-panel {
--ws-satir-pad: 16px 12px;
--ws-satir-pad-sol: 16px 12px 16px 16px;
--ws-satir-pad-sag: 16px 16px 16px 12px;
}
@keyframes wsIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes wsToast { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes wsIskelet { 0%,100% { opacity:1; } 50% { opacity:.45; } }
/* ---------- 2. KABUK (README §4) ---------- */
body.ws-panel {
margin:0; background:var(--ws-bg); color:var(--ws-ink);
font-family:'Space Grotesk', system-ui, sans-serif;
-webkit-font-smoothing:antialiased;
}
.ws-panel .ws-kabuk { min-height:100vh; display:flex; background:var(--ws-bg); }
/* 2.1 Sidebar — 250px sabit, koyu */
.ws-panel .ws-yan {
width:250px; flex:0 0 250px; background:var(--ws-ink); color:#EDE9E2;
display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.ws-panel .ws-yan-ust {
padding:20px 20px 16px; display:flex; align-items:center; justify-content:space-between;
border-bottom:1px solid var(--ws-sidebar-line);
}
.ws-panel .ws-yan-marka {
font-family:'Archivo Black', sans-serif; font-size:19px; letter-spacing:-0.01em;
color:var(--ws-bg); text-decoration:none;
}
.ws-panel .ws-yan-marka .nokta { color:var(--ws-pink); }
.ws-panel .ws-yan-rol {
font-size:var(--ws-punto-min); letter-spacing:0.08em; text-transform:uppercase; color:var(--ws-sidebar-muted);
border:1px solid var(--ws-sidebar-chip); border-radius:5px; padding:3px 6px; white-space:nowrap;
}
.ws-panel .ws-yan-govde { flex:1; overflow:auto; padding:14px 10px 20px; }
/* README §4.1: gruplar DAIMA ACIK listelerdir (tiklama sayisini azaltmak icin) —
katlamasi yok, ama / etiketi korunuyor ki JS'siz
ve eski sablon sozlesmesi bozulmasin. */
.ws-panel .panel-sidebar-grup { margin-bottom:16px; }
.ws-panel .panel-sidebar-grup > summary { list-style:none; }
.ws-panel .panel-sidebar-grup > summary::-webkit-details-marker { display:none; }
.ws-panel .panel-sidebar-grup-baslik {
display:flex; align-items:center; justify-content:space-between; gap:8px;
font-size:var(--ws-punto-min); letter-spacing:0.1em; text-transform:uppercase; color:var(--ws-sidebar-muted);
padding:0 10px 7px; font-weight:600; cursor:default;
}
.ws-panel .panel-sidebar-baslik { display:none; }
.ws-panel .panel-sidebar-link {
display:flex; align-items:center; justify-content:space-between; gap:8px;
padding:8px 10px; border-radius:7px; font-size:13.5px; font-weight:500;
color:var(--ws-sidebar-text); text-decoration:none;
border-left:2px solid transparent; /* pasifte de 2px — aktifte kayma olmasin */
margin-bottom:2px; transition:background .13s, color .13s;
/* site.css brutalist mirasini NOTRLE (mono + uppercase + kalin kenar) */
font-family:inherit; text-transform:none; letter-spacing:0;
border-top:0; border-right:0; border-bottom:0;
}
.ws-panel .panel-sidebar-grup > .panel-sidebar-link { padding-left:10px; }
/* Grup basligindaki ▸/▾ ucgeni: katlama YOK, ok da olmasin */
.ws-panel .panel-sidebar-grup-baslik > span:first-child::before { content:none; }
.ws-panel .panel-sidebar-grup-baslik:hover { background:transparent; color:var(--ws-sidebar-muted); }
.ws-panel .panel-sidebar-grup { border-top:0; padding-top:0; margin-top:0; gap:0; }
.ws-panel .panel-sidebar-link:hover { background:var(--ws-sidebar-hover); color:var(--ws-bg); }
.ws-panel .panel-sidebar-link.aktif {
background:var(--ws-sidebar-active); color:#FFFFFF; font-weight:600;
border-left-color:var(--ws-pink);
}
.ws-panel .panel-sidebar-link .rozet,
.ws-panel .panel-sidebar-grup-baslik .rozet {
/* Blok 34: beyaz metin --ws-pink uzerinde 4.10:1 idi -> koyu ton (5.82:1) */
background:var(--ws-pink-hover); color:#fff; border:0; font-size:var(--ws-punto-min); font-weight:700;
border-radius:999px; padding:1px 7px; min-width:20px; text-align:center;
text-transform:none; letter-spacing:0; font-family:inherit;
}
/* 2.2 Sidebar alt kullanici blogu */
.ws-panel .ws-yan-alt {
padding:14px; border-top:1px solid var(--ws-sidebar-line);
display:flex; align-items:center; gap:10px;
}
.ws-panel .ws-yan-avatar {
width:32px; height:32px; border-radius:var(--ws-r-kucuk); background:var(--ws-sidebar-chip);
color:var(--ws-bg); display:grid; place-items:center; font-size:12px; font-weight:700; flex:0 0 32px;
}
.ws-panel .ws-yan-kim { flex:1; min-width:0; display:flex; flex-direction:column; }
.ws-panel .ws-yan-ad { display:block; font-size:13px; font-weight:600; color:#EDE9E2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-panel .ws-yan-rol-alt { display:block; font-size:var(--ws-punto-min); color:var(--ws-sidebar-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-panel .ws-yan-alt form { margin:0; }
/* Sidebar kaydirma cubugu koyu zeminde goze batmasin */
.ws-panel .ws-yan-govde { scrollbar-width:thin; scrollbar-color:#3A352D transparent; }
.ws-panel .ws-yan-govde::-webkit-scrollbar { width:8px; }
.ws-panel .ws-yan-govde::-webkit-scrollbar-track { background:transparent; }
.ws-panel .ws-yan-govde::-webkit-scrollbar-thumb { background:#3A352D; border-radius:999px; }
.ws-panel .ws-yan-cikis {
background:transparent; border:1px solid var(--ws-sidebar-chip); border-radius:7px;
color:var(--ws-disabled); width:28px; height:28px; cursor:pointer; font-size:13px;
display:grid; place-items:center; padding:0;
}
.ws-panel .ws-yan-cikis:hover { color:var(--ws-bg); border-color:#5A544A; }
/* 2.3 Ust bar — 60px */
.ws-panel .ws-govde { flex:1; min-width:0; display:flex; flex-direction:column; }
.ws-panel .ws-ustbar {
position:sticky; top:0; z-index:20; height:60px; padding:0 28px;
background:rgba(247,244,239,.92); backdrop-filter:blur(8px);
border-bottom:1px solid var(--ws-line);
display:flex; align-items:center; gap:16px;
}
.ws-panel .ws-kirinti {
font-size:13px; color:var(--ws-muted-2); display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.ws-panel .ws-kirinti-ayirac { color:#CFC8BC; }
.ws-panel .ws-kirinti-son { color:var(--ws-ink); font-weight:600; }
.ws-panel .ws-ustbar-bosluk { flex:1; }
/* Blok 36 bölüm 3: rol bağlamı sekmeleri (panel üst çubuğu).
Segmented-control görünümü — kullanıcı "hangi kimlikteyim" sorusunu tek
bakışta cevaplayabilmeli; aktif olan dolgulu, diğerleri sade. */
.ws-panel .ws-baglam-sekmeler {
display:flex; align-items:center; gap:2px; flex:0 0 auto;
background:var(--ws-surface); border:1px solid var(--ws-line);
border-radius:var(--ws-r-btn); padding:2px;
}
.ws-panel .ws-baglam-sekmeler .baglam-sekme { display:flex; margin:0; }
.ws-panel .ws-baglam-sekmeler button {
background:none; border:0; cursor:pointer; white-space:nowrap;
padding:5px 12px; border-radius:calc(var(--ws-r-btn) - 2px);
font-size:13px; font-weight:600; color:var(--ws-muted-2);
}
.ws-panel .ws-baglam-sekmeler button:hover { color:var(--ws-ink); }
.ws-panel .ws-baglam-sekmeler button[aria-current="page"] {
background:var(--ws-ink); color:var(--ws-surface);
}
.ws-panel .ws-arama {
display:flex; align-items:center; gap:6px; background:var(--ws-surface);
border:1px solid var(--ws-line); border-radius:var(--ws-r-btn);
padding:0 10px; height:34px; width:230px;
/* flex ogesi olarak kucululebilsin — aksi halde dar ekranda komsusunu ezer.
NOT: `overflow:hidden` BILEREK YOK — belirtiyi maskeler, dogrulama araci
gercek tasmayi goremez hale gelirdi (Blok 32'de bir kez oldu). */
min-width:0; box-sizing:border-box;
}
.ws-panel .ws-arama span { color:var(--ws-disabled); font-size:13px; flex:0 0 auto; }
/* OZGULLUK NOTU (Blok 32): `.ws-panel .ws-arama input` (0,2,1) ile §3.5'teki
genel `.ws-panel input[type="search"]` (0,2,1) ESIT ozgullukte; §3.5 dosyada
SONRA geldigi icin kazaniyordu ve input 40px yukseklik + 1px kenar + 9px
radius aliyordu (34px kutunun icinde cift-kenar/tasma). Attribute secici
eklenerek (0,3,1) yapildi. */
.ws-panel .ws-arama input,
.ws-panel .ws-arama input[type="search"],
.ws-panel .ws-arama input[type="text"] {
border:0; outline:none; background:transparent; font-size:13px;
flex:1 1 auto; width:auto; min-width:0;
color:var(--ws-ink); height:100%; padding:0; box-shadow:none; border-radius:0;
-webkit-appearance:none; appearance:none;
}
/* Blok 34 (bolum 4.1): bu kural odak halkasini SIFIRLIYORDU — ust bardaki arama
kutusu klavye ile gezildiginde HICBIR gorsel isaret vermiyordu (tur: 110 panel
sayfasinin hepsinde). Input'un kendi kenari yok (kutu kapsayicinin), o yuzden
halka KAPSAYICIYA verilir: alan gorunumu bozulmadan odak gorunur olur. */
.ws-panel .ws-arama input[type="search"]:focus,
.ws-panel .ws-arama input[type="text"]:focus { border:0; box-shadow:none; }
.ws-panel .ws-arama:focus-within {
border-color:var(--ws-pink); box-shadow:0 0 0 3px var(--ws-pink-ring);
}
.ws-panel .ws-arama input::-webkit-search-decoration,
.ws-panel .ws-arama input::-webkit-search-cancel-button { -webkit-appearance:none; }
/* Mobil menu dugmesi — masaustunde YOK, <=1024px'te gorunur (bkz. §8) */
.ws-panel .ws-yan-dugme {
display:none; align-items:center; justify-content:center;
width:38px; height:34px; flex:0 0 auto; padding:0; cursor:pointer;
background:var(--ws-surface); border:1px solid var(--ws-line);
border-radius:var(--ws-r-btn); color:var(--ws-ink); font-size:16px; line-height:1;
}
.ws-panel .ws-yan-dugme:hover { background:var(--ws-surface-3); }
.ws-panel .ws-yan-dugme:focus-visible { outline:2px solid var(--ws-pink); outline-offset:2px; }
/* Ortu masaustunde HIC yok (cekmece yalniz dar ekranda) */
.ws-panel .ws-yan-ortu { display:none; }
@media (max-width:1024px) { .ws-panel .ws-yan-ortu { display:block; } }
.ws-panel .ws-yogunluk {
height:34px; padding:0 12px; background:var(--ws-surface); border:1px solid var(--ws-line);
border-radius:var(--ws-r-btn); font-size:12.5px; font-weight:600; color:var(--ws-ink-2); cursor:pointer;
}
.ws-panel .ws-yogunluk:hover { background:var(--ws-surface-3); }
.ws-panel .ws-icerik { flex:1; padding:26px 28px 60px; max-width:1520px; width:100%; }
.ws-panel #panel-icerik { animation:wsIn .22s ease both; }
/* ---------- 3. BILESEN STANDARDI (README §3) ---------- */
/* 3.1 Butonlar — 6 varyant, fazlasi yok */
.ws-panel .btn {
display:inline-flex; align-items:center; justify-content:center; gap:7px;
height:38px; padding:0 16px; border-radius:var(--ws-r-btn);
font-family:inherit; font-size:13.5px; font-weight:600; line-height:1;
text-decoration:none; cursor:pointer; white-space:nowrap;
border:1px solid transparent; background:transparent; color:var(--ws-ink-2);
transition:background .15s, border-color .15s, color .15s;
text-transform:none; letter-spacing:0; box-shadow:none;
}
.ws-panel .btn:active { transform:translateY(1px); }
.ws-panel .btn:focus-visible { outline:2px solid var(--ws-pink); outline-offset:2px; }
.ws-panel .btn-ana { background:var(--ws-ink); border-color:var(--ws-ink); color:#fff; }
.ws-panel .btn-ana:hover { background:var(--ws-ink-hover); border-color:var(--ws-ink-hover); }
/* Blok 34: beyaz metin --ws-pink uzerinde 4.10:1 idi (AA 4.5 alti) — bir ton
koyulastirildi (5.82:1), hover daha da koyu. */
.ws-panel .btn-onay { background:var(--ws-pink-hover); border-color:var(--ws-pink-hover); color:#fff; }
.ws-panel .btn-onay:hover { background:var(--ws-pink-deep); border-color:var(--ws-pink-deep); }
.ws-panel .btn-ikincil { background:var(--ws-surface); border-color:var(--ws-input-border); color:var(--ws-ink-2); }
.ws-panel .btn-ikincil:hover { background:var(--ws-surface-3); }
.ws-panel .btn-sessiz { background:transparent; border-color:transparent; color:var(--ws-ink-2); }
.ws-panel .btn-sessiz:hover { background:var(--ws-line-2); }
.ws-panel .btn-sessiz:active { transform:none; }
.ws-panel .btn-yikici { background:var(--ws-surface); border-color:var(--ws-yikici-kenar); color:var(--ws-yikici-fg); }
/* Blok 34: SINIFSIZ