/* Özel Yazılım (/cozumler/ozel-yazilim/): mock-UI details, scoped to .pg-ozel */
.pg-ozel .oz-id { color: #8a8f9c; }
.pg-ozel .oz-tight th, .pg-ozel .oz-tight td { padding-left: .4em; padding-right: .4em; }

/* hero: request list with a floating detail panel that overhangs it on the right */
.pg-ozel .oz-hero { padding-bottom: 1.5em; }
.pg-ozel .oz-hero > .ui:first-child { margin-right: 5.2em; }
.pg-ozel .oz-hero .ui-body { grid-template-columns: 8.8em minmax(0, 1fr); }
.pg-ozel .oz-hero .ui-side { padding: 1.4em .75em; }
.pg-ozel .oz-hero .ui-nav { gap: .6em; padding: .6em .55em; font-size: .86em; }
.pg-ozel .oz-hero .ui-main { padding: 1.5em 9.9em 1.5em 1.4em; }
.pg-ozel .oz-float { top: 2.3em; right: 0; display: grid; gap: .85em; width: 14.4em; padding: 1.2em 1.1em; }
.pg-ozel .oz-float > * { font-size: .86em; }
.pg-ozel .oz-float .ui-kv { grid-template-columns: 5.6em minmax(0, 1fr); gap: .55em .6em; font-size: .8em; }
.pg-ozel .oz-float .ui-input { min-height: 0; padding: .45em .6em; }
.pg-ozel .oz-float .ui-btn { font-size: .86em; }
.pg-ozel .oz-brand { display: flex; align-items: flex-start; justify-content: space-between; }
.pg-ozel .oz-brand .ic { width: .9em; height: .9em; margin-top: .45em; color: #6b7080; }
.pg-ozel .oz-filter { display: flex; align-items: center; gap: .8em; padding: .5em .8em; border: 1px solid var(--l); border-radius: .6em; color: #9a9eaa; }
.pg-ozel .oz-filter .ic:first-child { margin-right: auto; }
.pg-ozel .ui-side.dark .oz-bars { display: grid; gap: .7em; margin-top: 1.4em; padding: 0 .6em; }

/* vertical approval timeline */
.pg-ozel .oz-tl { position: relative; display: grid; }
.pg-ozel .oz-tl::before { content: ""; position: absolute; left: calc(.675em - .75px); top: 1em; bottom: 1em; border-left: 1.5px solid #dcdee3; }
.pg-ozel .oz-tl .ui-check { position: relative; padding: .55em 0; }
.pg-ozel .oz-tl .ui-check i { position: relative; z-index: 1; }
.pg-ozel .oz-tl .ui-check i:not(.ok) { background: #fff; }
.pg-ozel .oz-tl .ui-check i.dk { background: #8a8f9c; border-color: #8a8f9c; }
.pg-ozel .oz-tl .ui-check i.ink { background: var(--ink); border-color: var(--ink); }
.pg-ozel .oz-tl .ui-check.off { color: #9a9eaa; }
.pg-ozel .oz-tl .ui-check > div { display: grid; gap: .2em; }
.pg-ozel .oz-tl.roomy .ui-check { padding: .9em 0; }

/* table checkboxes and role list */
.pg-ozel .oz-cb { display: inline-block; width: 1.2em; height: 1.2em; border: 1.5px solid #c9ccd4; border-radius: .3em; vertical-align: middle; }
.pg-ozel .oz-roles .ui-check { align-items: center; gap: 1em; padding: .95em 0; }
.pg-ozel .oz-roles .ui-check + .ui-check { border-top: 1px solid var(--l); }
.pg-ozel .oz-roles .ui-check > div { display: grid; gap: .2em; }

/* detail visual: dark sidebar + form + roles */
.pg-ozel .oz-wide { grid-template-columns: 14em minmax(0, 1fr); }
.pg-ozel .oz-work { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; gap: 1.4em; background: var(--soft); }
.pg-ozel .oz-work > .ui-panel { padding: 1.5em; }
.pg-ozel .oz-form { display: grid; gap: 1.1em; }
/* dashed upload area (site.css's .ui-input.drop clashes with the nav's .drop menu class) */
.pg-ozel .oz-drop { justify-content: center; min-height: 4.4em; border-style: dashed; }

@media (max-width: 620px) {
  .pg-ozel .oz-wide { grid-template-columns: 10.5em minmax(0, 1fr); }
  .pg-ozel .oz-work { grid-template-columns: minmax(0, 1fr); }
}