/* =========================================================================
PolgApp Premium — geri döndürülebilir tema katmanı
-------------------------------------------------------------------------
ETKİNLEŞTİRME: → yeni görünüm açılır
GERİ ALMA: class'ı kaldır → eski tasarım geri gelir
LWG ekranı: → vurgu rengi yeşil olur
KOYU TEMA: mevcut koyu-tema mekanizmanız (.dark / [data-theme="dark"])
otomatik yakalanır; yoksa ekleyin.
Kurulum: içine, kendi stilinizden SONRA:
Butonlara yardımcı sınıflar verilir (aşağıdaki "KULLANIM" bölümüne bakın).
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ---- 1) Tasarım token'ları -------------------------------------------- */
.pg-premium{
--pg-font:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
/* WORK — kurumsal mavi */
--pg-work-1:#2549a8; --pg-work-2:#3d74d6;
--pg-work-grad:linear-gradient(135deg,#2549a8,#3d74d6);
--pg-work-shadow:rgba(37,73,168,.5);
--pg-work-soft-bg:rgba(37,73,168,.10);
--pg-work-soft-bd:rgba(37,73,168,.28);
--pg-work-soft-fg:#2549a8;
/* LWG — yeşil */
--pg-lwg-1:#16a34a; --pg-lwg-2:#22c55e;
--pg-lwg-grad:linear-gradient(135deg,#16a34a,#22c55e);
--pg-lwg-shadow:rgba(22,163,74,.5);
--pg-lwg-soft-bg:rgba(22,163,74,.10);
--pg-lwg-soft-bd:rgba(22,163,74,.30);
--pg-lwg-soft-fg:#15803d;
/* Durum renkleri */
--pg-critical:#dc3f3f; --pg-term:#c98a1e; --pg-lab:#16a34a;
/* Nötr yüzeyler — AÇIK tema varsayılan */
--pg-ghost-bg:#ffffff;
--pg-ghost-bd:#d8deeb;
--pg-ghost-fg:#47506a;
--pg-toggle-track:#e6eaf3;
--pg-toggle-idle:#6b7490;
--pg-radius:12px;
--pg-radius-sm:9px;
/* Aktif vurgu = WORK (varsayılan) */
--pg-accent-1:var(--pg-work-1);
--pg-accent-2:var(--pg-work-2);
--pg-accent-grad:var(--pg-work-grad);
--pg-accent-shadow:var(--pg-work-shadow);
--pg-accent-soft-bg:var(--pg-work-soft-bg);
--pg-accent-soft-bd:var(--pg-work-soft-bd);
--pg-accent-soft-fg:var(--pg-work-soft-fg);
}
/* LWG bağlamı → vurgu yeşile döner */
.pg-premium.pg-lwg,
.pg-premium .pg-lwg{
--pg-accent-1:var(--pg-lwg-1);
--pg-accent-2:var(--pg-lwg-2);
--pg-accent-grad:var(--pg-lwg-grad);
--pg-accent-shadow:var(--pg-lwg-shadow);
--pg-accent-soft-bg:var(--pg-lwg-soft-bg);
--pg-accent-soft-bd:var(--pg-lwg-soft-bd);
--pg-accent-soft-fg:var(--pg-lwg-soft-fg);
}
/* KOYU tema yüzeyleri — yaygın koyu-tema anahtarlarını yakalar */
.pg-premium.dark,
.pg-premium[data-theme="dark"],
html.dark .pg-premium,
body.dark .pg-premium,
.dark-mode .pg-premium{
--pg-ghost-bg:rgba(255,255,255,.05);
--pg-ghost-bd:rgba(255,255,255,.13);
--pg-ghost-fg:#cbd0dd;
--pg-toggle-track:rgba(0,0,0,.35);
--pg-toggle-idle:#9aa2ba;
--pg-accent-soft-fg:#a9c6f5;
}
.pg-premium.pg-lwg.dark,
.pg-premium.pg-lwg[data-theme="dark"],
html.dark .pg-premium .pg-lwg,
body.dark .pg-premium .pg-lwg{ --pg-accent-soft-fg:#86efac; }
/* ---- 2) Tipografi ------------------------------------------------------ */
.pg-premium,
.pg-premium input,
.pg-premium select,
.pg-premium textarea,
.pg-premium button,
.pg-premium h1,.pg-premium h2,.pg-premium h3,
.pg-premium h4,.pg-premium h5,.pg-premium h6{
font-family:var(--pg-font);
}
.pg-premium h1,.pg-premium h2,.pg-premium h3{
font-weight:800; letter-spacing:-.02em;
}
/* Vurgulu (degrade) büyük rakam */
.pg-premium .pg-num-accent{
font-weight:800;
background:linear-gradient(120deg,var(--pg-accent-1),var(--pg-accent-2));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* ---- 3) Butonlar ------------------------------------------------------- */
.pg-premium .pg-btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:11px 20px; border:1px solid transparent; border-radius:var(--pg-radius);
font-size:14px; font-weight:700; line-height:1; cursor:pointer;
transition:transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.pg-premium .pg-btn:active{ transform:translateY(1px); }
.pg-premium .pg-btn:focus-visible{ outline:2px solid var(--pg-accent-2); outline-offset:2px; }
/* Birincil — degrade dolgu */
.pg-premium .pg-btn--primary{
background:var(--pg-accent-grad); color:#fff;
box-shadow:0 10px 24px -10px var(--pg-accent-shadow);
}
.pg-premium .pg-btn--primary:hover{ filter:brightness(1.06); box-shadow:0 12px 28px -10px var(--pg-accent-shadow); }
/* İkincil — soft dolgu */
.pg-premium .pg-btn--secondary{
background:var(--pg-accent-soft-bg); border-color:var(--pg-accent-soft-bd);
color:var(--pg-accent-soft-fg);
}
.pg-premium .pg-btn--secondary:hover{ background:var(--pg-accent-soft-bg); filter:brightness(1.04); }
/* Hayalet — kenarlıklı nötr */
.pg-premium .pg-btn--ghost{
background:var(--pg-ghost-bg); border-color:var(--pg-ghost-bd); color:var(--pg-ghost-fg);
}
.pg-premium .pg-btn--ghost:hover{ border-color:var(--pg-accent-2); color:var(--pg-accent-soft-fg); }
/* Küçük aksiyon (Form / Yenile) */
.pg-premium .pg-btn--sm{ padding:6px 13px; font-size:12px; font-weight:600; border-radius:var(--pg-radius-sm); }
/* İkon butonu (kare) */
.pg-premium .pg-icon{
width:42px; height:42px; padding:0; border-radius:var(--pg-radius);
display:inline-flex; align-items:center; justify-content:center;
background:var(--pg-ghost-bg); border:1px solid var(--pg-ghost-bd); color:var(--pg-ghost-fg);
cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.pg-premium .pg-icon:hover{ border-color:var(--pg-accent-2); color:var(--pg-accent-soft-fg); }
.pg-premium .pg-icon--primary{
background:var(--pg-accent-grad); border-color:transparent; color:#fff;
box-shadow:0 10px 22px -10px var(--pg-accent-shadow);
}
.pg-premium .pg-icon--primary:hover{ filter:brightness(1.06); }
/* ---- 4) Modül geçişi (LWG | WORK) ------------------------------------- */
.pg-premium .pg-toggle{
display:inline-flex; padding:4px; gap:4px;
background:var(--pg-toggle-track); border-radius:var(--pg-radius);
}
.pg-premium .pg-toggle > *{
padding:7px 16px; border:0; background:transparent; cursor:pointer;
font-size:13px; font-weight:600; color:var(--pg-toggle-idle);
border-radius:var(--pg-radius-sm); transition:all .18s ease;
}
.pg-premium .pg-toggle > .is-active{
color:#fff; font-weight:700;
background:var(--pg-accent-grad);
box-shadow:0 6px 14px -6px var(--pg-accent-shadow);
}
/* WORK segmenti daima mavi, LWG segmenti daima yeşil (bağlamdan bağımsız) */
.pg-premium .pg-toggle > .is-active.pg-seg-work{ background:var(--pg-work-grad); box-shadow:0 6px 14px -6px var(--pg-work-shadow); }
.pg-premium .pg-toggle > .is-active.pg-seg-lwg{ background:var(--pg-lwg-grad); box-shadow:0 6px 14px -6px var(--pg-lwg-shadow); }
/* ---- 5) Durum rozetleri ----------------------------------------------- */
.pg-premium .pg-tag{
display:inline-flex; align-items:center; gap:5px;
font-size:10px; font-weight:700; letter-spacing:.06em;
padding:4px 9px; border-radius:7px; color:#fff; text-transform:uppercase;
}
.pg-premium .pg-tag--critical{ background:var(--pg-critical); }
.pg-premium .pg-tag--term{ background:var(--pg-term); }
.pg-premium .pg-tag--suren{ background:var(--pg-work-1); }
.pg-premium .pg-tag--lab{ background:var(--pg-lab); }
.pg-premium .pg-tag--ok{ background:var(--pg-lwg-1); }
/* =========================================================================
KULLANIM (mevcut butonlarınıza sınıf ekleyin — yapı değişmez):
Kritik
8.9M
İsterseniz sınıf eklemeden kendi seçicilerinize (örn. .btn-primary) eşlemek
için aşağıdaki ALIAS bölümünü kullanın.
========================================================================= */
/* =========================================================================
6) ALIAS — mevcut sınıflarınızı pg-* stiline bağlar (HTML'e dokunmadan)
-------------------------------------------------------------------------
HTML'inize pg-* sınıflarını eklemek istemiyorsanız, KENDİ buton
seçicilerinizi ilgili pg-* kuralının seçici listesine EKLEYİN.
Böylece mevcut butonlarınız otomatik olarak yeni stili alır ve
.pg-premium kaldırılınca yine eski haline döner (geri döndürülebilir).
Aşağıdaki örnekleri kendi gerçek sınıf adlarınızla değiştirin/çoğaltın.
(Claude Code bu bölümü sizin gerçek seçicilerinizle dolduracaktır.) */
/* Birincil butonlar */
.pg-premium .btn-primary,
.pg-premium .btn-kaydet{
background:var(--pg-accent-grad); color:#fff; border:1px solid transparent;
border-radius:var(--pg-radius); font-weight:700;
box-shadow:0 10px 24px -10px var(--pg-accent-shadow);
}
/* İkincil / hayalet butonlar */
.pg-premium .btn-secondary{ background:var(--pg-accent-soft-bg); border:1px solid var(--pg-accent-soft-bd); color:var(--pg-accent-soft-fg); border-radius:var(--pg-radius); font-weight:700; }
.pg-premium .btn-ghost{ background:var(--pg-ghost-bg); border:1px solid var(--pg-ghost-bd); color:var(--pg-ghost-fg); border-radius:var(--pg-radius); font-weight:600; }
/* İkon butonları */
.pg-premium .btn-icon{ border-radius:var(--pg-radius); background:var(--pg-ghost-bg); border:1px solid var(--pg-ghost-bd); color:var(--pg-ghost-fg); }
/* ========================================================================= */
/* =========================================================================
7) POLGAPP BAĞLAMA — paketin UYGULA_KOMUTU.md 4. maddesi gereği
-------------------------------------------------------------------------
Yukarısı paketin ORİJİNAL dosyasıdır, DEĞİŞTİRİLMEDİ. Aşağısı yalnızca
PolgApp'in gerçek sınıflarını pg-* kurallarına bağlar.
DOKUNULMAYANLAR (madde 5-6): logolar, .modsw geçiş switch'i, duvar kâğıdı,
tabloların şeffaf zemini — hiçbirine kural yazılmadı.
========================================================================= */
/* (a) KOYU TEMA — paket .dark/[data-theme] bekliyor, PolgApp'te body.dark-theme */
.pg-premium.dark-theme{
--pg-ghost-bg:rgba(255,255,255,.05);
--pg-ghost-bd:rgba(255,255,255,.13);
--pg-ghost-fg:#cbd0dd;
--pg-toggle-track:rgba(0,0,0,.35);
--pg-toggle-idle:#9aa2ba;
--pg-accent-soft-fg:#a9c6f5;
}
.pg-premium.pg-lwg.dark-theme{ --pg-accent-soft-fg:#86efac; }
/* (b) TİPOGRAFİ BAĞLAMA — ŞART.
style.css'in ilk kuralı `* { font-family:'Inter' }`. Evrensel seçici fontu
HER elemana tek tek yazdığı için paketin `.pg-premium{font-family}` kuralı
alt elemanlara ULAŞAMIYOR (ölçüldü: body Plus Jakarta, .card/.badge Inter).
Aynı seçiciyi burada da kullanıyoruz; eşit özgüllükte sonra yüklenen kazanır.
İkonlar güvende: Font Awesome sınıf seçicileri `*`ten daha özgül (ölçüldü). */
/* DİKKAT: seçici `.pg-premium *` DEĞİL, düz `*` olmalı. `.pg-premium *`
özgüllüğü 0,1,0 → Font Awesome'ın .fa-solid kuralıyla EŞİT ve bizimki sonra
yüklendiği için kazanıyor, tüm ikonlar yazı fontuna dönüyordu (ölçüldü).
Düz `*` (0,0,0) ise FA'nın sınıf kurallarına yenilir → ikonlar korunur. */
*{ font-family:var(--pg-font); }
/* (c) BUTONLAR — mevcut sınıflar pg-btn stiline bağlanır (HTML'e dokunulmadı) */
.pg-premium .btn{
border-radius:var(--pg-radius);
font-weight:600;
transition:transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}
.pg-premium .btn:active{ transform:translateY(1px); }
.pg-premium .btn:focus-visible{ outline:2px solid var(--pg-accent-2); outline-offset:2px; }
.pg-premium .btn-primary,
.pg-premium .btn.pri,
.pg-premium .btn-success{ /* → pg-btn--primary */
background:var(--pg-accent-grad) !important;
border:1px solid transparent !important;
color:#fff !important;
font-weight:700;
box-shadow:0 10px 24px -10px var(--pg-accent-shadow);
}
.pg-premium .btn-primary:hover,
.pg-premium .btn.pri:hover,
.pg-premium .btn-success:hover{ filter:brightness(1.06); box-shadow:0 12px 28px -10px var(--pg-accent-shadow); }
.pg-premium .btn-secondary,
.pg-premium .btn-info{ /* → pg-btn--secondary */
background:var(--pg-accent-soft-bg) !important;
border:1px solid var(--pg-accent-soft-bd) !important;
color:var(--pg-accent-soft-fg) !important;
font-weight:700;
}
.pg-premium .btn-outline-primary,
.pg-premium .btn-outline-secondary{ /* → pg-btn--ghost */
background:var(--pg-ghost-bg) !important;
border:1px solid var(--pg-ghost-bd) !important;
color:var(--pg-ghost-fg) !important;
}
.pg-premium .btn-sm,
.pg-premium .form-control-sm{ border-radius:var(--pg-radius-sm); }
.pg-premium .btn-sm{ padding:6px 13px; font-size:12px; font-weight:600; }
/* (d) İKON BUTONLARI (üst çubuk) — makette 42px yuvarlak kare (pg-icon) */
.pg-premium #akilliGorevBtn,
.pg-premium #quickAddBtn{
width:38px !important; height:38px !important;
border-radius:var(--pg-radius) !important;
box-shadow:0 10px 22px -10px var(--pg-accent-shadow);
transition:filter .2s ease, transform .12s ease;
}
.pg-premium #akilliGorevBtn:hover,
.pg-premium #quickAddBtn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
/* (e) FORM ALANLARI — paket dilinde köşe + odak halkası */
.pg-premium .form-control,
.pg-premium input[type="text"],.pg-premium input[type="number"],
.pg-premium input[type="date"],.pg-premium input[type="search"],
.pg-premium select,.pg-premium textarea{ border-radius:var(--pg-radius-sm); }
.pg-premium .form-control:focus,
.pg-premium input:focus,.pg-premium select:focus,.pg-premium textarea:focus{
border-color:var(--pg-accent-2) !important;
box-shadow:0 0 0 3px var(--pg-accent-soft-bg);
outline:none;
}
/* (f) KARTLAR — yalnız köşe; ZEMİN RENGİNE DOKUNULMAZ */
.pg-premium .card,.pg-premium .stat-card,
.pg-premium .panel,.pg-premium .data-table-container{ border-radius:var(--pg-radius); }
.pg-premium .menu-item{ border-radius:var(--pg-radius-sm); font-weight:600; }
.pg-premium .modal,.pg-premium .modal-content{ border-radius:16px; }
/* (g) ROZETLER — paket dili (renkleri uygulamanın .badge-* sınıfları verir) */
.pg-premium .badge{
border-radius:7px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; padding:4px 9px;
}
/* (h) TABLOLAR — ZEMİN ŞEFFAF KALIR. Sütun genişliği JS ile ölçüldüğü için
padding/height'a DOKUNULMAZ; yalnız başlık ağırlığı ve satır geçişi. */
.pg-premium .tabulator .tabulator-header .tabulator-col{ font-weight:700; letter-spacing:.02em; }
.pg-premium .tabulator .tabulator-row{ transition:background .15s ease; }
.pg-premium .tabulator .tabulator-row:hover{ background:var(--pg-accent-soft-bg) !important; }
/* (i) YÖNETİM PANELİ — satır-içi style ile çizildiği için !important şart.
Rozetler paketin pg-tag paletine, kartlar pg-* köşe/gölge diline bağlanır. */
.pg-premium .pgh-h{ letter-spacing:-.015em; }
.pg-premium .pgh-odak{
border-radius:var(--pg-radius) !important;
border:1px solid rgba(127,127,127,.10);
transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.pg-premium .pgh-odak:hover{
border-color:var(--pg-accent-soft-bd);
box-shadow:0 8px 20px -14px var(--pg-accent-shadow);
transform:translateX(2px);
}
.pg-premium .pgh-tag{
border-radius:7px !important; letter-spacing:.06em !important;
text-transform:uppercase; font-weight:700 !important; padding:4px 10px !important;
}
.pg-premium .pgh-tag--kritik{ background:var(--pg-critical) !important; color:#fff !important; }
.pg-premium .pgh-tag--termin{ background:var(--pg-term) !important; color:#161007 !important; }
.pg-premium .pgh-tag--süren,
.pg-premium .pgh-tag--sren{ background:var(--pg-work-1) !important; color:#fff !important; }
.pg-premium .pgh-tag--lab{ background:var(--pg-lab) !important; color:#fff !important; }
.pg-premium .pgh-tag--temiz{ background:var(--pg-lwg-1) !important; color:#fff !important; }
.pg-premium .pgh-tag--toplant,
.pg-premium .pgh-tag--toplanti{ background:#7c3aed !important; color:#fff !important; }
.pg-premium .pgh-kpi{ border-radius:var(--pg-radius) !important; transition:transform .12s ease, box-shadow .2s ease; }
.pg-premium .pgh-kpi:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -18px rgba(0,0,0,.9); }
.pg-premium .pgh-kpi-lbl{ text-transform:uppercase; letter-spacing:.07em; font-weight:700 !important; font-size:10px !important; }
.pg-premium .pgh-kpi-val{ letter-spacing:-.03em; font-size:26px !important; }
.pg-premium .pgh-plan{ border-radius:var(--pg-radius) !important; }