:root {
    --yy-bg: #f5f7fb;
    --yy-card: #ffffff;
    --yy-text: #182033;
    --yy-muted: #667085;
    --yy-line: #d9e0ec;
    --yy-primary: #2454ff;
    --yy-primary-soft: #e8edff;
    --yy-success: #14804a;
    --yy-warning: #b76e00;
    --yy-danger: #c83232;
    --yy-shadow: 0 18px 45px rgba(24, 32, 51, .08);
}
.yy-page { padding: 24px; background: var(--yy-bg); color: var(--yy-text); min-height: 100vh; }
.yy-hero, .yy-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.yy-hero { padding:24px; border-radius:24px; background:linear-gradient(135deg,#10245a,#2454ff); color:white; box-shadow:var(--yy-shadow); }
.yy-hero h1, .yy-toolbar h1 { margin:0; font-size: clamp(26px,3vw,42px); }
.yy-hero p, .yy-toolbar p { margin:6px 0 0; color:rgba(255,255,255,.78); }
.yy-toolbar p { color:var(--yy-muted); }
.yy-eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; }
.yy-grid { display:grid; gap:16px; margin-bottom:16px; }
.yy-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yy-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yy-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yy-card, .yy-kpi { background:var(--yy-card); border:1px solid var(--yy-line); border-radius:20px; padding:18px; box-shadow:var(--yy-shadow); }
.yy-kpi span { display:block; color:var(--yy-muted); font-size:13px; }
.yy-kpi strong { display:block; margin-top:8px; font-size:28px; }
.yy-kpi small { color:var(--yy-muted); }
.yy-kpi.success strong { color:var(--yy-success); }
.yy-kpi.warning strong { color:var(--yy-warning); }
.yy-kpi.danger strong { color:var(--yy-danger); }
.yy-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.yy-card-head h2, .yy-card h2 { margin:0 0 12px; font-size:20px; }
.yy-table { width:100%; border-collapse:collapse; font-size:14px; }
.yy-table th, .yy-table td { padding:12px 10px; border-bottom:1px solid var(--yy-line); text-align:left; vertical-align:top; }
.yy-table th { color:var(--yy-muted); font-weight:700; }
.yy-badge { display:inline-flex; align-items:center; padding:5px 10px; border-radius:999px; background:var(--yy-primary-soft); color:var(--yy-primary); font-weight:700; font-size:12px; }
.yy-badge.basarili, .yy-badge.yayinda { background:#eaf8f0; color:var(--yy-success); }
.yy-badge.basarisiz, .yy-badge.engel { background:#ffecec; color:var(--yy-danger); }
.yy-badge.bekliyor, .yy-badge.onay_bekliyor, .yy-badge.basladi { background:#fff5df; color:var(--yy-warning); }
.yy-btn { border:1px solid var(--yy-line); background:white; color:var(--yy-text); border-radius:12px; padding:10px 14px; text-decoration:none; display:inline-flex; cursor:pointer; font-weight:700; }
.yy-btn-primary { background:var(--yy-primary); color:white; border-color:var(--yy-primary); }
.yy-search { width:100%; box-sizing:border-box; border:1px solid var(--yy-line); border-radius:14px; padding:12px 14px; margin:0 0 14px; }
.yy-form { display:grid; gap:14px; }
.yy-form-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.yy-form label { display:grid; gap:6px; color:var(--yy-muted); font-weight:700; }
.yy-form input, .yy-form select, .yy-form textarea, .yy-card input, .yy-card select { border:1px solid var(--yy-line); border-radius:12px; padding:10px 12px; font:inherit; color:var(--yy-text); }
.yy-form textarea { min-height:90px; }
.yy-checks { display:flex; flex-wrap:wrap; gap:12px; }
.yy-list-row { display:grid; grid-template-columns: 150px 1fr 130px; gap:12px; padding:12px 0; border-bottom:1px solid var(--yy-line); }
.warning-soft { background:#fffbf2; }
.danger-soft { background:#fff7f7; }
.yy-code { background:#f0f3f9; border-radius:12px; padding:10px 12px; overflow:auto; }
.yy-toast-host { position: fixed; right: 18px; bottom: 18px; display:grid; gap:10px; z-index:9999; }
.yy-toast { background:#172033; color:white; padding:12px 14px; border-radius:14px; box-shadow:var(--yy-shadow); }
.yy-toast.success { background:#14804a; }
.yy-toast.error { background:#c83232; }
@media (max-width: 1024px) { .yy-grid-4 { grid-template-columns:repeat(2,1fr); } .yy-form-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 720px) { .yy-page { padding:14px; } .yy-hero, .yy-toolbar { flex-direction:column; align-items:flex-start; } .yy-grid-2, .yy-grid-3, .yy-grid-4, .yy-form-grid { grid-template-columns:1fr; } .yy-table { display:block; overflow:auto; } }