
:root{--bg:#f5f7fa;--ink:#171b24;--muted:#6f7786;--line:#e5e8ed;--orange:#f79a23;--navy:#1d2129;--card:#fff;--primary:#ed8b18;--primary-foreground:#fff;--secondary:#f1f3f6;--secondary-foreground:#242a35;--border:#e5e8ed;--input:#dfe3e8;--ring:#f79a23;--radius:.7rem}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:16px}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:256px;background:#1e222a;color:#c7cbd3;display:flex;flex-direction:column;z-index:40}.brand{height:82px;display:flex;align-items:center;padding:0 26px;border-bottom:1px solid #ffffff14}.brand img{width:156px;height:auto;filter:brightness(0) invert(1);object-fit:contain}.brand .mobile-close{display:none}.sidebar nav{padding:20px 14px;flex:1}.nav-label{font-size:11px;font-weight:700;letter-spacing:.12em;color:#747c8a;margin:12px 14px 8px}.nav-item{display:flex;align-items:center;gap:12px;min-height:46px;border-radius:9px;padding:0 13px;color:#bfc5cf;text-decoration:none;font-size:14px;font-weight:550;margin:2px 0;cursor:pointer}.nav-item:hover,.nav-item.active{background:#fff1;color:#fff}.nav-item.active{box-shadow:inset 3px 0 var(--orange)}.nav-item.active svg{color:var(--orange)}.nav-item span{margin-left:auto;background:#343944;color:#b9c0cc;border-radius:12px;min-width:24px;text-align:center;font-size:12px;padding:2px 7px}.nav-item span.warn{background:#6e4a20;color:#ffc267}.nav-item span.purple{background:#4c3a63;color:#cbb3ef}.profile{height:78px;border-top:1px solid #ffffff14;display:flex;align-items:center;gap:11px;padding:0 18px}.profile .avatar{height:36px;width:36px;border-radius:9px;display:grid;place-items:center;background:#f09a2c;color:white;font-size:13px;font-weight:800}.profile div:nth-child(2){flex:1}.profile strong,.profile small{display:block}.profile strong{font-size:13px;color:#f7f7f7}.profile small{font-size:12px;margin-top:3px;color:#8f97a4}.main{margin-left:256px;min-height:100vh}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:20}.search{width:min(420px,42vw);height:42px;border:1px solid var(--line);background:#f8f9fb;border-radius:9px;display:flex;align-items:center;gap:10px;padding:0 13px;color:#8b93a1}.search input{border:0;outline:0;background:transparent;width:100%;font-size:14px;color:var(--ink)}.header-actions{display:flex;align-items:center;gap:12px}.icon-btn{height:40px;width:40px;border:1px solid var(--line);background:#fff;border-radius:9px;display:grid;place-items:center;position:relative}.icon-btn i{position:absolute;right:8px;top:7px;height:7px;width:7px;border-radius:50%;background:#f18d19;border:2px solid #fff}.primary,.secondary{border:0;border-radius:9px;height:42px;padding:0 17px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}.primary{background:linear-gradient(135deg,#f5a037,#e88411);color:white;box-shadow:0 6px 14px #e88a1838}.secondary{background:#fff;border:1px solid var(--line);color:#444b58}.menu-btn{display:none;border:0;background:none}.content{padding:31px 34px 50px;max-width:1680px;margin:auto}.title-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:27px}.eyebrow{font-size:11px!important;font-weight:800;letter-spacing:.08em;color:#ef8c17!important;margin:0 0 8px!important}.title-row h1{font-size:27px;margin:0;letter-spacing:-.03em}.title-row p{color:var(--muted);font-size:14px;margin:7px 0 0}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:19px}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;align-items:center;gap:14px;min-height:104px;box-shadow:0 2px 5px #1f293708}.stat-icon{height:45px;width:45px;border-radius:11px;display:grid;place-items:center}.stat-icon svg{height:21px}.stat-icon.orange{background:#fff2e2;color:#ee8d1e}.stat-icon.violet{background:#f1eafd;color:#7958b4}.stat-icon.amber{background:#fff6dc;color:#d59611}.stat-icon.blue{background:#e6f3fb;color:#2778a8}.stat div:last-child{display:grid;grid-template-columns:auto auto;column-gap:12px;align-items:end}.stat small{grid-column:1/-1;color:var(--muted);font-size:12px;font-weight:650}.stat strong{font-size:24px;line-height:1.3}.stat em{font-style:normal;font-size:11px;color:#888f9a;padding-bottom:4px}.workspace-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(310px,.7fr);gap:19px}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 5px #1f293708}.panel-head{min-height:75px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.panel-head h2{font-size:15px;margin:0}.panel-head p{font-size:12px;color:var(--muted);margin:5px 0 0}.panel-head button{border:0;background:none;color:#d87c12;font-weight:700;font-size:12px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:825px}th{text-align:left;color:#8a919d;font-size:10px;letter-spacing:.05em;font-weight:800;background:#fafbfc;padding:11px 18px}td{padding:15px 18px;border-top:1px solid #eef0f3;font-size:12px;white-space:nowrap}td strong,td span{display:block}td>span,td>strong+span,.mode span{color:#7b8390;font-size:11px;margin-top:4px}.mode{display:flex;align-items:center;gap:9px}.mode>svg{color:#6f7782}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:13px;padding:5px 8px;font-size:10px}.badge i{width:6px;height:6px;border-radius:50%}.badge.amber{background:#fff4d8;color:#9b6b04}.badge.amber i{background:#e0a214}.badge.violet{background:#f0e9f8;color:#6d4e92}.badge.violet i{background:#8e64bb}.badge.blue{background:#e6f3fb;color:#2673a0}.badge.blue i{background:#3b8aba}.badge.rose{background:#fae8e8;color:#a24949}.badge.rose i{background:#ce6262}.owner{display:flex;align-items:center;gap:7px!important;color:#4e5561!important;margin:0!important}.owner i{height:25px;width:25px;border-radius:7px;background:#edf0f4;display:grid;place-items:center;font-size:9px;font-style:normal;font-weight:800;color:#697180}.right-col{display:flex;flex-direction:column;gap:19px}.attention .panel-head b{height:25px;min-width:25px;padding:0 7px;background:#fff0df;color:#d37810;border-radius:50%;display:grid;place-items:center;font-size:11px}.attention-item{display:grid;grid-template-columns:3px 1fr auto;gap:12px;padding:15px 17px;border-bottom:1px solid #eef0f3;align-items:center}.attention-item:last-child{border-bottom:0}.rail{height:45px;width:3px;border-radius:2px}.rail.red{background:#d55d5d}.rail.amber{background:#e2a11e}.rail.blue{background:#4e93bf}.attention-item strong{font-size:12px}.attention-item p,.attention-item small{margin:4px 0 0;font-size:10px;color:#777f8c;display:block}.attention-item button{border:1px solid var(--line);background:#fff;border-radius:7px;font-size:10px;font-weight:700;padding:7px 8px}.mode-summary{padding-bottom:6px}.mode-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:10px 18px}.round{height:34px;width:34px;border-radius:9px;display:grid;place-items:center}.round svg{height:17px}.round.navy{background:#e9ecf1;color:#313844}.round.orange{background:#fff0df;color:#e5871a}.round.blue{background:#e6f3fb;color:#347fa9}.mode-row strong,.mode-row small{display:block;font-size:11px}.mode-row small{color:#858c96;margin-top:3px}.mode-row>b{font-size:12px}.modal-backdrop{position:fixed;inset:0;background:#10141cb8;display:grid;place-items:center;padding:20px;z-index:100;backdrop-filter:blur(3px)}.modal{width:min(720px,100%);background:#fff;border-radius:15px;box-shadow:0 30px 80px #0005;overflow:hidden}.modal-head{height:88px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.modal-head>div{display:flex;align-items:center;gap:13px}.mini-icon{height:42px;width:42px;border-radius:10px;background:#fff0df;color:#e48516;display:grid;place-items:center}.mini-icon svg{height:20px}.modal-head p{font-size:10px;color:#e18517;letter-spacing:.08em;font-weight:800;margin:0 0 4px}.modal-head h2{font-size:18px;margin:0}.modal-head>button{border:0;background:#f4f5f7;width:34px;height:34px;border-radius:8px}.modal-body{padding:23px 28px 26px}.flow-pills{display:flex;align-items:center;justify-content:center;margin-bottom:22px}.flow-pills b{font-size:11px;color:#9aa0aa;display:flex;align-items:center;gap:7px}.flow-pills b>span{white-space:nowrap}.flow-pills i{height:1px;background:#e4e6ea;width:50px;margin:0 12px}.flow-pills .current{color:#de8115}.form-note{font-size:12px;color:#777f8c;background:#fafbfc;border:1px solid #eceef1;border-radius:8px;padding:10px 12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.form-grid label{font-size:12px;font-weight:700;color:#4e5560}.form-grid input,.form-grid select{display:block;width:100%;height:43px;border:1px solid #dfe3e8;border-radius:8px;background:#fff;padding:0 12px;margin-top:7px;color:#4c535e;outline:none}.form-grid input:focus,.form-grid select:focus{border-color:#f09a2d;box-shadow:0 0 0 3px #f09a2d20}.form-grid .full{grid-column:1/-1}.tag-input{height:45px;border:1px solid #dfe3e8;border-radius:8px;margin-top:7px;display:flex;align-items:center;padding:0 8px;gap:8px}.tag-input span{display:flex;align-items:center;gap:4px;background:#fff0df;color:#a95d08;font-size:11px;padding:5px 7px;border-radius:5px}.tag-input input{border:0;box-shadow:none!important;margin:0;padding:0;height:40px;flex:1}.modal-foot{background:#fafbfc;border-top:1px solid var(--line);padding:15px 24px;display:flex;justify-content:flex-end;gap:10px}
@media(max-width:1180px){.stat-grid{grid-template-columns:repeat(2,1fr)}.workspace-grid{grid-template-columns:1fr}.right-col{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar-open{transform:none}.brand .mobile-close{display:block;margin-left:auto;border:0;background:#ffffff12;color:white;width:34px;height:34px;border-radius:8px}.main{margin-left:0}.menu-btn{display:block}.topbar{height:70px;padding:0 16px;gap:12px}.search{flex:1}.header-actions .icon-btn{display:none}.primary{padding:0 13px}.content{padding:22px 16px}.title-row{align-items:flex-start}.title-row .secondary{display:none}.title-row h1{font-size:23px}.stat-grid{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:13px;min-height:90px}.stat-icon{display:none}.stat strong{font-size:21px}.right-col{display:flex}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.modal-body{padding:20px}.flow-pills b span{display:none}.flow-pills i{width:34px}.modal{max-height:94vh;overflow:auto}}
@media(max-width:480px){.header-actions .primary{font-size:0;width:42px;padding:0}.header-actions .primary svg{margin:0}.stat-grid{grid-template-columns:1fr}.right-col{display:block}.mode-summary{margin-top:14px}}

.nav-item{width:100%;border:0;background:transparent;text-align:left}.nav-item svg{width:19px}.table-action{border:1px solid #dde1e7;background:white;border-radius:7px;padding:7px 10px;font-size:11px;font-weight:700;cursor:pointer}.panel-toolbar{display:flex;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);overflow:auto}.filter{white-space:nowrap;border-radius:8px;padding:8px 11px;color:#747c89;font-size:12px;font-weight:650}.filter.active{background:#fff0df;color:#c86f0b}.filter b{margin-left:5px}.tracking-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.track-card{padding:20px}.track-head{display:flex;justify-content:space-between}.track-head h3{font-size:16px;margin:7px 0 3px}.track-head p{font-size:12px;color:var(--muted);margin:0}.track-line{margin:25px 0 18px}.track-line>div{position:relative;display:flex;align-items:center;gap:10px;min-height:43px;font-size:12px;color:#9299a5}.track-line>div:not(:last-child)::before{content:"";position:absolute;left:12px;top:27px;height:21px;border-left:2px solid #e2e5e9}.track-line i{height:25px;width:25px;border:2px solid #dfe3e8;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;background:white;z-index:1}.track-line .done{color:#313844;font-weight:650}.track-line .done i{background:#f29a2d;border-color:#f29a2d;color:#fff}.track-line>div.done:not(:last-child)::before{border-color:#f29a2d}.track-footer{border-top:1px solid var(--line);padding-top:15px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#858c97}.track-footer button{border:0;background:none;color:#d57a11;font-weight:700}.approval-list{display:grid;gap:14px}.approval-card{display:grid;grid-template-columns:1fr 190px auto;align-items:center;padding:20px;gap:24px}.approval-identity{display:flex;align-items:center;gap:14px}.approval-identity small{font-size:10px;font-weight:800;color:#7f5aaa;letter-spacing:.06em}.approval-identity h3{font-size:15px;margin:6px 0 4px}.approval-identity p{font-size:12px;color:var(--muted);margin:0}.approval-amount small,.approval-amount strong,.approval-amount span{display:block}.approval-amount small,.approval-amount span{font-size:11px;color:#838a96}.approval-amount strong{font-size:19px;margin:4px 0}.approval-actions{display:flex;gap:8px}.empty-state{text-align:center;padding:70px 20px;color:#818894}.empty-state>svg{width:44px;height:44px;color:#e18a20}.email-grid,.settings-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);gap:18px}.compose-body{padding:20px;display:grid;gap:16px}.compose-body.two{grid-template-columns:1fr 1fr}.compose-body label,.closure-row label{font-size:12px;font-weight:700;color:#4f5763}.compose-body input,.compose-body textarea,.form-grid textarea,.closure-row input{display:block;width:100%;margin-top:7px;border:1px solid #dfe3e8;border-radius:8px;padding:11px 12px;font:inherit;font-size:13px;outline:none}.compose-body textarea,.form-grid textarea{min-height:160px;resize:vertical}.compose-body .full{grid-column:1/-1}.mail-row{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:14px 18px;border-bottom:1px solid #eef0f3}.mail-row strong,.mail-row small{display:block;font-size:12px}.mail-row small{color:#858c97;margin-top:4px}.mail-row>b{font-size:10px;color:#478267}.settings-note{padding:26px}.settings-note>svg{width:38px;height:38px;color:#e58b1d}.settings-note h3{font-size:17px}.settings-note p,.settings-note blockquote{font-size:12px;color:#707885;line-height:1.6}.settings-note hr{border:0;border-top:1px solid var(--line);margin:22px 0}.summary-card{border:1px solid #ead5bc;background:#fff9f1;border-radius:9px;padding:14px}.summary-card b{color:#bd6a0b}.summary-card p{font-size:12px;line-height:1.5;margin:7px 0 0;color:#777f8c}.form-grid textarea{margin-top:7px}.form-error,.approval-warning{border-radius:9px;padding:12px 14px;margin-bottom:14px;background:#fff0f0;color:#9c4141;font-size:12px;font-weight:650}.approval-warning{display:flex;align-items:center;gap:12px;background:#fff7df;color:#8b630b}.approval-warning p{margin:4px 0 0;font-weight:400}.closure-row{display:grid;grid-template-columns:28px repeat(4,1fr) 34px;gap:10px;align-items:end;padding:12px 0;border-bottom:1px solid #edf0f3}.closure-row>b{height:28px;width:28px;border-radius:50%;display:grid;place-items:center;background:#fff0df;color:#c66d09;font-size:11px;margin-bottom:8px}.closure-row>button{border:0;background:#f5f6f8;border-radius:7px;height:39px;margin-bottom:0;color:#8c4850}.add-row{border:1px dashed #d5dae0;background:#fafbfc;border-radius:8px;padding:9px 12px;font-size:12px;font-weight:700;margin-top:12px;color:#d07710;display:flex;align-items:center;gap:7px}.modal.wide{width:min(880px,100%)}.modal.wide .modal-body{max-height:calc(92vh - 88px);overflow:auto}.modal.wide .modal-foot{margin:24px -28px -26px}.toast{position:fixed;right:24px;bottom:24px;background:#222831;color:white;border-radius:10px;padding:13px 17px;display:flex;align-items:center;gap:9px;z-index:200;box-shadow:0 15px 40px #0004;font-size:13px}.toast svg{color:#f5a039}
@media(max-width:1050px){.tracking-grid{grid-template-columns:1fr 1fr}.approval-card{grid-template-columns:1fr auto}.approval-amount{display:none}}
@media(max-width:760px){.tracking-grid,.email-grid,.settings-grid{grid-template-columns:1fr}.approval-card{grid-template-columns:1fr}.compose-body.two{grid-template-columns:1fr}.compose-body .full{grid-column:auto}.closure-row{grid-template-columns:28px 1fr 1fr}.closure-row>label:nth-of-type(3),.closure-row>label:nth-of-type(4){grid-column:auto}.modal.wide .modal-foot{margin:20px -20px -20px}.toast{left:16px;right:16px;bottom:16px}.track-card{padding:16px}}

.weekly-surface{display:grid;gap:15px}.week-control{display:flex;align-items:center;justify-content:space-between;padding:17px 20px}.week-nav{display:flex;align-items:center;gap:10px}.week-nav>button{height:36px;width:36px;border:1px solid var(--line);background:#fff;border-radius:8px;display:grid;place-items:center;color:#616977;cursor:pointer}.week-nav>button svg{width:18px}.week-nav>div{min-width:205px;text-align:center}.week-nav small{display:block;color:#9a6425;font-size:10px;letter-spacing:.08em;font-weight:800}.week-nav h2{font-size:16px;margin:4px 0 0}.week-nav .today-btn{width:auto;padding:0 12px;color:#c86f0b;font-size:11px;font-weight:800}.week-kpis{display:flex;gap:0}.week-kpis>div{min-width:108px;padding:0 18px;border-left:1px solid var(--line)}.week-kpis b,.week-kpis span{display:block}.week-kpis b{font-size:20px}.week-kpis span{font-size:10px;color:#858c98;margin-top:3px}.orange-text{color:#e38317}.green-text{color:#3f8a66}.weekly-toolbar{display:flex;justify-content:space-between;align-items:center}.week-filters{display:flex;gap:6px}.week-filters button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 12px;font-size:11px;font-weight:700;color:#69717e;cursor:pointer}.week-filters button.active{background:#242a33;color:#fff;border-color:#242a33}.week-filters button b{margin-left:6px;background:#e78b1e;color:#fff;border-radius:10px;padding:1px 6px}.rollover-rule{display:flex;align-items:center;gap:8px;color:#777f8c;font-size:11px}.rollover-rule svg{width:16px;color:#e58b1d}.rollover-rule b{color:#be6b0b}.week-board{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:11px;overflow-x:auto;padding-bottom:4px}.day-column{min-width:210px;background:#eef1f5;border:1px solid #e2e6eb;border-radius:11px;overflow:hidden}.day-column>header{height:54px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid #e2e6eb}.day-column>header strong,.day-column>header span{display:block}.day-column>header strong{font-size:12px}.day-column>header span{font-size:10px;color:#8a919c;margin-top:3px}.day-column>header>b{height:24px;min-width:24px;padding:0 6px;border-radius:12px;background:#f0f2f5;display:grid;place-items:center;font-size:10px;color:#6d7480}.day-cards{padding:9px;display:grid;gap:9px;align-content:start;min-height:420px}.week-card{background:white;border:1px solid #e0e4e9;border-radius:9px;padding:12px;box-shadow:0 2px 5px #1f293707;position:relative;overflow:hidden}.week-card.carried::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#e58a1d}.week-card.completed{opacity:.84}.week-card.completed::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#4b936e}.week-card-top{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center}.mode-mark{height:28px;width:28px;border-radius:7px;display:grid;place-items:center}.mode-mark svg{width:15px}.mode-mark.sea{background:#e7edf4;color:#35506d}.mode-mark.road{background:#fff0df;color:#d67b14}.mode-mark.air{background:#e5f1f8;color:#347aa1}.week-card-top strong,.week-card-top small{display:block;font-size:10px}.week-card-top small{color:#9097a2;margin-top:2px}.week-card-top>button{border:0;background:none;color:#939aa5;font-weight:800}.week-card h3{font-size:12px;margin:12px 0 4px}.week-card>p{font-size:10px;color:#7a828e;margin:0}.week-tags{display:flex;gap:5px;margin:11px 0}.week-tags span{display:inline-flex;align-items:center;gap:4px;border-radius:10px;padding:4px 6px;font-size:9px;font-weight:800}.week-tags svg{width:10px;height:10px}.carry-tag{background:#fff0df;color:#bb690b}.priority-tag{background:#f0e9f8;color:#705197}.complete-tag{background:#e5f4eb;color:#367a56}.week-card footer{border-top:1px solid #eef0f3;padding-top:9px;display:flex;align-items:center;justify-content:space-between;gap:6px}.week-card footer span{font-size:9px;color:#8a919c}.week-card footer button{border:0;background:none;color:#ce7410;font-size:9px;font-weight:800;white-space:nowrap}.day-empty{border:1px dashed #d2d7de;border-radius:9px;min-height:90px;display:grid;place-items:center;align-content:center;color:#a0a7b1}.day-empty span{font-size:20px}.day-empty p{font-size:10px;margin:4px 0}.rollover-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 19px}.rollover-footer>div{display:flex;align-items:center;gap:12px}.rollover-footer svg{height:34px;width:34px;padding:8px;border-radius:9px;background:#fff0df;color:#d77c13}.rollover-footer b{font-size:12px}.rollover-footer p{font-size:11px;color:#7d8591;margin:4px 0 0}.rollover-footer>button{border:0;background:none;color:#ca720e;font-size:11px;font-weight:800}
@media(max-width:1050px){.week-control{align-items:flex-start}.week-kpis>div{min-width:82px;padding:0 10px}.week-kpis span{max-width:70px}.weekly-toolbar{align-items:flex-start;gap:12px}.rollover-rule{max-width:270px}}
@media(max-width:760px){.week-control{display:grid;gap:18px}.week-kpis{width:100%;overflow:auto}.week-kpis>div:first-child{border-left:0}.weekly-toolbar{display:grid}.week-filters{overflow:auto;max-width:calc(100vw - 32px)}.rollover-footer{align-items:flex-start;display:grid;gap:12px}.rollover-footer>button{text-align:left}.week-board{margin-right:-16px}}

.completion-rule{display:flex;align-items:center;gap:11px;background:#edf6ff;border:1px solid #d4e7f5;border-radius:9px;padding:12px 14px;margin-bottom:13px;color:#2c6182}.completion-rule>svg{width:21px;flex:0 0 auto}.completion-rule b{font-size:12px}.completion-rule p{font-size:11px;margin:4px 0 0;color:#5f7788}

.assignment-layout{display:grid;grid-template-columns:minmax(260px,.78fr) minmax(420px,1.35fr) minmax(250px,.7fr);gap:16px}.queue-count{height:26px;min-width:26px;padding:0 7px;border-radius:13px;background:#f1e9fa;color:#725096;display:grid;place-items:center;font-size:11px}.assignment-file{width:100%;border:0;border-bottom:1px solid #edf0f3;background:#fff;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:14px 16px;text-align:left;cursor:pointer}.assignment-file.selected{background:#fff8ef;box-shadow:inset 3px 0 #ed8c1a}.assignment-file strong,.assignment-file p,.assignment-file small{display:block}.assignment-file strong{font-size:12px}.assignment-file p{font-size:10px;color:#7e8692;margin:4px 0 0}.assignment-file>div:last-child{text-align:right}.assignment-file>div:last-child b{font-size:9px;color:#bd6b0c;background:#fff0df;border-radius:9px;padding:3px 6px}.assignment-file small{font-size:9px;color:#939aa4;margin-top:6px}.transfer-card{padding:22px}.transfer-title{display:flex;align-items:center;gap:14px}.transfer-title small{font-size:10px;font-weight:800;color:#75569a;letter-spacing:.06em}.transfer-title h2{font-size:20px;margin:4px 0}.transfer-title p{font-size:12px;color:#7c8490;margin:0}.authority-banner{display:flex;align-items:center;gap:10px;background:#ecf7f2;border:1px solid #d1ebdf;color:#347258;border-radius:9px;padding:11px 13px;margin:21px 0}.authority-banner>svg{width:20px}.authority-banner b{font-size:11px}.authority-banner p{font-size:10px;margin:3px 0 0;color:#5d7d6d}.transfer-flow{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:12px}.transfer-flow>svg{color:#e48a1d;width:22px}.transfer-flow>div{border:1px solid #e1e5ea;border-radius:10px;padding:13px;position:relative}.transfer-flow>div>span{position:absolute;right:10px;top:10px;height:20px;width:20px;border-radius:50%;background:#f0f2f5;display:grid;place-items:center;font-size:9px}.transfer-flow small,.transfer-flow strong,.transfer-flow em{display:block}.transfer-flow small{font-size:9px;color:#9299a4;font-weight:800}.transfer-flow strong{font-size:13px;margin:8px 0 4px}.transfer-flow em{font-style:normal;font-size:10px;color:#7d8591}.transfer-flow select{width:100%;border:0;border-bottom:1px solid #dfe3e8;background:white;padding:7px 0;margin:2px 0 5px;font-weight:750;color:#313844}.transfer-note{display:block;font-size:11px;font-weight:750;margin-top:17px}.transfer-note textarea{display:block;width:100%;min-height:76px;border:1px solid #dfe3e8;border-radius:8px;margin-top:7px;padding:10px;font:inherit;font-size:12px;resize:vertical}.transfer-checks{display:flex;gap:18px;margin:14px 0;color:#616976;font-size:10px}.transfer-checks label{display:flex;align-items:center;gap:6px}.transfer-submit{width:100%}.authority-person{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid #edf0f3}.authority-person>i{height:32px;width:32px;border-radius:8px;background:#edf0f4;display:grid;place-items:center;font-size:10px;font-style:normal;font-weight:800}.authority-person>div{flex:1}.authority-person strong,.authority-person small{display:block;font-size:11px}.authority-person small{font-size:9px;color:#858c97;margin-top:3px}.authority-person>span{font-size:9px;color:#3d805e;background:#e7f5ed;padding:4px 6px;border-radius:9px}
@media(max-width:1200px){.assignment-layout{grid-template-columns:minmax(250px,.8fr) minmax(420px,1.3fr)}.authority-list{grid-column:1/-1}.authority-list{display:grid;grid-template-columns:repeat(3,1fr)}.authority-list .panel-head{grid-column:1/-1}}
@media(max-width:760px){.assignment-layout{grid-template-columns:1fr}.authority-list{display:block}.transfer-flow{grid-template-columns:1fr}.transfer-flow>svg{transform:rotate(90deg);justify-self:center}.transfer-checks{display:grid;gap:8px}}

.email-tabs{display:flex;gap:7px;margin-bottom:15px}.email-tabs button{height:40px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:0 14px;display:flex;align-items:center;gap:8px;color:#68717e;font-size:11px;font-weight:800}.email-tabs button svg{width:16px}.email-tabs button.active{background:#222831;color:#fff;border-color:#222831}.smtp-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr);gap:18px}.smtp-card,.smtp-test{padding:25px}.smtp-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.smtp-heading small,.smtp-test>small{font-size:10px;font-weight:900;color:#52606d;letter-spacing:.06em}.smtp-heading h2,.smtp-test h2{font-size:20px;margin:5px 0 0}.smtp-heading>span{height:42px;width:42px;border-radius:10px;background:#edf6f5;color:#198579;display:grid;place-items:center}.smtp-heading>span svg{width:20px}.smtp-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}.smtp-form label,.smtp-test label{font-size:11px;font-weight:800;color:#56616d}.smtp-form input,.smtp-form select,.smtp-test input{display:block;width:100%;height:48px;border:1px solid #cad1d9;border-radius:10px;background:#fff;padding:0 13px;margin-top:7px;font:inherit;font-size:13px;color:#242b34}.smtp-save,.smtp-test>button{height:48px;border:0;border-radius:10px;background:#11877c;color:#fff;font-weight:850;font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px}.smtp-test>p{font-size:13px;line-height:1.55;color:#63707c;margin:15px 0 19px}.smtp-test>button{width:100%;margin-top:18px}.smtp-test>button svg{width:17px}.delivery-note{background:#fff3db;border:1px solid #efc878;border-radius:10px;padding:14px;margin-top:2px;display:grid;grid-template-columns:105px 1fr;gap:9px;font-size:11px;line-height:1.5;color:#855a12}.delivery-note b{color:#313841}.smtp-message{margin-top:12px;padding:10px 12px;border-radius:8px;background:#edf6f5;color:#267067;font-size:11px;font-weight:700}
@media(max-width:900px){.smtp-grid{grid-template-columns:1fr}}@media(max-width:620px){.smtp-form{grid-template-columns:1fr}.email-tabs{overflow:auto}.email-tabs button{white-space:nowrap}.delivery-note{grid-template-columns:1fr}}

/* Executive operations layer */
.global-search{position:relative;width:min(520px,48vw)}.global-search .search{width:100%}.search>button{border:0;background:transparent;color:#89919d;height:30px;width:30px;display:grid;place-items:center;cursor:pointer}.search>button svg{width:15px}.notification-wrap{position:relative}.notification-panel{position:absolute;right:0;top:49px;width:360px;background:#fff;border:1px solid #dde2e8;border-radius:13px;box-shadow:0 18px 55px #171b2430;overflow:hidden;z-index:80}.notification-panel header{padding:16px 17px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9ebef}.notification-panel header strong,.notification-panel header span{display:block}.notification-panel header strong{font-size:14px}.notification-panel header span{font-size:11px;color:#818895;margin-top:4px}.notification-panel header button{border:0;background:#f3f5f7;width:30px;height:30px;border-radius:7px}.notification-panel header svg{width:15px}.notice-item{position:relative;width:100%;display:grid;grid-template-columns:38px 1fr 6px;gap:10px;align-items:center;padding:13px 16px;border:0;border-bottom:1px solid #eef0f2;background:#fff;text-align:left}.notice-item:hover{background:#fafbfc}.notice-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center}.notice-icon svg{width:17px}.notice-icon.critical{background:#fff0df;color:#d6780e}.notice-icon.approval{background:#f0e9f8;color:#7453a0}.notice-icon.info{background:#e7f2f8;color:#347a9f}.notice-item strong,.notice-item small{display:block}.notice-item strong{font-size:12px}.notice-item small{font-size:10px;color:#7e8691;margin-top:4px}.notice-item>i{width:6px;height:6px;border-radius:50%;background:#ee901f}.notice-all{width:100%;height:43px;border:0;background:#fafbfc;color:#bd6b0d;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:7px}.notice-all svg{width:14px}.title-meta{display:flex;align-items:center;gap:10px}.title-meta .eyebrow{margin:0!important}.live-status{font-size:10px;color:#397b5a;background:#e7f5ed;border:1px solid #cce8d8;border-radius:20px;padding:4px 8px;display:inline-flex;align-items:center;gap:5px;font-weight:700}.live-status svg{width:11px;height:11px}.title-row .secondary svg{width:16px}.command-strip{display:grid;grid-template-columns:260px minmax(240px,1fr) auto;gap:25px;align-items:center;padding:16px 18px;margin-bottom:19px;background:linear-gradient(105deg,#202630,#282f3b);color:#fff;border-color:#303846;box-shadow:0 12px 30px #171b2416}.command-health{display:flex;align-items:center;gap:12px}.command-health>span{height:42px;width:42px;border-radius:10px;background:#ffffff10;display:grid;place-items:center;color:#f5a33d}.command-health>span svg{width:20px}.command-health small,.command-health strong{display:block}.command-health small{font-size:9px;letter-spacing:.08em;color:#aeb6c1}.command-health strong{font-size:19px;margin-top:3px}.command-health em{font-style:normal;font-size:9px;color:#73d39e;background:#204838;border-radius:12px;padding:4px 6px;display:flex;gap:3px;align-items:center}.command-health em svg{width:10px}.command-progress>div{display:flex;justify-content:space-between;font-size:10px;color:#c8ced6;margin-bottom:7px}.command-progress>i{height:6px;background:#3c4451;display:block;border-radius:6px;overflow:hidden}.command-progress>i>b{display:block;height:100%;background:linear-gradient(90deg,#ef8b17,#f7b458);border-radius:6px}.command-actions{display:flex;gap:8px}.command-actions>button{height:48px;border:1px solid #ffffff14;background:#ffffff0a;color:#fff;border-radius:9px;padding:0 13px;display:flex;align-items:center;gap:9px;text-align:left}.command-actions svg{width:16px;color:#f2a13e}.command-actions b,.command-actions small{display:block}.command-actions b{font-size:10px}.command-actions small{font-size:9px;color:#aeb6c1;margin-top:3px}.panel-head button{display:inline-flex;align-items:center;gap:5px}.panel-head button svg{width:13px}.insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px;margin-top:19px}.performance-score{font-size:11px;font-weight:800;color:#397b5a;background:#e8f5ed;border-radius:15px;padding:6px 9px;display:flex;align-items:center;gap:5px}.performance-score svg{width:13px}.bar-chart{height:190px;padding:22px 28px 20px;display:flex;align-items:end;gap:18px}.bar-chart>div{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:8px}.bar-chart>div>span{width:100%;max-width:45px;background:#e8ebef;border-radius:6px 6px 2px 2px;min-height:12px}.bar-chart>div>span.active{background:linear-gradient(#f5a23c,#e98510);box-shadow:0 5px 14px #ed901f30}.bar-chart small{font-size:9px;color:#89919c;white-space:nowrap}.activity-card>.panel-head>svg{color:#d97d12;width:19px}.activity-row{display:grid;grid-template-columns:40px 8px 1fr;gap:10px;align-items:start;padding:12px 20px}.activity-row time{font-size:10px;color:#8c939e;padding-top:2px}.activity-row>i{width:7px;height:7px;border-radius:50%;background:#f09a2b;margin-top:3px;box-shadow:0 0 0 4px #fff0df}.activity-row strong,.activity-row small{display:block}.activity-row strong{font-size:11px}.activity-row small{font-size:10px;color:#858d98;margin-top:4px}.workbench-head{padding:20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.workbench-head h2{margin:0;font-size:16px}.workbench-head p{font-size:12px;color:#7b8390;margin:5px 0 0}.workbench-head .secondary svg{width:15px}.workbench-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}.segment-control{display:flex;gap:5px}.segment-control button{height:34px;border:1px solid #e1e4e9;background:#fff;color:#6e7682;border-radius:8px;padding:0 10px;font-size:11px;font-weight:700}.segment-control button.active{background:#252b34;color:#fff;border-color:#252b34}.segment-control span{margin-left:6px;opacity:.65}.inline-search{height:35px;width:220px;border:1px solid #e0e3e8;border-radius:8px;display:flex;align-items:center;gap:7px;padding:0 10px;color:#8b929d}.inline-search svg{width:15px}.inline-search input{border:0;outline:0;width:100%;font-size:11px}.result-meta{height:39px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;background:#fafbfc;color:#7e8691;font-size:10px}.result-meta span{display:flex;align-items:center;gap:5px}.result-meta svg{width:12px}.row-actions{display:flex;align-items:center;gap:6px}.row-actions button{border:1px solid #dfe3e8;background:#fff;border-radius:7px;height:31px;padding:0 9px;font-size:10px;font-weight:700;color:#555d69}.row-actions button:first-child{width:31px;padding:0;display:grid;place-items:center}.row-actions svg{width:14px}.table-empty{padding:40px;display:grid;place-items:center;gap:6px;color:#858d98}.table-empty svg{width:24px}.table-empty b{color:#434a55}.drawer-backdrop{position:fixed;inset:0;background:#13182180;z-index:90;display:flex;justify-content:flex-end;backdrop-filter:blur(2px)}.detail-drawer{height:100%;width:min(460px,94vw);background:#fff;box-shadow:-20px 0 60px #0002;display:flex;flex-direction:column}.detail-drawer>header{padding:23px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.detail-drawer header small{font-size:9px;letter-spacing:.08em;color:#d27910;font-weight:800}.detail-drawer header h2{font-size:20px;margin:5px 0 0}.detail-drawer header button{border:0;background:#f2f4f6;width:34px;height:34px;border-radius:8px}.drawer-status{padding:14px 22px;background:#f8f9fb;display:flex;align-items:center;justify-content:space-between}.drawer-status>span{display:flex;align-items:center;gap:5px;font-size:10px;color:#49765c}.drawer-status>span svg{width:14px}.detail-drawer section{padding:21px 23px;border-bottom:1px solid #eceef1}.detail-drawer section h3{font-size:12px;margin:0 0 15px}.detail-drawer dl{margin:0}.detail-drawer dl>div{display:flex;justify-content:space-between;gap:20px;padding:8px 0;border-bottom:1px dashed #e5e7eb;font-size:11px}.detail-drawer dt{color:#818895}.detail-drawer dd{margin:0;font-weight:700;text-align:right}.check-row{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:11px;color:#7f8792}.check-row>i{width:22px;height:22px;border-radius:50%;background:#eef0f3;display:grid;place-items:center;font-style:normal;font-size:9px}.check-row>i svg{width:11px}.check-row.done{color:#3f7155;font-weight:650}.check-row.done>i{background:#e3f3e9;color:#3e835e}.detail-drawer>footer{margin-top:auto;padding:17px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px}.detail-drawer>footer svg{width:15px}.tracking-overview{padding:19px 21px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.tracking-overview>div:first-child{display:flex;align-items:center;gap:12px}.tracking-overview>div:first-child>span{height:44px;width:44px;border-radius:10px;background:#e9edf2;color:#303844;display:grid;place-items:center}.tracking-overview small,.tracking-overview strong{display:block}.tracking-overview small{font-size:9px;letter-spacing:.08em;color:#d1780e;font-weight:800}.tracking-overview strong{font-size:15px;margin-top:3px}.tracking-overview p{font-size:11px;color:#818995;margin:4px 0 0}.tracking-metrics{display:flex}.tracking-metrics>div{padding:0 20px;border-left:1px solid #e6e8ec}.tracking-metrics b,.tracking-metrics span{display:block}.tracking-metrics b{font-size:18px}.tracking-metrics span{font-size:9px;color:#808894;margin-top:3px}.track-progress{height:5px;background:#edf0f3;border-radius:5px;overflow:hidden;margin-top:22px}.track-progress span{display:block;height:100%;background:linear-gradient(90deg,#ed8a17,#f6b25b);border-radius:5px}.track-footer button:disabled{color:#4c875f}.approval-summary{margin-bottom:14px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between}.approval-summary>div{display:flex;align-items:center;gap:11px}.approval-summary>div>svg{height:37px;width:37px;padding:9px;border-radius:9px;background:#f0e9f8;color:#75549f}.approval-summary small,.approval-summary strong{display:block}.approval-summary small{font-size:9px;color:#77569f;font-weight:800;letter-spacing:.06em}.approval-summary strong{font-size:14px;margin-top:3px}.approval-summary p{font-size:11px;color:#7e8692;margin:0;max-width:440px}.secondary.danger{color:#a94b4b;background:#fff8f8;border-color:#efdada}
@media(max-width:1120px){.command-strip{grid-template-columns:240px 1fr}.command-actions{grid-column:1/-1}.insight-grid{grid-template-columns:1fr}.tracking-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.global-search{flex:1;width:auto}.global-search .search{width:100%}.search-results{left:-45px;width:calc(100vw - 24px)}.notification-panel{position:fixed;top:70px;right:10px;left:10px;width:auto}.title-meta{align-items:flex-start;flex-direction:column;gap:5px}.live-status{display:none}.command-strip{grid-template-columns:1fr;gap:15px}.command-actions{grid-column:auto;overflow:auto}.command-actions>button{min-width:145px}.insight-grid{grid-template-columns:1fr}.workbench-head{align-items:flex-start}.workbench-head .secondary{display:none}.workbench-toolbar{align-items:stretch;flex-direction:column}.segment-control{overflow:auto}.inline-search{width:100%}.result-meta span:last-child{display:none}.tracking-overview{align-items:flex-start;gap:15px}.tracking-metrics{display:none}.tracking-grid{grid-template-columns:1fr}.approval-summary{align-items:flex-start;gap:12px;flex-direction:column}.approval-summary p{max-width:none}.bar-chart{padding-left:16px;padding-right:16px}.drawer-status{align-items:flex-start;gap:8px;flex-direction:column}}

.role-explainer{display:flex;gap:11px;align-items:center;margin-top:16px;padding:12px 14px;border-radius:9px;background:#f3eef9;color:#614681}.role-explainer>svg{width:21px}.role-explainer b{font-size:11px}.role-explainer p{font-size:10px;margin:4px 0 0;color:#78688a}

/* ===== PHP sürümü ek stilleri ===== */
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
.nav-item{text-decoration:none}
.sidebar .profile{position:relative;cursor:pointer}
.user-menu{position:absolute;left:14px;right:14px;bottom:62px;background:#2a2f39;border:1px solid #ffffff1f;border-radius:10px;padding:6px;z-index:50;box-shadow:0 18px 40px #0006}
.user-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:#d7dbe2;font-size:14px;text-decoration:none}
.user-menu a:hover{background:#ffffff14;color:#fff}
.week-nav a,.today-btn,.week-filters a,.segment-control a,.command-actions a,.panel-head a,.attention-item a,.notice-item,.notice-all,.rollover-footer a,.workbench-head a.secondary{text-decoration:none}
.inline-search{position:relative}
.inline-search input{border:0;outline:0;background:transparent;font:inherit;width:100%}
.compose-body div{display:flex;gap:10px;flex-wrap:wrap}
.closure-row{position:relative}
.badge.green{background:#e8f7ee;color:#0f7b3f}
.badge.green i{background:#17a55a}
.form-error{display:block}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:#f1f3f6;padding:3px 7px;border-radius:6px}
.empty-state{text-align:center;padding:40px 20px}
.empty-state svg{color:#9aa2b1;width:34px;height:34px}
button[disabled],a[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.toast[hidden],[hidden]{display:none!important}

/* Giriş ekranı */
.login-body{background:linear-gradient(140deg,#1b1f27 0%,#262c37 48%,#1b1f27 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}
.login-shell{width:100%;max-width:980px;display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 40px 90px #0000005c}
.login-brand{background:#1e222a;color:#c7cbd3;padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.login-brand img{width:168px;height:auto;filter:brightness(0) invert(1);object-fit:contain;margin-bottom:26px}
.login-brand h1{color:#fff;font-size:26px;margin:0 0 10px;letter-spacing:-.01em}
.login-brand p{margin:0 0 26px;font-size:14.5px;line-height:1.6;color:#98a0ad}
.login-brand ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.login-brand li{display:flex;align-items:center;gap:11px;font-size:13.5px;color:#c7cbd3}
.login-brand li svg{color:var(--orange);flex:none}
.login-card{padding:46px 42px;display:flex;flex-direction:column;justify-content:center}
.login-head{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.login-head .mini-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fdf1e0;color:var(--primary);flex:none}
.login-head p{margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.login-head h2{margin:2px 0 0;font-size:21px}
.login-card form{display:grid;gap:16px}
.login-card label{display:grid;gap:7px;font-size:13px;font-weight:600;color:#434a57}
.login-card input{height:46px;border:1px solid var(--input);border-radius:10px;padding:0 14px;font-size:15px;background:#fff;outline:0}
.login-card input:focus{border-color:var(--ring);box-shadow:0 0 0 3px #f79a231f}
.login-card button.primary{height:47px;display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:10px;background:var(--primary);color:#fff;font-size:15px;font-weight:650;cursor:pointer}
.login-card button.primary:hover{background:#d97f11}
.login-foot{margin:22px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
@media(max-width:860px){.login-shell{grid-template-columns:1fr}.login-brand{display:none}.login-card{padding:34px 24px}}

/* Bağlantı (a) olarak işlenen düğmeler için eş stiller — PHP sürümü */
.week-filters a{display:flex;align-items:center;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 12px;font-size:11px;font-weight:700;color:#69717e;cursor:pointer;white-space:nowrap}
.week-filters a.active{background:#242a33;color:#fff;border-color:#242a33}
.week-filters a b{margin-left:6px;background:#e78b1e;color:#fff;border-radius:10px;padding:1px 6px}
.segment-control a{display:flex;align-items:center;height:34px;border:1px solid #e1e4e9;background:#fff;color:#6e7682;border-radius:8px;padding:0 10px;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}
.segment-control a.active{background:#252b34;color:#fff;border-color:#252b34}
.week-nav>a{height:36px;width:36px;border:1px solid var(--line);background:#fff;border-radius:8px;display:grid;place-items:center;color:#616977;cursor:pointer;text-decoration:none}
.week-nav>a svg{width:18px}
.week-nav a.today-btn{width:auto;padding:0 12px;color:#c86f0b;font-size:11px;font-weight:800}
.panel-head a{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:#d87c12;font-weight:700;font-size:12px;cursor:pointer}
.panel-head a svg{width:15px}
.attention-item a{display:inline-flex;align-items:center;border:1px solid var(--line);background:#fff;border-radius:7px;font-size:10px;font-weight:700;padding:7px 8px;color:inherit;cursor:pointer}
.command-actions>a{height:48px;border:1px solid #ffffff14;background:#ffffff0a;color:#fff;border-radius:9px;padding:0 13px;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer}
.rollover-footer>a{border:0;background:none;color:#ca720e;font-size:11px;font-weight:800;cursor:pointer}
.email-tabs a{height:40px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:0 14px;display:flex;align-items:center;gap:8px;color:#68717e;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer;text-decoration:none}
.email-tabs a svg{width:16px}
.email-tabs a.active{background:#222831;color:#fff;border-color:#222831}
.empty-state a.secondary{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:9px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:12px;font-weight:700;text-decoration:none}

/* =====================================================================
   Dosya ayrıntı çekmecesi — finans, düzenleme, notlar
   ===================================================================== */
.detail-drawer #detail-body{flex:1;overflow-y:auto;overscroll-behavior:contain;background:#fbfcfd}
.detail-drawer section{background:#fff}
.detail-drawer section h3{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#6b7280;margin:0 0 15px}
.detail-drawer section h3 .badge{text-transform:none;letter-spacing:0}

/* Form ızgarası */
.drawer-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.drawer-field{display:grid;gap:6px;font-size:11.5px;font-weight:650;color:#59616f;min-width:0}
.drawer-field.full{grid-column:1/-1}
.drawer-field small{font-weight:400;color:#8a91a0}
.drawer-field input,.drawer-field select,.drawer-field textarea{
  width:100%;height:40px;border:1px solid var(--input);border-radius:9px;padding:0 11px;
  font:inherit;font-size:13.5px;color:var(--ink);background:#fff;outline:0;transition:border-color .12s,box-shadow .12s}
.drawer-field textarea{height:auto;padding:10px 11px;line-height:1.5;resize:vertical}
.drawer-field input:focus,.drawer-field select:focus,.drawer-field textarea:focus{
  border-color:var(--ring);box-shadow:0 0 0 3px #f79a231f}
.drawer-field input:hover,.drawer-field select:hover{border-color:#cfd5de}
@media(max-width:560px){.drawer-form{grid-template-columns:1fr}}

/* Buton satırı */
.drawer-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.detail-drawer section button.primary{height:40px;border:0;border-radius:9px;background:var(--primary);color:#fff;
  font-size:13px;font-weight:650;padding:0 18px;cursor:pointer;transition:background .12s}
.detail-drawer section button.primary:hover{background:#d97f11}
.detail-drawer section button.secondary{height:40px;border:1px solid var(--line);background:#fff;border-radius:9px;
  font-size:13px;font-weight:650;padding:0 18px;cursor:pointer;color:#4b5364}
.detail-drawer section button.secondary:hover{background:#f7f8fa}
.detail-drawer section button.secondary.danger{border-color:#f0c8c4;color:#b3261e}
.detail-drawer section button.secondary.danger:hover{background:#fdf3f2}

/* Reddedilen dosya uyarısı */
.drawer-alert{background:#fdf5f4!important;border-left:3px solid #d33a2c}
.drawer-alert-head b{display:block;font-size:13.5px;color:#8f1d16;margin-bottom:5px}
.drawer-alert-head span{display:block;font-size:12px;line-height:1.55;color:#7a4a45;margin-bottom:14px}
.drawer-alert .drawer-field{margin-bottom:12px}
.drawer-alert button{margin-right:9px}

/* Notlar */
.note-composer{display:grid;gap:10px;margin-bottom:18px}
.note-composer textarea{border:1px solid var(--input);border-radius:10px;padding:11px 12px;font:inherit;font-size:13.5px;
  line-height:1.55;resize:vertical;outline:0;transition:border-color .12s,box-shadow .12s}
.note-composer textarea:focus{border-color:var(--ring);box-shadow:0 0 0 3px #f79a231f}
.note-notify{display:flex;align-items:center;gap:8px;font-size:12px;color:#5b636f;cursor:pointer}
.note-notify input{width:15px;height:15px;accent-color:var(--primary)}
.note-list{display:grid;gap:9px}
.note-item{border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:9px;padding:12px 14px;background:#fff}
.note-item.system{border-left-color:#aab1bd;background:#f8f9fb}
.note-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.note-head strong{font-size:12.5px;color:#2b323d}
.note-head time{font-size:11px;color:var(--muted);white-space:nowrap}
.note-item p{margin:0;font-size:13px;line-height:1.55;color:#39414f}
.note-item small{display:block;margin-top:8px;padding-top:7px;border-top:1px dashed #e9ecf1;font-size:11px;color:var(--muted)}

/* =====================================================================
   Yetkilendirme ekranı
   ===================================================================== */
.permission-groups{display:grid;gap:14px;margin:8px 0 20px}
.permission-group{border:1px solid var(--line);border-radius:12px;padding:16px 18px 14px;margin:0;background:#fff}
.permission-group legend{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#8a6a2f;background:#fff7ec;
  border:1px solid #f4e2c6;border-radius:20px;padding:5px 12px;text-transform:uppercase}
.permission-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;margin-top:10px}
.permission-item{display:grid;grid-template-columns:18px 1fr;align-items:start;gap:10px;padding:8px 0;
  font-size:12.5px;line-height:1.45;color:#39414f;cursor:pointer;border-radius:6px}
.permission-item:hover{color:#171b24}
.permission-item input{margin:1px 0 0;width:17px;height:17px;accent-color:var(--primary)}
@media(max-width:640px){.permission-grid{grid-template-columns:1fr}}

/* Hafta sonu sütunları */
.day-column.weekend header strong{color:#c86f0b}
.day-column.weekend{background:#fffaf2;border-radius:12px}

/* Kişi bazlı haftalık dağılım */
.assignee-table td b{font-size:13px}
.assignee-table .bar{height:6px;border-radius:4px;background:#eef0f3;overflow:hidden;margin-top:6px;max-width:120px}
.assignee-table .bar i{display:block;height:100%;background:var(--orange)}

/* Tablo aksiyonları */
.row-actions{flex-wrap:nowrap}
.row-actions button{white-space:nowrap}

/* Reddedilen dosyalar paneli */
.rejected-card{border-left:3px solid #d33a2c}
.rejected-reason{background:#fdf5f4;border-radius:9px;padding:11px 13px;margin-top:10px}
.rejected-reason b{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#8f1d16;margin-bottom:4px}
.rejected-reason span{font-size:12.5px;line-height:1.55;color:#5c4340}

/* =====================================================================
   Tablo içi düğme sistemi — ikon ve metin düğmeleri
   ===================================================================== */
.row-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:nowrap}

/* Eski kuralı etkisizleştir: metin düğmeleri artık sıkışmıyor */
.row-actions button:first-child{width:auto;padding:0 12px;display:inline-flex}

.row-actions .btn-icon,
.row-actions button.btn-icon:first-child{
  width:32px;height:32px;padding:0;display:inline-grid;place-items:center;flex:none;
  border:1px solid #e1e5eb;background:#fff;border-radius:8px;color:#5b636f;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s}
.row-actions .btn-icon:hover{background:#f6f7f9;border-color:#cfd5de;color:#242a33}
.row-actions .btn-icon svg{width:15px;height:15px}
.row-actions .btn-icon.danger{color:#b3261e;border-color:#f0d2cf}
.row-actions .btn-icon.danger:hover{background:#fdf3f2;border-color:#e6b5b0}

.row-actions .btn-text,
.row-actions button.btn-text:first-child{
  height:32px;width:auto;padding:0 13px;display:inline-flex;align-items:center;gap:7px;flex:none;
  border:1px solid #e1e5eb;background:#fff;border-radius:8px;color:#454d59;
  font-size:11.5px;font-weight:700;white-space:nowrap;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s}
.row-actions .btn-text:hover{background:#f6f7f9;border-color:#cfd5de;color:#171b24}
.row-actions .btn-text svg{width:14px;height:14px;color:#8a919d}
.row-actions .btn-text.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.row-actions .btn-text.primary:hover{background:#d97f11;border-color:#d97f11}
.row-actions .btn-text.primary svg{color:#fff}
.row-actions .btn-text.danger{color:#b3261e;border-color:#f0d2cf}
.row-actions .btn-text.danger:hover{background:#fdf3f2}

/* Salt okunur durum etiketi */
.row-actions .state-tag{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border-radius:8px;background:#f4f5f8;color:#6b7280;font-size:11px;font-weight:700;white-space:nowrap}

@media(max-width:900px){.row-actions{flex-wrap:wrap;justify-content:flex-start}}

/* Haftalık araç çubuğu ve yazdır düğmesi */
.weekly-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto}
.print-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--line);
  background:#fff;border-radius:8px;color:#454d59;font-size:11.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background .12s,border-color .12s}
.print-btn:hover{background:#f6f7f9;border-color:#cfd5de;color:#171b24}
.print-btn svg{color:#8a919d}
@media(max-width:860px){.weekly-tools{width:100%;margin-left:0}}

/* Hafta tahtası: hafta sonu sütunları açıldığında da tek satırda kalsın */
.week-board{grid-template-columns:repeat(var(--day-count,5),minmax(190px,1fr))}
.week-board .day-column{min-width:0}
@media(max-width:1200px){.week-board{grid-template-columns:repeat(var(--day-count,5),minmax(205px,1fr))}}

/* Giriş / parola ekranı ek stilleri */
.form-success{background:#e8f7ee;color:#0d6a37;border:1px solid #bde5cd;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.55;margin-bottom:14px}
.login-intro{margin:0 0 18px;font-size:13.5px;line-height:1.65;color:#5b636f}
.login-card .label-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.login-card .label-link{font-size:11.5px;font-weight:600;color:var(--primary);text-decoration:none}
.login-card .label-link:hover{text-decoration:underline}
.login-link-btn{display:block;text-align:center;height:46px;line-height:46px;border-radius:10px;background:#242a33;color:#fff;
  text-decoration:none;font-weight:650;font-size:14px}
.login-foot a{color:var(--muted);text-decoration:none}
.login-foot a:hover{color:var(--ink)}
.checkbox-row{display:flex!important;align-items:flex-start;gap:9px;font-weight:500!important;color:#4b5364!important}
.checkbox-row input{width:16px;height:16px;margin-top:2px;accent-color:var(--primary);flex:none}
.checkbox-row span{font-size:12.5px;line-height:1.5}

/* ==================================================================
   Yük durumu (takip) — durum menüsü, takip bilgisi, bekleyen dosyalar
   ================================================================== */

/* Takip kartındaki "Durumu güncelle" düğmesi */
.track-footer .btn-stage {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border, #e2e6ee);
  border-radius: 9px;
  background: #fff;
  color: #2b323d;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.track-footer .btn-stage:hover {
  background: #fff6ea;
  border-color: #f0b25f;
  color: #96560c;
}
.track-footer .btn-stage svg { width: 15px; height: 15px; }

/* Kart içindeki takip bilgisi tablosu */
.track-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid #edf0f5;
  border-radius: 10px;
  background: #fafbfd;
}
.track-info > div { min-width: 0; }
.track-info > div.wide { grid-column: 1 / -1; }
.track-info dt {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8a91a0;
}
.track-info dd {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #2b323d;
  word-break: break-word;
}

/* Takibe alınmayı bekleyen dosyalar paneli */
.waiting-panel { margin-bottom: 18px; }
.waiting-panel table td span { display: block; font-size: 12px; color: #6b7280; }

/* Durum güncelleme penceresi */
.stage-file {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #edf0f5;
  border-radius: 10px;
  background: #fafbfd;
  font-size: 13px;
  color: #3b4250;
}
.stage-file b { color: #171b24; }
.stage-file span { display: block; margin-top: 4px; font-size: 12px; color: #6b7280; }

#stage-fields { display: grid; gap: 12px; }
.drawer-field .req { color: #d33a2c; }

/* Çekmecedeki yük durumu bölümü */
.drawer-status.stage-status { margin-bottom: 10px; }
.stage-note-line {
  margin: 8px 0 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #4b5364;
}
.stage-note-line b { color: #2b323d; }

@media (max-width: 720px) {
  .track-info { grid-template-columns: 1fr; }
}

/* Durum güncelleme penceresi düzeni */
.stage-form { grid-template-columns: 1fr; }
.stage-form .checkbox-row.full { grid-column: 1 / -1; }
.stage-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.stage-fields > .drawer-field { grid-column: auto; }
.stage-fields > .form-note { grid-column: 1 / -1; margin: 0; }
.track-footer .btn-stage { white-space: nowrap; }
@media (max-width: 560px) { .stage-fields { grid-template-columns: 1fr; } }
.drawer-field .field-cap { display: block; line-height: 1.4; }
.drawer-field .field-cap .req { color: #d33a2c; }
.drawer-field .field-cap small { font-weight: 400; color: #8a91a0; }

/* ==================================================================
   PREMIUM TEMA KATMANI
   Bu bölüm en sonda durur ve yukarıdaki temel stilleri incelterek
   sisteme kurumsal, modern ve canlı bir görünüm kazandırır.
   ================================================================== */

:root {
  --grad-primary: linear-gradient(135deg, #fbb03f 0%, #f2911c 45%, #e07a0c 100%);
  --grad-dark: linear-gradient(165deg, #232935 0%, #1a1f29 55%, #12161d 100%);
  --glow-primary: 0 10px 24px -8px rgba(232, 138, 24, .55);
  --shadow-sm: 0 1px 2px rgba(20, 28, 44, .04), 0 2px 6px rgba(20, 28, 44, .045);
  --shadow-md: 0 2px 4px rgba(20, 28, 44, .04), 0 10px 26px -10px rgba(20, 28, 44, .14);
  --shadow-lg: 0 24px 60px -22px rgba(16, 23, 38, .35), 0 6px 18px -8px rgba(16, 23, 38, .16);
  --ease: cubic-bezier(.22, .68, .3, 1);
}

html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "tnum" 0;
  background:
    radial-gradient(1100px 520px at 88% -8%, #fff3e2 0%, rgba(255, 243, 226, 0) 62%),
    radial-gradient(900px 480px at -5% 4%, #eaf0fa 0%, rgba(234, 240, 250, 0) 58%),
    var(--bg);
  background-attachment: fixed;
}

/* --- Odak halkası: her yerde tutarlı --- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(247, 154, 35, .7);
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- İnce kaydırma çubuğu --- */
* { scrollbar-width: thin; scrollbar-color: #c9cfda transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #ccd2dd; border: 3px solid transparent; background-clip: content-box; border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: #aeb6c4; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ==================================================================
   1) GİRİŞ / PAROLA EKRANLARI
   ================================================================== */

.login-body {
  position: relative;
  overflow: hidden;
  background: #10141b;
  padding: 32px 22px;
}

/* Arka plandaki ışık huzmeleri */
.login-body::before {
  content: "";
  position: fixed;
  inset: -30% -20%;
  background:
    radial-gradient(48% 46% at 18% 22%, rgba(247, 154, 35, .30) 0%, rgba(247, 154, 35, 0) 68%),
    radial-gradient(44% 42% at 82% 26%, rgba(62, 124, 214, .26) 0%, rgba(62, 124, 214, 0) 70%),
    radial-gradient(56% 50% at 62% 92%, rgba(233, 122, 20, .22) 0%, rgba(233, 122, 20, 0) 72%);
  filter: blur(18px);
  animation: iskurDrift 26s var(--ease) infinite alternate;
  pointer-events: none;
}

/* İnce ızgara dokusu */
.login-body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(78% 68% at 50% 45%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(78% 68% at 50% 45%, #000 0%, transparent 100%);
  pointer-events: none;
}

@keyframes iskurDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

@keyframes iskurRise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.login-shell {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  grid-template-columns: 1.06fr .94fr;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .96);
  box-shadow:
    0 50px 110px -30px rgba(0, 0, 0, .72),
    0 18px 44px -20px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  animation: iskurRise .6s var(--ease) both;
}

/* --- Sol marka paneli --- */
.login-brand {
  position: relative;
  overflow: hidden;
  padding: 52px 44px;
  background: var(--grad-dark);
  color: #aeb6c4;
}
.login-brand::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -160px; top: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 154, 35, .30) 0%, rgba(247, 154, 35, 0) 68%);
  pointer-events: none;
}
.login-brand::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 154, 35, .55), transparent);
}
.login-brand > * { position: relative; z-index: 1; }

.brand-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 6px 13px 6px 10px;
  border: 1px solid rgba(247, 154, 35, .28);
  border-radius: 999px;
  background: rgba(247, 154, 35, .10);
  color: #f6b15a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.brand-eyebrow i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f9a83a;
  box-shadow: 0 0 0 3px rgba(249, 168, 58, .22);
  animation: iskurPulse 2.4s ease-in-out infinite;
}
@keyframes iskurPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

.login-brand img {
  width: 176px;
  margin-bottom: 30px;
  filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}
.login-brand h1 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -.025em;
  background: linear-gradient(120deg, #ffffff 0%, #ffffff 42%, #ffd9a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-brand p { color: #9aa3b2; font-size: 14.5px; }

.login-brand ul { gap: 11px; }
.login-brand li {
  gap: 13px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  color: #cbd1db;
  font-size: 13px;
  font-weight: 500;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.login-brand li:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(247, 154, 35, .30);
  transform: translateX(3px);
}
.login-brand li svg {
  width: 30px; height: 30px;
  padding: 6px;
  border-radius: 9px;
  background: rgba(247, 154, 35, .13);
  color: #f7a93c;
  box-sizing: border-box;
}

.brand-foot {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 11.5px;
  line-height: 1.6;
  color: #79828f;
}
.brand-foot b { color: #aab2bf; font-weight: 600; }

/* --- Sağ form kartı --- */
.login-card { padding: 52px 46px; background: #fff; }
.login-head { margin-bottom: 30px; }
.login-head .mini-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--glow-primary);
}
.login-head p { font-size: 10.5px; letter-spacing: .16em; color: #9aa1ae; }
.login-head h2 { font-size: 23px; letter-spacing: -.02em; }

.login-card form { gap: 18px; }
.login-card label { font-size: 12.5px; font-weight: 650; color: #3d4450; }
.login-card input {
  height: 50px;
  border-radius: 12px;
  padding: 0 15px;
  background: #fafbfc;
  border: 1px solid #e2e6ee;
  font-size: 15px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.login-card input::placeholder { color: #a9b0bc; }
.login-card input:hover { border-color: #cfd6e1; }
.login-card input:focus {
  background: #fff;
  border-color: #f4a132;
  box-shadow: 0 0 0 4px rgba(247, 154, 35, .15);
}

.login-card button.primary,
.login-link-btn {
  position: relative;
  overflow: hidden;
  height: 52px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), filter .2s var(--ease);
}
.login-card button.primary {
  background: var(--grad-primary);
  box-shadow: var(--glow-primary);
}
.login-card button.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, .34) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease);
}
.login-card button.primary:hover {
  background: var(--grad-primary);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(232, 138, 24, .62);
}
.login-card button.primary:hover::after { transform: translateX(120%); }
.login-card button.primary:active { transform: translateY(0); }

.login-card .label-link {
  font-size: 11.5px;
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.login-card .label-link:hover { text-decoration: none; border-bottom-color: currentColor; }

.login-link-btn { background: #242a33; line-height: 52px; }
.login-link-btn:hover { background: #2e3540; transform: translateY(-2px); }

.login-foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #eef0f4;
  font-size: 12px;
  color: #98a0ad;
}

.login-intro {
  padding: 13px 15px;
  border: 1px solid #edf0f5;
  border-left: 3px solid var(--orange);
  border-radius: 10px;
  background: #fafbfd;
  font-size: 13px;
  color: #525a67;
}

.login-card .form-error,
.login-card .form-success { border-radius: 11px; }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; max-width: 460px; }
  .login-brand { display: none; }
  .login-card { padding: 38px 26px; }
}

/* ==================================================================
   2) UYGULAMA KABUĞU — kenar çubuğu, üst çubuk
   ================================================================== */

.sidebar {
  background: var(--grad-dark);
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.brand { border-bottom-color: rgba(255, 255, 255, .07); }
.brand img { filter: brightness(0) invert(1) drop-shadow(0 3px 10px rgba(0, 0, 0, .35)); }

.nav-item {
  position: relative;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nav-item:hover { background: rgba(255, 255, 255, .055); transform: translateX(2px); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(247, 154, 35, .18) 0%, rgba(247, 154, 35, .045) 100%);
  box-shadow: none;
  color: #fff;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--grad-primary);
  box-shadow: 0 0 12px rgba(247, 154, 35, .7);
  transform: translateY(-50%);
}
.nav-item svg { transition: color .2s var(--ease); }
.nav-label { color: #6d7684; letter-spacing: .14em; }

.profile {
  border-top-color: rgba(255, 255, 255, .07);
  border-radius: 12px;
  margin: 0 10px 10px;
  height: 66px;
  transition: background .2s var(--ease);
}
.profile:hover { background: rgba(255, 255, 255, .05); }
.profile .avatar {
  background: var(--grad-primary);
  box-shadow: 0 6px 14px -6px rgba(232, 138, 24, .8);
}

.topbar {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: rgba(20, 28, 44, .07);
}
.search { transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.search:focus-within {
  background: #fff;
  border-color: #f4b463;
  box-shadow: 0 0 0 4px rgba(247, 154, 35, .13);
}
.icon-btn { transition: background .2s var(--ease), color .2s var(--ease); }
.icon-btn:hover { background: #f2f4f8; }

/* ==================================================================
   3) YÜZEYLER — panel, kart, tablo, rozet, düğme
   ================================================================== */

.panel, .stat, .track-card, .week-card, .smtp-card, .activity-card, .approval-card {
  border-color: rgba(20, 28, 44, .07);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.panel:hover, .smtp-card:hover { box-shadow: var(--shadow-md); }
.stat:hover, .track-card:hover, .week-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(247, 154, 35, .30);
}

.panel-head { border-bottom-color: rgba(20, 28, 44, .06); }
.panel-head h2 { font-size: 15.5px; letter-spacing: -.01em; }

.stat-icon { box-shadow: inset 0 0 0 1px rgba(20, 28, 44, .05); }

.title-row h1 {
  font-size: 29px;
  letter-spacing: -.035em;
  background: linear-gradient(120deg, #131721 0%, #2b3340 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

th {
  background: linear-gradient(180deg, #fafbfd 0%, #f6f8fa 100%);
  border-bottom: 1px solid rgba(20, 28, 44, .07);
  color: #7f8795;
  letter-spacing: .07em;
  text-transform: uppercase;
}
tbody tr { transition: background .16s var(--ease); }
tbody tr:hover { background: #fbfcfe; }
td { border-top-color: rgba(20, 28, 44, .05); }

.badge {
  padding: 5px 10px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px rgba(20, 28, 44, .045);
}

.primary, .secondary, .btn-text, .btn-icon, .add-row, .today-btn, .print-btn {
  transition: transform .16s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.primary {
  background: var(--grad-primary);
  box-shadow: var(--glow-primary);
}
.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(232, 138, 24, .6);
}
.primary:active { transform: translateY(0); }
.primary:disabled { opacity: .6; transform: none; box-shadow: none; cursor: not-allowed; }

.secondary:hover { border-color: #cfd6e1; background: #fbfcfd; transform: translateY(-1px); }
.btn-text:hover, .btn-icon:hover { border-color: #f0b25f; background: #fff8ef; color: #96560c; }

.modal {
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  animation: iskurRise .32s var(--ease) both;
}
.modal-backdrop { background: rgba(12, 16, 24, .55); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.modal-head { border-bottom-color: rgba(20, 28, 44, .06); }
.mini-icon { box-shadow: inset 0 0 0 1px rgba(20, 28, 44, .05); }

.detail-drawer { box-shadow: -26px 0 70px -28px rgba(16, 23, 38, .45); }

input, select, textarea { transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.drawer-field input:focus, .drawer-field select:focus, .drawer-field textarea:focus,
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  box-shadow: 0 0 0 3px rgba(247, 154, 35, .15);
}

.empty-state { border-style: dashed; border-color: rgba(20, 28, 44, .12); background: #fcfdfe; }

.track-progress span { background: var(--grad-primary); box-shadow: 0 0 10px rgba(247, 154, 35, .45); }
.track-line .done i { box-shadow: 0 4px 10px -4px rgba(232, 138, 24, .8); }

.toast {
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  animation: iskurRise .26s var(--ease) both;
}

/* Koyu zeminli komuta şeridi: derinlik ve parlaklık */
.command-strip {
  border-radius: 14px;
  background: linear-gradient(105deg, #1f2530 0%, #262d39 55%, #1c222c 100%);
  border-color: rgba(255, 255, 255, .07);
  box-shadow: 0 18px 40px -18px rgba(16, 23, 38, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.command-health > span { background: rgba(247, 154, 35, .14); }
.command-strip .badge { box-shadow: none; }

/* Düğme görünümlü bağlantılarda alt çizgi olmasın */
a.primary, a.secondary, a.btn-text, a.btn-icon, a.login-link-btn { text-decoration: none; }

/* Hareket duyarlılığı olan kullanıcılar için animasyonlar kapanır */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Yazdırma çıktısında tema katmanı devre dışı */
@media print {
  body { background: #fff !important; }
}

/* Mobilde marka paneli gizlendiği için kartın üstünde logo gösterilir */
.login-mark { display: none; }
@media (max-width: 900px) {
  .login-body { align-items: flex-start; padding-top: 48px; }
  .login-mark {
    display: block;
    width: 146px;
    height: auto;
    margin: 0 auto 26px;
    filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgba(0, 0, 0, .5));
  }
  .login-shell { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .login-card {
    border-radius: 22px;
    box-shadow: 0 40px 90px -26px rgba(0, 0, 0, .75);
  }
}

/* Haftalık tahta: gereksiz boşluğu azalt, sütunlara derinlik ver */
.day-cards { min-height: 200px; }
.day-column {
  background: linear-gradient(180deg, #eef1f5 0%, #eaedf3 100%);
  border-color: rgba(20, 28, 44, .08);
  border-radius: 13px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.day-column:hover { border-color: rgba(247, 154, 35, .28); box-shadow: var(--shadow-sm); }
.day-column > header { border-bottom: 1px solid rgba(20, 28, 44, .06); }
.day-column.today { border-color: rgba(247, 154, 35, .45); box-shadow: 0 0 0 3px rgba(247, 154, 35, .09); }

/* Politika onay kutuları: kutu solda, metin yanında */
.compose-body .checkbox-row,
.compose-body .notice-events .checkbox-row,
.compose-body label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(20, 28, 44, .07);
  border-radius: 11px;
  background: #fbfcfd;
  font-weight: 550;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.compose-body .checkbox-row:hover,
.compose-body label:has(> input[type="checkbox"]):hover {
  border-color: rgba(247, 154, 35, .35);
  background: #fffaf3;
}
.compose-body input[type="checkbox"] {
  display: inline-block;
  width: 17px;
  height: 17px;
  min-width: 17px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Form alanlarında aşırı yüksek metin kutularını dengele */
.form-grid textarea { min-height: 84px; height: 84px; }

/* ==================================================================
   Sistemsel bildirimler, yardımcı seçimi, e-posta görüntüsü
   ================================================================== */

.notice-panel .panel-head { flex-wrap: wrap; gap: 10px; }
.only-me {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(247, 154, 35, .3);
  border-radius: 999px;
  background: #fff6ea;
  color: #96560c;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.only-me svg { width: 13px; height: 13px; }

.compose-body .notice-events {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.notice-events > .field-cap {
  grid-column: 1 / -1;
  font-size: 11.5px;
  font-weight: 700;
  color: #59616f;
  margin-bottom: 2px;
}
.notice-events .checkbox-row { margin: 0; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Müşteri temsilcisi yardımcısı seçimi */
.compose-body .assistant-box,
.assistant-box {
  display: block;
  padding: 14px;
  border: 1px solid rgba(20, 28, 44, .08);
  border-radius: 12px;
  background: #fafbfd;
}
.assistant-box .field-cap {
  display: block;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #59616f;
}
.compose-body .assistant-list,
.assistant-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}
.assistant-list .checkbox-row {
  align-items: center;
  padding: 9px 11px;
  border: 1px solid rgba(20, 28, 44, .08);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.assistant-list .checkbox-row:hover { border-color: rgba(247, 154, 35, .4); }
.assistant-list input { width: 16px; height: 16px; min-width: 16px; accent-color: var(--primary); }
.assistant-list span { font-size: 12.5px; font-weight: 600; color: #2b323d; line-height: 1.35; }
.assistant-list small { display: block; font-weight: 400; font-size: 11px; color: #8a91a0; }

/**
 * KUYRUK SATIRI.
 *
 * Satır bir zamanlar <button>'du; tek kayıt işlemleri (yeniden dene /
 * iptal) eklendiğinde düğme içinde düğme olmaması için satır <div>,
 * tıklanabilir ana alan ise .mail-ana oldu.
 */
.mail-ana {
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid rgba(20, 28, 44, .05);
  background: none;
  font: inherit;
  cursor: pointer;
  transition: background .16s var(--ease);
}
.mail-ana:hover { background: #fbfcfe; }

/* E-posta görüntüsü penceresi */
.mail-meta { margin-bottom: 16px; }
.mail-meta-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.mail-meta-head span { font-size: 12px; font-weight: 700; color: #6b7280; }
.mail-meta dl { display: grid; gap: 0; margin: 0; }
.mail-meta dl > div,
.compose-body .mail-meta dl > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(20, 28, 44, .05);
}
.mail-meta dt { margin: 0; font-size: 12px; color: #6b7280; }
.mail-meta dd { margin: 0; font-size: 12.5px; font-weight: 600; color: #2b323d; word-break: break-word; }

.mail-preview {
  border: 1px solid rgba(20, 28, 44, .1);
  border-radius: 12px;
  overflow: hidden;
  background: #f1f3f7;
}
.mail-preview-bar {
  padding: 9px 14px;
  background: #fff;
  border-bottom: 1px solid rgba(20, 28, 44, .07);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #8a91a0;
  text-transform: uppercase;
}
.mail-preview iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  background: #f1f3f7;
}

/* Hızlı alıcı ekleme */
.rep-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rep-picker span { font-size: 12px; font-weight: 600; color: #6b7280; }
.rep-picker select {
  flex: 1;
  min-width: 180px;
  height: 40px;
  border: 1px solid #dfe3e8;
  border-radius: 9px;
  padding: 0 11px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}

/* ==================================================================
   MOBİL UYUM — telefon ve tablette tam çalışır arayüz
   ================================================================== */

/**
 * iOS'ta alan odaklanınca sayfanın yakınlaşmasını engeller.
 *
 * Ölçüt genişlikti (900px); oysa sorun ekranın genişliğinde değil,
 * İŞARETLEYİCİNİN CİNSİNDE: yatay tutulan 1024 piksellik bir tablet de
 * iOS'tur ve 13 piksellik bir alana dokununca sayfayı yakınlaştırır,
 * kullanıcı her alandan sonra elle uzaklaştırmak zorunda kalır.
 * "pointer: coarse" bu cihazları da kapsar; fareli ekranlarda kural
 * hiç çalışmaz, yoğun form düzeni olduğu gibi kalır.
 */
@media (max-width: 900px), (max-width: 1024px) and (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 1050px) {
  .assistant-list { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Çekmece ve pencereler tam ekrana yakın */
  .detail-drawer { width: 100% !important; max-width: 100% !important; }
  .modal { width: 100%; max-height: 92vh; overflow: auto; border-radius: 16px; }
  .modal-head { height: auto; min-height: 72px; padding: 14px 18px; }
  .modal-head h2 { font-size: 17px; }
  .modal-foot { position: sticky; bottom: 0; background: #fff; }

  /* E-posta görüntüsü */
  .mail-meta dl > div { grid-template-columns: 1fr; gap: 2px; }
  .mail-preview iframe { height: 380px; }

  /* Bildirim ve ayar panelleri */
  .notice-actions { display: grid; }
  .notice-actions button { width: 100%; }
  .settings-grid, .email-grid, .smtp-grid, .workspace-grid, .insight-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* Üst çubuk ve içerik */
  .content { padding: 18px 14px 44px; }
  .title-row h1 { font-size: 21px; }
  .title-row p { font-size: 13px; }
  .panel-head { min-height: 0; padding: 14px 15px; flex-wrap: wrap; gap: 8px; }
  .panel-head h2 { font-size: 14.5px; }

  /* Tablolar: yatay kaydırmayı görünür kıl */
  .table-wrap { margin: 0 -15px; padding: 0 15px; }
  th, td { padding-left: 13px; padding-right: 13px; }

  /* Satır düğmeleri alt alta taşmasın */
  .row-actions { flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

  /* Yük takibi */
  .tracking-grid { grid-template-columns: 1fr; }
  .track-info { grid-template-columns: 1fr; }
  .track-footer { flex-wrap: wrap; gap: 10px; }
  .track-footer .btn-stage { width: 100%; justify-content: center; }
  .waiting-panel .table-wrap { margin: 0; padding: 0; }

  /* Durum güncelleme penceresi */
  .stage-fields { grid-template-columns: 1fr; }
  .stage-file { font-size: 12.5px; }

  /* Ekip ekranı */
  .permission-grid { grid-template-columns: 1fr; }
  .assistant-box { padding: 12px; }

  /* Hesabım */
  .settings-note { padding: 18px; }

  /* Kuyruk satırı */
  .mail-ana { padding: 12px 14px; }
}

@media (max-width: 560px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar .primary span, .header-actions .primary { font-size: 13px; }
  .content { padding: 16px 12px 40px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .table-wrap { margin: 0 -12px; padding: 0 12px; }
  .modal-body { padding: 16px; }
  .modal-foot { margin: 16px -16px -16px; padding: 12px 16px; }
  .drawer-form, .stage-form { grid-template-columns: 1fr; }
  .rep-picker { display: grid; }
  .rep-picker select { width: 100%; }
  .mail-preview iframe { height: 320px; }
  .week-board { grid-template-columns: repeat(var(--day-count, 5), minmax(180px, 1fr)); }
  .day-column { min-width: 180px; }
}

/* Dokunmatik cihazlarda üzerine gelme efektleri kapanır */
@media (hover: none) {
  .panel:hover, .stat:hover, .track-card:hover, .week-card:hover,
  .nav-item:hover, .login-brand li:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
  .primary:hover, .secondary:hover { transform: none; }
}
/* Bildirim ve alıcı metin kutuları içeriğe göre kısa dursun */
.compose-body #notice-recipients,
.compose-body #notice-blocked,
.compose-body #mail-recipient { height: 74px; min-height: 74px; }

/* Izgara ve esnek kutu çocuklarının taşmasını engelle (mobilde kritik) */
.workspace-grid > *, .settings-grid > *, .email-grid > *, .smtp-grid > *,
.insight-grid > *, .tracking-grid > *, .assignment-layout > *, .week-board > * { min-width: 0; }
.panel, .compose-body, .table-wrap { min-width: 0; }
.table-wrap { overflow-x: auto; max-width: 100%; }

@media (max-width: 900px) {
  .settings-grid, .email-grid, .smtp-grid, .workspace-grid,
  .insight-grid, .assignment-layout, .tracking-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Mobil üst çubuk: arama ve "Yeni Yükleme" düğmesi taşmasın */
@media (max-width: 620px) {
  .topbar { gap: 8px; }
  .global-search { min-width: 0; }
  .header-actions { flex: none; gap: 8px; }
  .header-actions .primary {
    flex: none;
    height: 38px;
    padding: 0 11px;
    gap: 5px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .header-actions .primary svg { width: 16px; height: 16px; }
  .search input::placeholder { font-size: 13px; }
}
@media (max-width: 430px) {
  /* Çok dar ekranda düğme yalnız "+" simgesi olarak kalır */
  .header-actions .primary {
    width: 42px;
    min-width: 42px;
    padding: 0;
    gap: 0;
    font-size: 0;
    line-height: 0;
  }
  .header-actions .primary svg { width: 20px; height: 20px; color: #fff; flex: none; }

  /* Profil düğmesi yalnız avatara iner: 320 px'lik telefonlarda arama kutusu,
     "+" düğmesi ve ad/rol yan yana sığmıyor, üst çubuk ekrandan taşıyordu.
     Ad ve rol zaten menü açılınca en üstte yazıyor. */
  .profile-btn { padding: 0 6px; gap: 0; }
  .profile-btn .who,
  .profile-btn > svg { display: none; }

  /* Dönem düğmesi yalnız yıl + simge: "DÖNEM" alt yazısı bu genişlikte
     yalnız yer kaplıyor, yılın kendisi zaten okunuyor. Geçmiş döneme
     bakılırken sarı zemin uyarısı olduğu gibi kalır. */
  .donem-dugme { padding: 0 8px; gap: 5px; }
  .donem-dugme small { display: none; }

  /* ARAMA KENDİ SATIRINA İNER.
     Bu genişlikte menü düğmesi, dönem, "+", tema, zil ve profil tek satırı
     zaten dolduruyordu; arama kutusu sıfır piksele eziliyor, üst çubuk da
     ekrandan taşıyordu. Kutuyu gizlemek telefonda aramayı büsbütün ortadan
     kaldıracağı için, çubuk sarmalanır ve arama alt satırın tamamını alır. */
  .topbar {
    height: auto;
    flex-wrap: wrap;
    padding: 9px 10px;
    row-gap: 8px;
  }
  .topbar .global-search {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
  }
  .topbar .header-actions { margin-left: auto; }
  .global-search .search { width: 100%; height: 38px; }
  .search-results { width: 100%; }
}


/* ==================================================================
   LOGO — turuncu işaret + beyaz yazı (koyu zeminlerde canlı görünür)
   Artık filtreyle beyazlatılmaz; hazır "light" varyant kullanılır.
   ================================================================== */
.brand img,
.login-brand img,
.login-mark {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .40));
  image-rendering: -webkit-optimize-contrast;
}
.brand img { width: 164px; }
.login-brand img { width: 188px; }

/* ==================================================================
   GİRİŞ EKRANI — ekran yüksekliğine göre kendini uyarlar
   Dizüstü (768–900 px yükseklik) ekranlarda alt kısım da sığar.
   ================================================================== */

.login-body {
  min-height: 100vh;
  min-height: 100svh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Kart, ekran yüksekliğine göre ölçeklenen boşluklar kullanır */
.login-brand,
.login-card {
  padding-block: clamp(26px, 4.2vh, 52px);
  padding-inline: clamp(24px, 3vw, 46px);
}
.login-brand img { width: clamp(140px, 13vh, 188px); margin-bottom: clamp(14px, 2.6vh, 30px); }
.login-brand h1 { font-size: clamp(21px, 2.9vh, 30px); }
.login-brand p { font-size: clamp(12.5px, 1.6vh, 14.5px); margin-bottom: clamp(14px, 2.4vh, 26px); }
.login-brand ul { gap: clamp(6px, 1.1vh, 11px); }
.login-brand li { padding: clamp(7px, 1.2vh, 11px) 13px; font-size: clamp(12px, 1.5vh, 13px); }
.login-brand li svg { width: clamp(24px, 3.2vh, 30px); height: clamp(24px, 3.2vh, 30px); }
.brand-eyebrow { margin-bottom: clamp(12px, 2.4vh, 22px); }
.brand-foot { margin-top: clamp(14px, 2.6vh, 30px); padding-top: clamp(12px, 2vh, 20px); }

.login-head { margin-bottom: clamp(16px, 2.8vh, 30px); }
.login-card form { gap: clamp(12px, 1.9vh, 18px); }
.login-card input { height: clamp(44px, 5.6vh, 50px); }
.login-card button.primary,
.login-link-btn { height: clamp(46px, 5.9vh, 52px); }
.login-link-btn { line-height: clamp(46px, 5.9vh, 52px); }
.login-foot { margin-top: clamp(14px, 2.6vh, 26px); padding-top: clamp(12px, 2vh, 20px); }

/* Alçak ekranlarda ikincil öğeler gizlenir, kart tam sığar */
@media (max-height: 760px) and (min-width: 901px) {
  .login-body { padding: 18px; align-items: center; }
  .brand-foot { display: none; }
  .login-brand li:nth-child(n + 4) { display: none; }
}
@media (max-height: 640px) and (min-width: 901px) {
  .brand-eyebrow { display: none; }
  .login-brand ul { display: none; }
  .login-brand p { margin-bottom: 0; }
}

/* Mobilde yükseklik sınırlaması uygulanmaz, sayfa kayar */
@media (max-width: 900px) {
  .login-body { align-items: flex-start; padding-top: clamp(24px, 5vh, 48px); padding-bottom: 32px; }
}

/* Dosya işlem kapsamı dışındaysa gösterilen bilgi kutusu */
.readonly-note {
  display: grid;
  gap: 5px;
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px solid #e3e7f0;
  border-left: 3px solid #8e97a8;
  border-radius: 10px;
  background: #f7f8fb;
}
.readonly-note b { font-size: 12.5px; color: #3b4250; }
.readonly-note span { font-size: 12px; line-height: 1.55; color: #6b7280; }

/* =====================================================================
   MÜŞTERİ ADI VURGUSU
   Yük takibi ve operasyon ekranlarında ağırlık müşteri adındadır;
   her listede ilk ve en belirgin bilgi odur.
   ===================================================================== */
.customer-name {
  font-size: 14.5px;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: #111726;
  line-height: 1.3;
}
table td .customer-name { display: block; margin-bottom: 2px; }
.track-head .customer-name { font-size: 18px; font-weight: 800; }
.approval-identity .customer-name { font-size: 18px; font-weight: 800; margin: 2px 0 4px; }
.assignment-file .customer-name { font-size: 13.5px; }

/* Sipariş numarası: müşteri temsilcisinin aradığı bilgi */
.order-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #6b7280;
}
.order-line b { color: #3b4250; font-weight: 650; }
.order-line svg { flex: none; opacity: .65; }
.order-cell {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: #4b5262;
  word-break: break-word;
}

/* Havale bekleyen dosya etiketi */
.state-tag.waiting {
  background: #fff4e6;
  border-color: #f3d6ae;
  color: #8a5412;
  font-weight: 650;
}

/* =====================================================================
   ÇOK GÜNLÜ YÜKLEME PLANI
   ===================================================================== */
.check-line {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e3e6ee;
  border-radius: 12px;
  background: #f9fafc;
  cursor: pointer;
}
.check-line input[type="checkbox"] { width: 17px; height: 17px; margin-top: 1px; flex: none; accent-color: #ed8b18; }
.check-line span { display: block; }
.check-line b { display: block; font-size: 13px; color: #1d2433; }
.check-line small { display: block; margin-top: 2px; font-size: 11.5px; color: #6b7280; line-height: 1.5; }

.plan-box {
  padding: 14px;
  border: 1px dashed #d8dce6;
  border-radius: 12px;
  background: #fcfcfe;
}
.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.plan-head b { font-size: 12.5px; color: #1d2433; }
.plan-head span { font-size: 11.5px; color: #6b7280; font-variant-numeric: tabular-nums; }
.plan-head .plan-mismatch { color: #b4231a; font-weight: 700; }

.plan-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1.4fr) minmax(0, .8fr) 34px;
  align-items: end;
  gap: 10px;
  margin-bottom: 8px;
}
.plan-row > b {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 8px;
  background: #eef1f6;
  font-size: 12px;
  color: #4b5262;
}
.plan-row label { display: block; font-size: 11.5px; color: #6b7280; }
.plan-row .btn-icon { height: 34px; }

@media (max-width: 560px) {
  .plan-row { grid-template-columns: 26px minmax(0, 1fr) 34px; }
  .plan-row label:nth-of-type(2) { grid-column: 2 / 4; }
}

/* Yük takibi kartında yükleme planı */
.split-plan {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #f3dcbd;
}
.split-plan > b { display: block; font-size: 11.5px; letter-spacing: .04em; color: #8a5412; margin-bottom: 6px; }
.split-plan > div { display: flex; flex-wrap: wrap; gap: 6px; }
.split-plan span {
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #f0d7b4;
  font-size: 11.5px;
  color: #6b4a1c;
}
.split-plan span b { color: #b4661a; font-weight: 750; }

/* =====================================================================
   BİLDİRİM MERKEZİ — işlemi görüntüleme
   ===================================================================== */
.notice-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.notice-actions .btn-text {
  padding: 4px 10px;
  border-radius: 8px;
  background: #f3f5f9;
  font-size: 11.5px;
  text-decoration: none;
}
.notice-actions .btn-text:hover { background: #e7eaf2; }

/* Finans onayı kartı */
.finance-card .approval-meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edeff4;
}
.finance-card .approval-meta dt { font-size: 11px; letter-spacing: .03em; color: #8d95a6; text-transform: uppercase; }
.finance-card .approval-meta dd { margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: #2b323d; }



/* =====================================================================
   DOSYA BİRLEŞTİRME
   ===================================================================== */
.workbench-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.merged-mark {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef1f6;
  border: 1px solid #dde2ec;
  font-size: 11px;
  color: #4b5262;
}
.merged-mark svg { flex: none; opacity: .7; }

#merge-preview p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: #4b5262; }
#merge-preview b { color: #1d2433; }
.merge-warning {
  margin-top: 8px !important;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff4e6;
  border: 1px solid #f3d6ae;
  color: #8a5412 !important;
}

@media (max-width: 560px) {
  .workbench-actions { width: 100%; }
  .workbench-actions > * { flex: 1 1 0; justify-content: center; }
}

/* =====================================================================
   KURUMSAL RÖTUŞ KATMANI
   Tipografi, tablo ve panel ayrıntılarında son düzeltmeler.
   Bu bölüm dosyanın sonundadır; üstteki kuralları bilinçli olarak ezer.
   ===================================================================== */

/* --- Alan ipuçları (müşteri / çıkış firması ayrımı gibi) --- */
.field-hint {
  display: inline;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #8d95a6;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Tablolarda okunabilirlik --- */
table td span { line-height: 1.45; }
table tbody tr { transition: background .14s ease; }
table tbody tr:hover { background: #fafbfd; }

/* Sayısal alanlar hizalı okunur */
table td strong, .summary b, .track-info dd { font-variant-numeric: tabular-nums; }

/* --- Panel başlıkları --- */
.panel-head h2 { letter-spacing: -0.01em; }
.panel-head p { line-height: 1.5; }

/* --- Erişilebilir odak halkası --- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #ed8b18;
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Haftalık operasyon: filtreli çıktı seçici --- */
.print-picker {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 210px;
}
.print-picker > span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #8d95a6;
  text-transform: uppercase;
}
.print-picker select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid #dfe3ec;
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  color: #2b323d;
}

/* Filtre şeridi çok filtreli hâlde sarabilsin */
.week-filters { flex-wrap: wrap; }
.week-filters a { white-space: nowrap; }
.weekly-tools { flex-wrap: wrap; align-items: flex-end; gap: 10px; }

/* Haftalık kartta çıkış firması ikincil bilgidir */
.week-own {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: #8d95a6;
}

/* --- Birleştirme penceresi araması --- */
#merge-search { font-size: 13px; }
#merge-first, #merge-second { font-size: 13px; }

/* --- Boş durumlar --- */
.empty-state h3 { letter-spacing: -0.01em; }
.empty-state p { max-width: 46ch; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* --- Yazdırmada gereksiz öğeler çıkmasın --- */
@media print {
  .print-picker,
  .workbench-actions,
  .notice-actions { display: none !important; }
}



/* =====================================================================
   ÇOK GÜNLÜ YÜKLEME — haftalık tahtadaki bacaklar
   Aynı dosya, yüklendiği her günde ayrı kart olarak görünür.
   ===================================================================== */
.week-card.split-leg { border-left: 3px solid #ed8b18; }

.leg-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff4e6;
  border: 1px solid #f3d6ae;
  font-size: 10.5px;
  font-weight: 650;
  color: #8a5412;
  white-space: nowrap;
}
.leg-tag svg { flex: none; opacity: .8; }



/* Plandan türetilen alan (çok günlü yüklemede yükleme günü) */
.derived-field { position: relative; }
input.derived {
  background: #f7f8fb;
  color: #6b7280;
  cursor: not-allowed;
}
.derived-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #8a5412;
}


/* Haftalık kartta etiketler taşmasın (bacak etiketi eklendi) */
.week-tags { flex-wrap: wrap; row-gap: 5px; }
.week-card { overflow: visible; }
.week-card h3 { line-height: 1.35; }

/* =====================================================================
   HAVALE EDİLMİŞ DOSYALAR — ilgili değiştirme
   ===================================================================== */
.assigned-panel { margin-top: 16px; }

.assigned-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0 12px;
  height: 38px;
  border: 1px solid #dfe3ec;
  border-radius: 9px;
  background: #fbfcfe;
}
.assigned-search svg { flex: none; color: #9aa1ae; }
.assigned-search input {
  flex: 1;
  border: 0;
  background: none;
  font-size: 13px;
  color: #2b323d;
  outline: none;
}

/* Devir modunda havale kartı belirgin olsun */
#transfer-kind { color: #c86f0b; }



/* Bilgilendirme kutusu (engel değil) */
.info-rule {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  margin-bottom: 13px;
  border-radius: 9px;
  background: #fff7ed;
  border: 1px solid #f3dcbd;
  color: #8a5412;
}
.info-rule > svg { width: 20px; flex: none; margin-top: 1px; }
/* Başlık satırı blok, metnin içindeki vurgular satır içi kalır. */
.info-rule > div > b { font-size: 12.5px; display: block; }
.info-rule p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.6; color: #916030; }
.info-rule p b { display: inline; font-weight: 700; color: #7a4a0f; }

/* Yük takibi kartında "evrakı kapandı" işareti */
.closed-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e9f2fc;
  border: 1px solid #cfe1f5;
  font-size: 10.5px;
  font-weight: 650;
  color: #1b4f85;
}
.closed-tag svg { flex: none; opacity: .8; }



/* ===================================================================
   LOJİSTİK TAKİP — kapanış numaralarının defteri
   =================================================================== */
.logistics-hero{padding:20px 22px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logistics-hero .hero-lead{display:flex;align-items:flex-start;gap:13px}
.hero-mark{height:46px;width:46px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,#efe7fa,#e5edf9);color:#6c4fa3}
.hero-mark svg{width:21px}
.logistics-hero small{display:block;font-size:9px;letter-spacing:.09em;color:#7a5aa8;font-weight:800}
.logistics-hero strong{display:block;font-size:16px;margin-top:4px;letter-spacing:-.01em}
.logistics-hero p{font-size:11.5px;color:#7d8590;margin:6px 0 0;max-width:640px;line-height:1.65}
.hero-metrics{display:flex;flex:none}
.hero-metrics>div{padding:0 20px;border-left:1px solid #e6e8ec;text-align:right}
.hero-metrics b,.hero-metrics span{display:block}
.hero-metrics b{font-size:20px;letter-spacing:-.02em}
.hero-metrics span{font-size:9px;color:#808894;margin-top:3px}

.logistics-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.logistics-tools{display:flex;align-items:center;gap:9px}
.logistics-search{position:relative;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:#fff;border:1px solid #e0e3e8;border-radius:9px;min-width:320px;color:#8b929d}
.logistics-search svg{width:15px;flex:none}
.logistics-search input{border:0;outline:0;background:transparent;font:inherit;font-size:11.5px;width:100%}
.logistics-search .clear-search{text-decoration:none;color:#8b929d;font-size:17px;line-height:1;padding:0 2px}
.logistics-search .clear-search:hover{color:#29313c}

.logistics-table td{vertical-align:top}
.logistics-table .num-main{display:block;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.logistics-table .num-sub{display:block;font-size:10px;color:#828a95;margin-top:3px}
.logistics-table .num-sub i{color:#a9b0ba}
.logistics-table .customer-name{display:block;font-size:12.5px;font-weight:750;letter-spacing:-.01em}
.logistics-table .note-line{display:flex;align-items:center;gap:4px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8a6a2c}
.logistics-table .note-line svg{flex:none;width:12px}
.logistics-table .badge{margin-bottom:4px}
.logistics-table tr.row-warning{background:#fffaf3}
.logistics-table tr.row-warning:hover{background:#fff5e8}

.badge.violet{background:#f1ebfa;color:#6b4c9c}
.badge.violet i{background:#8a63c4}
.badge.blue{background:#e9f2fc;color:#1b5285}
.badge.blue i{background:#3b82c4}



@media(max-width:980px){
  .logistics-hero{align-items:flex-start;flex-direction:column;gap:16px}
  .hero-metrics{width:100%;justify-content:space-between}
  .hero-metrics>div:first-child{border-left:0;padding-left:0;text-align:left}
  .logistics-search{min-width:0;width:100%}
  .logistics-tools{width:100%;flex-direction:column;align-items:stretch}
}

/* ===== Kurumsal logo yönetimi (süpervizör) ===== */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.brand-slot{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fcfcfd}
.brand-preview{height:84px;border-radius:9px;display:grid;place-items:center;padding:12px;overflow:hidden}
.brand-preview.on-dark{background:linear-gradient(140deg,#202630,#2a313d)}
.brand-preview.on-light{background:#f4f6f8;border:1px solid #e8eaee}
.brand-preview img{max-height:100%;max-width:100%;object-fit:contain}
.brand-slot>b{font-size:12px}
.brand-slot>small{font-size:10.5px;color:#828a95;line-height:1.55}
.brand-state{font-size:10px;font-weight:700;color:#7d8590;background:#f1f3f6;border-radius:20px;padding:4px 9px;align-self:flex-start}
.brand-state.custom{background:#e8f5ed;color:#2f7a52}
.brand-slot input[type=file]{font-size:11px;padding:8px;border:1px dashed #d3d8de;border-radius:8px;background:#fff;width:100%}
.brand-actions{display:flex;gap:7px;flex-wrap:wrap}
.brand-actions button{height:34px;padding:0 12px;font-size:11px}


/* ===================================================================
   PREMIUM KATMAN
   Tüm ekranlarda ortak görsel dil: tipografi, yükseklik (gölge) sistemi,
   odak halkası, hareket ve baskı düzeni. En sonda durur, önceki kuralları
   bozmadan üstüne biner.
   =================================================================== */
:root{
  --shadow-1:0 1px 2px #171b240a, 0 1px 3px #171b2410;
  --shadow-2:0 2px 4px #171b240a, 0 6px 16px #171b2412;
  --shadow-3:0 8px 20px #171b2414, 0 24px 48px #171b2418;
  --shadow-4:0 20px 45px #171b2422, 0 45px 90px #171b241f;
  --ring:#f79a23;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- Tipografi ------------------------------------------------------ */
body{
  font-feature-settings:"cv05" 1,"ss01" 1,"kern" 1;
  text-rendering:optimizeLegibility;
  letter-spacing:-.005em;
}
h1,h2,h3,.stat strong,.week-kpis b,.tracking-metrics b,.hero-metrics b{letter-spacing:-.022em}
h1{font-weight:760}
.eyebrow{font-variant-numeric:tabular-nums}

/* Sayılar her yerde hizalı: rakam genişlikleri eşitlenir */
.stat strong,.week-kpis b,.tracking-metrics b,.hero-metrics b,.queue-count,
table td,table th,.num-main,.badge,.nav-item span,.panel-head>b,
.detail-drawer dd,.week-filters b,.approval-amount{font-variant-numeric:tabular-nums}

/* --- Odak halkası (klavye erişilebilirliği) ------------------------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
  border-radius:7px;
}
.sidebar :where(a,button):focus-visible{outline-color:#f7b85c}

/* --- Yükseklik ve yüzeyler ------------------------------------------ */
.panel{box-shadow:var(--shadow-1);transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.panel:hover{box-shadow:var(--shadow-2)}
.command-strip,.logistics-hero,.tracking-overview,.approval-summary,.week-control{box-shadow:var(--shadow-2)}
.modal{box-shadow:var(--shadow-4)}
.detail-drawer{box-shadow:var(--shadow-4)}
.search-results,.notification-panel,.user-menu{box-shadow:var(--shadow-3)}

/* --- Düğmeler -------------------------------------------------------- */
.primary{
  background:linear-gradient(180deg,#f5a337,#ed8b18);
  border:1px solid #dd7f13;
  box-shadow:0 1px 2px #b9620a2e, inset 0 1px 0 #ffffff38;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),filter .16s var(--ease);
}
.primary:hover:not(:disabled){filter:brightness(1.04);box-shadow:0 4px 12px #ed8b1838, inset 0 1px 0 #ffffff45;transform:translateY(-1px)}
.primary:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 2px #b9620a33}
.secondary,.btn-text,.table-action,.row-actions button,.segment-control button,.week-filters a{
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .16s var(--ease);
}
.secondary:hover,.table-action:hover,.row-actions button:hover{border-color:#c9cfd7;background:#fbfcfd}
.btn-text:hover{color:#c8700c}
.week-filters a:hover,.segment-control button:hover{border-color:#cfd5dd}

/* --- Sol menü -------------------------------------------------------- */
.sidebar{background:linear-gradient(180deg,#20242d 0%,#1b1f27 100%);box-shadow:1px 0 0 #00000024}
.nav-item{transition:background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease)}
.nav-item svg{transition:color .16s var(--ease)}
.nav-item.active{background:#ffffff14}
.nav-label{text-transform:uppercase}
.profile{background:#00000022}

/* --- Üst çubuk ------------------------------------------------------- */
.topbar{backdrop-filter:saturate(1.4) blur(6px);background:#ffffffe8}

/* --- Tablolar -------------------------------------------------------- */
table thead th{
  position:sticky;top:0;z-index:2;
  background:#fafbfc;
  backdrop-filter:blur(4px);
  font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:#7a828e;
}
table tbody tr{transition:background .14s var(--ease)}
table tbody tr:hover{background:#fbfcfd}
.table-wrap{border-radius:0 0 var(--radius) var(--radius)}

/* --- Rozetler -------------------------------------------------------- */
.badge{border:1px solid #0000000f;font-weight:700;letter-spacing:-.01em}
.badge i{box-shadow:0 0 0 2px #ffffffb0}

/* --- Kartlar --------------------------------------------------------- */
.week-card,.track-card{transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.week-card:hover,.track-card:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}

/* --- Boş durumlar ---------------------------------------------------- */
.empty-state{display:grid;justify-items:center;gap:9px}
.empty-state b{font-size:13px;color:#434a55}
.empty-state p{font-size:11.5px;color:#868e99;margin:0;max-width:460px;line-height:1.65}

/* --- Form alanları --------------------------------------------------- */
input,select,textarea{transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
input:focus,select:focus,textarea:focus{border-color:#f0a544;box-shadow:0 0 0 3px #f79a2322}

/* Miktar + birim alanı (ton / kg / metre / m³) */
.amount-input{display:flex;gap:0;margin-top:7px}
.amount-input input{flex:1;border-radius:8px 0 0 8px;margin-top:0!important}
.amount-input select{
  width:auto;min-width:88px;border-radius:0 8px 8px 0;border-left:0;margin-top:0!important;
  background:#f7f8fa;font-weight:700;color:#4b5462;
}
.amount-input input:focus+select{border-color:#f0a544}
.drawer-field.amount-field .amount-input input{min-width:0}

/* --- Modal ----------------------------------------------------------- */
.modal-backdrop{background:#131821a8;backdrop-filter:blur(3px)}
.modal{animation:modal-in .22s var(--ease)}
@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.detail-drawer{animation:drawer-in .24s var(--ease)}
@keyframes drawer-in{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}

/* --- Kaydırma çubukları ---------------------------------------------- */
*{scrollbar-width:thin;scrollbar-color:#c7cdd6 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#c7cdd6;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#aeb6c1;background-clip:padding-box;border:3px solid transparent}
*::-webkit-scrollbar-track{background:transparent}

/* --- Hareket azaltma tercihi ----------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .panel:hover,.week-card:hover,.track-card:hover,.primary:hover{transform:none}
}

/* --- Koyu tema ------------------------------------------------------- */


/* --- Yazdırma -------------------------------------------------------- */
@media print{
  .sidebar,.topbar,.title-row .secondary,.modal-backdrop,.drawer-backdrop,
  .weekly-toolbar,.logistics-toolbar,.row-actions{display:none!important}
  .main{margin-left:0}
  .panel{box-shadow:none;border:1px solid #d8dce1;break-inside:avoid}
  table thead th{position:static;background:#f2f4f6}
  body{background:#fff}
}

/* Çok birimli toplam: "29,5 ton · 2.275 metre · 32,75 m³" gibi uzun metin sığsın */
.stat-amount{display:block;line-height:1.5;white-space:normal;word-break:break-word;max-width:100%}
.stat>div{min-width:0}
.stat strong{display:block}

/* Dar ekranlarda tablo yatay kayar; kenarda gölge ipucu verir */
.table-wrap{
  background:
    linear-gradient(90deg,#fff 30%,#fff0) left / 28px 100% no-repeat,
    linear-gradient(90deg,#fff0,#fff 70%) right / 28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,#171b2414,#171b2400) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,#171b2414,#171b2400) right / 12px 100% no-repeat;
  background-attachment:local,local,scroll,scroll;
}
.table-wrap table{min-width:720px}

/**
 * DAR TABLO HER GENİŞLİKTE DARDIR.
 * ------------------------------------------------------------------
 * 720 piksellik alt sınır GENİŞ veri tabloları içindir: yükleme
 * listesinde on iki sütun ve uzun güzergâh metinleri vardır, orada
 * yatay kaydırma doğru cevaptır.
 *
 * Rapor kırılımları ise dört sütunluk SIRALAMA tablolarıdır ve yarım
 * panelde durur. Bu alt sınır onlara da uygulandığı için 1440
 * piksellik bir ekranda bile panel 547 piksel kalıyor, tablo 720
 * piksele zorlanıyor ve "KAPANAN" ile "YÜK" sütunları SESSİZCE
 * kırpılıyordu — başlık bile yarım görünüyordu ("KAPANA…"). Kaydırma
 * çubuğu görünmediği için kullanıcı o iki sütunun varlığını hiç
 * öğrenmiyordu.
 *
 * Alt sınırın kalkması yalnız telefona özgü bir düzeltme değildir;
 * dar bir kutuya konan tablo MASAÜSTÜNDE de dardır. Bu yüzden kural
 * medya sorgusunun dışındadır.
 *
 * `table-layout:fixed`: sütun genişliğini içerik değil DÜZEN belirler.
 * Yoksa tek bir uzun müşteri adı ("JORDANIAN MODERN TEXTILE") ad
 * sütununu şişirip sayıları yine kenara itiyordu. Ad kırpılır — sayı
 * kırpılmaz; çünkü tablo sayılar için okunur.
 * ------------------------------------------------------------------ */
table.tablo-sik{min-width:0;width:100%;table-layout:fixed}
table.tablo-sik th,table.tablo-sik td{padding-left:10px;padding-right:10px}
table.tablo-sik th:first-child,table.tablo-sik td:first-child{padding-left:16px;width:40%}
table.tablo-sik th:last-child,table.tablo-sik td:last-child{padding-right:16px}
table.tablo-sik td>strong,table.tablo-sik td>a{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/**
 * SATIR BAŞLIĞI HÜCRENİN KENDİSİDİR.
 *
 * Buna `display:block` VERİLMEZ: blok yapılan bir hücre sütun
 * düzeninden çıkar ve tablo onu 219 piksel yerine 88 piksele
 * sıkıştırır — ay adları ("KASIM 2…") yine kırpılırdı. Sabit düzende
 * kırpma zaten hücrenin kendisinde çalışır.
 */
table.tablo-sik th[scope="row"]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Sütun sayısı azken ad sütunu daha çok yer alabilir */
table.tablo-sik.tablo-ikili th:first-child,
table.tablo-sik.tablo-ikili td:first-child{width:auto}


/* Uzun güzergâh ve sipariş metinleri sütunu şişirmesin */
.mode>div>span{display:block;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-cell{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table td .customer-name{display:block;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.owner{max-width:150px}
.owner span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-actions{flex-wrap:nowrap}

/* İşlem sütunu sağa sabitlenir: tablo yatay kaysa bile düğmeler görünür kalır */
.table-wrap table thead th:last-child:empty,
.table-wrap table tbody td:has(>.row-actions){
  position:sticky;right:0;z-index:1;
  background:#fff;
  box-shadow:-10px 0 12px -10px #171b2426;
}
.table-wrap table thead th:last-child:empty{background:#fafbfc;z-index:3}
.table-wrap table tbody tr:hover td:has(>.row-actions){background:#fbfcfd}
.table-wrap .mode>div>span{max-width:190px}


/* Sütun genişlikleri: geniş metinler kırpılır, tablo tek ekrana sığar */
.table-wrap .mode>div>span{max-width:150px}
.table-wrap .order-cell{max-width:110px}
.table-wrap table td .customer-name{max-width:200px}
.table-wrap .owner{max-width:130px}
.table-wrap table th,.table-wrap table td{padding-left:12px;padding-right:12px}
.table-wrap table th:first-child,.table-wrap table td:first-child{padding-left:18px}
.table-wrap .badge{white-space:nowrap}

/* ===================================================================
   DURUM LİSTELERİ (süpervizör) ve FİNANS BEKLEME
   =================================================================== */
.settings-grid .full-width{grid-column:1/-1}
.status-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 12px}
.status-tabs button{height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:0 12px;font-size:11px;font-weight:700;color:#69717e}
.status-tabs button.active{background:#242a33;color:#fff;border-color:#242a33}
.status-catalog>.form-note{margin-top:0}
.status-rows{display:flex;flex-direction:column;gap:7px;margin:10px 0 12px}
.status-row{display:grid;grid-template-columns:minmax(0,1fr) 170px 110px 78px 46px;gap:9px;align-items:center}
.status-row input[type=text],.status-row select{height:38px;margin-top:0!important}
.status-row.is-new input[type=text]{border-color:#f0a544;background:#fffaf3}
.status-hold{display:flex;align-items:center;gap:6px;font-size:11px;color:#6b7280;white-space:nowrap}
.status-hold input{width:15px;height:15px;flex:none}
.status-usage{font-size:10px;color:#8b929d;text-align:right;white-space:nowrap}
.status-locked{display:grid;place-items:center;color:#a9b0ba}
.status-row .btn-text.danger{color:#a94b4b}
.status-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* Finans: beklemeye alma */
.finance-decision-foot .hold{color:#7a5aa8;border-color:#e0d6f2;background:#f7f3fd}
.finance-decision-foot .hold:hover{background:#f2ebfb;border-color:#cdbcea}
.summary-card.holding{background:#fff7ed;border-color:#f3dcbd;color:#8a5412}
.summary-card.holding b{color:#7a4a0f}
.hold-count{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 10px;border-radius:20px;background:#f1ebfa;color:#6b4c9c;font-size:11px;font-weight:700}
.hold-count svg{width:13px}
.hold-panel .panel-head b{background:#f1ebfa;color:#6b4c9c}



@media(max-width:820px){
  .status-row{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .status-row input[type=text]{grid-column:1/-1}
  .status-usage{text-align:left}
}

/* ===== Kapanış satırı: numaralar + ağırlık + metraj ===== */
.closure-row{grid-template-columns:28px repeat(4,minmax(0,1fr)) 34px;row-gap:12px}
.closure-row>label{min-width:0}
/* İkinci sıra: net / brüt / metre / kap adedi */
.closure-row>label:nth-of-type(5){grid-column:2}
.closure-row>label:nth-of-type(6){grid-column:3}
.closure-row>label:nth-of-type(7){grid-column:4}
.closure-row>label:nth-of-type(8){grid-column:5}
.closure-row>button{grid-row:1;grid-column:6}
.closure-row .meters-field input{border-color:#e3d3f0}
.closure-row input[type=number]{font-variant-numeric:tabular-nums}
@media(max-width:820px){
  .closure-row{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 34px}
  .closure-row>label:nth-of-type(n){grid-column:auto}
  .closure-row>button{grid-column:4;grid-row:1}
}

/* Finans özet başlığı: uzun açıklama sıkışmasın */
.approval-summary{gap:20px}
.approval-summary p{max-width:640px;line-height:1.65;font-size:11.5px}
.approval-summary>div{flex:none}
/* Lojistik göstergelerinde para/ağırlık değerleri küçük punto ile sığar */
.hero-metrics b.amount{font-size:15px;letter-spacing:-.01em;white-space:nowrap}
@media(max-width:1200px){.approval-summary{flex-direction:column;align-items:flex-start}.approval-summary p{max-width:none}}

/* `.compose-body div{display:flex}` kuralını aşmak için özgüllük yükseltilir */
.compose-body .status-rows{display:flex;flex-direction:column;gap:7px;flex-wrap:nowrap}
.compose-body .status-row{display:grid;grid-template-columns:minmax(0,1fr) 170px 112px 78px 46px;gap:9px;align-items:center;flex-wrap:nowrap}
.compose-body .status-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.compose-body .status-catalog{display:block}
.compose-body .status-tabs{display:flex;flex-wrap:wrap}
.compose-body .brand-grid{display:grid}
.compose-body .brand-slot{display:flex;flex-direction:column}
.compose-body .brand-actions{display:flex;flex-wrap:wrap}
@media(max-width:900px){
  .compose-body .status-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:auto}
  .compose-body .status-row>input[type=text]{grid-column:1/-1}
}

/* ===================================================================
   GİRİŞ EKRANI — premium katman
   =================================================================== */
.login-body{
  background:
    radial-gradient(1100px 620px at 12% -10%, #3a2d1b 0%, #0000 62%),
    radial-gradient(900px 560px at 100% 110%, #23303f 0%, #0000 58%),
    linear-gradient(150deg,#15181f 0%,#1d222b 46%,#14171d 100%);
  padding:clamp(18px,4vh,40px) 20px;
}
.login-body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(1px 1px at 20% 30%, #ffffff18 50%, #0000 51%),
    radial-gradient(1px 1px at 70% 60%, #ffffff12 50%, #0000 51%),
    radial-gradient(1px 1px at 45% 85%, #ffffff10 50%, #0000 51%);
  background-size:520px 520px,700px 700px,640px 640px;
}

.login-shell{
  max-width:1060px;
  border-radius:20px;
  border:1px solid #ffffff14;
  box-shadow:0 50px 110px #00000070, 0 2px 0 #ffffff0d inset;
  position:relative;z-index:1;
}

/* --- Sol marka paneli --- */
.login-brand{
  background:linear-gradient(165deg,#20252f 0%,#191d25 100%);
  padding:clamp(28px,4.4vh,46px) clamp(26px,3vw,42px);
  gap:clamp(16px,2.6vh,26px);
  justify-content:space-between;
  position:relative;overflow:hidden;
}
.login-brand::after{
  content:"";position:absolute;inset:auto -40% -55% -40%;height:70%;
  background:radial-gradient(closest-side,#ef8b1722,#0000);
  pointer-events:none;
}
.login-brand > *{position:relative;z-index:1}
.brand-top{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px)}
.login-brand h1{font-size:clamp(20px,2.7vh,26px);line-height:1.2;margin:0;color:#fff;letter-spacing:-.02em}
.brand-lead{font-size:12.5px;line-height:1.7;color:#a7aeba;margin:0;max-width:44ch}

.brand-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.brand-features li{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 13px;border-radius:11px;
  background:#ffffff0a;border:1px solid #ffffff12;
}
.brand-features li > span{
  flex:none;height:30px;width:30px;border-radius:8px;display:grid;place-items:center;
  background:#ef8b1720;color:#f0a44a;
}
.brand-features b,.brand-features small{display:block}
.brand-features b{font-size:12px;color:#eef1f5;letter-spacing:-.01em}
.brand-features small{font-size:10.5px;color:#98a0ac;margin-top:3px;line-height:1.5}

.login-brand .brand-foot{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding-top:clamp(12px,1.8vh,18px);border-top:1px solid #ffffff14;margin:0;
}
.brand-stat{display:flex;align-items:flex-start;gap:9px;color:#93d3ae}
.brand-stat svg{flex:none;margin-top:2px}
.brand-stat b,.brand-stat small{display:block}
.brand-stat b{font-size:11px;color:#dfe3e9}
.brand-stat small{font-size:10px;color:#8d95a1;margin-top:2px;line-height:1.45}

/* --- Sağ giriş kartı --- */
.login-card{padding:clamp(30px,5vh,48px) clamp(26px,3vw,44px);gap:0}
.login-date{
  font-size:10px;letter-spacing:.08em;font-weight:800;color:#c07a17;
  margin:16px 0 0;text-transform:uppercase;
}
.login-card form{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.login-card .field{display:block}
.login-card .label-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11.5px;font-weight:750;color:#4f5763;margin-bottom:7px;
}
.field-wrap{
  position:relative;display:flex;align-items:center;gap:9px;
  height:48px;padding:0 13px;border:1px solid #dfe3e8;border-radius:11px;background:#fff;
  color:#98a0ac;transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.field-wrap:focus-within{border-color:#f0a544;box-shadow:0 0 0 3px #f79a2322}
.field-wrap > svg{flex:none}
.field-wrap input{
  border:0;outline:0;background:transparent;font:inherit;font-size:13.5px;
  width:100%;color:#242b34;margin:0!important;padding:0;height:100%;
}
.field-wrap .reveal{
  flex:none;border:0;background:transparent;color:#98a0ac;
  height:30px;width:30px;border-radius:7px;display:grid;place-items:center;cursor:pointer;
}
.field-wrap .reveal:hover{background:#f2f4f6;color:#5a626d}
.field-wrap .reveal.on{color:#d07710;background:#fff3e2}

.login-card .primary{height:50px;font-size:14px;border-radius:11px;margin-top:4px}
.login-alert{display:flex;align-items:flex-start;gap:10px;line-height:1.55}
.login-alert svg{flex:none;margin-top:1px}
.login-secure{
  display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:16px;
  border-top:1px solid #eef0f3;font-size:10.5px;color:#8b929d;
}
.login-secure svg{flex:none;color:#3f8a66}
.login-foot{margin-top:10px;font-size:11px}

/* --- Bakım şeridi --- */
.login-maintenance-bar{
  position:fixed;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 18px;text-align:center;
  background:linear-gradient(90deg,#8a5412,#c07a17,#8a5412);
  color:#fff7ec;font-size:12px;line-height:1.5;
  box-shadow:0 6px 20px #00000040;
}
.login-maintenance-bar svg{flex:none}
.login-body.has-maintenance{padding-top:64px}

@media(max-width:900px){
  .login-brand{display:none}
  .login-brand .brand-foot{grid-template-columns:1fr}
}
@media(max-height:720px){
  .brand-features li:nth-child(n+4){display:none}
  .login-brand .brand-foot{display:none}
  .login-date{display:none}
}


/* ===== Ayarlar: bakım modu paneli ===== */
.maintenance-panel.is-active{border-color:#e6b06a;box-shadow:0 0 0 3px #f79a231f}
.maintenance-switch{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 16px;border-radius:11px;background:#f7f8fa;border:1px solid var(--line);
}
.maintenance-panel.is-active .maintenance-switch{background:#fff7ed;border-color:#f3dcbd}
.switch-state{display:flex;align-items:center;gap:12px}
.switch-dot{
  width:12px;height:12px;border-radius:50%;flex:none;
  background:#3f8a66;box-shadow:0 0 0 4px #3f8a661f;
}
.switch-dot.on{background:#e08a1a;box-shadow:0 0 0 4px #e08a1a26;animation:switch-pulse 1.8s infinite}
@keyframes switch-pulse{0%,100%{box-shadow:0 0 0 4px #e08a1a26}50%{box-shadow:0 0 0 8px #e08a1a12}}
.switch-state b,.switch-state small{display:block}
.switch-state b{font-size:12.5px}
.switch-state small{font-size:10.5px;color:#828a95;margin-top:3px}
.maintenance-switch button{height:40px;padding:0 16px;white-space:nowrap}

.maintenance-allowed > b{display:block;font-size:11.5px;margin-bottom:9px}
.allowed-chips{display:flex;flex-wrap:wrap;gap:7px}
.allowed-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:20px;font-size:10.5px;font-weight:700;
  background:#eef4f0;color:#3f7155;border:1px solid #d7e7de;
}
.allowed-chip.super{background:#f1ebfa;color:#6b4c9c;border-color:#e0d6f2}
.allowed-chip.passive{opacity:.55}
.allowed-chip svg{flex:none}



/* ==================================================================
   SAĞ ÜST PROFİL MENÜSÜ · BİLDİRİM KUTUSU · YAZI BİÇİMİNDE LOGO
   ------------------------------------------------------------------
   Profil bloğu artık sol alt köşede değil, üst çubuğun sağ köşesinde.
   Sıra soldan sağa: Yeni Yükleme · Bildirimler · Profil.
   ================================================================== */

/* --- Kenar çubuğunun altı: kurumsal imza ---------------------------- */
.sidebar-foot{
  margin-top:auto;
  display:flex;align-items:center;gap:11px;
  padding:16px 20px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.16);
}
.sidebar-foot .dot{
  width:9px;height:9px;border-radius:50%;
  background:#4fd18b;box-shadow:0 0 0 4px rgba(79,209,139,.16);
  flex:none;
}
.sidebar-foot strong,.sidebar-foot small{display:block}
.sidebar-foot strong{font-size:12.5px;color:#eceff4;font-weight:700}
.sidebar-foot small{font-size:11px;color:#828a98;margin-top:3px}

/* --- Logo gizliyken kullanılan yazı biçimindeki kurum adı ----------- */
.brand-wordmark{
  display:inline-flex;align-items:baseline;gap:6px;
  font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1;
}
.brand-wordmark strong{color:#fff;font-weight:800}
.brand-wordmark em{font-style:normal;color:var(--orange,#f09a2c);font-weight:800}
.login-mark.brand-wordmark{font-size:17px}
/* Yazdırma çıktısı açık zeminlidir: koyu yazı */
.print-head .brand-wordmark strong,
.weekly-print .brand-wordmark strong{color:#1e222a}

/* --- Profil düğmesi ------------------------------------------------- */
.profile-wrap{position:relative}
.profile-btn{
  display:flex;align-items:center;gap:10px;
  height:46px;padding:0 10px 0 7px;
  border:1px solid var(--line);border-radius:11px;
  background:#fff;cursor:pointer;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.profile-btn:hover{border-color:#d7dce3;background:#fcfdfe}
.profile-wrap.open .profile-btn{
  border-color:#f4b463;box-shadow:0 0 0 4px rgba(247,154,35,.13);
}
.profile-btn .avatar{
  height:33px;width:33px;border-radius:9px;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#f5a037,#e88411);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 6px 14px -7px rgba(232,138,24,.9);
}
.profile-btn .who{display:grid;text-align:left;line-height:1.2;max-width:170px}
.profile-btn .who strong{
  font-size:13px;color:#252b34;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.profile-btn .who small{font-size:11px;color:#828a96;margin-top:2px}
.profile-btn>svg{width:15px;color:#98a0ac;transition:transform .2s var(--ease)}
.profile-wrap.open .profile-btn>svg{transform:rotate(180deg)}

/* --- Profil menüsü (sağ üstte açılır) ------------------------------- */
.profile-wrap .user-menu{
  position:absolute;right:0;left:auto;top:56px;bottom:auto;
  width:252px;padding:7px;
  background:#fff;border:1px solid #dde2e8;border-radius:13px;
  box-shadow:0 20px 55px rgba(23,27,36,.19);
  z-index:90;
}
.profile-wrap .user-head{
  display:flex;align-items:center;gap:10px;
  padding:11px 10px 12px;border-bottom:1px solid #eef0f3;margin-bottom:6px;
}
.profile-wrap .user-head .avatar{
  height:38px;width:38px;border-radius:10px;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#f5a037,#e88411);
  color:#fff;font-size:13px;font-weight:800;
}
.profile-wrap .user-head div{min-width:0}
.profile-wrap .user-head strong,.profile-wrap .user-head small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-wrap .user-head strong{font-size:13px;color:#22282f}
.profile-wrap .user-head small{font-size:11px;color:#838b97;margin-top:3px}
.profile-wrap .user-role{
  display:flex;align-items:center;gap:6px;
  margin:0 0 6px;padding:7px 10px;
  font-size:11px;font-weight:700;color:#8a5b12;
  background:#fff6e9;border-radius:8px;
}
.profile-wrap .user-role svg{width:13px}
.profile-wrap .user-menu a{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:9px;
  color:#3d4552;font-size:13px;font-weight:600;text-decoration:none;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.profile-wrap .user-menu a svg{width:16px;color:#8b93a0}
.profile-wrap .user-menu a:hover{background:#f5f7f9;color:#1d232b}
.profile-wrap .user-menu a:hover svg{color:#d97f12}
.profile-wrap .user-menu a.danger{color:#a8463f;margin-top:2px}
.profile-wrap .user-menu a.danger svg{color:#c06a62}
.profile-wrap .user-menu a.danger:hover{background:#fdf3f2;color:#8e3831}

/* --- Zil rozeti ----------------------------------------------------- */
.icon-btn .badge-count{
  position:absolute;top:-6px;right:-6px;
  min-width:19px;height:19px;padding:0 5px;
  border-radius:11px;border:2px solid #fff;
  background:linear-gradient(135deg,#f5883a,#e2600f);
  color:#fff;font-size:10px;font-weight:800;line-height:15px;
  display:grid;place-items:center;
  box-shadow:0 4px 10px -3px rgba(226,96,15,.8);
}

/* --- Bildirim paneli ------------------------------------------------ */
.notification-panel{width:396px}
.notification-panel .panel-tools{display:flex;align-items:center;gap:8px}
.notification-panel .panel-tools .btn-text{
  border:0;background:none;color:#c9780f;font-size:11px;font-weight:750;
  padding:6px 8px;border-radius:7px;cursor:pointer;white-space:nowrap;
}
.notification-panel .panel-tools .btn-text:hover{background:#fff4e6}
.notice-scroll{max-height:min(460px,60vh);overflow-y:auto}
.notice-section{
  margin:0;padding:10px 16px 6px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;color:#969dab;
  background:#fafbfc;border-bottom:1px solid #f0f2f5;
}
.notice-item.personal{
  display:grid;grid-template-columns:38px 1fr 8px;gap:11px;
  align-items:start;text-decoration:none;color:inherit;cursor:pointer;
  transition:background .15s var(--ease);
}
.notice-item.personal em{
  display:block;font-style:normal;font-size:11px;color:#616974;
  margin-top:4px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.notice-item.personal.unread{background:#fffaf3}
.notice-item.personal.unread strong{color:#8a4f06}
.notice-item.personal.unread:hover{background:#fff4e6}
.notice-item.personal.read{opacity:.74}
.notice-item.personal.read:hover{opacity:1;background:#f8f9fb}
.notice-item .unread-dot{
  width:8px;height:8px;border-radius:50%;margin-top:6px;
  background:linear-gradient(135deg,#f5883a,#e2600f);
  box-shadow:0 0 0 3px rgba(240,147,42,.16);
}
.notice-icon.note{background:#e8f1fb;color:#2c6ea8}
.notice-icon.assignment{background:#f0e9f8;color:#7453a0}

/* --- Küçük ekran ---------------------------------------------------- */
@media(max-width:1180px){
  .profile-btn .who{display:none}
  .profile-btn{padding:0 8px}
}
@media(max-width:760px){
  .header-actions .icon-btn{display:grid}
  .notification-panel{width:min(360px,calc(100vw - 24px));right:-8px}
  .profile-wrap .user-menu{right:-4px;width:244px}
  .sidebar-foot{padding:14px 18px}
}

/* --- "Logo görünmesin" anahtarı ------------------------------------- */
.brand-switch{
  border:1px solid #e3e7ed;border-radius:12px;
  padding:14px 16px;margin-bottom:16px;background:#fbfcfd;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.brand-switch.is-hidden{background:#fff7ea;border-color:#f0d9b0}
.brand-switch .checkbox-row{margin:0;font-size:13px}
.brand-switch .checkbox-row b{font-weight:750}
.brand-switch p{margin:9px 0 0;font-size:12px;line-height:1.6;color:#6d7682}
.brand-switch .brand-switch-state{
  display:inline-block;margin-top:10px;
  font-size:11px;font-weight:700;color:#5f6874;
  background:#eef1f4;border-radius:20px;padding:5px 11px;
}
.brand-switch.is-hidden .brand-switch-state{background:#f7e6c8;color:#8a5b12}
.brand-wordmark.inline{
  font-size:12px;display:inline-flex;vertical-align:baseline;
  background:#252b34;border-radius:5px;padding:3px 7px;gap:4px;
}
.brand-grid.is-dimmed{opacity:.5;filter:grayscale(.55)}

/* --- Gizlenen e-posta kaydı bilgisi --------------------------------- */
.queue-hidden-note{
  display:flex;align-items:flex-start;gap:10px;
  margin:0;padding:12px 16px;
  background:#f6f8fa;border-bottom:1px solid #eceff3;
  font-size:11.5px;line-height:1.6;color:#657081;
}
.queue-hidden-note svg{width:15px;flex:none;color:#939dab;margin-top:1px}
.queue-hidden-note b{color:#414954}
.row-security{
  display:inline-flex;align-items:center;gap:4px;
  font-size:9.5px;font-weight:800;letter-spacing:.04em;
  background:#f1e9f9;color:#6c4d95;border-radius:5px;padding:3px 6px;margin-left:6px;
}
.row-security svg{width:11px}

/* Sistemsel bildirim rozeti — kurumsal kopyası olmayan denetim postası */
.row-notice{
  display:inline-flex;align-items:center;gap:4px;
  font-size:9.5px;font-weight:800;letter-spacing:.04em;
  background:#e7eefb;color:#2f5597;border-radius:5px;padding:3px 6px;margin-left:6px;
}
.row-notice svg{width:11px}

/* Bildirim paneli başlığı: başlık esner, araçlar sabit kalır ------------ */
.notification-panel header{gap:10px}
.notification-panel header>div:first-child{min-width:0;flex:1 1 auto}
.notification-panel .panel-tools{flex:0 0 auto}
.notification-panel .panel-tools .btn-text{font-size:10.5px;padding:6px 7px;line-height:1.2}
.notification-panel .panel-tools>button:last-child{
  border:0;background:#f3f5f7;width:30px;height:30px;border-radius:7px;flex:none;
}

/* ------------------------------------------------------------------
   Logo gizliyken yazı biçimindeki markanın yerleşimi.
   .login-mark masaüstünde gizlidir (yalnız dar ekranda görünür);
   .brand-wordmark kuralı bunu ezmemelidir.
   ------------------------------------------------------------------ */
.login-mark.brand-wordmark{display:none}
@media(max-width:900px){
  .login-mark.brand-wordmark{
    display:flex;justify-content:center;
    font-size:22px;margin:0 auto 26px;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
  }
}
/* Giriş ekranının sol panelinde logonun yerini tutar */
.login-brand .brand-wordmark{
  font-size:26px;margin-bottom:26px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
/* Sol menüde logonun yerini tutar */
.brand .brand-wordmark{font-size:21px}

/* ".notification-panel header button" kuralı 30x30 zorluyordu; metin düğmesi
   kendi genişliğini almalı, yoksa kapatma düğmesinin altına taşıyor. */
.notification-panel .panel-tools .btn-text{
  width:auto!important;height:auto!important;
  background:none;border-radius:7px;
}
.notification-panel .panel-tools .btn-text:hover{background:#fff4e6}

/* ==================================================================
   KARAR İŞLEMLERİ — Düzenle / Sil
   ------------------------------------------------------------------
   "Kararı geri al" tek başına duran kırmızı bir metin bağlantısıydı;
   ne yapacağı belirsizdi ve tabloda kayboluyordu. Yerine iki açık
   işlem geldi: Düzenle (kararı başka duruma çevirir) ve Sil (kararı
   kaldırıp dosyayı yeniden onaya düşürür).
   ================================================================== */

.decision-actions{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.mini-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 11px;
  border:1px solid #dfe3e9;border-radius:8px;background:#fff;
  color:#4b535f;font-size:11.5px;font-weight:700;white-space:nowrap;cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease),
             color .16s var(--ease),box-shadow .16s var(--ease),transform .12s var(--ease);
}
.mini-btn svg{width:14px;flex:none}
.mini-btn:hover{transform:translateY(-1px)}
.mini-btn:active{transform:none}

.mini-btn.edit:hover{
  border-color:#f0b35f;background:#fff8ee;color:#8c5307;
  box-shadow:0 4px 12px -6px rgba(232,138,24,.7);
}
.mini-btn.edit:hover svg{color:#d67f10}

.mini-btn.delete{color:#9c4f48}
.mini-btn.delete:hover{
  border-color:#e8b3ad;background:#fdf4f3;color:#8c342c;
  box-shadow:0 4px 12px -6px rgba(176,68,56,.55);
}
.mini-btn.delete:hover svg{color:#b7524a}

.decision-locked{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;color:#9aa1ac;
  background:#f4f6f8;border-radius:7px;padding:6px 9px;
}
.decision-locked svg{width:12px}

/* Karar hücresindeki gerekçe özeti */
.decision-note{
  display:block;margin-top:5px;
  font-size:10.5px;color:#868e99;font-style:italic;
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
th.col-actions{text-align:right}

/* ------------------------------------------------------------------
   Karar düzenleme penceresi
   ------------------------------------------------------------------ */
.decision-current{
  display:flex;align-items:center;gap:9px;
  margin:0 0 18px;padding:12px 14px;
  background:#f6f8fa;border:1px solid #e7eaee;border-radius:10px;
  font-size:12.5px;color:#5c646f;
}
.decision-current svg{width:15px;color:#8b93a0;flex:none}
.decision-current b{color:#262c35}

.field-label{
  margin:0 0 9px;font-size:11px;font-weight:800;
  letter-spacing:.06em;color:#7d858f;
}

.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.decision-option{
  display:grid;grid-template-columns:38px 1fr;align-items:center;gap:11px;
  padding:13px 14px;cursor:pointer;
  border:1.5px solid #e3e7ec;border-radius:11px;background:#fff;
  transition:border-color .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease);
}
.decision-option:hover{border-color:#cfd5dd;background:#fcfdfe}
.decision-option input{position:absolute;opacity:0;pointer-events:none}
.decision-mark{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;background:#eef1f4;color:#69717d;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.decision-mark svg{width:18px}
.decision-text{display:grid;min-width:0}
.decision-text b{font-size:13px;color:#252b34;font-weight:750}
.decision-text small{font-size:11px;color:#828a95;margin-top:3px;line-height:1.45}

/* Seçili seçenek duruma göre renklenir */
.decision-option.selected{box-shadow:0 0 0 3px rgba(0,0,0,.03)}
.decision-option.selected[data-value="approved"]{border-color:#54b27c;background:#f2faf5}
.decision-option.selected[data-value="approved"] .decision-mark{background:#dff0e6;color:#2f7d51}
.decision-option.selected[data-value="hold"]{border-color:#e2a734;background:#fffaef}
.decision-option.selected[data-value="hold"] .decision-mark{background:#fceccd;color:#96650a}
.decision-option.selected[data-value="rejected"]{border-color:#d7746a;background:#fdf5f4}
.decision-option.selected[data-value="rejected"] .decision-mark{background:#f8dedb;color:#a2423a}
.decision-option.selected[data-value="other"]{border-color:#8a6ab5;background:#f8f5fd}
.decision-option.selected[data-value="other"] .decision-mark{background:#ece2f8;color:#6a4b95}

#decision-label-row .hint{
  display:block;margin-top:6px;font-size:11px;color:#8b929d;font-weight:400;
}
#modal-decision .modal{width:min(640px,100%)}

@media(max-width:620px){
  .decision-grid{grid-template-columns:1fr}
  .decision-actions{flex-direction:column;align-items:stretch}
  .mini-btn{justify-content:center}
}

/* ==================================================================
   BAKIM MODU EKRANI — yenilenen düzen
   ------------------------------------------------------------------
   Üstte logo + "BAKIM SÜRÜYOR" rozeti, ortada büyük başlık, altta
   yetki uyarısı ve "Yönetici girişi" düğmesi.
   ================================================================== */


/* ==================================================================
   ROLE GÖRE BİLGİ (CC) ADRESLERİ
   ================================================================== */
.role-cc-grid{display:grid;gap:10px;margin:16px 0 18px}
.role-cc-row{
  display:grid;grid-template-columns:210px 1fr;align-items:center;gap:14px;
  padding:11px 13px;border:1px solid #e6e9ee;border-radius:10px;background:#fbfcfd;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.role-cc-row:focus-within{border-color:#f4b463;background:#fff}
.role-cc-name{display:flex;align-items:center;gap:8px;min-width:0}
.role-cc-name b{font-size:12.5px;color:#333a44;font-weight:700}
.role-cc-name em{
  font-style:normal;font-size:10px;font-weight:700;color:#8a5b12;
  background:#fff2df;border-radius:12px;padding:3px 7px;flex:none;
}
.role-cc-row input{
  height:38px;border:1px solid #dfe3e8;border-radius:8px;
  padding:0 11px;font-size:12px;color:#4c535e;outline:0;background:#fff;
}
.role-cc-row input:focus{border-color:#f09a2d;box-shadow:0 0 0 3px #f09a2d20}
.role-cc-panel .info-rule{margin-bottom:4px}

@media(max-width:760px){
  .role-cc-row{grid-template-columns:1fr;gap:8px}
}

/* ------------------------------------------------------------------
   Pencere gövdesinde doğrudan duran alanlar.
   .form-grid içinde olmayan label/input/textarea'lar (geri alma ve
   karar pencereleri) biçimsiz kalıyordu: etiket solda, alan sağda
   küçücük bir kutu olarak çıkıyordu. Burada tam genişliğe alınır.

   ONAY KUTULARI HARİÇ (.checkbox-row): onlar zaten kendi düzenine
   sahiptir — kutu solda 16px, yazı yanında. Bu kural onları da
   kapsarsa kutu satır boyu genişler ve yazı pencerenin dışına
   taşar; bu yüzden :not(.checkbox-row) ile dışarıda bırakılır.
   ------------------------------------------------------------------ */
.modal-body > label:not(.checkbox-row),
.modal-body > .full:not(.checkbox-row){
  display:block;width:100%;margin-bottom:16px;
  font-size:12px;font-weight:700;color:#4e5560;
}
.modal-body > label:not(.checkbox-row) > input,
.modal-body > label:not(.checkbox-row) > select,
.modal-body > label:not(.checkbox-row) > textarea{
  display:block;width:100%;margin-top:7px;
  border:1px solid #dfe3e8;border-radius:8px;
  padding:11px 12px;font:inherit;font-size:13px;font-weight:400;
  color:#4c535e;background:#fff;outline:none;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.modal-body > label:not(.checkbox-row) > textarea{min-height:92px;resize:vertical;line-height:1.55}
.modal-body > label:not(.checkbox-row) > input:focus,
.modal-body > label:not(.checkbox-row) > select:focus,
.modal-body > label:not(.checkbox-row) > textarea:focus{
  border-color:#f09a2d;box-shadow:0 0 0 3px #f09a2d20;
}
.modal-body > label:not(.checkbox-row) > small.hint{font-weight:400}

/* Pencere gövdesindeki onay kutusu satırı: kutu sabit, yazı akar. */
.modal-body > label.checkbox-row{
  display:flex;align-items:flex-start;gap:9px;width:100%;margin-bottom:16px;
}
.modal-body > label.checkbox-row > input[type="checkbox"]{
  width:17px;height:17px;min-width:17px;flex:0 0 auto;margin:1px 0 0;padding:0;
  accent-color:var(--primary);cursor:pointer;
}
.modal-body > label.checkbox-row > b{
  font-size:12.5px;font-weight:700;color:#414854;line-height:1.5;
}

/* Silme onay düğmesi kırmızı olmalı: turuncu "kaydet" düğmesiyle
   karıştırılırsa kullanıcı yanlışlıkla karar siler. */
.modal-foot .primary.danger{
  background:linear-gradient(135deg,#c9524a,#ad3d35);
  border:0;color:#fff;box-shadow:0 6px 14px rgba(173,61,53,.32);
}
.modal-foot .primary.danger:hover{filter:brightness(1.07)}

/* Onay ekranındaki "Beklet" düğmesi */
.approval-actions .secondary.hold{
  border-color:#eec78a;background:#fff8ed;color:#8a5b12;
}
.approval-actions .secondary.hold:hover{background:#fdeed6;border-color:#e2a734}
.approval-actions .secondary.hold svg{color:#c98a1c}

/* Beklemedeki dosyalar bölümü */
.held-panel{border-color:#f0dcbb}
.held-panel .panel-head{background:#fffaf1;border-bottom-color:#f3e3c9}
.held-panel .panel-head b{
  height:25px;min-width:25px;padding:0 7px;border-radius:50%;
  background:#fceccd;color:#96650a;display:grid;place-items:center;font-size:11px;
}
.held-card{box-shadow:none;border-radius:0;border-bottom:1px solid var(--line)}
.held-card:last-of-type{border-bottom:0}
.held-card .stat-icon.amber{background:#fceccd;color:#96650a}
.rejected-reason.held-reason{background:#fffaf1;border-color:#f0dcbb}
.rejected-reason.held-reason b{color:#8a5b12}

/* ==================================================================
   GÖNDERİM KUYRUĞU — durum şeridi, arama ve zenginleştirilmiş satır
   ------------------------------------------------------------------
   Kuyruk artık yalnız son 12 kaydı gösteren bir liste değil: dosya
   numarası veya müşteri adıyla aranabilen, duruma göre süzülebilen
   bir gönderim defteridir.
   ================================================================== */

.queue-panel{display:flex;flex-direction:column}

/* --- Durum şeridi (aynı zamanda süzgeç) ---------------------------- */
.queue-stats{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:#eceff3;border-bottom:1px solid var(--line);
}
.queue-stat{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 6px;background:#fff;text-decoration:none;
  transition:background .16s var(--ease),box-shadow .16s var(--ease);
}
.queue-stat b{font-size:17px;font-weight:750;color:#252b34;line-height:1.1}
.queue-stat span{font-size:9.5px;font-weight:700;letter-spacing:.03em;color:#8c939e;text-align:center}
.queue-stat:hover{background:#fafbfc}
.queue-stat.active{background:#fffaf3;box-shadow:inset 0 -3px 0 var(--orange,#ef8b17)}
.queue-stat.active b{color:#8a4f06}
.queue-stat.green.active{background:#f2faf5;box-shadow:inset 0 -3px 0 #3f8a66}
.queue-stat.green.active b{color:#2f7d51}
.queue-stat.rose.active{background:#fdf4f3;box-shadow:inset 0 -3px 0 #c2564c}
.queue-stat.rose.active b{color:#9c4139}
.queue-stat.violet.active{background:#f8f5fd;box-shadow:inset 0 -3px 0 #7a5aa8}
.queue-stat.violet.active b{color:#5f4287}
.queue-stat.navy.active{background:#f4f6f9;box-shadow:inset 0 -3px 0 #3c4656}
.queue-stat.navy.active b{color:#2b323d}
/* İptal edilen: nötr ton — ne uyarı ne başarı */
.queue-stat.slate.active{background:#f5f6f8;box-shadow:inset 0 -3px 0 #78808d}
.queue-stat.slate.active b{color:#4f5763}

/* --- Arama ---------------------------------------------------------- */
.queue-search{
  display:flex;gap:9px;align-items:center;
  padding:13px 16px;border-bottom:1px solid var(--line);background:#fbfcfd;
}
.queue-search-field{
  position:relative;flex:1;display:flex;align-items:center;gap:9px;
  height:40px;padding:0 12px;
  background:#fff;border:1px solid var(--line);border-radius:9px;color:#8b93a1;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.queue-search-field:focus-within{border-color:#f4b463;box-shadow:0 0 0 3px rgba(247,154,35,.13)}
.queue-search-field svg{flex:none;width:16px}
.queue-search-field input{
  border:0;outline:0;background:transparent;width:100%;
  font:inherit;font-size:12.5px;color:var(--ink);
}
.queue-search-field input::-webkit-search-cancel-button{display:none}
.queue-clear{
  display:grid;place-items:center;flex:none;
  width:24px;height:24px;border-radius:6px;background:#f1f3f6;color:#818995;
}
.queue-clear:hover{background:#e6e9ee;color:#4b535f}
.queue-search .secondary{height:40px;flex:none;font-size:12px;padding:0 14px}

/* --- Sonuç satırı --------------------------------------------------- */
.queue-result-line{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0;padding:10px 16px;
  background:#f2faf5;border-bottom:1px solid #dcefe4;
  font-size:11.5px;color:#3f7357;
}
.queue-result-line svg{flex:none;color:#4e9670}
.queue-result-line span{flex:1;min-width:160px}
.queue-result-line b{color:#2f6349}
.queue-result-line a{
  color:#8a5b12;font-weight:700;text-decoration:none;
  background:#fff3e2;border-radius:14px;padding:4px 10px;
}
.queue-result-line a:hover{background:#ffe8cc}

/* --- Liste ---------------------------------------------------------- */
.queue-list{max-height:min(560px,58vh);overflow-y:auto}
.mail-row{
  width:100%;background:#fff;border:0;
  display:block;padding:0;
  transition:background .14s var(--ease),box-shadow .14s var(--ease);
}
.mail-row:hover{background:#fafbfc}
.mail-row.status-failed{box-shadow:inset 3px 0 0 #d07068}
.mail-row.status-queued{box-shadow:inset 3px 0 0 #e2a734}
.mail-row.status-blocked{box-shadow:inset 3px 0 0 #8a6ab5}
.mail-row.status-cancelled{box-shadow:inset 3px 0 0 #97a0ac;opacity:.86}
/* Ana alan eski satırın ızgarasını taşır */
.mail-row > .mail-ana{
  display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:start;
  padding:14px 18px;border-bottom:0;border-top:0;
}
/* İşlem şeridi: ana alanın altında, sağa yaslı */
.mail-islem{
  display:flex;justify-content:flex-end;gap:8px;
  padding:0 18px 11px;
}
.mail-islem:empty{display:none}
.mail-islem .btn-text{font-size:11px}
.mail-ana > .round{margin-top:2px}
.mail-row strong{
  display:block;font-size:12.5px;line-height:1.4;color:#242a33;font-weight:650;
}
.mail-context{
  display:inline-flex;align-items:center;gap:5px;margin-top:5px;
  font-style:normal;font-size:10.5px;font-weight:700;color:#6b5a86;
  background:#f2edfa;border-radius:12px;padding:3px 8px;
}
.mail-context svg{width:11px}
.mail-row small{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  font-size:10.5px;color:#868e99;margin-top:5px;
}
.mail-row small svg{width:11px;flex:none;opacity:.75}
.mail-row small.mail-error{color:#a24f46}
.mail-row small.mail-error svg{opacity:1;color:#c2675d}
.mail-status{
  flex:none;align-self:center;
  font-size:9.5px;font-weight:800;letter-spacing:.03em;
  border-radius:14px;padding:5px 9px;white-space:nowrap;
}
.mail-status.sent{background:#e7f5ed;color:#2f7d51}
.mail-status.queued{background:#fff4d8;color:#8a6205}
.mail-status.failed{background:#fbe9e7;color:#9c4139}
.mail-status.blocked{background:#f1e9f9;color:#5f4287}

/* --- Boş durum ------------------------------------------------------ */
.queue-empty{
  display:grid;justify-items:center;gap:7px;
  padding:42px 24px;text-align:center;color:#8b929d;
}
.queue-empty svg{color:#c3c9d2;margin-bottom:4px}
.queue-empty b{font-size:13.5px;color:#434a55}
.queue-empty span{font-size:11.5px;line-height:1.6;max-width:320px}
.queue-empty .secondary{margin-top:8px;height:36px;font-size:12px;text-decoration:none}

@media(max-width:760px){
  .queue-stats{grid-template-columns:repeat(3,1fr)}
  .queue-search{flex-wrap:wrap}
  .queue-search .secondary{width:100%}
}

/* ==================================================================
   CANLI KATMAN — arka planda tazelenen sayaçlar ve rozetler
   ================================================================== */

/* Kuyruk başlığındaki canlı noktası */
.live-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#4fd18b;margin-right:5px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(79,209,139,.55);
  animation:live-pulse 2.4s infinite;
}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(79,209,139,.5)}
  70%{box-shadow:0 0 0 6px rgba(79,209,139,0)}
  100%{box-shadow:0 0 0 0 rgba(79,209,139,0)}
}

/* Sayaç değişince kısa vurgu */
@keyframes count-bump{
  0%{transform:scale(1)}40%{transform:scale(1.22);color:#d67f10}100%{transform:scale(1)}
}
.queue-stat b.bump{animation:count-bump .5s var(--ease)}

/* Zil rozeti arttığında canlanır */
@keyframes badge-pop{
  0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}
}
.icon-btn .badge-count.pulse{animation:badge-pop .45s var(--ease)}

/* "Yeni hareket var" şeridi */
.queue-live-hint{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px;text-decoration:none;
  background:#fff7ea;border-bottom:1px solid #f2e0c2;
  font-size:11.5px;font-weight:700;color:#8a5b12;
}
.queue-live-hint:hover{background:#fdeed6}
.queue-live-hint svg{width:14px}

/* --- Kuyruk sütunu biraz genişler: arama sonuçları rahat okunsun --- */
@media(min-width:1100px){
  .email-grid{grid-template-columns:minmax(0,1fr) minmax(430px,.92fr)}
}

/* Panel başlığındaki "Kuyruğu işle" düğmesi tek satırda kalsın */
.queue-panel .panel-head > button{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;
  border:1px solid var(--line);background:#fff;border-radius:8px;
  height:34px;padding:0 11px;font-size:11.5px;font-weight:700;color:#555d69;
}
.queue-panel .panel-head > button:hover{border-color:#cfd5dd;background:#fafbfc}
.queue-panel .panel-head > button svg{width:14px;color:#8b93a0}

/* Satırdaki alıcı çizgisi tek satırda dursun, taşarsa kısalsın */
.mail-row small{flex-wrap:nowrap;overflow:hidden}
.mail-row small > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-row small .mail-time{
  margin-left:auto;flex:none;font-weight:600;color:#9aa1ac;font-size:10px;
}

/* --- Not akışı: bildirimin kime gittiği ----------------------------- */
.note-delivery{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:8px;padding-top:8px;border-top:1px dashed #e6e9ee;
  font-size:10.5px;color:#6f7783;
}
.note-delivery .note-arrow{font-style:normal;color:#c98a1c;font-weight:800}
.note-delivery b{color:#8a5b12;background:#fff2df;border-radius:10px;padding:1px 6px}
.note-delivery .note-cc{color:#939aa5}
.note-delivery.muted{color:#a7aeb8;font-style:italic}

/* Not yazarken kime gideceği */
.note-target{
  display:block;margin:0 0 9px;padding:9px 11px;
  background:#f4f8fb;border:1px solid #dfe9f1;border-radius:8px;
  font-size:11.5px;line-height:1.55;color:#4a5866;
}
.note-target b{color:#27506e}
/* Süpervizörün sessiz notu: yazmadan önce görünsün diye ayrı renk */
.note-composer--sessiz .note-target{
  background:#fbf6ee;border-color:#ecdcc3;color:#6b5a3f;
}
.note-composer--sessiz .note-target b{color:#8a6a2f}
/* ==================================================================
   SÜTUN SEÇİCİ
   ------------------------------------------------------------------
   Süzgeç şeridinin ve dışa aktarım düğmesinin yanında durur; menü
   düğmeye göre konumlanır. Rozet yalnız gizlenmiş sütun varsa çıkar:
   kullanıcı listeyi neden eksik gördüğünü buradan hatırlar.
   ================================================================== */
.kolon-secici{position:relative;display:inline-flex}
.kolon-dugme{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;
  border:1px solid var(--line);background:#fff;border-radius:8px;
  font-size:11px;font-weight:700;color:#5b636f;cursor:pointer}
.kolon-dugme:hover{border-color:#d3d8de;background:#fcfdfe}
.kolon-dugme svg{width:15px;color:#8b929d}
.kolon-rozet{min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:#fdf0dd;color:#a3670d;font-size:9.5px;line-height:17px;text-align:center}
.kolon-menu{position:absolute;top:40px;right:0;z-index:70;width:236px;padding:12px;
  background:#fff;border:1px solid #dde2e8;border-radius:11px;box-shadow:0 16px 44px #171b2426}
.kolon-baslik{margin:0 0 8px;font-size:9.5px;letter-spacing:.07em;font-weight:800;
  text-transform:uppercase;color:#8b929d}
.kolon-satir{display:flex;align-items:center;gap:9px;padding:6px 4px;border-radius:7px;
  font-size:12px;color:#39414f;cursor:pointer}
.kolon-satir:hover{background:#f7f8fa}
.kolon-satir input{width:15px;height:15px;accent-color:var(--primary);margin:0}
.kolon-not{margin:9px 0 0;padding-top:9px;border-top:1px dashed #e7eaee;
  font-size:10px;line-height:1.55;color:#868d99}
.kolon-not b{color:#5c646f}
.kolon-sifirla{margin-top:7px}

/* ==================================================================
   KAYDEDİLMİŞ GÖRÜNÜMLER ŞERİDİ
   ------------------------------------------------------------------
   Süzgeç şeridinin üstünde ince bir sıra: solda yer imleri, sağda
   kaydetme düğmesi. Etkin görünüm turuncu kenarla ayrılır; varsayılan
   olanın önünde yıldız durur.
   ================================================================== */
.gorunum-serit{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 16px;margin-bottom:12px;background:#fbfcfd;
  border:1px solid var(--line);border-radius:11px;position:relative}
.gorunum-etiket{display:inline-flex;align-items:center;gap:6px;
  font-size:9.5px;letter-spacing:.07em;font-weight:800;text-transform:uppercase;color:#8b929d}
.gorunum-etiket svg{width:13px;color:#b9861f}
.gorunum-liste{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.gorunum-oge{display:inline-flex;align-items:stretch;border:1px solid #e1e5ea;
  background:#fff;border-radius:8px;overflow:hidden;position:relative}
.gorunum-oge>a{display:inline-flex;align-items:center;gap:5px;padding:0 10px;height:30px;
  font-size:11.5px;font-weight:700;color:#4d5562;text-decoration:none;white-space:nowrap}
.gorunum-oge>a:hover{background:#f7f8fa}
.gorunum-oge>a>i{font-style:normal;color:#dd9a17;font-size:11px}
.gorunum-oge.etkin{border-color:#edb166;background:#fffaf2}
.gorunum-oge.etkin>a{color:#a3670d}
.gorunum-menu-ac{border:0;border-left:1px solid #edeff2;background:transparent;
  width:26px;color:#98a0ab;font-size:13px;line-height:1;cursor:pointer}
.gorunum-menu-ac:hover{background:#f2f4f6;color:#5a626e}
.gorunum-bos{font-size:11px;color:#8b929d}
.gorunum-araclar{display:flex;align-items:center;gap:8px;margin-left:auto}
.gorunum-kaydet{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;
  border:1px solid var(--line);background:#fff;border-radius:8px;
  font-size:11px;font-weight:700;color:#5b636f;cursor:pointer}
.gorunum-kaydet:hover:not(:disabled){border-color:#d3d8de;background:#fcfdfe}
.gorunum-kaydet:disabled{opacity:.5;cursor:not-allowed}
.gorunum-kaydet svg{width:14px;color:#8b929d}
/* Öğe menüsü: düğmenin altına açılır */
.gorunum-menu{position:absolute;top:32px;right:0;z-index:70;min-width:186px;padding:5px;
  background:#fff;border:1px solid #dde2e8;border-radius:10px;box-shadow:0 14px 38px #171b2426}
.gorunum-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:8px 10px;border-radius:7px;font-size:11.5px;color:#39414f;cursor:pointer}
.gorunum-menu button:hover{background:#f5f6f8}
.gorunum-menu button.danger{color:#a94b4b}
.gorunum-menu button.danger:hover{background:#fdf4f4}
/* Ad soran küçük form: şeridin altına, tam genişlikte iner */
.gorunum-form{flex-basis:100%;display:flex;align-items:flex-end;gap:10px;
  margin-top:4px;padding-top:11px;border-top:1px dashed #e7eaee}
.gorunum-form label{display:grid;gap:5px;flex:1;max-width:340px;font-size:10px;color:#79808c}
.gorunum-form input{height:33px;border:1px solid var(--input);border-radius:8px;padding:0 10px;font-size:12px}
.gorunum-form-alt{display:flex;align-items:center;gap:8px}
.gorunum-form .primary{height:33px;padding:0 14px;font-size:11.5px}

/* Veri yedeği paneli (Ayarlar) */
.yedek-panel{align-self:start}
.yedek-govde{padding:16px 20px;display:grid;gap:10px}
.yedek-zaman{
  display:flex;align-items:center;gap:7px;margin:0;
  font-size:12px;color:#3f7c5b;font-weight:650;
}
.yedek-zaman svg{width:14px}
.yedek-govde .form-note{margin:0;font-size:11px;line-height:1.6;color:#79808c}
.yedek-govde .form-note b{color:#5c646f}
.yedek-govde .form-note.uyari{
  padding:10px 12px;border-radius:9px;
  background:#fdf6ec;border:1px solid #f0dcbc;color:#7c6438;
}
.yedek-govde .form-note code{
  background:#f1f3f6;border-radius:4px;padding:1px 5px;font-size:10.5px;color:#4f5763;
}
.yedek-eylem{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.yedek-eylem .primary{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;
  text-decoration:none;font-size:12.5px;
}
.yedek-eylem .primary svg{width:16px}

/* Bildirim tercihleri (Hesabım) ve "sessiz" rozeti */
.bildirim-tercih .tercih-govde{padding:18px 20px;display:grid;gap:9px}
.tercih-satir{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#39414f;cursor:pointer}
.tercih-satir input{width:16px;height:16px;accent-color:var(--primary);margin:0}
.tercih-satir.kilitli{color:#8b929d;cursor:default}
.bildirim-tercih .form-note{margin:4px 0 0;font-size:11px;line-height:1.6;color:#79808c}
.bildirim-tercih .form-note b{color:#5c646f}
.bildirim-sessiz{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:10px;
  background:#eef0f3;color:#6b7280;font-size:9.5px;font-weight:800;letter-spacing:.03em;
}

/* ==================================================================
   YÜKLEMELERDE TOPLU İŞLEM
   ------------------------------------------------------------------
   Şerit yalnız seçim varken görünür (hidden özniteliği JS'te kalkar).
   Havale kuyruğundaki şeritle aynı dili konuşur: aynı zemin, aynı
   yazı boyu — iki ekran aynı işi aynı biçimde anlatır.
   ================================================================== */
.toplu-serit{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 18px 12px;padding:11px 14px;border-radius:11px;
  background:linear-gradient(135deg,#fff6ea,#fdefdc);border:1px solid #f0d7ac;
}
.toplu-serit > b{font-size:12.5px;color:#7d4f08;white-space:nowrap}
.toplu-refs{
  flex:1;min-width:0;font-size:11px;color:#9a7433;font-weight:650;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.toplu-araclar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.toplu-kisi{display:flex;align-items:center;gap:7px;font-size:10.5px;color:#8a6a2f;font-weight:700}
.toplu-kisi select{
  height:34px;border:1px solid #e6d3b1;border-radius:8px;padding:0 9px;
  font:inherit;font-size:12px;background:#fff;max-width:230px;
}
.toplu-serit .primary,.toplu-serit .secondary{height:34px;padding:0 13px;font-size:12px;flex:none}
.toplu-serit .secondary{display:inline-flex;align-items:center;gap:6px}
.toplu-serit .secondary svg{width:15px}
/* Satırdaki seçim kutusu */
table[data-shipment-list] th.tick,table[data-shipment-list] td.tick{width:40px;text-align:center}
.toplu-kutu{display:grid;place-items:center;min-height:30px;cursor:pointer}
.toplu-kutu input{width:16px;height:16px;accent-color:var(--primary);margin:0;cursor:pointer}
@media(max-width:640px){
  .toplu-serit{margin:0 12px 10px}
  .toplu-kisi select{max-width:none;flex:1}
}
@media print{.toplu-serit{display:none}}


/* ==================================================================
   GRAFİKLER — ÇOĞU HTML, YALNIZ ÇİZGİ SVG
   ------------------------------------------------------------------
   NEDEN BU BÖLÜŞÜM (uzun gerekçe views/partials/grafik.php başında):
   önceki sürüm her şeyi tek bir SVG'ye çizip o SVG'yi
   `preserveAspectRatio="none"` ile kutuya YAYIYORDU. 640 birimlik çizim
   541 piksellik panele sıkışınca yatayda %85'e iniyor, EKSEN YAZILARI
   eziliyordu; Kontrol Merkezi'nin dar panelinde oran %55'e kadar düşüyor
   ve yazı okunmaz hâle geliyordu. Artık yazı, sütun ve nokta HTML;
   yalnız çizgi ve alan SVG — çünkü bir çizgiyi HTML ile çizemezsiniz.

   RENKLER ELLE SEÇİLMEDİ. Üç seri rengi dört denetimden geçirildi:
   renk körlüğü ayrımı, açıklık bandı, doygunluk tabanı, zemin
   karşıtlığı. Eski palette yeşil (#3f7c5b) doygunluğu eşiğin altında
   olduğu için GRİ okunuyor, turuncuyla arasındaki renk körü farkı da
   eşiği geçmiyordu. Koyu tema renkleri ayrıca ve KOYU ZEMİNE KARŞI
   doğrulandı; bu yüzden üretecin otomatik çevirisine bırakılmaz,
   bin/koyu-tema-ek.css'te elle verilir. Karşıtlık uyarısı alan iki renk
   için ödünç: her grafiğin yanında AYNI VERİNİN TABLOSU durur.

   RENK KİMLİĞİ SIRAYA DEĞİL VARLIĞA BAĞLIDIR: "Açılan" her zaman 1.
   seridir. Süzgeç bir seriyi kaldırınca kalanlar yeniden boyanmaz.
   ================================================================== */
:root{
  --gr-1:#ed8b18;
  --gr-2:#2a78d6;
  --gr-3:#1baf7a;
  /* Alan dolguları SAYDAM: üst üste binen iki seri birbirini örtmez */
  --gr-1-alan:#ed8b1826;
  --gr-2-alan:#2a78d621;
  --gr-3-alan:#1baf7a21;
  /* Izgara ve eksen GERİ ÇEKİLİR: ikisi de veri değil, yalnız ölçek */
  --gr-izgara:#e9ecf0;
  --gr-taban:#d7dce3;
  --gr-eksen:#8b929d;
  /* Sütun boşluğu ve nokta halkası bu renkle "kesilir" (panel zemini) */
  --gr-yuzey:#fff;
}

/**
 * SERİ RENGİ TEK YERDEN DAĞITILIR.
 *
 * Sütun, çizgi, nokta, lejant ve ipucu aynı `--gr-renk` değişkenini
 * okur. Yeni bir seri türü eklendiğinde renk kuralı yeniden yazılmaz;
 * `r1/r2/r3` sınıfını taşıması yeter.
 */
.grafik .r1{--gr-renk:var(--gr-1);--gr-alan:var(--gr-1-alan)}
.grafik .r2{--gr-renk:var(--gr-2);--gr-alan:var(--gr-2-alan)}
.grafik .r3{--gr-renk:var(--gr-3);--gr-alan:var(--gr-3-alan)}

.grafik{margin:0;padding:12px 16px 4px;--gr-boy:190px;--gr-yan:38px;--gr-aralik:clamp(2px,1.4%,16px)}

/* --- Izgara ve Y ekseni ------------------------------------------
   ÜÇ ÇİZGİ YETER: sıfır, orta, tavan. Fazlası küçük bir paneli
   defter kâğıdına çevirir. Taban HER ZAMAN SIFIRDIR; kesilmiş bir
   eksen küçük farkları büyük gösterir ve grafik yalan söyler. */
.grafik-tuval{position:relative;padding-left:var(--gr-yan)}
.grafik-tuval:focus-visible{outline:2px solid var(--ring);outline-offset:4px;border-radius:8px}
.grafik-izgara{position:absolute;left:var(--gr-yan);right:0;top:0;height:var(--gr-boy);pointer-events:none}
.grafik-cizgi-y{position:absolute;left:0;right:0;bottom:var(--o);height:0;border-top:1px solid var(--gr-izgara)}
.grafik-cizgi-y:last-child{border-top-color:var(--gr-taban)}
.grafik-cizgi-y i{
  position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:8px;
  font-style:normal;font-size:10.5px;font-weight:650;color:var(--gr-eksen);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* --- Çizim alanı ------------------------------------------------- */
.grafik-alan-ic{position:relative;height:var(--gr-boy)}

/**
 * SÜTUNLAR HTML KUTUSUDUR.
 *
 * Her dönem bir "grup", her seri o grupta bir kutu. İki kutuyu ayıran
 * şey çevrelerine çizilen bir ÇERÇEVE değil, aradaki 2 piksellik ZEMİN
 * BOŞLUĞUDUR: çerçeve, veri olmayan mürekkep demektir.
 *
 * Sütun 24 pikselden geniş olamaz. Tek dönemlik bir grafikte panel
 * genişliğinde bir blok, veriyi değil boşluğu gösterirdi.
 */
.grafik-gruplar{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;gap:var(--gr-aralik)}
.grafik-grup{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.grafik-sutun{
  flex:1 1 0;min-width:0;max-width:24px;height:var(--y);
  border-radius:4px 4px 0 0;background:var(--gr-renk);
}
/* Sıfır olmayan ama çok küçük bir değer de görünmelidir */
.grafik-sutun:not(.sifir){min-height:3px}
/**
 * SON DÖNEM = İÇİNDE BULUNDUĞUMUZ DÖNEM.
 * Rengi DEĞİŞTİRİLMEZ (renkler doğrulandı, ton oynatmak ayrımı bozar);
 * ayrımı taban altındaki 2 piksellik çizgi yapar.
 */
.grafik-grup.son::after{
  content:"";position:absolute;left:1px;right:1px;bottom:-3px;height:2px;
  border-radius:2px;background:var(--ink);opacity:.26;
}

/**
 * ÇİZGİ VE ALAN — TEK SVG PARÇASI.
 * viewBox yüzdedir ve kutuya yayılır; ama kalınlık
 * `vector-effect="non-scaling-stroke"` ile sabit kaldığı için yayılma
 * çizgiyi inceltmez. Noktalar HTML'dir: yayılan bir SVG dairesi
 * elipse dönerdi.
 */
.grafik-svg{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
.grafik-yol{fill:none;stroke:var(--gr-renk);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.grafik-dolgu{fill:var(--gr-alan);stroke:none}

/* --- Noktalar ----------------------------------------------------
   2 piksellik ZEMİN HALKASI: üst üste binen iki nokta birbirinden
   ayrılır, çizginin üstünde de yüzer gibi durur. */
.grafik-noktalar{position:absolute;inset:0;z-index:3;pointer-events:none}
.grafik-nokta{
  position:absolute;left:var(--x);top:var(--yv);
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--gr-renk);box-shadow:0 0 0 2px var(--gr-yuzey);
}
.grafik-nokta.son{width:12px;height:12px;margin:-6px 0 0 -6px;box-shadow:0 0 0 2.5px var(--gr-yuzey)}
/* Kalabalık seride nokta küçülür; yoksa çizgi tespihe döner */
.grafik--yogun .grafik-nokta{width:6px;height:6px;margin:-3px 0 0 -3px;box-shadow:0 0 0 1.5px var(--gr-yuzey)}
.grafik--yogun .grafik-nokta.son{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;box-shadow:0 0 0 2.5px var(--gr-yuzey)}

/* --- İmleç ve vurgu (betik konumlandırır) ------------------------ */
.grafik-imlec{position:absolute;top:0;bottom:0;left:var(--cx);z-index:2;width:1px;background:var(--ink);opacity:.22;pointer-events:none}
.grafik-vurgu{position:absolute;top:-2px;bottom:-2px;left:var(--vx);z-index:0;width:var(--vw);border-radius:7px;background:#eef1f5;pointer-events:none}

/* --- X ekseni etiketleri — HTML ---------------------------------
   Eskiden SVG içindeydi ve yayılmayla birlikte eziliyordu.
   `margin-left` kullanılır, `padding` DEĞİL: konumlu çocuklar dolguyu
   değil kutunun kendisini ölçer, dolgu verilse çizgi grafiğinin
   etiketleri 38 piksel sola kayardı. */
.grafik-x{position:relative;margin:9px 0 0 var(--gr-yan);min-height:15px}
/**
 * ETİKET KENDİ PAYINDAN TAŞABİLİR.
 *
 * Etiketler eşit paylı kutulara oturur ama "27 Eyl" o kutudan geniştir:
 * kırpılırsa ekranda "27 …" kalır ve eksen okunmaz olur. Kalabalıkken
 * bir etiket atlanır (o kutular GÖRÜNMEZ ama yerini korur), yani
 * taşacağı yer zaten boştur. Kırpmak yerine taşırmak doğrudur.
 */
.grafik-x-oge{font-size:10.5px;font-weight:600;color:var(--gr-eksen);white-space:nowrap;overflow:visible}
.grafik--sutun .grafik-x{display:flex;gap:var(--gr-aralik)}
.grafik--sutun .grafik-x-oge{flex:1 1 0;min-width:0;text-align:center}
/**
 * UÇTAKİ ETİKET PANELDEN TAŞAMAZ.
 *
 * `text-align` burada YETMEZ: bir satır kutusundan geniş olduğunda
 * tarayıcı hizalamayı bırakır ve taşmayı hep SAĞA yapar — sağa
 * yaslanan son etiket de sağdan taşıyordu ("Eylül 202…"). Bu yüzden
 * kaydırmayı betik ölçüp yapar (app.js, `etiketSeyrelt`); buradaki
 * değişken onun yazdığı payı taşır, betiksizken sıfırdır.
 */
.grafik-x-oge{transform:translateX(var(--kaydir,0px))}
.grafik--cizgi .grafik-x-oge{transform:translateX(calc(-50% + var(--kaydir,0px)))}
.grafik--cizgi .grafik-x-oge.ilk,
.grafik--cizgi .grafik-x-oge.son{transform:translateX(var(--kaydir,0px))}
/* Çizgide etiket, ait olduğu NOKTANIN altında durur (sütunda ise
   kutunun ortasında); uçlar dışarı taşmasın diye kenara yapıştırılır */
.grafik--cizgi .grafik-x-oge{position:absolute;left:var(--x)}
.grafik--cizgi .grafik-x-oge.ilk{left:0;text-align:left}
.grafik--cizgi .grafik-x-oge.son{left:auto;right:0;text-align:right}
/* Bu dönemin etiketi biraz daha koyu: hangi sütun "bugün" belli olsun */
.grafik-x-oge.son{color:var(--ink);font-weight:700}
/* Kalabalıkken bazı etiketler gizlenir ama YERİ KORUNUR: `display:none`
   sütun düzenini kaydırırdı, `visibility` kaydırmaz. */
.grafik-x-oge.sessiz{visibility:hidden}

/* --- İpucu -------------------------------------------------------
   Bir X'e gelindiğinde O ANDAKİ BÜTÜN seriler yazılır: kullanıcı
   çizginin üstüne nişan almak zorunda kalmaz. Koyu kutu iki temada da
   aynıdır (bilgi balonu, yüzey değil). */
.grafik-ipucu{
  position:absolute;left:var(--tx);top:var(--ty);z-index:6;
  transform:translate(-50%,calc(-100% - 13px));
  min-width:116px;max-width:230px;padding:8px 11px;
  background:#1e232c;color:#f2f4f7;border-radius:9px;
  font-size:11.5px;line-height:1.5;white-space:nowrap;pointer-events:none;
  box-shadow:0 8px 22px #0f172a40;
}
/* Yukarı yer kalmadıysa kutu işaretin ALTINA geçer: ekranın üstünde
   kesilmiş bir ipucu, hiç olmamasından kötüdür (betik karar verir). */
.grafik-ipucu.altta{transform:translate(-50%,13px)}
.grafik-ipucu b{display:block;margin-bottom:4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#a6aebc}
.grafik-ipucu span{display:flex;align-items:center;gap:8px}
.grafik-ipucu i{flex:none;width:8px;height:8px;border-radius:2px;background:var(--gr-renk)}
.grafik-ipucu em{margin-left:auto;padding-left:10px;font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}

/* --- Lejant ------------------------------------------------------
   İKİ VE DAHA ÇOK SERİDE HER ZAMAN VARDIR: kimliğin rengin tek başına
   taşımasına izin verilmez. Tek seride konmaz; panelin başlığı zaten
   neyin çizildiğini söyler. */
.grafik-lejant{display:flex;flex-wrap:wrap;gap:5px 16px;margin:10px 0 0;padding-left:var(--gr-yan);font-size:11px;font-weight:600;color:var(--muted)}
.grafik-lejant span{display:inline-flex;align-items:center;gap:7px}
.grafik-lejant i{flex:none;width:10px;height:10px;border-radius:3px;background:var(--gr-renk)}

/* --- Tek dönem ---------------------------------------------------
   Grafik SEYİR gösterir; tek dönemde seyir yoktur ve o tek sütun geniş
   bir panelin ortasında yapayalnız kalır. O yüzden sayı, sayı olarak
   verilir. Soldaki renk çubuğu serinin kimliğini taşır: grafikteki
   rengin aynısı, böylece aralık genişletildiğinde göz kaybolmaz. */
.grafik-tek{padding:6px 2px 4px}
.grafik-tek-donem{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.grafik-tek-liste{display:flex;flex-wrap:wrap;gap:12px 28px}
.grafik-tek-oge{padding-left:12px;border-left:3px solid var(--gr-renk);border-radius:2px}
.grafik-tek-oge b{display:block;font-size:25px;line-height:1.18;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.grafik-tek-oge span{display:block;margin-top:3px;font-size:12px;font-weight:600;color:var(--muted)}
.grafik-tek-not{margin:16px 0 0;font-size:11.5px;color:#98a0ab}

/* --- Sayılar -----------------------------------------------------
   Her grafiğin yanında AYNI VERİNİN tablosu durur: ekran okuyucu
   grafiği okuyamaz, gören kullanıcı da kesin sayı için buraya bakar. */
.grafik-tablo{width:100%;margin-top:12px;font-size:11.5px}
.grafik-tablo caption{text-align:left;font-size:10.5px;color:#8b929d;padding-bottom:6px}
.grafik-tablo th,.grafik-tablo td{padding:5px 8px;border-bottom:1px solid #f0f2f5;text-align:right}
.grafik-tablo th[scope="row"],.grafik-tablo thead th:first-child{text-align:left;color:#5d6673}

/* ------------------------------------------------------------------
   GİRİŞ HAREKETİ
   ------------------------------------------------------------------
   KURAL: BETİKSİZ GRAFİK EKSİKSİZ GÖRÜNÜR. Hareket, betiğin eklediği
   `grafik--oynat` sınıfıyla başlar; sınıf yoksa hiçbir şey gizlenmez.
   Tersini yapmak (önce gizle, sonra betikle göster) betik yüklenmezse
   ya da hata verirse grafiği BOŞ bırakırdı.

   Hareket yalnız "azaltılmış hareket" istemeyen kullanıcıda çalışır.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  /* Sütunlar tabandan büyür; komşusundan 34 ms sonra başlar */
  .grafik--oynat .grafik-sutun{animation:gr-sutun .58s cubic-bezier(.22,.68,.32,1) both;animation-delay:calc(var(--i) * 34ms)}
  @keyframes gr-sutun{from{height:0;min-height:0}}

  /* Çizgi ve alan soldan sağa çizilir (kalem hareketi) */
  .grafik--oynat .grafik-svg{animation:gr-cizim .9s cubic-bezier(.34,.72,.28,1) both}
  @keyframes gr-cizim{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}

  /* Noktalar kalemin arkasından yetişir */
  .grafik--oynat .grafik-nokta{animation:gr-nokta .28s cubic-bezier(.34,1.3,.5,1) both;animation-delay:calc(90ms + var(--i) * 40ms)}
  @keyframes gr-nokta{from{transform:scale(.2);opacity:0}}

  /* İzgara ve eksen yazıları çizimden önce belirir */
  .grafik--oynat .grafik-izgara,.grafik--oynat .grafik-x{animation:gr-solma .4s ease both}
  @keyframes gr-solma{from{opacity:0}}

  .grafik-ipucu,.grafik-imlec,.grafik-vurgu{transition:left .09s linear}
}

@media(max-width:640px){
  .grafik{padding:10px 12px 2px;--gr-boy:164px;--gr-yan:32px}
  .grafik-cizgi-y i{margin-right:6px}
  .grafik-lejant{font-size:11px;gap:5px 13px}
}

/* Raporlardaki ay tablosu: grafiğin altındaki kesin sayılar */
.rapor-ay-tablo{width:100%;margin:10px 0 4px;font-size:11.5px}
.rapor-ay-tablo th,.rapor-ay-tablo td{padding:6px 9px;border-bottom:1px solid #f0f2f5;text-align:right}
.rapor-ay-tablo thead th{font-size:10.5px;letter-spacing:.06em;color:#8b929d;text-transform:uppercase}
.rapor-ay-tablo th[scope="row"],.rapor-ay-tablo thead th:first-child{text-align:left}
/* Görsel olarak gizli ama ekran okuyucuda duran metin.
   white-space:nowrap YOK: uzun bir metin tek satırda sayfayı taşırırdı;
   burada metin sarar, 1 piksellik kutuda kırpılır. */
.gorsel-gizli{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;
}
/**
 * YAZDIRMA.
 * Tarayıcı zemin renklerini basmasa da grafik okunur kalmalı: izgara
 * koyulaşır, saydam dolgu griye iner, imleç/ipucu/vurgu kâğıda gitmez.
 */
@media print{
  .grafik{--gr-izgara:#c9ced5;--gr-taban:#9aa1ab;--gr-eksen:#3a414c;--gr-yuzey:#fff}
  .grafik-dolgu{fill:#00000012}
  .grafik-imlec,.grafik-vurgu,.grafik-ipucu{display:none !important}
  .grafik-grup.son::after{opacity:.45}
}

/* ==================================================================
   TELEFONDA ALT GEZİNME ÇUBUĞU
   ------------------------------------------------------------------
   Yalnız ≤640px'te görünür. Dokunma hedefleri 56px yüksekliğinde; alt
   kenarda telefonun kendi çubuğu (iPhone ana ekran çizgisi) için
   güvenli alan boşluğu bırakılır.
   ================================================================== */
.alt-menu{display:none}
@media(max-width:640px){
  .alt-menu{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:#fff;border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0);
    box-shadow:0 -6px 18px #171b2410;
  }
  .alt-menu a,.alt-menu button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:56px;border:0;background:transparent;
    color:#78808d;font-size:9.5px;font-weight:700;text-decoration:none;cursor:pointer;
  }
  .alt-menu svg{width:20px;height:20px}
  .alt-menu a.active{color:var(--primary)}
  .alt-menu a.active svg{color:var(--primary)}
  /* İçerik çubuğun altında kalmasın */
  .app-shell{padding-bottom:64px}
  /* Yüzen öğeler (bildirim balonu) çubuğun üstünde dursun */
  .toast{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media print{.alt-menu{display:none}}

/* ==================================================================
   BAŞLIKLA SIRALAMA
   ------------------------------------------------------------------
   Sıralanabilir başlık bağlantıdır; ok yalnız seçili sütunda koyulaşır.
   Renk tek başına anlam taşımasın diye aria-sort da yazılır.
   ================================================================== */
/**
 * DOKUNMA HEDEFİ.
 *
 * Başlık yazısı 11 piksel yüksekliğindedir; bağlantı yalnız yazı kadar
 * olsaydı telefonda parmakla isabet ettirmek güçleşirdi (duyarlılık
 * taraması bunu yakaladı). Bağlantı başlık hücresinin yüksekliğini
 * doldurur; masaüstünde görünüm değişmez.
 */
th .sirala{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;
  cursor:pointer;white-space:nowrap;min-height:30px}
th .sirala i{font-style:normal;font-size:8px;opacity:.28;transition:opacity .12s}
th .sirala:hover i{opacity:.6}
th .sirala.artan i,th .sirala.azalan i{opacity:1;color:var(--primary)}
th[aria-sort="ascending"],th[aria-sort="descending"]{color:#a3670d}

/* ==================================================================
   PAROLA GÜÇ GÖSTERGESİ
   ------------------------------------------------------------------
   Dört çubuk ve tek satır metin. Renk tek başına anlam taşımaz: metin
   her zaman durumu yazar ("Orta", "En az 10 karakter gerekir").
   ================================================================== */
.parola-guc{display:flex;align-items:center;gap:10px;margin:-4px 0 10px}
.parola-cubuk{display:flex;gap:4px;flex:0 0 auto}
.parola-cubuk i{width:26px;height:4px;border-radius:3px;background:#e4e7ec;display:block}
.parola-cubuk i.dolu.zayif{background:#c9564e}
.parola-cubuk i.dolu.orta{background:#dd9a17}
.parola-cubuk i.dolu.iyi{background:#4a9a6a}
.parola-cubuk i.dolu.guclu{background:#2f7d54}
.parola-metin{font-size:10.5px;font-weight:700}
.parola-metin.zayif{color:#a94b4b}
.parola-metin.orta{color:#9a6b12}
.parola-metin.iyi,.parola-metin.guclu{color:#3f7c5b}
.parola-kural{margin-top:-4px;font-size:10.5px;color:#868d99}
.login-card .parola-guc{margin:-2px 0 12px}

/* ==================================================================
   BİLDİRİM MERKEZİ
   ------------------------------------------------------------------
   Zil panelindeki satırın büyütülmüş hâli: ikon, gövde, araçlar.
   Okunmamış satır solda turuncu bir şeritle ayrılır — renk tek başına
   anlam taşımasın diye "Okundu" düğmesi de yalnız onlarda çıkar.
   ================================================================== */
.bildirim-liste{list-style:none;margin:0;padding:0}
.bildirim-satir{display:grid;grid-template-columns:44px 1fr auto;gap:13px;align-items:start;
  padding:14px 19px;border-bottom:1px solid #eef0f2;border-left:3px solid transparent}
.bildirim-satir:last-child{border-bottom:0}
.bildirim-satir.yeni{border-left-color:var(--primary);background:#fffdf9}
.bildirim-satir .notice-icon{width:38px;height:38px}
.bildirim-govde{min-width:0}
.bildirim-govde strong{display:block;font-size:12.5px;color:#2b323d}
.bildirim-govde p{margin:5px 0 0;font-size:12px;line-height:1.55;color:#5d6673;
  overflow-wrap:anywhere}
.bildirim-govde small{display:block;margin-top:6px;font-size:10.5px;color:#8b929d}
.bildirim-araclar{display:flex;align-items:center;gap:6px}
.bildirim-araclar .btn-icon{width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--line);background:#fff;border-radius:7px;color:#98a0ab;cursor:pointer}
.bildirim-araclar .btn-icon:hover{color:#a94b4b;border-color:#e8cfcf;background:#fdf5f5}
.bildirim-panel .pager-wrap{border-top:1px solid var(--line)}
@media(max-width:640px){
  .bildirim-satir{grid-template-columns:34px 1fr;row-gap:9px}
  .bildirim-araclar{grid-column:1/-1;justify-content:flex-end}
  .bildirim-satir .notice-icon{width:32px;height:32px}
}

/* ==================================================================
   ÇEVRİMDIŞI ŞERİDİ
   ------------------------------------------------------------------
   Bağlantı koptuğunda ekranın üstüne iner. Sabit konumdadır ve
   yazdırmada görünmez: kâğıtta anlamı yok.
   ================================================================== */
.cevrimdisi-serit{position:fixed;top:0;left:0;right:0;z-index:200;
  transform:translateY(-100%);transition:transform .18s ease;
  padding:9px 16px;text-align:center;font-size:12px;line-height:1.5;
  background:#7d2f2f;color:#fff;box-shadow:0 6px 18px #171b2433}
.cevrimdisi-serit.acik{transform:translateY(0)}
.cevrimdisi-serit b{font-weight:800}
.cevrimdisi-serit span{opacity:.88}
@media print{.cevrimdisi-serit{display:none}}
@media(prefers-reduced-motion:reduce){.cevrimdisi-serit{transition:none}}

/* Gizli rozet öğeleri yer kaplamasın */
.icon-btn .badge-count[hidden],.icon-btn i[hidden]{display:none!important}

/* ==================================================================
   DUYARLI YERLEŞİM — TEK VE SON KATMAN
   ------------------------------------------------------------------
   Bu blok dosyanın EN SONUNDADIR ve önceki tüm ekran kurallarını
   bilerek ezer. Amaç: sistem her bilgisayarda (dizüstü, geniş
   masaüstü), tablette ve telefonda kaymadan çalışsın.

   Kırılım noktaları:
     ≥1600px  geniş masaüstü — içerik daha rahat
     ≥1280px  standart masaüstü
     1024px   kenar çubuğu açılır menüye döner (tablet yatay dâhil)
      640px   tek sütun, sıkı üst çubuk (telefon)
   ================================================================== */

/* ------------------------------------------------------------------
   1) KENAR ÇUBUĞU KAYMASI
   ------------------------------------------------------------------
   Sorun: kenar çubuğu dikey bir flex kutusuydu ama logo ve alttaki
   imza esneyebiliyordu. Ekran yüksekliği menüyü almaya yetmediğinde
   tarayıcı ikisini de sıkıştırıyor, logo ÜSTTEN kırpılıyor ve alttaki
   imza görüntü alanının DIŞINA taşıyordu (1280x720 gibi dizüstü
   ekranlarda sol üst ve sol alt köşede kayma).

   Çözüm: logo ve imza asla esnemez (flex:none), menü kendi içinde
   kaydırılır (min-height:0 olmadan flex kutusu içindeki taşma
   kaydırma üretmez). Böylece logo her zaman en üstte, imza her zaman
   en altta sabit kalır.
   ------------------------------------------------------------------ */
.sidebar{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;      /* mobil tarayıcı çubukları için dvh */
  overflow:hidden;
}
.sidebar .brand{flex:0 0 auto}
.sidebar nav{
  flex:1 1 auto;min-height:0;      /* taşmanın kaydırmaya dönüşmesi için şart */
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;
}
.sidebar nav::-webkit-scrollbar{width:6px}
.sidebar nav::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:6px}
.sidebar nav::-webkit-scrollbar-track{background:transparent}
.sidebar-foot{flex:0 0 auto}

/* Yükseklik daraldıkça menü sıkışır ama kırpılmaz */
@media(max-height:820px){
  .sidebar .brand{height:70px}
  .brand img{width:132px}
  .nav-item{min-height:42px}
  .nav-label{margin:10px 14px 6px}
  .sidebar-foot{padding:12px 18px}
}
@media(max-height:680px){
  .sidebar .brand{height:60px}
  .brand img{width:118px}
  .nav-item{min-height:38px;font-size:13px}
  .sidebar-foot{padding:10px 16px}
  .sidebar-foot small{display:none}
}

/* ------------------------------------------------------------------
   2) YATAY KAYMA HİÇBİR EKRANDA OLMASIN
   ------------------------------------------------------------------ */
html,body{max-width:100%;overflow-x:hidden}
.main,.content{min-width:0;max-width:100%}
.panel,.compose,.table-wrap,.queue-panel{min-width:0}
img,svg,video{max-width:100%}
/* Uzun e-posta adresleri ve dosya adları satırı taşırmasın */
.mail-row strong,.mail-row small,.notice-item strong,.notice-item small,
.detail-drawer dd,.note-item p{overflow-wrap:anywhere}

/* ------------------------------------------------------------------
   3) GENİŞ MASAÜSTÜ (≥1600px) — boşluk artar, içerik nefes alır
   ------------------------------------------------------------------ */
@media(min-width:1600px){
  .sidebar{width:272px}
  .main{margin-left:272px}
  .content{padding:34px 40px 60px;max-width:1720px}
  .topbar{padding:0 40px}
  .global-search{width:min(620px,42vw)}
  .stat-grid{gap:18px}
}

/* ------------------------------------------------------------------
   4) DAR MASAÜSTÜ / TABLET YATAY (1025–1280px)
      Kenar çubuğu incelir, profil adı gizlenir, tablolar sıkışır.
   ------------------------------------------------------------------ */
@media(max-width:1280px) and (min-width:1025px){
  .sidebar{width:224px}
  .main{margin-left:224px}
  .content{padding:26px 22px 46px}
  .topbar{padding:0 22px;gap:14px}
  .global-search{width:min(420px,34vw)}
  .brand{padding:0 20px}
  .brand img{width:138px}
  .nav-item{padding:0 11px;font-size:13.5px}
  .email-grid,.settings-grid{grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);gap:14px}
  .workspace-grid{grid-template-columns:minmax(0,1.6fr) minmax(280px,.75fr)}
}

/* ------------------------------------------------------------------
   5) TABLET VE ALTI (≤1024px) — kenar çubuğu açılır menüye döner
      Eskiden bu davranış 760px'te başlıyordu; 820px'lik tabletlerde
      256px'lik çubuk içeriği eziyordu.
   ------------------------------------------------------------------ */
@media(max-width:1024px){
  .sidebar{
    width:264px;transform:translateX(-100%);
    transition:transform .24s var(--ease);
    box-shadow:0 0 0 100vmax transparent;z-index:60;
  }
  /* Karartma artık gölge değil, gerçek bir perde: dokunmayı karşılar */
  .sidebar.sidebar-open{transform:none;box-shadow:12px 0 34px rgba(10,14,22,.28)}
  .menu-perde{
    position:fixed;inset:0;z-index:50;
    background:rgba(10,14,22,.45);
  }
  .brand .mobile-close{
    display:grid;place-items:center;margin-left:auto;
    border:0;background:#ffffff14;color:#fff;width:34px;height:34px;border-radius:8px;
  }
  .main{margin-left:0}
  .menu-btn{
    display:grid;place-items:center;flex:none;
    width:40px;height:40px;border:1px solid var(--line);
    background:#fff;border-radius:9px;color:#4b535f;
  }
  .topbar{height:66px;padding:0 16px;gap:10px}
  .global-search{flex:1;width:auto;min-width:0}
  .content{padding:22px 16px 44px}
  .title-row{flex-direction:column;align-items:flex-start;gap:14px}
  .title-row h1{font-size:23px}

  /* İki sütunlu tüm yerleşimler tek sütuna iner */
  .email-grid,.settings-grid,.workspace-grid,.insight-grid,.smtp-grid{
    grid-template-columns:1fr;gap:14px;
  }
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .queue-list{max-height:none}
}

/* ------------------------------------------------------------------
   6) TELEFON (≤640px)
   ------------------------------------------------------------------ */
@media(max-width:640px){
  /* Sabit yükseklik DEĞİL: 430 pikselin altında çubuk sarmalanıp arama
     kutusu alt satıra iniyor; sabit 60 piksel o satırı çubuğun dışına
     taşırıyor ve sayfa başlığının üstüne bindiriyordu. */
  .topbar{min-height:60px;padding:0 12px;gap:8px}

  /* Arama kutusu üst çubukta yer kaplamasın: simgeye iner,
     dokunulduğunda üst çubuğun altında tam genişlikte açılır. */
  .global-search{position:static}
  .search{height:38px;padding:0 10px}
  .search input{font-size:13px}
  .search-results{
    position:fixed;left:8px;right:8px;top:64px;width:auto;max-height:70vh;overflow:auto;
  }

  .header-actions{gap:7px}
  .header-actions .primary{width:40px;padding:0;font-size:0;justify-content:center}
  .header-actions .primary svg{margin:0}
  .header-actions .icon-btn{width:38px;height:38px}
  .profile-btn{height:40px;padding:0 6px}
  .profile-btn>svg{display:none}
  .profile-btn .avatar{height:30px;width:30px;font-size:11px}

  .content{padding:18px 12px 40px}
  .title-row h1{font-size:21px}
  .title-row p{font-size:13px}
  .eyebrow{font-size:10px!important}

  .stat-grid{grid-template-columns:1fr;gap:10px}
  .stat{padding:14px;min-height:0}

  .panel-head{min-height:0;padding:15px 16px;flex-wrap:wrap;gap:10px}
  .panel-head h2{font-size:14px}
  .compose-body{padding:16px}

  /* Tablolar telefonda yatay kaydırılır; sayfa değil tablo kayar. */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:640px}

  /* Kuyruk satırı telefonda alt alta dizilir */
  .queue-stats{grid-template-columns:repeat(2,1fr)}
  .queue-search{flex-direction:column;align-items:stretch;padding:12px}
  .queue-search .secondary{width:100%}
  .mail-row{grid-template-columns:32px 1fr;gap:9px;padding:12px 14px}
  .mail-row .round{width:32px;height:32px}
  .mail-status{grid-column:2;justify-self:start;margin-top:7px}
  .mail-row small{flex-wrap:wrap}
  .mail-row small .mail-time{margin-left:0}

  /* Pencereler tam ekrana yakın açılır */
  .modal-backdrop{padding:0;align-items:flex-end}
  .modal{
    width:100%;max-height:92vh;overflow:auto;
    border-radius:16px 16px 0 0;
  }
  .modal-head{height:auto;padding:16px;gap:10px}
  .modal-head h2{font-size:16px}
  .modal-body{padding:16px}
  .modal-foot{padding:13px 16px;flex-direction:column-reverse;gap:8px}
  .modal-foot button{width:100%}

  /* Çekmece telefonda tam genişlik */
  .detail-drawer{width:100%}
  .detail-drawer>footer{flex-direction:column;gap:8px}
  .detail-drawer>footer button,.detail-drawer>footer a{width:100%;justify-content:center}

  /* Bildirim ve profil menüsü ekrana sığsın */
  .notification-panel{
    position:fixed;left:8px;right:8px;top:64px;width:auto;
  }
  .profile-wrap .user-menu{position:fixed;left:auto;right:8px;top:64px;width:min(280px,calc(100vw - 16px))}

  .form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}
  .decision-grid{grid-template-columns:1fr}
  .role-cc-row{grid-template-columns:1fr}
  .brand-grid{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------
   7) ÇOK DAR TELEFON (≤380px)
   ------------------------------------------------------------------ */
@media(max-width:380px){
  .content{padding:16px 10px 36px}
  .topbar{padding:0 10px}
  .profile-btn{padding:0 4px}
  .header-actions .primary{width:36px}
  .header-actions .icon-btn{width:36px;height:36px}
  .queue-stats{grid-template-columns:1fr 1fr}
}

/* ------------------------------------------------------------------
   8) DOKUNMATİK CİHAZLAR — vurgu efektleri yerine dokunma hedefleri
   ------------------------------------------------------------------ */
@media(hover:none){
  .mini-btn:hover,.nav-item:hover,.mail-row:hover{transform:none}
  .nav-item,.mini-btn,.btn-text,.queue-stat{min-height:40px}
  .row-actions button{min-height:36px}
}

/* ------------------------------------------------------------------
   9) YAZDIRMA — kenar çubuğu ve üst çubuk çıktıya girmez
   ------------------------------------------------------------------ */
@media print{
  .sidebar,.topbar,.header-actions,.queue-search,.queue-stats{display:none!important}
  .main{margin-left:0!important}
  .content{padding:0!important;max-width:none!important}
}

/* ------------------------------------------------------------------
   Kuyruk satırı: orta sütun sıfıra kadar daralabilmeli.
   "1fr" varsayılan olarak min-content tabanlıdır; uzun bir konu satırı
   sütunu şişirip durum rozetini kabın dışına itiyordu (1280–1440 px).
   minmax(0,1fr) bu tabanı kaldırır.
   ------------------------------------------------------------------ */
.mail-row{grid-template-columns:40px minmax(0,1fr) auto}
.mail-row>div{min-width:0}
.mail-status{max-width:100%}

/* Aynı sorun bildirim ve arama satırlarında da olmasın */
.notice-item{grid-template-columns:38px minmax(0,1fr) 6px}
.notice-item.personal{grid-template-columns:38px minmax(0,1fr) 8px}
.notice-item>div{min-width:0}
.mode-row{grid-template-columns:38px minmax(0,1fr) auto}
.activity-row{grid-template-columns:40px 8px minmax(0,1fr)}
.attention-item{grid-template-columns:3px minmax(0,1fr) auto}
.role-cc-row{grid-template-columns:210px minmax(0,1fr)}
.decision-option{grid-template-columns:38px minmax(0,1fr)}
.sidebar-foot{grid-template-columns:auto minmax(0,1fr)}
.sidebar-foot>div{min-width:0}
.sidebar-foot strong,.sidebar-foot small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------------------------------------------
   Haftalık operasyon ve lojistik takip — dar telefonlarda
   ------------------------------------------------------------------ */
@media(max-width:640px){
  /* Gün panosu telefonda tek sütuna iner: yan yana kaydırmak yerine
     alt alta okunur. Negatif sağ boşluk da kaldırılır. */
  .week-board{
    grid-template-columns:1fr;gap:10px;
    margin-right:0;overflow-x:visible;
  }
  .week-card{min-width:0}

  /* Hafta gezinme çubuğu sarar; "Bugün" düğmesi tam satır olur */
  .week-head,.weekly-head{flex-wrap:wrap;gap:10px}
  .week-nav{flex-wrap:wrap;width:100%;justify-content:flex-start}
  .week-nav>b,.week-nav>strong{flex:1 1 100%;order:-1}
  .today-btn{flex:none}

  /* Özet sayaçları ızgaraya döner, dikey çizgiler kalkar */
  .week-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;width:100%;background:var(--line)}
  .week-kpis>div{min-width:0;border-left:0;padding:11px 12px;background:#fff}

  /* Hafta filtreleri yatay kaydırılır, sayfayı taşırmaz */
  .week-filters{
    display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .week-filters::-webkit-scrollbar{display:none}
  .week-filters a,.week-filters button{flex:none;white-space:nowrap}

  /* Lojistik takip kartlarındaki uzun sayılar satırı taşırmasın */
  .logistics-row,.logistics-card{min-width:0}
  .logistics-row>div,.logistics-card>div{min-width:0}
  .amount,.logistics-amount{overflow-wrap:anywhere}
}

/* Çok dar telefonlarda sayaçlar tek sütun */
@media(max-width:380px){
  .week-kpis{grid-template-columns:1fr}
}

/* Lojistik Takip özet sayaçları: telefonda sarar, taşmaz */
@media(max-width:640px){
  .hero-metrics{
    display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
    flex:1 1 100%;width:100%;background:var(--line);margin-top:12px;
  }
  .hero-metrics>div{
    min-width:0;padding:11px 12px;border-left:0;background:#fff;text-align:left;
  }
  .hero-metrics b,.hero-metrics span{overflow-wrap:anywhere}
  .logistics-hero,.tracking-overview{flex-wrap:wrap}
  .tracking-metrics{
    display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
    width:100%;background:var(--line);margin-top:12px;
  }
  .tracking-metrics>div{min-width:0;padding:11px 12px;border-left:0;background:#fff}
}
@media(max-width:380px){
  .hero-metrics,.tracking-metrics{grid-template-columns:1fr}
}

/* Kuyruk başlığı: metin düğmenin altına sarkmasın */
.queue-panel .panel-head{align-items:flex-start;gap:12px}
.queue-panel .panel-head>div:first-child{min-width:0;flex:1 1 auto}
.queue-panel .panel-head p{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:5px 0 0;line-height:1.5;
}
@media(max-width:1400px){
  /* Dar sütunda uzun açıklama kısalır, kapsam bilgisi kalır */
  .queue-panel .panel-head p .scope-hint{display:none}
}

/* ==================================================================
   EKSİKLİK PENCERESİ
   ------------------------------------------------------------------
   Dosya eksik bilgiyle kaydedildiğinde uyarı, havale engellendiğinde
   ise "eksiklik işlemini gideriniz" yönergesi olarak açılır. Eksikler
   tek tek listelenir, altında yalnız o alanları içeren form durur.
   ================================================================== */

#modal-missing .modal{width:min(720px,100%)}

.missing-banner{
  display:flex;align-items:flex-start;gap:13px;
  margin:0 0 20px;padding:15px 16px;border-radius:12px;
  background:#fff7ea;border:1px solid #f0d9ae;
}
.missing-banner svg{flex:none;color:#d68a1c;margin-top:1px}
.missing-banner b{display:block;font-size:13.5px;color:#7d4f08;margin-bottom:5px}
.missing-banner p{margin:0;font-size:12.5px;line-height:1.65;color:#6b5a3e}

.missing-pill{
  display:inline-grid;place-items:center;
  min-width:22px;height:22px;padding:0 7px;margin-left:7px;
  border-radius:11px;background:#fceccd;color:#8a5b12;
  font-size:11px;font-weight:800;
}

/* --- Eksik listesi -------------------------------------------------- */
.missing-list{
  list-style:none;margin:0 0 22px;padding:0;
  border:1px solid #eceff3;border-radius:11px;overflow:hidden;
}
.missing-list li{
  display:grid;grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;gap:10px;
  padding:11px 14px;border-bottom:1px solid #f2f4f7;background:#fff;
}
.missing-list li:last-child{border-bottom:0}
.missing-list li:nth-child(odd){background:#fcfdfe}
.missing-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:#e2a734;box-shadow:0 0 0 3px rgba(226,167,52,.18);
}
.missing-list b{font-size:12.5px;color:#2a313a;font-weight:700;white-space:nowrap}
.missing-list em{
  font-style:normal;font-size:11.5px;color:#868e99;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* --- Düzeltme formu ------------------------------------------------- */
.missing-form{margin-bottom:18px}
.missing-form label{
  display:block;font-size:12px;font-weight:700;color:#4e5560;
}
.missing-hint{
  display:block;margin-top:3px;
  font-size:10.5px;font-weight:400;color:#8b929d;line-height:1.45;
}
.missing-form input,.missing-form select{
  display:block;width:100%;height:42px;margin-top:7px;
  border:1px solid #dfe3e8;border-radius:8px;background:#fff;
  padding:0 12px;font:inherit;font-size:13px;font-weight:400;color:#4c535e;outline:none;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.missing-form input:focus,.missing-form select:focus{
  border-color:#f09a2d;box-shadow:0 0 0 3px rgba(240,154,45,.13);
}
/* Doldurulan alan yeşile döner: ilerleme görünür olsun */
.missing-form input:not(:placeholder-shown):valid,
.missing-form select:valid:not([value=""]){border-color:#bcdccb}

.missing-amount{display:flex;gap:8px;margin-top:7px}
.missing-amount input{flex:1;margin-top:0}
.missing-amount select{width:104px;flex:none;margin-top:0}

/* --- Dosya listelerinde "eksik" rozeti ------------------------------ */
.badge.missing,.missing-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:#fff4d8;color:#8a6205;border-radius:13px;
  padding:4px 9px;font-size:10px;font-weight:800;white-space:nowrap;
}
.missing-badge svg{width:12px}
tr.is-incomplete{box-shadow:inset 3px 0 0 #e2a734}

@media(max-width:640px){
  .missing-list li{grid-template-columns:auto minmax(0,1fr);row-gap:3px}
  .missing-list em{grid-column:2}
  .missing-amount{flex-direction:column}
  .missing-amount select{width:100%}
}


/* ==================================================================
   PENCERELERİN EKRANA SIĞMASI  (premium cila)
   ------------------------------------------------------------------
   Eksiklik penceresi gibi uzun pencerelerde alt butonlar ekranın
   dışında kalabiliyordu: kullanıcı "Kaydet ve havale et" düğmesine
   ulaşamıyordu. Artık HER pencere en çok ekranın %92'si kadar yer
   kaplar, gövdesi kendi içinde kayar ve alt şerit her zaman görünür
   kalır (yapışkan). Küçük dizüstü ekranlarda da aynı davranır.
   ================================================================== */

.modal{
  display:flex;flex-direction:column;
  max-height:92vh;max-height:92dvh;
}
.modal > .modal-head{flex:none}
.modal > .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.modal > .modal-foot{flex:none}

/* Alt şerit gövdenin içindeyse kaydırırken tabana yapışır */
.modal-body > .modal-foot{
  position:sticky;bottom:-26px;z-index:3;
  margin:22px -28px -26px;
  box-shadow:0 -8px 18px -14px rgba(16,23,38,.35);
}
.modal.wide .modal-body{max-height:none}
.modal.wide .modal-body > .modal-foot{margin:24px -28px -26px}

/* Yapışkan şeridin üstündeki son öğe şeridin altında kaybolmasın */
.modal-body > .modal-foot + *{margin-bottom:0}

@media(max-width:760px){
  .modal-body > .modal-foot,
  .modal.wide .modal-body > .modal-foot{margin:18px -20px -20px;bottom:-20px}
}
@media(max-width:640px){
  .modal{max-height:92vh;max-height:92dvh}
  .modal-body > .modal-foot,
  .modal.wide .modal-body > .modal-foot{margin:16px -16px -16px;bottom:-16px}
}

/* Eksiklik penceresi uzun olur: liste kendi içinde de kayabilir */
#modal-missing .missing-list{max-height:min(280px,32vh);overflow-y:auto}


/* ==================================================================
   HAFTALIK PLAN BAŞLIĞI — ORTA BOY EKRANLAR
   ------------------------------------------------------------------
   Hafta gezinme çubuğu ile özet sayaçları aynı satırdaydı; 1152 px ve
   768 px genişliklerde sayaçlar satırı taşırıyordu. Artık çubuk sarar,
   sayaçlar kendi satırına iner ve daralan ekranda ızgaraya döner.
   ================================================================== */

@media(max-width:1280px){
  .week-control{flex-wrap:wrap;gap:14px}
  .week-kpis{flex-wrap:wrap;min-width:0;flex:1 1 100%}
  .week-kpis>div{flex:1 1 auto;min-width:96px}
  .week-kpis>div:first-child{border-left:0;padding-left:0}
}

@media(max-width:1024px){
  .week-kpis{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px;width:100%;background:var(--line);
    border:1px solid var(--line);border-radius:10px;overflow:hidden;
  }
  .week-kpis>div{
    min-width:0;border-left:0;padding:11px 12px;background:#fff;
  }
  .week-kpis span{max-width:none}
}

@media(max-width:820px){
  .week-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ==================================================================
   "N EKSİK" ROZETİ ARTIK TIKLANABİLİR
   ------------------------------------------------------------------
   Listede eksik gören kullanıcı dosyayı aramak zorunda kalmasın:
   rozete tıklayınca tamamlama penceresi açılır.
   ================================================================== */

.missing-badge[data-complete-missing]{
  border:1px solid #f0dcb2;cursor:pointer;
  font-family:inherit;line-height:1;
  transition:background .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease);
}
.missing-badge[data-complete-missing]:hover{
  background:#fdeaba;box-shadow:0 2px 8px rgba(190,131,20,.22);transform:translateY(-1px);
}
.missing-badge[data-complete-missing]:active{transform:translateY(0)}
.missing-badge[data-complete-missing]:focus-visible{
  outline:2px solid #e08f1c;outline-offset:2px;
}


/* ==================================================================
   PREMIUM CİLA — SON KAT
   ------------------------------------------------------------------
   Sistemin tamamına uygulanan ince dokunuşlar: klavyeyle gezerken
   görünen odak halkası, tablo satırlarında yumuşak vurgu, pasif
   düğmelerin dürüst görünmesi, uzun metinlerin taşmaması.
   Renk ve ölçü değişmez; yalnız algı keskinleşir.
   ================================================================== */

/* --- Klavye odağı: her yerde aynı, fareyle tıklayınca görünmez ----- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid #e8912a;
  outline-offset:2px;
  border-radius:8px;
}
:where(button, a):focus:not(:focus-visible){outline:none}

/* --- Pasif düğmeler dürüst görünsün -------------------------------- */
button:disabled,.primary:disabled,.secondary:disabled{
  opacity:.55;cursor:not-allowed;filter:grayscale(.15);box-shadow:none;transform:none!important;
}

/* --- Tablo satırlarında yumuşak vurgu ------------------------------ */
tbody tr{transition:background .14s var(--ease)}
tbody tr:hover{background:#fbfcfd}
tbody tr:hover .customer-name{color:#1d232c}

/* --- Panel başlıklarında hafif derinlik ---------------------------- */
.panel{transition:box-shadow .18s var(--ease),border-color .18s var(--ease)}
.panel:hover{border-color:#e3e7ec}

/* --- Seçim rengi kurumsal turuncu ---------------------------------- */
::selection{background:#fbe0bb;color:#463109}

/* --- Uzun müşteri/firma adları satırı kırmasın --------------------- */
.customer-name,.order-cell,.mail-row strong,.queue-result-line{overflow-wrap:anywhere}

/* --- Kaydırmada başlık çubuğu ayrışsın ----------------------------- */
.topbar{transition:box-shadow .2s var(--ease)}
.topbar.is-scrolled{box-shadow:0 6px 18px -14px rgba(16,23,38,.5)}

/* --- Hareket azaltma tercihine saygı ------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ==================================================================
   KOMUT PALETİ  (Ctrl + K)
   ------------------------------------------------------------------
   Üstten açılan, klavyeyle kullanılan hızlı erişim penceresi.
   Dosya arar, ekrana atlar, hızlı eylem çalıştırır.
   ================================================================== */

.palette-backdrop{align-items:flex-start;padding-top:min(12vh,110px)}
.modal.palette{
  width:min(680px,100%);max-height:min(72vh,620px);
  border-radius:16px;overflow:hidden;
}

/* --- Arama satırı ---------------------------------------------- */
.palette-head{
  flex:none;display:flex;align-items:center;gap:12px;
  padding:0 18px;height:64px;border-bottom:1px solid var(--line);background:#fff;
}
.palette-head > svg{color:#9aa1ac;flex:none}
.palette-head input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:15.5px;color:var(--ink);
}
.palette-head input::placeholder{color:#a2a9b4}
.palette-head kbd{flex:none}

/* --- Sonuç listesi ---------------------------------------------- */
.palette-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:8px;background:#fcfdfe;
}
.palette-group{
  margin:10px 10px 5px;font-size:10px;font-weight:800;letter-spacing:.09em;color:#98a0ab;
}
.palette-group:first-child{margin-top:4px}

.palette-row{
  display:flex;align-items:center;gap:12px;width:100%;
  border:1px solid transparent;border-radius:10px;background:transparent;
  padding:9px 11px;text-align:left;cursor:pointer;font:inherit;
  transition:background .12s var(--ease),border-color .12s var(--ease);
}
.palette-row:hover{background:#fff;border-color:#e9edf2}
.palette-row.selected{background:#fff5e8;border-color:#f3d7ae;box-shadow:0 1px 3px rgba(190,131,20,.12)}

.palette-icon{
  flex:none;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;background:#eef1f5;color:#5d6673;
}
.palette-row.selected .palette-icon{background:#fdeaca;color:#b06d0c}
.palette-icon svg{width:17px;height:17px}


.palette-text{flex:1;min-width:0;display:block}
.palette-text b{
  display:block;font-size:13px;font-weight:650;color:#242a33;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.palette-text small{
  display:block;margin-top:3px;font-size:11px;color:#858d99;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.palette-tag{
  flex:none;border-radius:11px;padding:4px 9px;
  font-size:10px;font-weight:800;white-space:nowrap;
  background:#eef1f5;color:#616a77;
}
.palette-tag.warn{background:#fff4d8;color:#8a6205}
.palette-tag.green{background:#e5f4eb;color:#2f7351}
.palette-tag.rose{background:#fae8e8;color:#a24949}
.palette-tag.violet{background:#f0e9f8;color:#6d4e92}
.palette-tag.amber{background:#fff4d8;color:#9b6b04}
.palette-tag.blue{background:#e6f3fb;color:#2673a0}

.palette-empty{padding:34px 20px;text-align:center}
.palette-empty b{display:block;font-size:13.5px;color:#39404a}
.palette-empty span{display:block;margin-top:6px;font-size:12px;color:#8b929d;line-height:1.6}

/* --- Alt bilgi şeridi -------------------------------------------- */
.palette-foot{
  flex:none;display:flex;align-items:center;gap:16px;
  padding:10px 16px;border-top:1px solid var(--line);background:#fafbfc;
  font-size:10.5px;color:#8b929d;
}
.palette-foot .palette-brand{margin-left:auto;font-weight:700;color:#a7aeb9}

/* --- Tuş rozetleri ----------------------------------------------- */
kbd{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
  border:1px solid #dde1e7;border-bottom-width:2px;border-radius:5px;background:#fff;
  font:inherit;font-size:10px;font-weight:700;color:#6b7280;line-height:1;
}
.palette-foot kbd + kbd,.search-kbd kbd + kbd{margin-left:3px}

/* Üst çubuktaki arama kutusundaki "Ctrl K" ipucu */
.search-kbd{
  display:flex;align-items:center;flex:none;margin-left:auto;cursor:pointer;opacity:.85;
}
.search-kbd:hover{opacity:1}

/* --- Kısayol yardım penceresi ------------------------------------ */
.modal.narrow{width:min(480px,100%)}
.shortcut-list{list-style:none;margin:0 0 16px;padding:0;
  border:1px solid #eceff3;border-radius:11px;overflow:hidden}
.shortcut-list li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-bottom:1px solid #f2f4f7;background:#fff;
}
.shortcut-list li:last-child{border-bottom:0}
.shortcut-list li:nth-child(odd){background:#fcfdfe}
.shortcut-list b{font-size:12.5px;font-weight:650;color:#2a313a}

@media(max-width:640px){
  .palette-backdrop{align-items:flex-end;padding:0}
  .modal.palette{width:100%;max-height:82vh;border-radius:16px 16px 0 0}
  .palette-head{height:58px;padding:0 14px}
  .palette-foot span:not(.palette-brand){display:none}
  .palette-foot .palette-brand{margin-left:0}
  /* Dokunmatik cihazda kısayol rozeti yer kaplamasın */
  .search-kbd{display:none}
}


/* ==================================================================
   DENETİM İZİ (HAREKET KAYDI)
   ------------------------------------------------------------------
   Gün gün gruplanmış, süzülebilir hareket listesi. Satırlar yalnız
   okunur: bu ekranda silme ya da düzenleme düğmesi yoktur.
   ================================================================== */

.title-actions{display:flex;align-items:center;gap:9px}
.title-actions .secondary{text-decoration:none}

/* --- Süzgeç sekmeleri -------------------------------------------- */
.activity-tabs{
  display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:3px;
  scrollbar-width:none;
}
.activity-tabs::-webkit-scrollbar{display:none}
.activity-tabs .filter{
  flex:none;text-decoration:none;border:1px solid var(--line);background:#fff;
  display:inline-flex;align-items:center;gap:7px;border-radius:9px;
  padding:9px 13px;white-space:nowrap;
}
.activity-tabs .filter.active{background:#242a33;border-color:#242a33;color:#fff}
.activity-tabs .filter b{
  background:#eef1f5;color:#5d6673;border-radius:10px;padding:1px 7px;
  font-size:11px;font-variant-numeric:tabular-nums;
}
.activity-tabs .filter.active b{background:#3c444f;color:#fff}

/* --- Süzgeç formu ------------------------------------------------
   Altı sütun tek satıra ancak geniş ekranda sığar. Son sütun (eylem
   düğmeleri) "auto" olduğu için içeriği büyüdüğünde satırı taşırır:
   dışa aktarım Excel + CSV olarak ikiye çıkınca 1280–1440 arasında
   tam bu oldu. Düğmeler artık sarmalanabilir ve şerit esner.        */
.activity-filter{
  display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(2,minmax(150px,1fr)) repeat(2,140px) auto;
  gap:12px;align-items:end;padding:16px 18px;margin-bottom:14px;
}
.activity-filter label{font-size:11px;font-weight:700;color:#5d6673;min-width:0}
.activity-filter select,
.activity-filter input[type="date"]{
  display:block;width:100%;height:40px;margin-top:6px;
  border:1px solid #dfe3e8;border-radius:9px;padding:0 10px;background:#fff;
  font:inherit;font-size:13px;color:#4c535e;outline:none;
}
.activity-filter select:focus,.activity-filter input:focus{
  border-color:#f09a2d;box-shadow:0 0 0 3px rgba(240,154,45,.14);
}
.activity-search{display:flex;align-items:center;gap:9px;
  height:40px;border:1px solid #dfe3e8;border-radius:9px;padding:0 11px;background:#fff}
.activity-search svg{color:#9aa1ac;flex:none}
.activity-search input{border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:13px}
.activity-filter-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.activity-filter-actions .secondary{text-decoration:none;display:inline-flex;align-items:center}

.activity-result{font-size:12px;color:var(--muted);margin:0 2px 12px}
.activity-result b{color:var(--ink);font-variant-numeric:tabular-nums}

/* --- Liste ------------------------------------------------------- */
.activity-panel{padding:4px 0 8px}
.activity-day{
  margin:14px 20px 6px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  color:#98a0ab;text-transform:uppercase;
}
.activity-day:first-child{margin-top:12px}

.activity-row{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:13px;
  align-items:start;padding:12px 20px;border-top:1px solid #f1f3f6;
}
.activity-row:hover{background:#fcfdfe}
.activity-row .stat-icon{width:34px;height:34px;border-radius:9px}
.activity-row .stat-icon svg{height:16px}

.activity-main{min-width:0}
.activity-main > strong{display:block;font-size:13px;font-weight:650;color:#242a33;overflow-wrap:anywhere}
.activity-main > p{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 0;font-size:11px;
}
.activity-ref{
  display:inline-flex;align-items:center;gap:4px;color:#5d6673;font-weight:700;
  background:#f2f5f8;border-radius:9px;padding:3px 8px;
}
.activity-actor{color:#7b838f;font-weight:650}
.activity-ip{
  color:#96707a;font-weight:650;background:#fbf0f2;border-radius:8px;padding:2px 7px;
  font-variant-numeric:tabular-nums;
}
.activity-detail{
  margin:6px 0 0;font-size:11.5px;color:#7b838f;line-height:1.6;overflow-wrap:anywhere;
}

.activity-time{text-align:right;flex:none}
.activity-time b{display:block;font-size:12.5px;font-variant-numeric:tabular-nums;color:#39424f}
.activity-time small{display:block;margin-top:3px;font-size:10.5px;color:#98a0ab}
.activity-time a{display:block;margin-top:5px;font-size:10.5px;font-weight:700;color:#d07a10;text-decoration:none}
.activity-time a:hover{text-decoration:underline}

/* --- Sayfalama --------------------------------------------------- */
.activity-pager{
  display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0 4px;
  font-size:12px;color:var(--muted);font-weight:650;
}
.activity-pager .secondary{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.activity-pager .secondary.disabled{opacity:.45;pointer-events:none}

.activity-note{
  display:flex;align-items:flex-start;gap:9px;margin-top:14px;line-height:1.6;
}
.activity-note svg{flex:none;color:#9aa1ac;margin-top:1px}

/* Eylem sütunu kendi satırına iner: sınır 1180'den 1440'a çekildi,
   çünkü dışa aktarım kümesi (Excel + CSV) o genişlikte sığmıyor. */
@media(max-width:1440px){
  .activity-filter{grid-template-columns:minmax(200px,1fr) minmax(150px,1fr);}
  .activity-search{grid-column:1/-1}
  .activity-filter-actions{grid-column:1/-1}
}
@media(max-width:640px){
  .activity-filter{grid-template-columns:1fr;padding:14px}
  /**
   * DENETİM İZİ SATIRI — HÜCRELER AÇIKÇA YERLEŞTİRİLİR.
   *
   * Yalnız "grid-column:2" verilen ÜÇÜNCÜ çocuk (.activity-time)
   * ızgarada (1,2) hücresini kapıyor; kendiliğinden yerleşen İKİNCİ
   * çocuk (.activity-main) ona yer bulamayıp (2,1) hücresine, yani
   * 30 piksellik dar sütuna düşüyordu. Özet ve ayrıntı metni harf
   * harf alt alta kırılıyor, satır 227 piksele çıkıyordu.
   *
   * Üç hücrenin üçü de açıkça yazılınca yerleşim tesadüfe kalmaz.
   */
  .activity-row{grid-template-columns:30px minmax(0,1fr);gap:10px;padding:12px 14px}
  .activity-row .stat-icon{grid-area:1 / 1; width:30px;height:30px}
  .activity-main{grid-area:1 / 2; min-width:0}
  .activity-time{grid-area:2 / 2;text-align:left;display:flex;align-items:center;gap:10px;margin-top:6px}
  .activity-time b,.activity-time small,.activity-time a{margin-top:0}
  .activity-day{margin-left:14px;margin-right:14px}
}


/* ==================================================================
   DOSYA EKLERİ (BELGELER)
   ------------------------------------------------------------------
   Konşimento, fatura, çeki listesi… Dosya ayrıntı çekmecesinde,
   notların hemen altında durur.
   ================================================================== */

/* --- Yükleme alanı ------------------------------------------------ */
.file-upload{margin-bottom:14px}
.file-drop{
  border:1.5px dashed #d5dae1;border-radius:12px;background:#fbfcfd;
  padding:20px 16px;text-align:center;cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.file-drop:hover{border-color:#bcc4ce;background:#f7f9fb}
.file-drop.over{border-color:#e78b1e;background:#fff7ec;border-style:solid}
.file-drop b{display:block;font-size:13px;font-weight:700;color:#39424f}
.file-drop span{display:block;margin-top:5px;font-size:11.5px;color:#868e99}
.file-drop u{color:#ce7410;text-decoration:none;font-weight:700;border-bottom:1px solid #f0cfa2}

.file-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px}
.file-fields label{font-size:11px;font-weight:700;color:#5d6673}
.file-fields select,.file-fields input{
  display:block;width:100%;height:38px;margin-top:6px;
  border:1px solid #dfe3e8;border-radius:8px;padding:0 10px;background:#fff;
  font:inherit;font-size:12.5px;color:#4c535e;outline:none;
}
.file-fields select:focus,.file-fields input:focus{
  border-color:#f09a2d;box-shadow:0 0 0 3px rgba(240,154,45,.13);
}

.file-progress{height:5px;border-radius:3px;background:#eef1f5;margin-top:10px;overflow:hidden}
.file-progress i{
  display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,#f5a337,#ed8b18);transition:width .2s var(--ease);
}

/* --- Belge listesi ------------------------------------------------ */
.file-list{display:grid;gap:8px}
.file-row{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:11px;align-items:center;
  border:1px solid #eceff3;border-radius:11px;padding:10px 12px;background:#fff;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.file-row:hover{border-color:#dfe4ea;box-shadow:0 2px 8px -4px rgba(16,23,38,.18)}
.file-row.missing{opacity:.6;border-style:dashed}

.file-icon{
  width:40px;height:40px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(150deg,#eef1f5,#e4e9ef);color:#5d6673;
  font-size:9.5px;font-weight:800;letter-spacing:.02em;
}

.file-main{min-width:0}
.file-main > strong{
  display:block;font-size:12.5px;font-weight:650;color:#242a33;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.file-main > p{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:5px 0 0;
  font-size:10.5px;color:#868e99;
}
.file-tag{
  background:#eef1f5;color:#4f5763;border-radius:9px;padding:2px 7px;
  font-size:9.5px;font-weight:800;
}
.file-note{margin:5px 0 0;font-size:11px;color:#7b838f;line-height:1.5;overflow-wrap:anywhere}
.file-note.warn{color:#a8646d}

.file-actions{display:flex;align-items:center;gap:6px;flex:none}
.file-actions .mini-btn{text-decoration:none}

@media(max-width:640px){
  .file-fields{grid-template-columns:1fr}
  .file-row{grid-template-columns:34px minmax(0,1fr)}
  .file-icon{width:34px;height:34px}
  .file-actions{grid-column:2;margin-top:6px}
}

/* Listede belge sayısı rozeti */
.file-badge{
  display:inline-flex;align-items:center;gap:4px;margin-left:7px;
  background:#eef3f8;color:#456;border-radius:11px;padding:3px 8px;
  font-size:10px;font-weight:800;white-space:nowrap;vertical-align:1px;
}
.file-badge svg{width:11px;height:11px}


/* ==================================================================
   RAPORLAR VE ANALİZ
   ------------------------------------------------------------------
   Aralık seçimi, özet sayaçları, ay ay çubuk grafiği, mod dağılımı,
   süre ortalamaları ve kırılım tabloları. Yazdırmaya hazırdır.
   ================================================================== */

.report-ranges{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;
}
.report-ranges .filter{
  text-decoration:none;border:1px solid var(--line);background:#fff;border-radius:9px;
  padding:9px 13px;white-space:nowrap;
}
.report-ranges .filter.active{background:#242a33;border-color:#242a33;color:#fff}
.report-custom{
  display:flex;align-items:center;gap:7px;margin-left:auto;
  border:1px solid var(--line);background:#fff;border-radius:9px;padding:5px 8px;
}
.report-custom input[type="date"]{
  border:0;outline:0;background:transparent;font:inherit;font-size:12px;color:#4c535e;
}
.report-custom span{color:#a3aab4;font-size:12px}
.report-custom .secondary{height:32px;padding:0 12px;font-size:12px}

/* --- Özet sayaçları ---------------------------------------------- */
.report-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.report-kpi{
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 18px;
  box-shadow:0 2px 5px rgba(31,41,55,.03);position:relative;overflow:hidden;
}
.report-kpi::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,#f5a337,#ed8b18);
}
.report-kpi.warn::before{background:linear-gradient(180deg,#e06767,#c14444)}
.report-kpi small{
  display:block;font-size:9.5px;font-weight:800;letter-spacing:.12em;color:#98a0ab;
}
.report-kpi b{
  display:block;margin-top:8px;font-size:26px;font-weight:800;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.report-kpi b.amount{font-size:19px;letter-spacing:-.02em}
.report-kpi b i{font-style:normal;font-size:15px;color:#98a0ab;margin-left:2px}
.report-kpi span{display:block;margin-top:5px;font-size:11.5px;color:var(--muted)}

.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}

/**
 * AY AY ÇUBUKLARI KALDIRILDI.
 *
 * Yatay CSS çubukları (.report-bars / .report-bar*) yerini eksenli SVG
 * sütun grafiğine ve altındaki sayı tablosuna bıraktı
 * (bkz. views/partials/grafik.php). Kuralları burada bırakmak, bir daha
 * kimsenin çizmeyeceği bir bileşeni koyu temada da üretmek olurdu.
 */

/* --- Mod dağılımı ------------------------------------------------ */
.report-modes{padding:8px 0 12px}
.report-mode{
  display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:11px 20px;border-top:1px solid #f1f3f6;
}
.report-mode:first-child{border-top:0}
.report-mode strong{display:block;font-size:12.5px;font-weight:650}
.report-mode small{display:block;margin-top:3px;font-size:10.5px;color:#98a0ab}
.report-mode-value{text-align:right}
.report-mode-value b{display:block;font-size:15px;font-variant-numeric:tabular-nums}
.report-mode-value span{display:block;margin-top:2px;font-size:10.5px;color:#98a0ab;font-weight:700}

/* --- Süreler ----------------------------------------------------- */
.report-durations{margin-bottom:18px}
.report-duration-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
}
.report-duration-grid > div{background:#fff;padding:16px 20px}
.report-duration-grid small{
  display:block;font-size:9.5px;font-weight:800;letter-spacing:.11em;color:#98a0ab;
}
.report-duration-grid b{
  display:block;margin-top:7px;font-size:20px;font-weight:750;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.report-duration-grid span{display:block;margin-top:4px;font-size:11px;color:var(--muted)}
.report-duration-grid > div.warn b{color:#b04438}

/* --- Kırılım tabloları ------------------------------------------- */
.report-table{width:100%;min-width:0}
.report-table th{
  text-align:left;font-size:9.5px;letter-spacing:.11em;color:#98a0ab;font-weight:800;
  background:#fafbfc;padding:10px 18px;
}
.report-table th:not(:first-child),.report-table td.num{text-align:right}
.report-table td{padding:11px 18px;border-top:1px solid #f1f3f6;font-size:12px;white-space:normal}
.report-table td strong{display:block;font-size:12.5px;font-weight:650;overflow-wrap:anywhere}
.report-table td.num{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.report-table td.amount{font-weight:650;color:#5d6673;font-size:11.5px}
.report-share{display:block;margin-top:6px;height:4px;border-radius:2px;background:#f1f3f6;overflow:hidden}
.report-share i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#f7b05c,#ed8b18)}

.report-note{display:flex;align-items:flex-start;gap:9px;line-height:1.6}
.report-note svg{flex:none;color:#9aa1ac;margin-top:1px}

@media(max-width:1100px){
  .report-kpis{grid-template-columns:1fr 1fr}
  .report-grid{grid-template-columns:1fr}
  .report-duration-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .report-kpis{grid-template-columns:1fr}
  .report-duration-grid{grid-template-columns:1fr}
  .report-custom{margin-left:0;width:100%;flex-wrap:wrap}
  .report-table th,.report-table td{padding:9px 14px}
}

/* Yazdırmada aralık düğmeleri ve dışa aktarım çıkmaz */
@media print{
  .report-ranges,.title-actions{display:none!important}
  .report-grid{grid-template-columns:1fr 1fr}
  .panel{break-inside:avoid}
}

.report-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.report-actions .secondary{text-decoration:none;height:36px;padding:0 13px;font-size:12.5px}
/* 320 px'lik telefonda üç düğme tek satıra sığmıyor ve sayfa yana taşıyordu:
   düğmeler sarmalanır, her biri satırın kalanını paylaşır. */
@media(max-width:430px){
  .report-actions > .secondary,
  .report-actions > .primary{flex:1 1 132px;min-width:0;justify-content:center}
}
.report-period{margin:0 2px 16px;font-size:12.5px;color:var(--muted)}
.report-period b{color:var(--ink);font-weight:700}
.title-slot:empty{display:none}

/* Günlük operasyon özeti kartı */
.digest-panel .panel-head .badge{flex:none}
.digest-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#digest-result{margin-top:4px}
#digest-result.is-error{background:#fff0f0;border-color:#f0d5d5;color:#9c4141}


/* ==================================================================
   TOPLU HAVALE
   ------------------------------------------------------------------
   Kuyruktan birden çok dosya seçilip aynı kullanıcıya verilir.
   ================================================================== */

.bulk-all{
  display:flex;align-items:center;gap:8px;margin:12px 20px 4px;
  font-size:11.5px;font-weight:700;color:#6b7280;cursor:pointer;
}
.bulk-all input{width:15px;height:15px;accent-color:#e78b1e;cursor:pointer}

.bulk-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:12px 20px 0;padding:11px 14px;border-radius:11px;
  background:linear-gradient(135deg,#fff6ea,#fdefdc);border:1px solid #f0d7ac;
}
.bulk-bar > b{font-size:12.5px;color:#7d4f08;white-space:nowrap}
.bulk-refs{
  flex:1;min-width:0;font-size:11px;color:#9a7433;font-weight:650;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bulk-bar .secondary,.bulk-bar .primary{height:34px;padding:0 13px;font-size:12px;flex:none}

.assignment-line{display:flex;align-items:stretch;gap:0}
.assignment-line > .assignment-file{flex:1;min-width:0}
.assignment-pick{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:36px;cursor:pointer;
}
.assignment-pick input{width:16px;height:16px;accent-color:#e78b1e;cursor:pointer}

.assignment-file.bulk-failed{
  box-shadow:inset 3px 0 0 #c9524a;background:#fdf5f4;
}

@media(max-width:640px){
  .bulk-bar{margin:12px 14px 0}
  .bulk-all{margin-left:14px;margin-right:14px}
  .bulk-refs{flex:1 1 100%;order:3}
  .assignment-pick{width:30px}
}


/* ==================================================================
   MÜŞTERİ TAKİP BAĞLANTISI
   ------------------------------------------------------------------
   Adres yalnız üretildiği anda görünür; sonradan yalnız künyesi
   (geçerlilik, kaç kez açıldı, kim verdi) gösterilir.
   ================================================================== */

.share-box{margin-top:12px}
.share-empty{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  border:1px dashed #d8dde4;border-radius:12px;padding:15px 16px;background:#fbfcfd;
}
.share-days label{font-size:11px;font-weight:700;color:#5d6673}
.share-days select{
  display:block;margin-top:6px;height:38px;min-width:130px;
  border:1px solid #dfe3e8;border-radius:8px;padding:0 10px;background:#fff;
  font:inherit;font-size:12.5px;color:#4c535e;outline:none;
}
.share-empty .primary{height:38px;padding:0 15px;font-size:12.5px}

.share-live{
  border:1px solid #e6ebf1;border-radius:12px;padding:15px 16px;background:#fff;
}
.share-live > b{display:block;font-size:13px;font-weight:750;color:#2a313a;margin-bottom:11px}

.share-url{display:flex;gap:7px;align-items:stretch}
.share-url input{
  flex:1;min-width:0;height:38px;border:1px solid #dfe3e8;border-radius:8px;
  padding:0 11px;background:#f8fafc;font:inherit;font-size:12px;color:#3c4553;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;outline:none;
}
.share-url input:focus{border-color:#f09a2d;box-shadow:0 0 0 3px rgba(240,154,45,.13)}
.share-url .mini-btn{flex:none;height:38px}

.share-warn{
  margin:10px 0 0;padding:10px 12px;border-radius:9px;
  background:#fff7ea;border:1px solid #f0d9ae;
  font-size:11.5px;line-height:1.6;color:#7d5a1a;
}

.share-meta{margin:0 0 11px;display:grid;gap:1px;background:#eff2f6;
  border:1px solid #eff2f6;border-radius:9px;overflow:hidden}
.share-meta > div{display:flex;justify-content:space-between;gap:12px;
  background:#fff;padding:9px 12px;font-size:12px}
.share-meta dt{color:#868e99;margin:0;font-weight:650}
.share-meta dd{margin:0;font-weight:700;color:#3c4553;text-align:right;overflow-wrap:anywhere}

.share-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.share-actions .mini-btn{text-decoration:none}

@media(max-width:640px){
  .share-empty{flex-direction:column;align-items:stretch}
  .share-empty .primary{width:100%}
  .share-url{flex-direction:column}
  .share-url .mini-btn{width:100%;justify-content:center}
}

/* ==================================================================
   DOSYA ZAMAN ÇİZELGESİ (ÇEKMECE)
   ------------------------------------------------------------------
   Kilometre taşları, havaleler, notlar, belgeler ve denetim izi tek
   dikey akışta. Sol kenarda ince bir çizgi, üzerinde renkli noktalar:
   dosyanın hikâyesi tek bakışta okunur.
   ================================================================== */

.timeline-section h3{display:flex;align-items:center;gap:9px}

.tl-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.tl-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;cursor:pointer;
  border:1px solid #e4e8ee;background:#fff;color:#6b7482;
  font:inherit;font-size:12px;font-weight:650;line-height:1;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.tl-chip:hover{background:#f6f8fa;color:#3c4553}
.tl-chip i{
  font-style:normal;font-size:10.5px;font-weight:700;
  padding:2px 6px;border-radius:999px;background:#f1f4f8;color:#7b8492;
}
.tl-chip.on{background:#1d242f;border-color:#1d242f;color:#fff}
.tl-chip.on i{background:rgba(255,255,255,.18);color:#fff}

.tl-stream{position:relative}

/* Akışın omurgası: noktaların tam ortasından geçen dikey çizgi */
.tl-stream::before{
  content:"";position:absolute;left:13px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,#e7ebf1,#eef1f5 70%,transparent);
  border-radius:2px;
}

.tl-day{
  position:relative;z-index:1;margin:16px 0 9px;padding:4px 10px 4px 38px;
  font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  color:#8b93a0;
}
.tl-day:first-child{margin-top:0}

.tl-item{
  position:relative;display:flex;gap:12px;padding:0 0 15px 0;
}
.tl-item:last-child{padding-bottom:2px}

.tl-dot{
  position:relative;z-index:1;flex:0 0 28px;height:28px;
  display:grid;place-items:center;border-radius:50%;
  background:#fff;border:1.5px solid #e2e7ee;color:#7b8492;
  box-shadow:0 1px 3px rgba(29,36,47,.06);
}
.tl-dot svg{width:14px;height:14px}

.tl-item.tone-green  .tl-dot{border-color:#bfe3cd;background:#f2fbf5;color:#2f8a56}
.tl-item.tone-blue   .tl-dot{border-color:#c6dcf3;background:#f3f8fd;color:#2c6cb0}
.tl-item.tone-violet .tl-dot{border-color:#d6cdf0;background:#f7f5fd;color:#6a55b8}
.tl-item.tone-amber  .tl-dot{border-color:#f0dcb0;background:#fffaf0;color:#a97b18}
.tl-item.tone-rose   .tl-dot{border-color:#f2c9c6;background:#fdf5f4;color:#b35a52}

.tl-body{
  flex:1 1 auto;min-width:0;
  border:1px solid #edf0f4;border-radius:11px;background:#fff;
  padding:9px 12px 8px;
}
.tl-item.kind-milestone .tl-body{background:#fcfdfe;border-color:#e4eaf1}
.tl-item.kind-note .tl-body{background:#fbfcfe}
.tl-item.kind-system .tl-body{background:#fafbfc;border-style:dashed}
.tl-item.kind-log .tl-body{background:#fcfcfd}

.tl-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tl-head strong{font-size:13px;font-weight:700;color:#28303c;letter-spacing:-.01em}
.tl-head time{flex:0 0 auto;font-size:11px;color:#98a0ac;white-space:nowrap}

.tl-detail{
  margin:5px 0 0;font-size:12.5px;line-height:1.65;color:#4b5462;
  overflow-wrap:anywhere;
}
.tl-meta{margin:4px 0 0;font-size:11.5px;line-height:1.6;color:#8b93a0;overflow-wrap:anywhere}

.tl-foot{
  margin:7px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11.5px;color:#8b93a0;
}
.tl-actor{
  display:inline-flex;align-items:center;gap:5px;font-weight:650;color:#6b7482;
}
.tl-actor::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#c7cdd6;
}
.tl-foot:empty{display:none}
.tl-foot .mini-btn{text-decoration:none;padding:3px 9px;font-size:11px}

@media(max-width:640px){
  .tl-head{flex-direction:column;gap:2px}
  .tl-head time{align-self:flex-start}
  .tl-day{padding-left:34px}
}

/* ==================================================================
   MASAM — KİŞİSEL İŞ LİSTESİ (KONTROL MERKEZİ)
   ------------------------------------------------------------------
   Ekranın en üstündeki sayaçlar ekibi anlatır; bu bölüm kullanıcının
   kendi işini. Her kutu bir eylemdir ve tıklanabilir.
   ================================================================== */

.desk{padding:20px 22px 22px;margin-bottom:18px}

.desk-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:16px;
}
.desk-head h2{margin:0;font-size:18px;letter-spacing:-.02em;color:#1d242f}
.desk-head p{margin:4px 0 0;font-size:13px;color:#6b7482}
.desk-head p b{color:#28303c;font-weight:750}

.desk-stamp{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:6px 12px;border-radius:999px;background:#f5f7fa;border:1px solid #eaeef3;
  font-size:11px;font-weight:700;letter-spacing:.04em;color:#79818e;
}
.desk-stamp svg{width:15px;height:15px;color:#9aa2ae}

.desk-empty{
  display:flex;align-items:center;gap:13px;padding:18px 20px;
  border:1px dashed #d9e5dd;border-radius:14px;background:#f6fbf8;
}
.desk-empty svg{color:#3f9367;flex:0 0 auto}
.desk-empty strong{display:block;font-size:14px;color:#28303c}
.desk-empty small{display:block;margin-top:2px;font-size:12.5px;color:#6b7482}

.desk-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
}

.desk-card{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 15px 13px;border-radius:14px;text-decoration:none;
  border:1px solid #e9edf2;background:#fff;color:inherit;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.desk-card:hover{
  transform:translateY(-2px);border-color:#dbe2ea;
  box-shadow:0 8px 22px rgba(29,36,47,.08);
}

.desk-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.desk-icon{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:#f1f4f8;color:#6b7482;
}
.desk-card-head b{font-size:22px;font-weight:780;letter-spacing:-.03em;color:#1d242f;line-height:1}

.desk-card > strong{font-size:13.5px;font-weight:700;color:#28303c;letter-spacing:-.01em}
.desk-card > small{font-size:11.5px;line-height:1.55;color:#8b93a0}

.desk-card.tone-rose   .desk-icon{background:#fdf2f1;color:#b3574f}
.desk-card.tone-amber  .desk-icon{background:#fff8ec;color:#a97b18}
.desk-card.tone-blue   .desk-icon{background:#f0f6fd;color:#2c6cb0}
.desk-card.tone-violet .desk-icon{background:#f5f2fd;color:#6a55b8}
.desk-card.tone-rose:hover  {border-color:#f0cdc9}
.desk-card.tone-amber:hover {border-color:#f0dfb8}
.desk-card.tone-blue:hover  {border-color:#c9dcf1}
.desk-card.tone-violet:hover{border-color:#d7cef0}

.desk-preview{list-style:none;margin:10px 0 0;padding:9px 0 0;border-top:1px solid #f1f4f7}
.desk-preview li{
  display:grid;grid-template-columns:auto 1fr;gap:2px 8px;
  padding:4px 0;font-size:11.5px;
}
.desk-preview li + li{border-top:1px dashed #f3f5f8}
.desk-preview i{
  font-style:normal;font-weight:750;color:#4b5462;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.desk-preview span{
  color:#6b7482;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.desk-preview em{grid-column:1 / -1;font-style:normal;font-size:10.5px;color:#9aa2ae}

.desk-more{margin-top:8px;font-size:11px;font-weight:700;color:#8b93a0}

@media(max-width:640px){
  .desk{padding:16px}
  .desk-grid{grid-template-columns:1fr}
  .desk-stamp{font-size:10px;padding:5px 10px}
}

/* ==================================================================
   14 GÜNLÜK İŞ YÜKÜ EĞİLİMİ
   ================================================================== */

/**
 * PANEL BAŞLIĞINDAKİ LEJANT KALDIRILDI (.trend-legend).
 *
 * Grafiğin kendi lejantı var; ikisi aynı anda durunca aynı bilgi iki
 * kez yazılıyor, üstelik buradaki renkler grafiğinkilerle de
 * tutmuyordu (bu kutucuklar eski palette kalmıştı). Kimliği taşıyan
 * lejant, rengi gösteren şeyin YANINDA durmalıdır.
 */

.trend-totals{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:#eef1f5;border:1px solid #eef1f5;border-radius:12px;
  overflow:hidden;margin:2px 0 16px;
}
.trend-totals > div{background:#fff;padding:11px 13px}
.trend-totals small{
  display:block;font-size:10px;font-weight:750;letter-spacing:.07em;color:#9aa2ae;
}
.trend-totals strong{
  display:block;margin-top:3px;font-size:22px;font-weight:780;
  letter-spacing:-.03em;color:#1d242f;line-height:1.1;
}
.trend-totals strong.warn{color:#b3814f}
.trend-totals em{
  display:inline-flex;align-items:center;gap:4px;margin-top:4px;
  font-style:normal;font-size:11px;font-weight:650;color:#8b93a0;
}
.trend-totals em svg{width:13px;height:13px}
.trend-totals em.up{color:#3f9367}
.trend-totals em.down{color:#b3574f}
.trend-totals em.down svg{transform:scaleY(-1)}

/**
 * GÜN ÇUBUKLARI KALDIRILDI.
 *
 * 14 günlük iş yükü artık SVG sütun grafiğidir (eksenli, sıfır çizgili
 * ve yazdırılabilir). Toplam kutuları (.trend-totals) ve lejant
 * yerinde durur; yalnız çubukların kendisi grafiğe taşındı.
 */

@media(max-width:760px){
  .trend-totals strong{font-size:19px}
}

/* ==================================================================
   TEMA DÜĞMESİ
   Aydınlıkta ay, karanlıkta güneş görünür: düğme "neye geçeceğini"
   değil "şu an ne olduğunu" değil, TIKLAYINCA NE OLACAĞINI anlatır.
   ================================================================== */

.theme-btn{position:relative}
.theme-btn .theme-sun,
.theme-btn .theme-moon{
  display:grid;place-items:center;
  transition:opacity .18s ease,transform .25s ease;
}
.theme-btn .theme-sun{position:absolute;inset:0;opacity:0;transform:rotate(-70deg) scale(.6)}
.theme-btn .theme-moon{opacity:1;transform:none}

:root[data-theme="dark"] .theme-btn .theme-sun{opacity:1;transform:none}
:root[data-theme="dark"] .theme-btn .theme-moon{opacity:0;transform:rotate(70deg) scale(.6)}

/* Üç şıklı tema menüsü: düğmenin altına açılır */
.tema-sec{position:relative}
.tema-menu{position:absolute;top:44px;right:0;z-index:90;min-width:168px;padding:5px;
  background:#fff;border:1px solid #dde2e8;border-radius:11px;box-shadow:0 16px 42px #171b2426}
.tema-menu button{display:flex;align-items:center;gap:9px;width:100%;
  border:0;background:transparent;padding:8px 10px;border-radius:8px;
  font-size:12px;color:#39414f;cursor:pointer;text-align:left}
.tema-menu button:hover{background:#f5f6f8}
.tema-menu button svg{width:15px;color:#8b929d}
.tema-menu button.secili{background:#fff6ea;color:#a3670d;font-weight:700}
.tema-menu button.secili svg{color:#dd9a17}

/* ==================================================================
   İKİ ADIMLI DOĞRULAMA EKRANI
   ------------------------------------------------------------------
   Giriş ekranının kardeşi: aynı koyu zemin, aynı beyaz kart — ama tek
   sütun. Kullanıcı "başka bir siteye mi düştüm?" diye tereddüt etmesin.
   ================================================================== */

.login-shell.tek{grid-template-columns:1fr;max-width:460px}
.login-shell.tek .login-card{padding:36px 36px 40px}

.dogrulama-marka{margin-bottom:22px}
.dogrulama-marka img{height:30px;width:auto;object-fit:contain}
.dogrulama-marka .brand-wordmark{font-size:17px;font-weight:800;letter-spacing:-.01em;color:#1d242f}
.dogrulama-marka .brand-wordmark em{font-style:normal;color:var(--orange)}

.dogrulama-aciklama{
  margin:2px 0 20px;font-size:13.5px;line-height:1.7;color:#6b7482;
}
.dogrulama-aciklama b{color:#28303c;font-weight:700}

/* Kod alanı: büyük, aralıklı, tek bakışta okunur */
.kod-girdi{
  width:100%;padding:16px 14px;border-radius:12px;
  border:1px solid #dfe4ea;background:#fbfcfd;color:#1d242f;
  font-family:Consolas,"Courier New",monospace;
  font-size:30px;line-height:1.2;font-weight:700;
  letter-spacing:.42em;text-indent:.42em;text-align:center;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.kod-girdi:focus{
  outline:0;border-color:var(--orange);background:#fff;
  box-shadow:0 0 0 3px rgba(237,139,24,.16);
}
.kod-girdi::placeholder{color:#c3cad3;letter-spacing:.35em}

.guven-kutu{
  display:flex;gap:11px;align-items:flex-start;margin:6px 0 18px;
  padding:12px 13px;border-radius:12px;
  border:1px solid #e6eaef;background:#fbfcfd;cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}
.guven-kutu:hover{border-color:#d9e0e8;background:#f8fafc}
.guven-kutu input{margin-top:2px;width:16px;height:16px;accent-color:#ed8b18;flex:0 0 auto}
.guven-kutu b{display:block;font-size:13px;color:#28303c;font-weight:700}
.guven-kutu small{display:block;margin-top:3px;font-size:11.5px;line-height:1.6;color:#6b7482}

.dogrulama-alt{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:16px 0 0;
}
.link-btn{
  border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:650;color:#c47a12;
  text-decoration:underline;text-underline-offset:3px;
}
.link-btn:hover{color:#a9660b}
.link-btn.sessiz{color:#8b93a0;text-decoration:none}
.link-btn.sessiz:hover{color:#5c6472;text-decoration:underline}

@media(max-width:520px){
  .login-shell.tek .login-card{padding:30px 22px}
  .kod-girdi{font-size:24px;letter-spacing:.3em;text-indent:.3em}
  .dogrulama-alt{flex-direction:column;gap:9px}
}

/* ==================================================================
   HESAP GÜVENLİĞİ (HESABIM)
   İki adımlı doğrulama, güvenilir cihazlar ve açık oturumlar.
   ================================================================== */

.guvenlik{grid-column:1 / -1}
.guvenlik-govde{padding:18px 20px 20px;display:grid;gap:16px}

.guvenlik-satir{
  display:flex;align-items:flex-start;gap:13px;
  padding:14px 15px;border:1px solid #e9edf2;border-radius:13px;background:#fcfdfe;
}
.guvenlik-ikon{
  flex:0 0 36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:#f1f4f8;color:#8b93a0;
}
.guvenlik-ikon.on{background:#effaf3;color:#2f8a56}
.guvenlik-metin{flex:1 1 auto;min-width:0}
.guvenlik-metin b{display:block;font-size:13.5px;color:#28303c;font-weight:700}
.guvenlik-metin small{display:block;margin-top:4px;font-size:12px;line-height:1.65;color:#6b7482}
.guvenlik-metin small b{display:inline;font-size:12px;color:#a9761d}

/* Aç/kapat anahtarı */
.switch{position:relative;flex:0 0 auto;display:inline-block;width:44px;height:25px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch span{
  position:absolute;inset:0;border-radius:999px;background:#d7dce3;
  transition:background .18s ease;
}
.switch span::after{
  content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(29,36,47,.28);
  transition:transform .18s ease;
}
.switch input:checked + span{background:#2f8a56}
.switch input:checked + span::after{transform:translateX(19px)}
.switch input:focus-visible + span{box-shadow:0 0 0 3px rgba(237,139,24,.28)}

.guvenlik-blok{
  border:1px solid #edf0f4;border-radius:13px;overflow:hidden;background:#fff;
}
.guvenlik-blok-bas{padding:12px 15px;border-bottom:1px solid #f1f4f7;background:#fbfcfd}
.guvenlik-blok-bas b{display:block;font-size:13px;color:#28303c;font-weight:700}
.guvenlik-blok-bas small{display:block;margin-top:2px;font-size:11.5px;color:#8b93a0}
.guvenlik-blok .form-note{margin:0;padding:13px 15px}

.guvenlik-liste{list-style:none;margin:0;padding:0}
.guvenlik-liste li{
  display:flex;align-items:center;gap:12px;
  padding:11px 15px;border-top:1px solid #f4f6f9;
}
.guvenlik-liste li:first-child{border-top:0}
.guvenlik-liste li.suanki{background:#fbfcfe}
.guvenlik-liste li > div{flex:1 1 auto;min-width:0}
.guvenlik-liste b{display:block;font-size:12.5px;color:#3c4553;font-weight:650}
.guvenlik-liste b i{font-style:normal;color:#2f8a56;font-weight:700}
.guvenlik-liste small{
  display:block;margin-top:3px;font-size:11px;color:#8b93a0;overflow-wrap:anywhere;
}
.guvenlik-eylem{padding:12px 15px;border-top:1px solid #f4f6f9;background:#fbfcfd}

@media(max-width:640px){
  .guvenlik-satir{flex-wrap:wrap}
  .switch{margin-left:49px}
  .guvenlik-liste li{flex-direction:column;align-items:stretch;gap:8px}
  .guvenlik-liste .mini-btn{align-self:flex-start}
}

/* ==================================================================
   POLİTİKA SEÇENEK LİSTESİ (radyo kartları)
   ================================================================== */

.policy-list{display:grid;gap:8px;margin-bottom:4px}
.policy-option{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  padding:12px 13px;border:1px solid #e6eaef;border-radius:12px;background:#fff;
  transition:border-color .16s ease,background .16s ease;
}
.policy-option:hover{border-color:#d7dee7;background:#fcfdfe}
.policy-option.on{border-color:#e6b169;background:#fffaf2}
.policy-option input{margin-top:3px;width:16px;height:16px;accent-color:#ed8b18;flex:0 0 auto}
.policy-option b{display:block;font-size:13px;color:#28303c;font-weight:700}
.policy-option small{display:block;margin-top:3px;font-size:11.5px;line-height:1.6;color:#6b7482}

/* ==================================================================
   GERÇEKLEŞEN YÜK ÖLÇÜSÜ
   ------------------------------------------------------------------
   Evrak kapandıktan sonra ekranda plan değil, tartıdan gelen gerçek
   rakam görünür. Plan rakamı altında küçük punto ile referans kalır.
   ================================================================== */

.olcu-rozet{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
  background:#effaf3;color:#2f8a56;border:1px solid #cdeadb;
  font-style:normal;font-size:8.5px;font-weight:750;letter-spacing:.05em;
  text-transform:uppercase;vertical-align:middle;white-space:nowrap;
}
/* Gerçek ölçü satırı uzundur: bir tık küçük punto ile tek satıra sığar */
.olcu-gercek{
  display:block;font-size:12.5px;font-weight:700;line-height:1.5;
  color:#28303c;letter-spacing:-.01em;
}
.olcu-plan{
  display:block;margin-top:4px;font-size:11px;font-weight:500;color:#8b93a0;line-height:1.5;
}

/* ==================================================================
   PLAN İLE GERÇEKLEŞEN (RAPORLAR)
   ------------------------------------------------------------------
   Süre analizi ızgarasıyla aynı dili konuşur; "gerçekleşen net" sütunu
   vurgulanır, çünkü fatura ve gümrük o rakama bakar.
   ================================================================== */

.report-actual{margin-top:18px}
.report-actual-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
}
.report-actual-grid > div{background:#fff;padding:16px 20px}
.report-actual-grid small{
  display:block;font-size:9.5px;font-weight:800;letter-spacing:.11em;color:#98a0ab;
}
.report-actual-grid b{
  display:block;margin-top:7px;font-size:20px;font-weight:750;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.report-actual-grid span{display:block;margin-top:4px;font-size:11px;color:var(--muted)}
.report-actual-grid > div.vurgu{background:#fbfdfc;box-shadow:inset 3px 0 0 #4fae82}
.report-actual-grid > div.vurgu b{color:#2f7351}

@media(max-width:900px){ .report-actual-grid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .report-actual-grid{grid-template-columns:1fr} }

/* ==================================================================
   KAPANIŞ PENCERESİ — CANLI TOPLAM VE PLAN SAPMASI
   ------------------------------------------------------------------
   Tartılar girildikçe toplanır ve plan miktarıyla karşılaştırılır.
   Yanlış basılan bir hane kaydedilmeden önce burada görünür.
   ================================================================== */

.kapanis-toplam{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  margin:14px 0 4px;background:#e9edf3;border:1px solid #e9edf3;border-radius:12px;overflow:hidden;
}
.kapanis-toplam > div{background:#fff;padding:12px 14px}
.kapanis-toplam small{
  display:block;font-size:9.5px;font-weight:800;letter-spacing:.09em;color:#98a0ab;
}
.kapanis-toplam b{
  display:block;margin-top:6px;font-size:16px;font-weight:750;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:#28303c;
}
.kapanis-toplam span{display:block;margin-top:3px;font-size:10.5px;color:#8b93a0}

.kapanis-toplam .sapma.iyi b{color:#2f8a56}
.kapanis-toplam .sapma.dikkat b{color:#a9761d}
.kapanis-toplam .sapma.kotu{background:#fdf5f4}
.kapanis-toplam .sapma.kotu b{color:#b3574f}

@media(max-width:720px){
  .kapanis-toplam{grid-template-columns:1fr 1fr}
}

/* Hatalı deneme uyarısı — giriş geçmişi satırı */
.guvenlik-liste li.uyari{background:#fffaf2}
.guvenlik-liste li.uyari b{color:#a9761d}

/* ==================================================================
   TEK SAYFA YÜKLEME FORMU
   Üç adımlı sihirbaz kaldırıldı; bölümler tek ekranda başlık oldu.
   ================================================================== */
.modal.xl{width:min(1140px,100%)}
.modal.xl .modal-body{max-height:calc(92vh - 88px);overflow:auto}
.modal.xl .modal-foot{margin:24px -28px -26px}
.modal.xl .form-grid{grid-template-columns:repeat(3,1fr)}
.modal.xl .form-grid .full{grid-column:1/-1}

/* Bölüm başlığı: adımın yerini alan ayırıcı */
.form-section{margin:26px 0 0}
.form-section:first-child{margin-top:4px}
.form-section-head{
  display:flex;align-items:center;gap:9px;
  padding-bottom:9px;border-bottom:1px solid var(--line);
}
.form-section-head svg{color:#e08a17;flex:none}
.form-section-head b{font-size:13px;letter-spacing:-.01em;color:#2c333e}
.form-section-head small{font-size:11.5px;color:#89909c;margin-left:auto;text-align:right}

@media(max-width:1080px){
  .modal.xl .form-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .modal.xl .form-grid{grid-template-columns:1fr}
  .modal.xl .modal-foot{margin:20px -20px -20px}
  .form-section-head small{display:none}
}

/* ==================================================================
   YÜKLEME YERLERİ EKRANI
   ================================================================== */
.places-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:18px;align-items:start}
.places-panel .panel-head .primary{height:38px;padding:0 14px;font-size:12.5px}

.places-table{min-width:640px}
.places-table td{white-space:normal;vertical-align:top}
.places-table td small{display:block;font-size:11px;color:#858c97;margin-top:4px;font-weight:400}
.places-table td small.place-note{display:flex;align-items:center;gap:5px;color:#a0791f}
.places-table td.num{text-align:right;white-space:nowrap}
.places-table td.num a{color:#d07710;font-weight:750;text-decoration:none}
.places-table td.num a:hover{text-decoration:underline}
.places-table td.num .muted{color:#a9b0ba}
.places-table tr.passive td strong{color:#8b929d}
.places-table tr.passive{background:#fbfcfd}
.places-table .row-actions{text-align:right;white-space:nowrap}
.places-table .row-actions .btn-icon+.btn-icon{margin-left:4px}

/* =====================================================================
   MÜŞTERİLER & NAKLİYECİLER (cari kartları)
   İki liste tek ekranda sekmelerle durur; tablo biçimi Yükleme Yerleri
   ekranıyla ortaktır, buradaki eklemeler yalnız sekmeler ve karta özel
   satır altı bilgileridir.
   ===================================================================== */
.cari-sekmeler{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.cari-sekme{
  display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;
  border:1px solid var(--cizgi,#e3e7ec);border-radius:10px;background:var(--yuzey,#fff);
  font:inherit;font-size:13px;font-weight:700;color:#5b636f;cursor:pointer;
}
.cari-sekme svg{flex:none;color:#9aa1ae}
.cari-sekme:hover{border-color:#d3d9e0;color:#2b313c}
.cari-sekme i{
  font-style:normal;min-width:22px;height:20px;padding:0 6px;border-radius:20px;
  background:#f0f2f5;color:#6b7280;font-size:11px;font-weight:750;
  display:inline-flex;align-items:center;justify-content:center;
}
.cari-sekme.etkin{background:#1e222a;border-color:#1e222a;color:#fff}
.cari-sekme.etkin svg{color:#ed8b18}
.cari-sekme.etkin i{background:#ffffff26;color:#fff}

/* Ödeme koşulu ve ipucu satırları */
.places-table td small.cari-odeme{display:flex;align-items:center;gap:5px;color:#3c6b8f}
.places-table td small.cari-telefon{display:flex;align-items:center;gap:5px;color:#858c97}
.places-table td small.cari-ipucu{color:#a9b0ba;font-size:10.5px;font-style:italic}
.cari-table{min-width:880px}
.cari-table td.num a{white-space:nowrap}

/**
 * Sağdaki "listede olmayanlar" paneli.
 * .places-panel .form-note kuralı ikon+metin satırı için flex'tir; burada
 * not DÜZ YAZIDIR ve içindeki kalın sözcükler ayrı sütunlara dağılmamalı.
 */
.places-panel.cari-unlisted .form-note{display:block;margin:0 20px 14px;line-height:1.65}

/**
 * BİRLEŞTİRME UYARISI.
 * Geri alınamayan bir işlemin penceresinde, düğmeye basmadan önce
 * görülmesi gereken tek cümle.
 */
.kutu-uyari{
  display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  padding:11px 14px;border-radius:8px;border-left:3px solid #d05b5b;
  background:#fdf3f3;color:#7d3a3a;font-size:11.5px;line-height:1.6;
}
.kutu-uyari svg{flex:none;color:#c25858;margin-top:1px}

@media(max-width:900px){
  .cari-table{min-width:660px}
}

.places-panel .form-note{margin:0 20px 20px;display:flex;gap:10px;align-items:flex-start}
.places-panel .form-note svg{flex:none;color:#c98b1d;margin-top:1px}

.place-suggest{list-style:none;margin:0;padding:6px 0}
.place-suggest li{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:12px 20px;border-bottom:1px solid #eef0f3;
}
.place-suggest li:last-child{border-bottom:0}
.place-suggest b{display:block;font-size:12.5px}
.place-suggest small{display:block;font-size:11px;color:#858c97;margin-top:3px}

.places-help{
  display:flex;gap:12px;align-items:flex-start;
  margin:4px 20px 20px;padding:14px;border-radius:10px;
  background:#fff9f1;border:1px solid #ead5bc;
}
.places-help svg{flex:none;color:#d68b18}
.places-help b{font-size:12.5px;color:#a9650b}
.places-help p{margin:6px 0 0;font-size:11.5px;line-height:1.6;color:#7c8492}
.places-help a{color:#c87610;font-weight:700}

@media(max-width:980px){
  .places-layout{grid-template-columns:1fr}
}

/* ==================================================================
   RAPOR ÇIKTI SEÇENEKLERİ — yükleme yeri süzgeci ve sütun gizleme
   ================================================================== */
.report-output{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin:0 0 16px;padding:13px 16px;border-radius:11px;
  background:#fff;border:1px solid var(--line);box-shadow:0 2px 5px #1f293708;
}
.report-output>span.cap{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:800;letter-spacing:.05em;color:#8a919d;
}
.report-output>span.cap svg{color:#d9891a}
.report-output select{
  height:38px;border:1px solid #dfe3e8;border-radius:8px;background:#fff;
  padding:0 30px 0 11px;font:inherit;font-size:12.5px;color:#4c535e;outline:none;
}
.report-output select:focus{border-color:#f09a2d;box-shadow:0 0 0 3px #f09a2d20}
.report-output .hide-toggles{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.report-output .hide-toggles label{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid #dfe3e8;border-radius:8px;padding:8px 11px;
  font-size:12px;font-weight:650;color:#59606c;background:#fff;
}
.report-output .hide-toggles label:has(input:checked){
  border-color:#e0a95e;background:#fff6ea;color:#a9650b;
}
.report-output .hide-toggles input{accent-color:#e08a17;margin:0}
.report-output .out-actions{display:flex;gap:8px}
.report-output .out-actions .secondary{height:38px;padding:0 13px;font-size:12.5px}

.report-place-tag{
  display:inline-flex;align-items:center;gap:7px;margin-left:8px;
  background:#fff0df;color:#b96c0c;border-radius:20px;padding:4px 11px;
  font-size:11.5px;font-weight:750;
}
.report-place-tag a{color:#b96c0c;text-decoration:none;font-weight:800}

@media(max-width:760px){
  .report-output{flex-direction:column;align-items:stretch}
  .report-output .hide-toggles{margin-left:0}
}

/* Haftalık çıktı — gizlenecek sütun seçimi */
.print-hide{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:9px;padding:7px 11px;background:#fff;
}
.print-hide>span{
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#8a919d;text-transform:uppercase;
}
.print-hide>span svg{color:#d9891a}
.print-hide label{
  display:flex;align-items:center;gap:6px;cursor:pointer;
  font-size:12px;font-weight:650;color:#59606c;
}
.print-hide input{accent-color:#e08a17;margin:0}

/* Tek sayfa formda metin alanları sayfayı uzatmasın */
.modal.xl .form-grid textarea{min-height:92px}
.modal.xl textarea[name="orders"]{min-height:74px}

/* ==================================================================
   YÜKLEMELER — SÜZGEÇ ŞERİDİ
   ================================================================== */
.shipment-filters{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);background:#fcfdfe;
}
.shipment-filters label{display:flex;flex-direction:column;gap:6px;min-width:0}
.shipment-filters label>span:first-child{
  display:flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;letter-spacing:.05em;color:#8a919d;text-transform:uppercase;
}
.shipment-filters label>span:first-child svg{color:#d9891a}
.shipment-filters select,
.shipment-filters input[type=date]{
  height:38px;border:1px solid #dfe3e8;border-radius:8px;background:#fff;
  padding:0 10px;font:inherit;font-size:12.5px;color:#4c535e;outline:none;min-width:150px;
}
.shipment-filters select:focus,
.shipment-filters input[type=date]:focus{border-color:#f09a2d;box-shadow:0 0 0 3px #f09a2d20}
.shipment-filters .date-range{display:flex;align-items:center;gap:6px}
.shipment-filters .date-range input{min-width:140px}
.shipment-filters .date-range i{font-style:normal;color:#a9b0ba}
.shipment-filters .sort-field{margin-left:auto}
.shipment-filters .sort-field select{min-width:190px}
.filter-clear{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;
  border:1px solid #e6d3bb;border-radius:8px;background:#fff6ea;color:#a9650b;
  font-size:12px;font-weight:700;text-decoration:none;
}
.filter-clear:hover{background:#fdeed8}

@media(max-width:1180px){
  .shipment-filters .sort-field{margin-left:0}
}
@media(max-width:760px){
  .shipment-filters{gap:10px}
  .shipment-filters label{flex:1 1 100%}
  .shipment-filters select,.shipment-filters input[type=date]{width:100%;min-width:0}
  .shipment-filters .date-range input{min-width:0;flex:1}
}

/* ==================================================================
   YÜK TAKİBİ — SATIR BAZLI TAKİP TAHTASI
   Kart düzeni yerine karşılaştırmaya uygun satır düzeni.
   ================================================================== */
.tracking-board{margin-bottom:18px}
.tracking-board .panel-head{gap:14px;flex-wrap:wrap}
.tracking-board .inline-search{margin-left:auto}

.track-tabs{gap:6px}
.track-tabs .filter{
  border:1px solid transparent;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
}
.track-tabs .filter b{
  background:#eef1f5;color:#6a7280;border-radius:11px;padding:2px 7px;
  font-size:11px;font-weight:800;margin:0;
}
.track-tabs .filter.active b{background:#f6d9ae;color:#95590a}

.track-table{min-width:1080px}
.track-table td{vertical-align:middle;white-space:nowrap}
.track-table td strong{font-size:12.5px}
.track-table .mode>div{min-width:0}
.track-table .mode strong{display:block;font-size:12px}
.track-table .mode span{display:block;color:#7b8390;font-size:11px;margin-top:3px}
.track-row.kapandi{background:#fcfbf7}

/* Aşama rayı — altı bölme, dolu olanlar tamamlanan aşamalar */
.track-table .stage-col{width:210px}
.stage-rail{display:flex;gap:3px;margin-bottom:7px}
.stage-rail i{
  flex:1;height:6px;border-radius:3px;background:#e7eaef;display:block;
}
.stage-rail i.on{background:#f0a63c}
.stage-rail i.now{background:#e07d0d;box-shadow:0 0 0 2px #f2ab4d3d}
.track-table .stage-name{display:block;font-size:12px;font-weight:700;color:#3a414d}
.track-table .stage-step{display:block;font-size:10.5px;color:#949bA6;margin-top:3px}

.track-last{white-space:normal;max-width:300px}
.track-facts{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.track-facts b{
  display:inline-block;background:#f2f5f8;color:#5b636f;border-radius:5px;
  padding:3px 7px;font-size:10.5px;font-weight:650;
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.track-note{
  display:flex;align-items:center;gap:5px;margin-top:5px;
  font-size:10.5px;color:#a0791f;
}
.track-empty{margin:0 18px 18px}

.track-table .row-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.track-table .table-action{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.track-table .closed-tag{
  display:inline-flex;align-items:center;gap:5px;margin-top:5px;
  background:#f4ece0;color:#8d5b12;border-radius:5px;padding:3px 7px;
  font-size:10px;font-weight:700;
}

@media(max-width:980px){
  .tracking-board .inline-search{margin-left:0;width:100%}
}

/* Yükleme yerleri — çıktı şeridi */
.place-output{margin-bottom:16px}
.place-output .primary{height:38px;padding:0 15px;font-size:12.5px}
.place-output .date-range{display:flex;align-items:center;gap:6px}
.place-output .date-range input{
  height:38px;border:1px solid #dfe3e8;border-radius:8px;background:#fff;
  padding:0 10px;font:inherit;font-size:12.5px;color:#4c535e;outline:none;
}
.place-output .date-range i{font-style:normal;color:#a9b0ba}
.place-output-note{
  flex:1 1 100%;margin:2px 0 0;font-size:11.5px;color:#7c8492;line-height:1.6;
}
.places-table .row-actions a.btn-icon{display:inline-grid;place-items:center;text-decoration:none}

/* ==================================================================
   YÜKLEME PROGRAMI — önizleme ekranı
   Çıktı doğrudan yazıcıya gitmez: önce burada görünür, süzülür ve
   istenmeyen satırlar ayıklanır.
   ================================================================== */
.program-page{display:grid;gap:16px}

.program-filters .panel-head{flex-wrap:wrap;gap:12px}
.program-filter-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;padding:18px 20px;
}
.program-filter-grid label{display:flex;flex-direction:column;gap:6px;min-width:0}
.program-filter-grid label>span:first-child{
  display:flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;letter-spacing:.05em;color:#8a919d;text-transform:uppercase;
}
.program-filter-grid label>span:first-child svg{color:#d9891a}
.program-filter-grid select,
.program-filter-grid input{
  height:40px;border:1px solid #dfe3e8;border-radius:8px;background:#fff;
  padding:0 11px;font:inherit;font-size:13px;color:#4c535e;outline:none;width:100%;
}
.program-filter-grid select:focus,
.program-filter-grid input:focus{border-color:#f09a2d;box-shadow:0 0 0 3px #f09a2d20}
.program-filter-grid .date-range{display:flex;align-items:center;gap:6px}
.program-filter-grid .date-range i{font-style:normal;color:#a9b0ba}
.program-filter-actions{display:flex;align-items:flex-end;gap:8px}
.program-filter-actions .primary,
.program-filter-actions .secondary{height:40px;padding:0 15px;font-size:13px}

.program-preview .panel-head{flex-wrap:wrap;gap:12px}
.program-actions{display:flex;flex-wrap:wrap;gap:8px}
.program-actions .primary,
.program-actions .secondary{height:38px;padding:0 13px;font-size:12.5px;text-decoration:none}

.program-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  border-bottom:1px solid var(--line);
}
.program-summary div{padding:14px 18px;border-right:1px solid var(--line)}
.program-summary div:last-child{border-right:0}
.program-summary b{display:block;font-size:19px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.program-summary span{display:block;margin-top:3px;font-size:10px;font-weight:800;letter-spacing:.05em;color:#8a919d;text-transform:uppercase}
.program-summary .secili{background:#fff8ef}
.program-summary .secili b{color:#c47a10}

.program-facility{margin:14px 18px 0;display:flex;gap:9px;align-items:flex-start}
.program-facility svg{flex:none;color:#c98b1d;margin-top:1px}

.program-days{padding:16px 18px 4px;display:grid;gap:16px}
.program-day{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.program-day-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;background:#f7f9fb;border-bottom:1px solid var(--line);
}
.program-day-head .day-check{display:flex;align-items:center;gap:9px;cursor:pointer}
.program-day-head .day-check input{accent-color:#e08a17;width:16px;height:16px;margin:0}
.program-day-head strong{font-size:13px}
.program-day-head span{font-size:11.5px;color:#7b8390}
.program-day-head b{margin-left:auto;font-size:11.5px;color:#5b636f;font-weight:700}

.program-table{min-width:880px}
.program-table th.tick,.program-table td.tick{width:42px;text-align:center}
.program-table td.tick input{accent-color:#e08a17;width:16px;height:16px;margin:0}
.program-table td{white-space:normal;vertical-align:top}
.program-table td strong{font-size:12.5px}
.program-table td.num{text-align:right;white-space:nowrap}
.program-table .program-ref{display:block;font-size:10.5px;color:#949ba6;margin-top:3px}
.program-table .program-note{
  display:flex;align-items:flex-start;gap:5px;margin-top:6px;
  padding:5px 8px;border-left:2px solid #e0a95e;background:#fffaf2;border-radius:0 5px 5px 0;
  font-size:10.5px;color:#6d5426;line-height:1.5;
}
.program-table .program-note svg{flex:none;margin-top:1px}
.program-table tr.disabled{opacity:.42}
.program-table tr.disabled strong{text-decoration:line-through}

/* Mal tanımı: ürün cinsinin altında ince satır — girilmemişse hiç basılmaz */
.program-table .program-goods{display:block;margin-top:3px;font-size:10.5px;color:#8a919d;line-height:1.45}
/* İlgili kişi sütunu: rol etiketi küçük, ad altında */
.program-table td.program-people{min-width:150px}
.program-table td.program-people .kisi{display:block;margin-bottom:6px;font-size:11.5px;line-height:1.35}
.program-table td.program-people .kisi:last-child{margin-bottom:0}
.program-table td.program-people .kisi i{
  display:block;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.07em;
  color:#a2a9b4;text-transform:uppercase;margin-bottom:1px;
}

/**
 * POSTA ALICI SEÇİMİ.
 * Program tek bir tesise değil, seçilen adreslere gider. Aday adresler
 * kaynağıyla birlikte listelenir; kullanıcı hangisine gideceğini görerek
 * seçer. Liste uzarsa kutu kendi içinde kayar, pencere büyümez.
 */
.mail-picker{
  border:1px solid var(--cizgi,#e3e7ec);border-radius:10px;padding:10px 12px;
  max-height:230px;overflow:auto;background:var(--yuzey-2,#fafbfc);
}
.mail-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.mail-picker-head b{font-size:12px}
.mail-option{display:flex;align-items:flex-start;gap:9px;padding:6px 4px;border-radius:7px;cursor:pointer}
.mail-option:hover{background:var(--yuzey,#fff)}
.mail-option input{accent-color:#e08a17;width:16px;height:16px;margin-top:2px;flex:none}
.mail-option span{display:block;min-width:0}
.mail-option b{display:block;font-size:12.5px;word-break:break-all}
.mail-option i{display:block;font-style:normal;font-size:10.5px;color:#8a919d;margin-top:1px}

.pack{display:inline-block;background:#f2f5f8;color:#3f4854;border-radius:5px;padding:3px 8px;font-size:10.5px;font-weight:700}
.pack.mixed{background:#f6ecdc;color:#8d5b12}
.pack-list{display:block;margin-top:4px;font-size:10px;color:#8a919d}
.program-table .muted{color:#a9b0ba}

.program-hint{margin:6px 18px 18px;display:flex;gap:10px;align-items:flex-start}
.program-hint svg{flex:none;color:#c98b1d;margin-top:1px}

@media(max-width:760px){
  .program-filter-actions{grid-column:1/-1}
  .program-actions{width:100%}
  .program-actions .primary,.program-actions .secondary{flex:1;justify-content:center}
}

/* Çoklu ambalaj seçimi — form ve çekmece */
.package-field .package-picker{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;
}
.package-chip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid #dfe3e8;border-radius:20px;padding:7px 12px;background:#fff;
  font-size:12.5px;font-weight:650;color:#59606c;
}
.package-chip input{accent-color:#e08a17;margin:0;width:15px;height:15px}
.package-chip:has(input:checked){border-color:#e0a95e;background:#fff6ea;color:#a9650b}
.package-field .field-hint{display:block;margin-top:3px}
.drawer-field.package-field{display:block}

/* Yükleme yeri satırında tesis e-postası */
.places-table td small.place-mail{
  display:flex;align-items:center;gap:5px;margin-top:4px;
  font-size:10.5px;color:#7b8390;
}

/* Tarih aralığı iki kutu: hücreyi taşırmasın */
.program-filter-grid label:has(.date-range){grid-column:span 2}
.program-filter-grid .date-range{min-width:0}
.program-filter-grid .date-range input{min-width:0;flex:1 1 0}
@media(max-width:760px){
  .program-filter-grid label:has(.date-range){grid-column:1/-1}
}

/* ===================================================================
   CARİ KARTI — tek firmanın bütün resmi
   Liste "hangi firmalar var?" sorusuna, kart "BU firma ne durumda?"
   sorusuna cevap verir.
   =================================================================== */
.cari-ad{color:inherit;text-decoration:none;font-weight:750;font-size:12.5px;
         border-bottom:1px solid transparent}
.cari-ad:hover{color:#c4780f;border-bottom-color:#e6c48a}
.place-suggest .cari-ad{display:block;font-size:12px}

.kart-sayfa{display:flex;flex-direction:column;gap:16px}

.kart-ust{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.kart-geri{display:inline-flex;align-items:center;gap:7px;color:#6b7280;text-decoration:none;
           font-size:12.5px;font-weight:700}
.kart-geri:hover{color:#2b313c}
.kart-geri svg{transform:rotate(180deg)}
.kart-eylem{display:flex;gap:9px;flex-wrap:wrap}
.kart-eylem .secondary{display:inline-flex;align-items:center;gap:7px}

.kart-uyari{margin:0}
.kart-uyari a{color:#8d3a3a;font-weight:700}

/* --- Künye --- */
.kart-kunye{padding:0}
.kart-kunye-bas{display:flex;align-items:center;gap:14px;padding:18px 20px;
                border-bottom:1px solid var(--cizgi,#e9edf1)}
.kart-avatar{width:46px;height:46px;border-radius:13px;flex:none;display:flex;
             align-items:center;justify-content:center;background:#1e222a;color:#ed8b18}
.kart-kunye-bas h2{margin:0;font-size:19px;letter-spacing:-.01em}
.kart-kunye-bas p{margin:4px 0 0;font-size:12px;color:#7b8390}
.kart-kunye-bas .badge{margin-left:2px}

.kart-bilgi{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
            gap:0;margin:0;padding:0}
.kart-bilgi>div{padding:13px 20px;border-right:1px solid var(--cizgi,#eef1f4);
                border-bottom:1px solid var(--cizgi,#eef1f4)}
.kart-bilgi>div.full{grid-column:1/-1}
.kart-bilgi dt{font-size:8.5px;font-weight:700;letter-spacing:.07em;color:#8a919d;
               text-transform:uppercase;margin-bottom:4px}
.kart-bilgi dd{margin:0;font-size:12.5px;line-height:1.55;word-break:break-word}
.kart-bilgi dd a{color:#3c6b8f;text-decoration:none}
.kart-bilgi dd a:hover{text-decoration:underline}
.kart-bilgi dd small{display:block;font-size:10.5px;color:#a9b0ba;font-style:italic;margin-top:2px}

.kart-sayac{margin:0}

/* --- Kırılım çubukları --- */
.kart-kirilim{padding:6px 20px 18px;display:flex;flex-direction:column;gap:9px}
.kart-kirilim-satir{display:grid;grid-template-columns:1fr 92px 30px;align-items:center;gap:10px}
.kart-kirilim-satir span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kart-kirilim-satir i{display:block;height:7px;border-radius:5px;background:#ed8b18;min-width:4px}
.kart-kirilim-satir b{font-size:12px;text-align:right;color:#5b636f}
.kart-kirilimlar .panel{padding-bottom:0}
.kart-kirilimlar .form-note{padding:0 20px 18px;margin:0}

.kart-dosyalar{min-width:900px}
.kart-dosyalar td small{display:block;color:#9aa1ae;font-size:10.5px;margin-top:2px}

@media(max-width:760px){
  .kart-eylem{width:100%}
  .kart-eylem .secondary{flex:1;justify-content:center}
  .kart-bilgi>div{border-right:0}
}

/* ==================================================================
   DÖNEM SEÇİCİ — üst çubukta, Yeni Yükleme düğmesinin solunda
   ==================================================================
   Burada yazan yıl yeni dosyanın numarasını belirler; bu yüzden
   düğmenin yanındadır ve geçmiş döneme bakılırken renk değiştirir. */
.donem-sec{position:relative}
.donem-dugme{
  display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 13px;
  border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;
  color:#4a525f;font:inherit;
}
.donem-dugme:hover{border-color:#d7dce3;background:#fafbfc}
.donem-dugme svg{color:#8a919d;flex:none}
.donem-yil{font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1}
.donem-dugme small{
  font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#9aa1ac;line-height:1;
}
/* Geçmiş döneme bakılıyor: sarı uyarı — kimse yılı karıştırmasın */
.donem-sec.gecmis .donem-dugme{background:#fff8ec;border-color:#e8c88a;color:#8d5b12}
.donem-sec.gecmis .donem-dugme svg{color:#c9891d}
.donem-sec.gecmis .donem-dugme small{color:#b0813a}

.donem-kutu{
  position:absolute;top:calc(100% + 8px);right:0;width:262px;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 18px 44px #1f293724;padding:9px;
}
.donem-basi{
  margin:3px 8px 7px;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#9aa1ac;
}
.donem-liste{max-height:230px;overflow:auto}
.donem-secenek{
  display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;
  border:0;background:none;border-radius:8px;padding:8px 9px;cursor:pointer;font:inherit;
}
.donem-secenek:hover{background:#f5f6f8}
.donem-secenek b{font-size:14px;font-weight:800;color:#2b313c;min-width:42px}
.donem-secenek span{font-size:11px;color:#8a919d}
.donem-secenek.secili{background:#fff2e2}
.donem-secenek.secili b{color:#c4780f}
.donem-bos{margin:8px 9px;font-size:11.5px;color:#9aa1ac}
.donem-yeni{
  display:flex;align-items:center;gap:7px;width:100%;margin-top:6px;
  border:1px dashed #d7dce3;background:#fff;border-radius:8px;padding:9px;
  font:inherit;font-size:12px;font-weight:700;color:#4a525f;cursor:pointer;
}
.donem-yeni:hover{border-color:#e8951c;color:#c4780f;background:#fffaf2}
.donem-dip{
  margin:9px 3px 2px;padding-top:8px;border-top:1px solid #eef0f3;
  font-size:10.5px;color:#8a919d;line-height:1.5;
}
.donem-dip b{color:#4a525f}

@media(max-width:760px){
  /* Dar ekranda yıl kalır, "dönem" yazısı düşer */
  .donem-dugme small{display:none}
  .donem-dugme{padding:0 10px}
}

/* ==================================================================
   POSTA BİÇİMİ SEÇİMİ — tablo / madde listesi
   ================================================================== */
.bicim-sec{
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fafbfc;
}
.bicim-basi{
  display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#9aa1ac;margin-bottom:6px;
}
.bicim-secenek{
  display:flex;align-items:flex-start;gap:9px;padding:6px 4px;border-radius:7px;cursor:pointer;
}
.bicim-secenek:hover{background:#fff}
.bicim-secenek input{accent-color:#e08a17;width:16px;height:16px;margin-top:2px;flex:none}
.bicim-secenek span{display:block;min-width:0}
.bicim-secenek b{display:block;font-size:12.5px}
.bicim-secenek i{display:block;font-style:normal;font-size:10.5px;color:#8a919d;margin-top:1px}

/* ===== Sayfa gezinmesi =====
   Liste LIMIT ile kesilir; kullanıcı kaç dosya olduğunu ve kaçıncı
   sayfada olduğunu görmeli, 201. dosyaya ulaşabilmelidir. */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 18px;border-top:1px solid var(--line)}
.pager-step{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border:1px solid #dfe3e8;border-radius:8px;background:#fff;color:#4c545f;font-size:11px;font-weight:700;text-decoration:none}
.pager-step:hover{background:#fffaf4;border-color:#e8c79a;color:#b8680c}
.pager-step svg{width:14px}
.pager-step.is-off{opacity:.42;pointer-events:none}
.pager-now{font-size:11px;color:#7e8691}
.pager-now b{color:#2b323d}

/* ===== İkon düğmesinde bekleme =====
   Yavaş bağlantıda tıklamanın işe yaradığı görünmezse kullanıcı üst
   üste tıklar ve her tıklama yeni bir istek başlatır. İkonun yerine
   yazı koymak düğmenin enini değiştirip satırı oynatırdı; onun yerine
   ikon soluklaşıp döner. */
.row-actions button.is-loading,button.is-loading{position:relative;color:transparent!important}
button.is-loading>svg{opacity:0}
button.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border:2px solid #d8dce1;border-top-color:#c07a10;border-radius:50%;animation:iskur-spin .7s linear infinite}
@keyframes iskur-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){button.is-loading::after{animation-duration:2.4s}}

/* ===== İçeriğe atla =====
   Yalnız klavyeyle odaklanınca görünür; fareyle çalışan kullanıcı
   hiç görmez, klavyeyle çalışan ilk Tab'da bulur.

   NEDEN "left:-9999px" DEĞİL: bağlantıyı ekranın dışına itmek onu sayfanın
   düzeninde 9999 piksel solda tutar; tarayıcı sayfayı o genişlikte hesaplar
   ve bazı görünümlerde yatay kayma doğar. Bunun yerine öge 1×1 piksele
   indirilip kırpılır: yerinde durur, görünmez, ekran okuyucu yine okur. */
.skip-link{
  position:absolute;top:0;left:0;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  z-index:200;background:#252b34;color:#fff;border-radius:0 0 9px 0;
  font-size:12px;font-weight:700;text-decoration:none;
}
.skip-link:focus{
  width:auto;height:auto;margin:0;padding:11px 16px;
  overflow:visible;clip:auto;clip-path:none;
}
.main:focus{outline:none}

/* ===== Mobilde gizlenen eylemler geri gelir =====
   760px altında ".title-row .secondary" ve ".workbench-head .secondary"
   kuralları bu düğmeleri tamamen gizliyordu: telefonda "Dosya birleştir",
   "Listeyi dışa aktar" ve "Haftalık rapor" bir daha hiçbir yerden
   açılamıyordu — alternatif giriş noktası da yoktu. Düğmeler artık
   görünür; dar ekranda yazı küçülür ve gerekirse alt satıra sarar. */
@media(max-width:760px){
  .title-row .secondary,.workbench-head .secondary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;font-size:11px}
  .title-row{flex-wrap:wrap;gap:8px}
  .title-row .row-actions,.title-row>div:last-child{flex-wrap:wrap;gap:8px}
  .workbench-head{flex-wrap:wrap;gap:10px}
}

/* Devir kapalıyken şerit sessizleşir: bir kural değil, bir durum bildirir */
.rollover-rule.is-off{background:#f3f4f6;color:#6b7280;border-color:#e3e5e9}
.rollover-rule.is-off svg{color:#9aa1ab}

/* ===== Ortak onay penceresi =====
   Tarayıcının confirm() kutusunun yerini alır: ne olacağını biçimli
   gösterir, kurumun diliyle konuşur ve bastırılamaz. */
.modal.is-narrow{width:min(460px,94vw)}
.onay-liste{margin:13px 0 0;padding:0 0 0 18px;font-size:11.5px;color:#6b7280;line-height:1.85}
.onay-liste li{margin:0}

/* =====================================================================
   YARDIM EKRANI
   =====================================================================
   Kılavuz sistemi anlatır, bu ekran kişiyi. Yerleşim iki sütunludur:
   solda ne yapacağı, sağda nerede yapacağı ve kapsamı. */
.help-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(290px,.75fr);gap:19px;align-items:start}
.help-main{display:flex;flex-direction:column;gap:19px;min-width:0}
.help-yan{display:flex;flex-direction:column;gap:19px;position:sticky;top:100px}

/* Rol kartı — sayfanın tek renkli vurgusu */
.help-role{margin-bottom:19px;border-color:#e6d6bd;background:linear-gradient(112deg,#fffaf3,#fff)}
.help-role-head{display:flex;gap:16px;padding:22px 24px}
.help-role-icon{flex:none;width:46px;height:46px;border-radius:12px;background:#fdf0dc;color:#c27d12;display:grid;place-items:center}
.help-role-head small{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;color:#c27d12}
.help-role-head h2{margin:6px 0 0;font-size:19px;letter-spacing:-.02em}
.help-role-head p{margin:9px 0 0;font-size:13px;line-height:1.7;color:#5d6572;max-width:74ch}

/* Günlük akış */
.help-akis{list-style:none;margin:0;padding:6px 24px 22px;counter-reset:none}
.help-akis li{display:flex;gap:13px;padding:11px 0;border-bottom:1px dashed #eceef1}
.help-akis li:last-child{border-bottom:0}
.help-akis li>span{flex:none;width:25px;height:25px;border-radius:50%;background:#f1f3f6;color:#4b525e;font-size:11px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.help-akis li>div{font-size:13px;line-height:1.7;color:#3f4652}

/* Alan başlığı */
.help-alan{border-top:1px solid var(--line)}
.help-alan:first-of-type{border-top:0}
.help-alan>h3{display:flex;align-items:center;gap:8px;margin:0;padding:15px 24px 9px;font-size:11px;letter-spacing:.07em;color:#7c8490;text-transform:uppercase}
.help-alan>h3 svg{width:14px;color:#c48016}
.help-alan>h3 b{margin-left:auto;font-size:10px;color:#8b929d;background:#f2f4f7;border-radius:11px;padding:2px 8px}

/* Tek iş */
.help-is{border-top:1px solid #f0f2f5}
.help-is>summary{display:flex;align-items:center;gap:12px;padding:13px 24px;cursor:pointer;list-style:none}
.help-is>summary::-webkit-details-marker{display:none}
.help-is>summary:hover{background:#fcfdfe}
.help-is-ad{font-size:13px;font-weight:650;color:#2b323d}
.help-is-yer{margin-left:auto;font-size:10.5px;color:#868e99;white-space:nowrap}
.help-is>summary>svg{width:14px;color:#aab1bb;transition:transform .15s;flex:none}
.help-is[open]>summary>svg{transform:rotate(90deg)}
.help-is[open]>summary{background:#fafbfc}
.help-is-govde{padding:4px 24px 20px}
.help-ne{margin:0;font-size:12.5px;line-height:1.75;color:#5d6572}
.help-adim{margin:13px 0 0;padding-left:19px;font-size:12.5px;line-height:1.9;color:#3f4652}
.help-adim li{margin:0}
.help-kural{display:flex;gap:9px;margin:14px 0 0;padding:11px 13px;border-radius:9px;background:#fffaf2;border:1px solid #f0dcbc;font-size:12px;line-height:1.7;color:#7a5a20}
.help-kural svg{flex:none;margin-top:2px;color:#d0921f}
.help-git{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:11.5px;font-weight:700;color:#b8680c;text-decoration:none}
.help-git:hover{text-decoration:underline}
.help-bos{margin:0;padding:28px;text-align:center;font-size:12px;color:#8b929d}

/* Arama kutusu */
.help-ara{display:flex;align-items:center;gap:8px;height:36px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#8b929d;width:min(280px,42vw)}
.help-ara svg{flex:none}
.help-ara input{border:0;outline:0;background:transparent;font:inherit;font-size:12px;width:100%;color:var(--ink)}

/* Yapamadıkları */
.help-engelli{padding:6px 0 12px}
.help-engel-satir{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 24px;border-bottom:1px solid #f2f4f6}
.help-engel-satir:last-child{border-bottom:0}
.help-engel-satir>div>b{display:block;font-size:12.5px;font-weight:600;color:#5a616d}
.help-engel-satir small{display:block;font-size:10.5px;color:#949ba5;margin-top:3px}
.help-kim{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:10.5px;font-weight:700;color:#5b7fb0;background:#eef3fa;border:1px solid #dbe5f2;border-radius:20px;padding:5px 10px;white-space:nowrap}

/* Sık yapılan hatalar */
.help-dikkat{list-style:none;margin:0;padding:8px 24px 20px}
.help-dikkat li{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed #eceef1;font-size:12.5px;line-height:1.75;color:#4a515d}
.help-dikkat li:last-child{border-bottom:0}
.help-dikkat svg{flex:none;margin-top:3px;color:#d0921f}

/* Herkesin bilmesi gerekenler */
.help-temel{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.help-temel>div{background:#fff;padding:17px 22px}
/* Yalnız BAŞLIK bloktur; paragrafın içindeki vurgular satır içi kalır */
.help-temel>div>b{display:block;font-size:12.5px;color:#2b323d}
.help-temel p{margin:7px 0 0;font-size:12px;line-height:1.75;color:#606875}

/* Sağ sütun */
.help-kapsam-govde{padding:6px 22px 20px}
.help-kapsam-govde>b{display:block;font-size:13px;color:#2b323d;line-height:1.5}
.help-kapsam-govde p{margin:9px 0 0;font-size:12px;line-height:1.75;color:#606875}
.help-ekranlar{padding:8px 12px 14px;display:flex;flex-direction:column}
.help-ekranlar a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;font-size:12.5px;color:#454c58;text-decoration:none}
.help-ekranlar a:hover{background:#fffaf4;color:#b8680c}
.help-ekranlar svg{color:#c2a276;flex:none}
.help-kisayol dl{margin:0;padding:8px 22px 20px}
.help-kisayol dl>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed #eceef1}
.help-kisayol dl>div:last-child{border-bottom:0}
.help-kisayol dt{display:flex;gap:4px}
.help-kisayol dd{margin:0;font-size:11.5px;color:#6b7280;text-align:right}
kbd{display:inline-block;min-width:20px;padding:2px 6px;border:1px solid #d9dde3;border-bottom-width:2px;border-radius:5px;background:#f8f9fb;font:inherit;font-size:10.5px;font-weight:700;color:#454c58;text-align:center}
.help-kilavuz-govde{display:flex;gap:14px;padding:20px 22px}
.help-kilavuz-govde>svg{flex:none;color:#c48016;margin-top:2px}
.help-kilavuz-govde>div>b{display:block;font-size:13px;color:#2b323d}
.help-kilavuz-govde p{margin:7px 0 0;font-size:12px;line-height:1.7;color:#606875}
.help-kilavuz-govde small{display:block;margin-top:9px;font-size:11px;color:#8b929d}

@media(max-width:1120px){
  .help-grid{grid-template-columns:1fr}
  .help-yan{position:static}
  .help-temel{grid-template-columns:1fr}
}

/* Yardım ekranı YAZDIRILABİLİR olmalı: yeni gelen kişi kendi sayfasını
   basıp masasına koyabilsin. Baskıda bütün işler açık gelir. */
@media print{
  .help-ara,.help-yan,.title-row .row-actions{display:none !important}
  .help-grid{display:block}
  .help-is[data-help-is]{break-inside:avoid}
  .help-is>summary>svg{display:none}
  .help-is-govde{display:block !important}
  .help-role{background:none}
}

/* ===== Kenar çubuğu taşarsa kaydırılır =====
   Tüm ekranlara yetkisi olan bir kullanıcıda menü 15 bağlantıyı geçiyor
   ve son öğeler alt imzanın arkasında kalıyordu: tıklanamıyor, hatta
   varlıkları görünmüyordu. Menü artık kendi içinde kayar; imza ve marka
   yerinde durur. */
.sidebar nav{overflow-y:auto;min-height:0;overscroll-behavior:contain}
.sidebar nav::-webkit-scrollbar{width:6px}
.sidebar nav::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:6px}
.sidebar nav::-webkit-scrollbar-thumb:hover{background:#ffffff33}
.sidebar nav{scrollbar-width:thin;scrollbar-color:#ffffff24 transparent}

/* ===== Vekâlet rozeti =====
   Dosya sahibi izinli olduğu için bende görünen dosya. Rozet olmasaydı
   kullanıcı dosyayı kendi işi sanır, izin dönüşünde kimin ne yaptığı
   karışırdı. */
.state-tag.vekalet{display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  background:#fff4de;color:#9a6512;border:1px solid #f0dcb4;border-radius:20px;
  padding:3px 9px;font-size:9.5px;font-weight:700;white-space:nowrap}
.state-tag.vekalet svg{width:11px;flex:none}
/* İzin düğmesi açıkken belli olsun */
.btn-icon.is-on{background:#fff4de;border-color:#eccf9b;color:#9a6512}

/* ==================================================================
   YÜKLEME SATIRLARI — dosya açma ve düzenleme
   ==================================================================
   Bir dosya birden çok yerden, birden çok malla ve her mal için ayrı
   tonajla yüklenebilir. Her satır kendi günü, yeri, malı, tonajı,
   aracı ve ambalajıyla girilir.

   DÜZEN: satır, sekiz alanı iki sıraya yayan bir ızgaradır. Tek sıraya
   dizmek her alanı okunamayacak kadar daraltıyordu; sekiz dar kutu
   yerine, ilk sırada "ne zaman / nereden / ne" (gün, yer, ürün, mal),
   ikinci sırada "ne kadar" (miktar, araç, ambalaj, not) durur.
   ================================================================== */
.satir-kutu {
  border: 1px dashed #d8dce6;
  border-radius: 12px;
  background: #fcfcfe;
  padding: 14px;
}
.satir-liste { display: grid; gap: 10px; }

.satir {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 34px;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.satir-no {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: 8px;
  background: #fff0df;
  color: #c66d09;
  font-size: 12px;
  font-weight: 800;
}
.satir-alanlar {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 10px;
  min-width: 0;
}
/**
 * İkinci sıra: miktar · ambalaj · satır notu.
 * Araç sayısı satırda değil, dosyanın üstündeki tek alandadır: bir
 * aracın içinde birden çok mal bulunabilir.
 */
.satir-alanlar .s-tonaj   { grid-column: 1; }
.satir-alanlar .s-ambalaj { grid-column: 2; }
.satir-alanlar .s-not     { grid-column: 3 / -1; }

.satir-alanlar label {
  display: block;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 650;
  color: #6b7280;
}
.satir-alanlar label small { font-weight: 400; color: #9aa1ac; }
.satir-alanlar input,
.satir-alanlar select {
  display: block;
  width: 100%;
  height: 38px;
  margin-top: 5px;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: #4c535e;
  outline: none;
}
.satir-alanlar input:focus,
.satir-alanlar select:focus { border-color: #f09a2d; box-shadow: 0 0 0 3px #f09a2d20; }

.satir .satir-sil { height: 30px; width: 30px; }
.satir .satir-sil:disabled { opacity: .35; cursor: not-allowed; }

.satir-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.satir-ozet {
  font-size: 11.5px;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.satir-ipucu { margin-top: 12px; display: flex; gap: 9px; align-items: flex-start; }
.satir-ipucu svg { flex: none; margin-top: 1px; color: #c4780f; }

@media (max-width: 900px) {
  .satir-alanlar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .satir-alanlar .s-tonaj,
  .satir-alanlar .s-ambalaj, .satir-alanlar .s-not { grid-column: auto; }
  .satir-alanlar .s-mal, .satir-alanlar .s-not { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .satir { grid-template-columns: 26px minmax(0, 1fr) 30px; padding: 10px; }
  .satir-alanlar { grid-template-columns: minmax(0, 1fr); }
  .satir-alanlar label { grid-column: 1 !important; }
  .satir-alt { flex-direction: column; align-items: stretch; }
  .satir-ozet { text-align: left; }
}

/* Çekmecede yükleme satırları — "28 ton" rakamı nereden geliyor? */
.drawer-lines h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drawer-lines .lines-count {
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: #c4780f; background: #fff2e2; border-radius: 12px; padding: 3px 8px;
}
.line-list { display: grid; gap: 8px; }
.line-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fcfcfe;
}
.line-no {
  display: flex; align-items: center; justify-content: center;
  height: 22px; border-radius: 6px;
  background: #eef1f6; color: #4b5262; font-size: 10px; font-weight: 800;
}
.line-main { min-width: 0; }
.line-main strong { display: block; font-size: 12px; color: #1d2433; overflow-wrap: anywhere; }
.line-main span { display: block; margin-top: 3px; font-size: 10.5px; color: #7b8390; }
.line-main .line-note { color: #9a6a12; }
.line-side { text-align: right; white-space: nowrap; }
.line-side b { display: block; font-size: 12px; color: #1d2433; font-variant-numeric: tabular-nums; }
.line-side span { display: block; margin-top: 3px; font-size: 10.5px; color: #7b8390; }

/* Düzenleme çekmecesindeki satır kutusu başlığı */
.satir-kutu-head { margin-bottom: 10px; }
.satir-kutu-head b { display: block; font-size: 12.5px; color: #1d2433; }
.satir-kutu-head small { display: block; margin-top: 3px; font-size: 11px; color: #7b8390; line-height: 1.5; }
.detail-drawer .satir-kutu { margin-top: 12px; padding: 12px; }
.detail-drawer .satir-alanlar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.detail-drawer .satir-alanlar label { grid-column: auto !important; }
.detail-drawer .satir-alanlar .s-mal,
.detail-drawer .satir-alanlar .s-not { grid-column: 1 / -1 !important; }

/**
 * TELEFONDA ÇEKMECEDEKİ SATIRLAR DA TEK SÜTUN.
 *
 * Çekmecenin kendi iki sütunlu kuralı (yukarıda) ekran genişliğinden
 * bağımsızdı; 390 piksellik bir telefonda "Yükleme günü" ile "Yükleme
 * yeri" yan yana 105'er piksele sıkışıyor, tarih alanı okunmaz oluyordu.
 */
@media (max-width: 560px) {
  .detail-drawer .satir-alanlar { grid-template-columns: minmax(0, 1fr); }
  .detail-drawer .satir-alanlar label,
  .detail-drawer .satir-alanlar .s-mal,
  .detail-drawer .satir-alanlar .s-not { grid-column: 1 / -1 !important; }
}

/* Eksiklik penceresinde satır düzeyindeki uyarı (giriş alanı değildir) */
.missing-lines {
  display: block;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #efc878;
  border-radius: 9px;
  background: #fff8ec;
  color: #855a12;
}
.missing-lines b { display: block; font-size: 12.5px; color: #7a4f08; }
.missing-lines span { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.55; }
.missing-lines .missing-lines-yol { color: #9a6a12; }

/* Satırdaki ambalaj seçimi: kapalıyken tek satır, açılınca kutucuk listesi */
.amb-sec { position: relative; margin-top: 5px; }
.amb-sec > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 400;
  color: #4c535e;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amb-sec > summary::-webkit-details-marker { display: none; }
.amb-sec > summary::after {
  content: "";
  flex: none;
  margin-left: 8px;
  border: 4px solid transparent;
  border-top-color: #98a0ac;
  transform: translateY(2px);
}
.amb-sec[open] > summary { border-color: #f09a2d; box-shadow: 0 0 0 3px #f09a2d20; }
.amb-sec[open] > summary::after { transform: rotate(180deg) translateY(2px); border-top-color: #d8871a; }
.amb-liste {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 210px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #dde2e8;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 14px 34px #171b2426;
}
.amb-liste label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 6px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  color: #414854;
  cursor: pointer;
  white-space: nowrap;
}
.amb-liste label:hover { background: #fafbfc; }
.amb-liste input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px;
  margin: 0 !important;
  accent-color: var(--primary);
}

/* Satır özeti uyarı durumu: kaydetmeyi engelleyen boş liste */
.satir-ozet.satir-uyari { color: #b4231a; font-weight: 700; }

/* ===================================================================
   TELEFONDA TABLOLAR KART OLUR
   ===================================================================

   Bir dosya tablosu 1300 piksel geniştir; 390 piksellik bir telefonda
   yatay kaydırılarak okunur ve müşteri adı kırpılır, düğmeler ekranın
   ortasında kalır. Sütunları daraltmak çözüm değil: on sütun 390 piksele
   anlamlı biçimde sığmaz.

   Bu yüzden telefonda tablo BİR LİSTE olur: her satır kendi kartıdır,
   her hücre "etiket: değer" biçiminde alt alta yazar. Etiketler tablo
   başlığından alınır (bkz. app.js · mobilTabloEtiketleri), böylece hiçbir
   görünüm dosyasına elle etiket yazmak gerekmez.

   İlk hücre kartın BAŞLIĞIDIR: müşteri adı, dosya numarası… Etiketi
   yazılmaz, tam genişlikte ve büyük durur.

   KART BİÇİMİ SINIFA BAĞLIDIR (`tablo-kart`) VE SINIFI JS KOYAR.
   Neden: etiketleri de JS yazıyor. Kuralları doğrudan `table`e bağlasaydık
   ve betik herhangi bir sebeple çalışmasaydı (hata, engellenen dosya)
   tablo başlıksız ve etiketsiz bir kart yığınına dönerdi — okunamaz.
   Sınıf yoksa tablo eskisi gibi yatay kaydırılır: bozuk değil, sadece
   dar. Aynı gerekçeyle bu blok `screen` ile sınırlıdır; yazdırma sayfa
   genişliği 640 pikselin altına düştüğünde (Chrome'da %125 ölçek) çıktıda
   sütun başlıklarının kaybolmasına yol açıyordu.

   HANGİ TABLOLAR KART OLMAZ (bkz. app.js · mobilTabloEtiketleri):
     · `tablo-genis` — çok sütunlu, karşılaştırmalı tablo; yatay kayar
     · `tablo-sik`   — dar sıralama tablosu; tablo kalır, küçülür
     · başlık satırı (`thead`) OLMAYAN tablolar — "Hesap özeti" gibi
       anahtar/değer listeleri; her satırı ayrı karta bölmek beş satırlık
       bir listeyi bir ekran dolusu kutuya çevirirdi
   =================================================================== */
@media screen and (max-width: 640px) {
  .table-wrap {
    overflow-x: visible;
    background: none;
    border-radius: 0;
  }
  /**
   * Dar ekranda tablo sarmalayıcısı, kaydırmanın panel kenarından
   * başlaması için dışarı taşırılmıştı (margin:0 -12px). Kart
   * görünümünde kaydırma yok; taşırma kartları panelin sağından
   * dışarı iter ve sağ kenarda bir şerit boş kalırdı.
   */
  .table-wrap:has(> table.tablo-kart) {
    margin: 0;
    padding: 0;
  }
  .table-wrap table.tablo-kart { min-width: 0; width: 100%; display: block; }
  /**
   * BAŞLIK SATIRI GÖRÜNMEZ AMA SİLİNMEZ.
   *
   * `display:none` başlıkları erişilebilirlik ağacından da çıkarır:
   * ekran okuyucu kullanan biri hücrenin hangi sütuna ait olduğunu
   * öğrenemez. Bunun yerine başlık 1×1 piksele kırpılır — gözle
   * görünmez, okuyucuya görünür. Sütun/hücre ilişkisi için gereken
   * roller app.js'te yeniden atanır.
   */
  .table-wrap table.tablo-kart thead,
  .table-wrap table.tablo-kart thead tr,
  .table-wrap table.tablo-kart thead th {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
  }
  /**
   * Satır ve hücreler de küçültülür. Yalnız `thead` kırpılsaydı içindeki
   * `th` kutuları doğal genişliklerinde kalır (mutlak konumlu bir kutunun
   * çocukları taşabilir): gözle görünmezler ama ekranın sağına taşarlar
   * ve 320 pikselde yatay kaymaya yol açarlar.
   *
   * Erişilebilirlik ağacındaki sütun/hücre ilişkisi görünüm biçiminden
   * değil, app.js'in yazdığı rollerden gelir (table / rowgroup / row /
   * columnheader / cell), bu yüzden kırpma ilişkiyi bozmaz.
   */
  .table-wrap table.tablo-kart tbody { display: block; }

  .table-wrap table.tablo-kart tbody tr {
    display: block;
    margin: 0 12px 10px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px #171b240a;
  }
  .table-wrap table.tablo-kart tbody tr:hover { background: #fff; }

  .table-wrap table.tablo-kart tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px 12px;
    width: auto;
    max-width: none;
    padding: 7px 0 0;
    border: 0;
    text-align: left;
    /**
     * Tabloda hücreler sarmaz (td{white-space:nowrap}); sütun genişliği
     * zaten içeriğe göre ayarlanır. Kartta genişlik sabittir: sarmayan
     * metin kartın dışına taşar ve "Kambiyo Uzmanı" → "Kambiyo Uzman"
     * diye kırpılırdı.
     */
    white-space: normal;
  }

  /* Etiket: başlıktan gelir, hücrenin solunda küçük ve soluk durur */
  .table-wrap table.tablo-kart tbody td[data-mobil-etiket]::before {
    content: attr(data-mobil-etiket);
    flex: none;
    max-width: 44%;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.5;
    color: #96a0ae;
    text-transform: uppercase;
  }
  /* Değer tarafı sağa yaslanır; uzun metin sarar, kırpılmaz */
  .table-wrap table.tablo-kart tbody td > * {
    text-align: right;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .table-wrap table.tablo-kart tbody td > *:only-child { margin-left: auto; }
  .table-wrap table.tablo-kart tbody td[data-mobil-etiket]::before { flex: 0 0 auto; }

  /* KART BAŞLIĞI — ilk hücre: etiketsiz, tam genişlik, soldan hizalı */
  .table-wrap table.tablo-kart tbody td:first-child {
    display: block;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
  }
  .table-wrap table.tablo-kart tbody td:first-child::before { content: none; }
  .table-wrap table.tablo-kart tbody td:first-child > * { text-align: left; margin-left: 0; }
  .table-wrap table.tablo-kart tbody td:first-child .customer-name {
    max-width: none;
    white-space: normal;
    font-size: 14px;
  }

  /**
   * SEÇİM KUTUSU KART BAŞLIĞI OLMAZ.
   *
   * Yükleme programında ilk sütun "bu satır çıktıya girsin mi" kutusudur.
   * Kartın başlığı ona verilirse kartın tepesinde tek başına bir kutucuk
   * durur, asıl başlık (sipariş numarası) etiketli bir satıra düşer.
   * Kutu sağ üst köşeye alınır, başlık ikinci hücreye geçer.
   */
  .table-wrap table.tablo-kart tbody tr:has(> td.tick) { position: relative; }
  .table-wrap table.tablo-kart tbody td.tick {
    position: absolute;
    top: 10px;
    right: 12px;
    /* Program tablosunda hücre 42px sabit genişlikteydi: kutu sağa
       yaslanmıyor, başlığın üstüne biniyordu */
    width: auto;
    padding: 0;
    border: 0;
    margin: 0;
  }
  .table-wrap table.tablo-kart tbody td.tick input {
    width: 22px;
    height: 22px;
  }
  .table-wrap table.tablo-kart tbody td.tick + td {
    display: block;
    padding: 0 46px 8px 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
  }
  .table-wrap table.tablo-kart tbody td.tick + td::before { content: none; }
  .table-wrap table.tablo-kart tbody td.tick + td > * {
    text-align: left;
    margin-left: 0;
  }

  /* Kırpma kuralları kartta gereksiz: metin sarar */
  .table-wrap table.tablo-kart tbody td .mode > div > span,
  .table-wrap table.tablo-kart tbody td .order-cell,
  .table-wrap table.tablo-kart tbody td .owner,
  .table-wrap table.tablo-kart tbody td .owner span:last-child {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .table-wrap table.tablo-kart tbody td .mode { justify-content: flex-end; }

  /**
   * AŞAMA RAYI kartta tam genişlik olur.
   *
   * Ray, geniş bir sütunda yan yana duran altı bölmedir. Kartta değer
   * tarafı dar kaldığı için ray ince bir çizgiye dönüşüyor ve hangi
   * aşamada olduğunuz okunmuyordu. Kartta ray kendi satırına geçer.
   */
  .table-wrap table.tablo-kart tbody td.stage-col { display: block; }
  .table-wrap table.tablo-kart tbody td.stage-col::before {
    display: block;
    margin-bottom: 6px;
  }
  .table-wrap table.tablo-kart tbody td.stage-col > * { text-align: left; }
  .table-wrap table.tablo-kart tbody td.stage-col .stage-rail {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
  }
  .table-wrap table.tablo-kart tbody td.stage-col .stage-rail i {
    flex: 1;
    min-width: 0;
  }

  /* İŞLEM DÜĞMELERİ kartın altında, parmakla basılacak boyutta */
  /**
   * Geniş tabloda bu hücre sağa YAPIŞIRDI (position:sticky) ve kendi
   * beyaz zeminiyle gölgesi vardı; kartta ikisi de yanlıştır: kartın
   * ortasında ayrı renkte bir dikdörtgen kalırdı (koyu temada belirgin).
   */
  .table-wrap table.tablo-kart tbody td:has(> .row-actions),
  .table-wrap table.tablo-kart tbody td.row-actions {
    position: static;
    display: block;
    background: transparent;
    box-shadow: none;
    padding-top: 10px;
  }
  .table-wrap table.tablo-kart tbody td:has(> .row-actions)::before,
  .table-wrap table.tablo-kart tbody td.row-actions::before { content: none; }
  .table-wrap table.tablo-kart .row-actions {
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-start;
  }
  .table-wrap table.tablo-kart .row-actions > button,
  .table-wrap table.tablo-kart .row-actions > .btn-text {
    min-height: 38px;
    padding: 0 14px;
  }
  /* Genel dokunma kuralıyla aynı ölçü (40px): iki blok çelişmesin */
  .table-wrap table.tablo-kart .row-actions > .btn-icon {
    width: 40px;
    height: 40px;
  }

  /* Boş liste kutusu kart çerçevesi içinde kalmasın */
  .table-wrap table.tablo-kart tbody tr:has(.table-empty),
  .table-wrap table.tablo-kart tbody tr:has(.empty-state) {
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .table-wrap table.tablo-kart tbody td:has(.table-empty),
  .table-wrap table.tablo-kart tbody td:has(.empty-state) {
    display: block;
    padding: 0;
    border: 0;
  }

  /* Rakam tabloları kart olmaz; kaydırma ipucu kalır */
  .table-wrap:has(> table:not(.tablo-kart)) {
    overflow-x: auto;
    background:
      linear-gradient(90deg, #fff 30%, #fff0) left / 28px 100% no-repeat,
      linear-gradient(90deg, #fff0, #fff 70%) right / 28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, #171b2414, #171b2400) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, #171b2414, #171b2400) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  /**
   * DAR TABLO — kart olmaz, küçülür.
   *
   * Sıralama listelerinde (raporlardaki kırılımlar) satırlar birbiriyle
   * karşılaştırılır: "hangi müşteride kaç dosya var" sorusu sayı sütununu
   * yukarıdan aşağı okuyarak cevaplanır. Otuz satırı otuz karta bölmek bu
   * okumayı imkânsızlaştırır. Sütun sayısı az olduğu için tablo, 720
   * piksellik alt sınırı bırakınca telefona da sığar.
   */
  .table-wrap table.tablo-sik { min-width: 0; width: 100%; }
  .table-wrap table.tablo-sik th,
  .table-wrap table.tablo-sik td { padding-left: 8px; padding-right: 8px; font-size: 11.5px; }
  .table-wrap table.tablo-sik th:first-child,
  .table-wrap table.tablo-sik td:first-child { padding-left: 12px; }
  /* İçeriği yine de sığmayan dar tablo kaydırılabilir kalmalı: 720
     pikselik alt sınır kalktığı için çoğu sığar, sığmayan kırpılmaz */
  .table-wrap:has(> .tablo-sik) { overflow-x: auto; }

  /* Dar tabloda ikinci satırlar (e-posta, künye) yeri boşuna doldurur */
  .table-wrap table.tablo-sik .owner { max-width: none; }
  .table-wrap table.tablo-sik td > strong + span,
  .table-wrap table.tablo-sik td > span:not(:first-child) { display: none; }
}

/* ===================================================================
   ÜST ÇUBUK — 430 PİKSELİN ALTINDA İKİ SATIR
   ===================================================================

   Bu kural yukarıda (max-width:430px bloğunda) bir kez yazılmıştı, ama
   ondan SONRA gelen max-width:640px bloğu dolguyu geri alıyordu: sarmalanan
   çubuğun alt satırı dolgusuz kalıyor, arama kutusu çubuğun dışına taşıp
   sayfa başlığının üstüne biniyordu. Kuralı burada, en sonda yineliyoruz;
   basamak sırası böylece kesinleşir.
   =================================================================== */
@media (max-width: 430px) {
  .topbar {
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    padding: 9px 10px;
    row-gap: 8px;
  }
}

/* ===================================================================
   DOKUNMA HEDEFLERİ — TELEFONDA PARMAK KADAR
   ===================================================================

   Fare imleci bir pikseli bulur, parmak bulamaz. Ekranda 22 piksel
   yüksekliğinde bir rozet ya da 16 pikselik bir kutucuk masaüstünde
   sorunsuz çalışır; telefonda yanlış öğeye basılır ve kullanıcı
   "sistem dokunmuyor" der.

   Bu blok yalnız PARMAKLA kullanılan cihazlarda çalışır: masaüstü
   görünümü olduğu gibi kalır, bilgi yoğunluğu azalmaz.

   Sınır 640'tan 1024'e çıkarıldı: 768 piksellik bir tablet de
   parmakla kullanılır, orada da 16 piksellik bir kutucuğa nişan
   almak gerekiyordu. Ölçüt genişlik değil, imlecin cinsidir.
   =================================================================== */
@media screen and (max-width: 1024px) and (pointer: coarse) {
  /* Seçim kutuları: 16 → 22 piksel */
  input[type="checkbox"]:not(.amb-liste input),
  input[type="radio"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }

  /* Süzgeç/sekme bağlantıları ve metin düğmeleri */
  .filter,
  .status-tabs button,
  .tabs a,
  .tab-link,
  .btn-text,
  .week-filters a,
  .segment-control a,
  .weekly-tools a,
  .logistics-tools a,
  .report-custom button,
  .brand-actions button,
  .panel-head button,
  .week-card-top button,
  .week-card footer button,
  .rollover-footer a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Kart üstündeki "•••" düğmesi kare kalsın */
  .week-card-top button { min-width: 38px; }

  /* Simge düğmeleri (göz, kalem, çöp kutusu…) */
  .btn-icon,
  .icon-btn,
  .brand .mobile-close {
    min-width: 40px;
    min-height: 40px;
  }

  /* "N eksik" rozeti bir DÜĞMEDİR: tıklanınca eksikleri tamamlatır */
  .missing-badge {
    min-height: 36px;
    padding: 0 11px;
  }

  /* Kart içindeki bağlantılar satır yüksekliğinden küçük kalmasın */
  .table-wrap table tbody td a,
  .table-wrap table tbody td button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
  /**
   * Rakam tablosundaki ad bağlantıları (raporlardaki sıralama listeleri)
   * sola yaslı ve 32 pikselde kalır: otuz satırlık bir sıralamada her
   * satırı 36 piksele çıkarmak listeyi bir ekrandan üç ekrana uzatır ve
   * karşılaştırmayı zorlaştırır. 32 piksel parmak için yeterlidir.
   */
  .table-wrap table tbody td a.cari-ad { text-align: left; min-height: 32px; }

  /**
   * Form alanlarının 16 piksellik yazı boyu BURADA DEĞİL, yukarıdaki
   * `@media (max-width:900px)` bloğunda `!important` ile veriliyor
   * (iOS Safari daha küçük yazıda alana dokununca sayfayı kendiliğinden
   * yakınlaştırır). Aynı kuralı burada yinelemek, o kural bir gün
   * kaldırıldığında sessizce devre dışı kalacak ölü bir satır bırakırdı.
   */
}

/* ===================================================================
   TELEFONDA SÜZGEÇ ŞERİDİ KATLANIR
   ===================================================================

   Beş süzgeç alanı telefonda alt alta iner ve ilk dosya satırını ekranın
   çok altına iter. Şerit tek düğmenin arkasına alınır; düğmede kaç
   süzgeç seçili olduğu yazar, seçim varsa şerit AÇIK başlar.

   Düğme yalnız telefonda görünür: masaüstünde şerit zaten tek satırdır
   ve gizlenmesi kullanıcıyı fazladan bir tıklamaya zorlardı.

   KATLAMA YALNIZ DÜĞME VARSA UYGULANIR (`suzgec-katlandi`). Düğmeyi JS
   koyuyor; kural doğrudan `.shipment-filters:not(.acik)` üzerine
   yazılsaydı ve betik çalışmasaydı şerit TAMAMEN kaybolurdu — açacak
   düğme de olmadığı için kullanıcı süzgeçlere hiç ulaşamazdı. Sınıf
   yoksa şerit eskisi gibi açık durur.
   =================================================================== */
.suzgec-ac { display: none; }

@media screen and (max-width: 640px) {
  .suzgec-ac {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 0 12px 10px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #444b58;
    cursor: pointer;
  }
  .suzgec-ac b {
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #fff0df;
    color: #c4780f;
    font-size: 11px;
    text-align: center;
  }
  .suzgec-ac i { margin-left: auto; font-style: normal; color: #9aa1ac; }

  .suzgec-katlandi .shipment-filters:not(.acik) { display: none; }
}

/* ===================================================================
   SAYFALAMA ŞERİDİ VE LİSTE ARAMASI
   ===================================================================

   Listeler eskiden SESSİZCE kesiliyordu: Onaylar 50, Finans 200,
   Lojistik 500 kayıtta duruyor ve kullanıcıya bir şey söylemiyordu.
   Şerit iki şeyi birden gösterir — kaç kayıttan kaçını gördüğünü ve
   sayfalar arasında nasıl geçileceğini. Tek sayfalık listede oklar
   basılmaz ama SAYIM yazar: listenin tamamını gördüğünün kanıtıdır.
   =================================================================== */
.pager-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
}
.pager-count {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #7b8390;
  font-variant-numeric: tabular-nums;
}
.pager-count b { color: #3a4150; }

/* Depo tavanına değildi: liste eksik OLABİLİR, kullanıcı bunu bilmeli */
.pager-capped {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 11px;
  background: #fff4d8;
  color: #8b630b;
  font-size: 10.5px;
  font-weight: 700;
}
.pager-capped svg { flex: none; }

/* Liste içi arama: şeridin kendi satırı, panelden önce durur */
.liste-ara {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.liste-ara .search { flex: 1; min-width: 0; }
.liste-ara .btn-text { flex: none; white-space: nowrap; }

/**
 * Arama + dışa aktarım aynı satırda durur: ikisi de "bu listeyle ne
 * yapacağım" sorusunun cevabı, ayrı yerlerde durunca dışa aktarım
 * görünmüyordu.
 */
.liste-cubuk {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.liste-cubuk .liste-ara { flex: 1 1 320px; margin: 0; }
.disa-aktar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.disa-aktar svg { flex: none; }

@media (max-width: 640px) {
  .pager-wrap { padding: 12px; }
  .liste-ara { flex-wrap: wrap; }
  .liste-ara .search { flex: 1 1 100%; }
  /* Dar ekranda dışa aktarım kendi satırında, tam genişlikte */
  .liste-cubuk .liste-ara { flex: 1 1 100%; }
  .disa-aktar { flex: 1 1 100%; justify-content: center; }
}

/* ==================================================================
   BOŞ DURUM — TEK BİÇİM
   ==================================================================
   Sistemde beş ayrı boş durum biçimi vardı (.empty-state, .table-empty,
   .queue-empty, .day-empty, .desk-empty); ikisi bile yan yana
   gelmediği için fark edilmiyordu ama ekranlar arasında gezen kullanıcı
   her seferinde başka bir tipografiyle karşılaşıyordu.

   Artık hepsi views/partials/bos-durum.php tarafından üretiliyor ve
   aynı iskeleti taşıyor: simge → başlık (h3) → açıklama (p) → eylem.
   Eski sınıf adları DEĞİŞTİRİLMEDİ, yalnız yerleşim farkı olarak
   yaşıyorlar (tablo hücresi içinde daha az boşluk gibi); böylece
   üçüncü taraf bir görünüm ya da yazdırma biçimi bozulmuyor.
   -------------------------------------------------------------- */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
  padding: 52px 24px;
  color: #868e99;
}
.empty-state > svg { width: 30px; height: 30px; color: #c3c9d2; margin-bottom: 2px; }
.empty-state h3 { font-size: 14.5px; color: #333a45; margin: 0; letter-spacing: -0.01em; }
.empty-state p {
  font-size: 12.5px;
  color: #7d8592;
  margin: 0;
  max-width: 48ch;
  line-height: 1.65;
}
.empty-state p b { color: #5c6674; }
/* Eylem düğmesi: bağlantı da düğme de aynı görünür */
.empty-state > .secondary {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  font-size: 12px;
  text-decoration: none;
}
.empty-state > .secondary svg { flex: none; }

/* Tablo hücresi içinde: satır yüksekliği şişmesin */
.empty-state.table-empty { padding: 34px 20px; }
/* Kenar sütununda (e-posta kuyruğu) dar alan */
.empty-state.queue-empty { padding: 40px 18px; }
.empty-state.queue-empty p { max-width: 34ch; }
/* Kendi paneli olan boş durum: panel çerçevesi zaten var */
.empty-state.panel { padding: 56px 24px; }

@media (max-width: 640px) {
  .empty-state { padding: 38px 18px; }
  .empty-state.table-empty { padding: 26px 14px; }
  .empty-state p { font-size: 12px; }
}

/* ==================================================================
   SAYFA GEÇİŞ ŞERİDİ VE DÜĞME BEKLEME HALKASI
   ==================================================================
   Süzgeç, sekme ve sayfalama sunucuda çalışıyor; tıklama ile yeni
   sayfa arasında geçen sürede ekranda hiçbir belirti yoktu. Şerit
   yüzde göstermez — ne kadar süreceği bilinmiyor — yalnız "istek
   yolda" der. Gecikmeli başlar (JS tarafında 140 ms): hızlı
   cevaplarda hiç görünmez, ekran her tıklamada titremez.
   -------------------------------------------------------------- */
.nav-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s var(--ease, ease);
  background: rgba(20, 28, 44, .07);
}
.nav-progress.is-on { opacity: 1; }
.nav-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #ef8b17, #f7b458);
  animation: iskur-nav-slide 1.1s var(--ease, ease-in-out) infinite;
}
@keyframes iskur-nav-slide {
  0%   { left: -40%; width: 38%; }
  55%  { width: 62%; }
  100% { left: 100%; width: 32%; }
}

/* Düğme içi bekleme halkası: yazı yerinde kalır, yanında halka döner */
.btn-spin {
  display: inline-block;
  flex: none;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .75;
  animation: iskur-spin .7s linear infinite;
}

/**
 * HAREKETİ AZALT tercihi açıkken animasyon durdurulmaz, YAVAŞLATILIR:
 * tamamen durdurulursa gösterge "donmuş" görünür ve asıl bilgisini
 * (işlem sürüyor) kaybeder.
 */
@media (prefers-reduced-motion: reduce) {
  .nav-progress::before { animation-duration: 3s; }
  .btn-spin { animation-duration: 2.4s; }
}

/* ==================================================================
   BELGE MERKEZİ
   ==================================================================
   Evrak bugüne dek yalnız dosya dosya, çekmeceden görülebiliyordu.
   Bu ekran aynı belgeleri tek listede toplar; biçim Denetim İzi'nin
   süzgeç şeridini paylaşır (.activity-filter), çünkü ikisi de aynı işi
   yapar: geniş bir kayıt kümesini daraltmak.
   -------------------------------------------------------------- */
.belge-ozet {
  padding: 18px 20px;
  margin-bottom: 14px;
  display: grid;
  gap: 12px;
}
.belge-ozet > div:first-child { display: flex; align-items: flex-start; gap: 13px; }
.belge-ozet small {
  display: block;
  font-size: 9px;
  letter-spacing: .08em;
  color: #c67d10;
  font-weight: 800;
}
.belge-ozet strong { display: block; font-size: 15px; margin-top: 4px; }
.belge-ozet p { font-size: 11.5px; color: #7e8692; margin: 5px 0 0; max-width: 62ch; line-height: 1.6; }

/**
 * KAYIP BELGE UYARISI.
 * Künyesi duran ama diskte bulunamayan evrak; kullanıcının aramadığı
 * ama bilmesi gereken tek bilgi olduğu için şeridin üstünde durur.
 */
.belge-kayip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 10px 13px;
  border-radius: 9px;
  background: #fbe9e7;
  color: #8c3f38;
  font-size: 11.5px;
  line-height: 1.55;
}
.belge-kayip svg { flex: none; }
.belge-kayip b { color: #7a332c; }

.belge-sekmeler {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 13px;
}
.belge-sekmeler .filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  text-decoration: none;
}
.belge-sekmeler .filter svg { flex: none; opacity: .75; }
.belge-sekmeler .filter.active { background: #fff0df; color: #c86f0b; border-color: #f0d7b4; }

/* Belge satırı: ad + uzantı rozeti + boyut */
.belge-ad { display: flex; align-items: flex-start; gap: 9px; }
.belge-uzanti {
  flex: none;
  min-width: 34px;
  height: 30px;
  padding: 0 5px;
  border-radius: 7px;
  background: #eef1f5;
  color: #5b6472;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
}
.belge-ad strong { display: block; font-size: 12px; word-break: break-word; }
.belge-ad > span > span { display: block; font-size: 10.5px; color: #868e99; margin-top: 3px; }
.belge-ad .badge { margin-top: 5px; }
.belge-not {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  color: #7e8692;
  line-height: 1.5;
  font-style: italic;
}
.belge-tablo td > strong svg { vertical-align: -2px; margin-right: 4px; opacity: .7; }
.belge-dosya { text-decoration: none; }
.belge-dosya strong { color: #c1700d; }
/**
 * Diskte bulunamayan belgenin satırı soluklaşır ama gizlenmez.
 *
 * Sağa sabitlenmiş işlem sütununun kendi zemini var (yatay kaydırmada
 * düğmeleri okunur tutmak için); o hücre de satırın tonunu almalı,
 * yoksa uyarı satırının sağ ucunda bembeyaz bir dikdörtgen kalır.
 */
.belge-kayip-satir { background: #fffafa; }
.belge-kayip-satir td:has(> .row-actions) { background: #fffafa; }
.klavye-secili td:has(> .row-actions) { background: #fffaf2; }
.belge-kayip-satir .belge-uzanti { background: #fbe4e2; color: #9c4b43; }
.belge-yok { font-size: 10.5px; color: #9c4b43; font-weight: 700; }

/**
 * BELGE SÜZGECİ KENDİ IZGARASINI KULLANIR.
 *
 * .activity-filter altı öğe için yazılmış (arama, işlem türü, kullanıcı,
 * başlangıç, bitiş, eylemler). Belge Merkezi "tür"ü sekmelere taşıdığı
 * için beş öğe gönderiyor ve düğmeler 140 pikselik sabit raya düşüp
 * panelin dışına taşıyordu. Beş öğelik kendi şablonu var.
 */
/**
 * Şablon YALNIZ GENİŞ EKRANDA geçerlidir: dar ekranlarda
 * .activity-filter'ın kendi kırılım kuralları (1180px ve 640px) devreye
 * girer. Şablonu her genişlikte uygulamak, 320 pikselde en küçük sütun
 * genişliklerinin toplamı ekranı aştığı için arama kutusunu ve tarih
 * alanlarını panelin dışına taşırıyordu.
 */
@media (min-width: 1181px) {
  .belge-filtre {
    grid-template-columns: minmax(220px, 1.6fr) minmax(150px, 1fr) repeat(2, 140px);
  }
}
/**
 * DÜĞMELER KENDİ SATIRINDA.
 *
 * Aynı raya sığdırmaya çalışmak, ızgaranın en dar noktasında (1181px
 * ile ~1300px arası) düğmeleri panelin dışına taşırıyordu: "auto"
 * sütunu küçülemez, öteki sütunların en küçük genişlikleri de sabittir.
 * Kendi satırında durduklarında her genişlikte öngörülebilir.
 */
.belge-filtre .activity-filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  flex-wrap: wrap;
}
/* Tarih aralığının neyi süzdüğünü söyleyen not, formun altında */
.belge-tarih-notu { grid-column: 1 / -1; margin: 0; }

@media (max-width: 760px) {
  .belge-ozet > div:first-child { gap: 10px; }
  .belge-sekmeler { margin-bottom: 10px; }
  /* Şerit ikonu telefonda da kalsın: başlığın tek görseli budur */
  .belge-ozet .stat-icon { display: grid; }
}

/* Boş durumdaki bağlantı ve düğme aynı görünsün (özgüllük eşitlenir) */
.empty-state > a.secondary,
.empty-state > button.secondary {
  margin-top: 6px;
  gap: 7px;
  padding: 0 14px;
  height: 36px;
}

/* Boş durum ikonu: 1.6:1 kontrastla görünmez sayılırdı */
.empty-state > svg { color: #a8b0bd; }

/* Yazdırmada süzgeç ve uyarı düğmesi kâğıda girmesin */
@media print {
  .belge-filtre,
  .saglik-uyari,
  .liste-cubuk .liste-ara,
  .disa-aktar { display: none !important; }
  .belge-sekmeler { overflow: visible; flex-wrap: wrap; }
}

/* ==================================================================
   SİSTEM SAĞLIĞI PANELİ
   ==================================================================
   Burada eskiden yalnız künye bilgisi vardı (PHP sürümü, veritabanı
   adı, örnek cron satırı) ve hiçbir SORUYU yanıtlamıyordu. Artık her
   satır bir denetimdir; renk durumu, sağdaki değer ölçümü, altındaki
   kod satırı ise yapılacak işi söyler.

   ÇÖZÜM SATIRI YALNIZ GEREKİNCE ÇIKAR: her satıra "ne yapmalı" yazmak,
   gerçekten el atılması gereken satırları görünmez kılardı.
   -------------------------------------------------------------- */
.saglik-panel { padding-bottom: 6px; }
.saglik-kume { padding: 4px 20px 10px; }
.saglik-baslik {
  margin: 12px 0 6px;
  font-size: 9.5px;
  letter-spacing: .09em;
  font-weight: 800;
  color: #98a0ac;
  text-transform: uppercase;
}
.saglik-satir {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
  padding: 11px 0;
  border-top: 1px solid #f0f2f5;
}
.saglik-satir:first-of-type { border-top: 0; }
.saglik-satir strong { display: block; font-size: 12.5px; }
.saglik-satir p {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: #7e8692;
  line-height: 1.55;
  max-width: 68ch;
}
.saglik-isaret {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
}
.saglik-deger {
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  padding-top: 3px;
}
/**
 * Çözüm satırı SEÇİLEBİLİR bir kod bloğudur: kullanıcı crontab satırını
 * ya da chmod komutunu doğrudan kopyalar.
 */
.saglik-cozum {
  display: inline-block;
  margin-top: 7px;
  padding: 6px 9px;
  border-radius: 7px;
  background: #f4f6f8;
  border: 1px solid #e6e9ed;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #4d5663;
  word-break: break-all;
  user-select: all;
}
.saglik-ok    .saglik-isaret { background: #e7f5ed; color: #3f8a66; }
.saglik-ok    .saglik-deger  { color: #3f8a66; }
.saglik-warn  .saglik-isaret { background: #fff3da; color: #a8760a; }
.saglik-warn  .saglik-deger  { color: #a8760a; }
.saglik-fail  .saglik-isaret { background: #fbe4e2; color: #a2453c; }
.saglik-fail  .saglik-deger  { color: #a2453c; }
.saglik-info  .saglik-isaret { background: #eaeef3; color: #6b7482; }
.saglik-info  .saglik-deger  { color: #8a919c; }
.saglik-kunye {
  margin: 0;
  padding: 13px 20px 16px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  color: #98a0ac;
}

@media (max-width: 640px) {
  .saglik-satir { grid-template-columns: 22px minmax(0, 1fr); }
  /* Dar ekranda ölçüm satırın altına iner, metni sıkıştırmaz */
  .saglik-deger { grid-column: 2; padding-top: 0; }
}

/* Gidilecek ekran: kod değildir, kopyalanmaz — ayrı görünür */
.saglik-yol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #b9740e;
}
.saglik-yol svg { flex: none; }

/**
 * KONTROL MERKEZİ SAĞLIK UYARISI.
 * Yalnız fiilen duran bir iş varken ve yalnız el atabilecek kullanıcıda
 * çıkar. Kapatma düğmesi YOKTUR: kapatılabilseydi ilk gün kapatılır ve
 * sorun yine görünmez olurdu — zaten görünmez olması sorundu.
 */
.saglik-uyari {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border-color: #efcecb;
  background: #fef6f5;
}
.saglik-uyari > span {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fbe4e2;
  color: #a2453c;
  display: grid;
  place-items: center;
}
.saglik-uyari > div { flex: 1; min-width: 0; }
.saglik-uyari strong { display: block; font-size: 13.5px; color: #8c3a32; }
.saglik-uyari p {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: #8a6a66;
  line-height: 1.55;
}
.saglik-uyari .secondary {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .saglik-uyari { flex-wrap: wrap; }
  .saglik-uyari .secondary { flex: 1 1 100%; justify-content: center; }
}

/* ==================================================================
   404 VE 403 SAYFALARI
   ==================================================================
   İkisi eskiden AYNI on üç satırlık kutuydu: "Aradığınız ekran mevcut
   değil ya da erişim yetkiniz yok." İki apayrı durum tek cümleye
   sıkıştırılmıştı ve kullanıcı hangisi olduğunu bilemiyordu — oysa
   yapılacak iş farklıdır: biri adresi düzeltir, öteki yöneticisine
   sorar. Artık ayrı sayfalar ve her biri NEREYE gidileceğini yazar.
   -------------------------------------------------------------- */
.hata-sayfa {
  padding: 54px 30px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 12px;
}
.hata-kod {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #dfe3e9;
  line-height: 1;
}
.hata-yetki .hata-kod { color: #f0d3cf; }
.hata-sayfa h2 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.hata-sayfa > p {
  margin: 0;
  max-width: 56ch;
  font-size: 12.5px;
  color: #7d8592;
  line-height: 1.65;
}
.hata-kime {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  max-width: 56ch;
  margin: 2px 0 0;
  padding: 11px 13px;
  border-radius: 9px;
  background: #fff8ec;
  border: 1px solid #f2e0c4;
  font-size: 11.5px;
  color: #7c6238;
  line-height: 1.6;
}
.hata-kime svg { flex: none; margin-top: 1px; color: #c0871b; }
.hata-eylem { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 6px; }
.hata-eylem a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  height: 38px;
  padding: 0 15px;
}
.hata-eylem svg { flex: none; }

/* "Açabildiğiniz ekranlar": kullanıcı buraya çoğu zaman eskimiş bir yer
   imiyle düşer; listeyi görmek aramaktan hızlıdır */
.hata-ekranlar { margin-top: 14px; width: 100%; max-width: 640px; }
.hata-baslik {
  margin: 0 0 9px;
  font-size: 9.5px;
  letter-spacing: .09em;
  font-weight: 800;
  color: #98a0ac;
  text-transform: uppercase;
}
.hata-ekranlar > div { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.hata-ekranlar a {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 11.5px;
  font-weight: 650;
  color: #5a6371;
  text-decoration: none;
  background: #fff;
}
.hata-ekranlar a:hover { border-color: #e2b878; color: #b9740e; }
.hata-ipucu { margin: 16px 0 0; font-size: 11px; color: #98a0ac; max-width: 54ch; }

@media (max-width: 640px) {
  .hata-sayfa { padding: 36px 18px; }
  .hata-kod { font-size: 36px; }
  .hata-eylem a { flex: 1 1 100%; justify-content: center; }
}

/**
 * KLAVYEYLE SEÇİLİ SATIR (j / k).
 * Seçim renkle DEĞİL odakla taşınır (bkz. app.js · listedeGezin); bu
 * kural yalnız odağı görünür kılar. Kenardaki turuncu çizgi, satırın
 * hangi liste öğesi olduğunu kaydırırken de belli eder.
 */
.klavye-secili {
  position: relative;
  background: #fffaf2 !important;
  /**
   * SEÇİM YAPIŞKAN ÜST ÇUBUĞUN ALTINA KAYMASIN.
   * scrollIntoView satırı görüntünün tepesine getirir; üst çubuk
   * sticky ve 82px olduğu için satır tam onun arkasında kalıyordu.
   */
  scroll-margin-top: 96px;
  scroll-margin-bottom: 24px;
  /**
   * ODAK GÖSTERGESİ HER KOŞULDA GÖRÜNÜR.
   * Yalnız zemin rengi ve ilk hücredeki çizgi yetmiyordu: tablo yatay
   * kaydırıldığında ilk hücre ekrandan çıkıyor ve odaklanmış satırın
   * hiçbir işareti kalmıyordu (WCAG 2.4.7).
   */
  outline: 2px solid var(--orange, #ef8b17);
  outline-offset: -2px;
}
.klavye-secili::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--orange, #ef8b17);
  border-radius: 0 3px 3px 0;
}
tr.klavye-secili > td:first-child { box-shadow: inset 3px 0 0 var(--orange, #ef8b17); }
tr.klavye-secili::after { content: none; }

@media (prefers-reduced-motion: no-preference) {
  .klavye-secili { transition: background .12s var(--ease, ease); }
}

/* ==================================================================
   İÇ ZAMANLAYICI ŞERİDİ
   ==================================================================
   Sağlık panelinin başında durur, çünkü altındaki bütün cron
   satırlarının anlamı bu anahtara bağlıdır: "cron kurulu değil ama
   işler yürüyor" ile "hiçbir şey çalışmıyor" bambaşka durumlardır.
   -------------------------------------------------------------- */
.zamanlayici-serit {
  margin: 0 20px 4px;
  padding: 14px 16px;
  border: 1px solid #e3ecf3;
  border-radius: 11px;
  background: #f6fafc;
}
/* Kapalıyken şerit uyarı rengine döner: işleri kimse yapmıyor olabilir */
.zamanlayici-serit.kapali { border-color: #f0dcc4; background: #fffaf2; }
.zamanlayici-baslik { display: grid; gap: 5px; }
.zamanlayici-baslik .checkbox-row { margin: 0; }
.zamanlayici-baslik > span {
  font-size: 11.5px;
  color: #6f7885;
  line-height: 1.6;
  max-width: 78ch;
}
.zamanlayici-isler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.zamanlayici-is {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}
.zamanlayici-is strong { display: block; font-size: 11.5px; }
.zamanlayici-is span   { display: block; font-size: 10.5px; color: #8a919c; margin-top: 3px; }
.zamanlayici-is button {
  flex: none;
  height: 30px;
  padding: 0 10px;
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.zamanlayici-is button svg { flex: none; }

@media (max-width: 640px) {
  .zamanlayici-serit { margin: 0 14px 4px; padding: 12px; }
  .zamanlayici-is { flex-wrap: wrap; }
  .zamanlayici-is button { flex: 1 1 100%; justify-content: center; }
}

/* ==================================================================
   MODÜLLER PANELİ (yalnız süpervizör)
   ==================================================================
   Yetki matrisi "kim açabilir" der; bu panel "bu ekran bu kurumda
   kullanılıyor mu" sorusunu yanıtlar. Kutular AÇIK anlamındadır:
   işaretliyse ekran menüde vardır.
   -------------------------------------------------------------- */
/**
 * Panel ızgara satırının tamamına yayılmasın: yanındaki panel uzunsa
 * modül listesinin altında boş bir alan kalıyordu.
 */
.modul-panel { align-self: start; }
.modul-govde { padding: 4px 20px 18px; display: grid; gap: 12px; align-content: start; }
.modul-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 8px;
}
.modul-satir {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  transition: border-color .14s var(--ease, ease), background .14s var(--ease, ease);
}
.modul-satir:hover { border-color: #d8c3a0; }
/* Kutular sistemin geri kalanıyla aynı: turuncu vurgu, 16px */
.modul-satir input {
  margin-top: 2px;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}
.modul-satir strong { display: block; font-size: 12px; }
.modul-satir small  { display: block; font-size: 10.5px; color: #868e99; margin-top: 3px; line-height: 1.5; }
/* Kapalı modül soluklaşır ama okunur kalır: ne olduğunu görmek gerekir */
.modul-satir.kapali { background: #fafbfc; border-style: dashed; }
.modul-satir.kapali strong { color: #8a919c; text-decoration: line-through; }

.modul-kilitli { display: flex; align-items: flex-start; gap: 8px; }
.modul-kilitli svg { flex: none; margin-top: 2px; color: #98a0ac; }
.modul-eylem { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/**
 * MENÜDEKİ "KAPALI" ROZETİ — yalnız süpervizör görür.
 * Kapattığı ekranı menüde görmeye devam eder (yoksa geri açamazdı) ama
 * onu açık ekranlardan ayırt edebilmelidir.
 */
.nav-kapali {
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #4a3f2c;
  color: #e6b55a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.modul-govde .nav-kapali { background: #f3e6cd; color: #8a6a1e; }

@media (max-width: 640px) {
  .modul-govde { padding: 4px 14px 16px; }
  .modul-eylem button { flex: 1 1 100%; }
}

/* ==================================================================
   ÜST ÇUBUK ARAMASI — AÇILIR SONUÇ PANELİ
   ------------------------------------------------------------------
   ESKİ KUSUR: panel "button" satırları için biçemlenmişti, betik ise
   "a" çiziyordu. Hiçbir kural tutmadığı için sonuçlar altı çizili
   çıplak bağlantı olarak diziliyor, tür işareti satırın ortasına
   düşüyor ve ikon kutusu boş renkli bir kare olarak kalıyordu.
   Üstüne panelin yüksekliği sınırsızdı: 34 sonuç 1045 piksel tutuyor,
   900 piksellik pencerenin dışına taşıyordu.

   YENİ PANEL: başlık + KENDİ İÇİNDE KAYAN gövde + klavye şeridi.
   Yükseklik pencereye göre sınırlıdır; sonuç kaç tane olursa olsun
   panelin sonu ekranın içinde kalır.
   ================================================================== */
.search-results{
  position:absolute;top:calc(100% + 8px);left:0;
  width:min(640px,80vw);
  display:flex;flex-direction:column;
  max-height:min(72vh,560px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 22px 60px rgba(23,27,36,.19);
  overflow:hidden;z-index:80;
}

/* --- Başlık şeridi ------------------------------------------------ */
.ara-baslik{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px 16px;
  background:var(--secondary);
  border-bottom:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
}
.ara-baslik b{color:var(--ink);letter-spacing:0;text-transform:none;font-size:11.5px}

/* --- Kayan gövde --------------------------------------------------
   overscroll-behavior: panelin sonuna gelince tekerlek arkadaki
   sayfayı kaydırmaya BAŞLAMAZ; kullanıcı liste okurken sayfa
   altından kaçmaz.                                                   */
.ara-govde{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;
}

/* --- Küme başlıkları ---------------------------------------------- */
.ara-kume + .ara-kume{border-top:1px solid var(--line)}
.ara-kume-ad{
  position:sticky;top:0;z-index:1;
  display:flex;align-items:center;gap:8px;
  margin:0;padding:9px 16px 6px;
  background:var(--card);
  font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#98a0ad;
}
.ara-kume-ad span{
  background:var(--secondary);color:#6d7684;
  border-radius:9px;padding:1px 6px;font-size:9.5px;letter-spacing:0;
}

/* --- Sonuç satırı -------------------------------------------------
   minmax(0,1fr): uzun bir dosya adı sütunu şişirip etiketi panelin
   dışına itemesin.                                                   */
.ara-satir{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;gap:11px;
  padding:9px 16px;
  color:inherit;text-decoration:none;
  border-left:3px solid transparent;
  cursor:pointer;
}
.ara-satir:hover,.ara-satir.secili{
  background:#fff8ef;border-left-color:var(--primary);
}
.ara-satir:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}

.ara-ikon{
  width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;
  background:var(--secondary);color:#5d6673;
}
.ara-ikon svg{width:17px;height:17px;stroke:currentColor;fill:none}
.ara-satir.secili .ara-ikon{background:#fdeaca;color:#a9670b}

/* Tür renkleri — taşıma modu işaretleriyle aynı dili konuşur */
.ara-ikon.sea{background:#e7edf4;color:#35506d}
.ara-ikon.road{background:#fff0df;color:#c87313}
.ara-ikon.air{background:#e5f1f8;color:#2f6d90}
.ara-ikon--kart{background:#eceaf6;color:#5c4d86}
.ara-ikon--document{background:#e8f1ec;color:#3d7355}
.ara-ikon--place{background:#fdece6;color:#a8542c}
.ara-ikon--user{background:#e9eef5;color:#46566e}
.ara-ikon--tumu{background:transparent;color:var(--primary)}

.ara-metin{min-width:0;display:block}
.ara-metin strong{
  display:block;font-size:13px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ara-metin small{
  display:block;margin-top:2px;font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Eşleşen harfler — arka plan değil, KALEM vurgusu: satır seçiliyken
   de okunur kalır ve renkli bir blok satırı parçalamaz. */
.ara-satir mark{
  background:transparent;color:#b3690a;font-weight:800;
  text-decoration:underline;text-decoration-color:#f3c98a;
  text-underline-offset:2px;
}

.ara-etiket{
  flex:none;white-space:nowrap;
  background:var(--secondary);color:#616a78;
  border-radius:20px;padding:3px 9px;font-size:10px;font-weight:700;
}
.ara-etiket.warn{background:#fdefdc;color:#a1620c}
.ara-etiket.danger{background:#fbe9e9;color:#9d4444}
.ara-etiket.success{background:#e6f3ec;color:#357353}

/* "Tüm yüklemelerde ara" — liste sonundaki çıkış kapısı */
.ara-tumu{border-top:1px solid var(--line);grid-template-columns:34px minmax(0,1fr)}
.ara-tumu .ara-metin strong{color:var(--primary);font-weight:700}

/* --- Bekleme, boş sonuç ve alt şerit ------------------------------ */
.ara-bekle{padding:26px;text-align:center;font-size:12.5px;color:var(--muted)}
.ara-bos{
  padding:30px 24px;display:grid;justify-items:center;gap:6px;text-align:center;
}
.ara-bos svg{width:26px;height:26px;stroke:#c2c8d1;fill:none;stroke-width:1.7}
.ara-bos b{font-size:13.5px;color:var(--ink)}
.ara-bos span{font-size:11.5px;color:var(--muted)}

.ara-alt{
  flex:none;display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:8px 16px;
  background:var(--secondary);border-top:1px solid var(--line);
  font-size:10.5px;color:var(--muted);
}
.ara-alt span{display:inline-flex;align-items:center;gap:4px}
.ara-alt b{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-weight:700;color:#6d7684;
}
.ara-alt b svg{width:12px;height:12px;stroke:currentColor;fill:none}
.ara-alt kbd{
  font-family:inherit;font-size:10px;font-weight:700;
  background:var(--card);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:#5e6773;
}

/**
 * SVG İKON KÜNYESİ — AKIŞTAN TAMAMEN ÇIKAR.
 *
 * <svg width="0" height="0"> yine de satır içi bir kutudur: satır
 * yüksekliği kadar (18 piksel) yer kaplayıp altındaki her şeyi
 * aşağı itiyordu — üst çubuk dahil. display:none KULLANILMAZ:
 * bazı tarayıcılarda gizlenen künyeye <use> ile bağlanan ikonlar
 * da çizilmez. Doğru kalıp konumlandırıp sıfırlamaktır.
 */
.ikon-kunyesi{position:absolute;width:0;height:0;overflow:hidden}

/**
 * MENÜ PERDESİ.
 *
 * Görünürlüğü TEK yerden yönetilir: bu kural dosyanın sonunda
 * durduğu için yukarıdaki genişlik bloklarını ezer. İki kural bir
 * arada olmasa, "display:block" yazan blok dosyanın ortasında kalıp
 * buradaki "display:none" tarafından sessizce eziliyordu — perde
 * görünmüyor, dokunma yine arkadaki bağlantıya gidiyordu.
 */
.menu-perde{display:none}
@media (max-width:1024px){
  .menu-perde:not([hidden]){display:block}
}

/**
 * TARAYICININ KENDİ TEMİZLEME DÜĞMESİ KAPATILIR.
 *
 * input[type=search] WebKit'te kutunun içine kendi çarpısını koyar;
 * bizimki de yanında duruyordu — kullanıcı iki çarpı görüyor ve
 * hangisinin ne yaptığını kestiremiyordu. Bizimki kalır: aynı anda
 * paneli de kapatır ve odağı kutuda tutar.
 */
.search input[type="search"]::-webkit-search-cancel-button,
.search input[type="search"]::-webkit-search-decoration{
  -webkit-appearance:none;appearance:none;display:none;
}

/* Perde ve "Vazgeç" yalnız telefonda iş görür */
.ara-perde{display:none}
.ara-kapat{display:none}

/* ------------------------------------------------------------------
   TELEFON (≤640px) — ARAMA TAM EKRANA ÇIKAR
   390 piksellik bir ekranda menü düğmesi, arama, "yeni", zil ve
   profil yan yana sığmıyor; arama kutusuna 90 piksel kalıyordu.
   Kutuya dokunulunca arama üst çubuğu devralır, sonuçlar ekranın
   kalanını kaplar. Odaktan çıkınca her şey eski yerine döner.
   ------------------------------------------------------------------ */
@media (max-width:640px){
  /**
   * YÜKSEKLİK "bottom:0" İLE DEĞİL, AÇIKÇA VERİLİR.
   *
   * Üst çubukta backdrop-filter var; filtre uygulanan bir öğe,
   * içindeki "fixed" öğeler için YENİ bir kapsayıcı blok kurar.
   * Panel üst çubuğun içinde durduğu için "bottom:0" pencerenin
   * değil, 60 piksellik üst çubuğun altına yapışıyor ve panel
   * 50 piksele eziliyordu — sonuçlar görünmüyordu.
   *
   * dvh: telefon tarayıcısının adres çubuğu kaydıkça yükseklik
   * kendiliğinden düzelir (vh kaydırma sırasında şaşar).
   */
  .search-results{
    position:fixed;left:0;right:0;top:100%;bottom:auto;
    width:auto;max-height:none;
    /* Alt gezinme çubuğu (56px + güvenli alan) panelin altını örtüyordu:
       son satır ve kaydırma çubuğu çubuğun arkasında kalıyordu. */
    height:calc(100dvh - 100% - 57px - env(safe-area-inset-bottom,0px));
    border-radius:16px 16px 0 0;border-bottom:0;
    box-shadow:0 -4px 30px rgba(23,27,36,.14);
  }
  .ara-satir{padding:11px 14px;gap:10px}     /* dokunma hedefi ≥ 44px */
  .ara-ikon{width:36px;height:36px}
  .ara-metin strong{font-size:13.5px}
  .ara-metin small{font-size:11.5px}
  .ara-alt{display:none}                      /* telefonda klavye ipucu yok */

  .ara-perde{
    display:block;position:fixed;inset:0;z-index:70;
    background:rgba(12,16,24,.45);
  }
  .ara-perde[hidden]{display:none}

  /**
   * Arama açıkken üst çubuğun SAĞ TARAFI çekilir, kutu genişler.
   * Menü düğmesi yerinde kalır: hem elin altındaki kutu sağa doğru
   * büyür (parmağın altındaki nokta kaymaz), hem de kullanıcı
   * aramadan vazgeçmeden menüye ulaşabilir.
   */
  /**
   * Sağ taraf çekilir, kutu SAĞA doğru genişler. Kutunun sol kenarı
   * yerinde kalır: parmağın altındaki nokta kaymaz (kayarsa tarayıcı
   * basma ile bırakmayı farklı öğede görür ve dokunma "dışarı" sayılır).
   * Menü düğmesi de yerinde: kullanıcı aramadan vazgeçmeden menüye
   * ulaşabilmelidir.
   */
  body.ara-tam .header-actions{display:none}

  /**
   * ÜST ÇUBUK PERDENİN ÜSTÜNE ÇIKAR.
   *
   * Sonuç paneli üst çubuğun İÇİNDE durur; çubuğun kendi z-index'i
   * (20) bir yığın bağlamı kurduğu için içindeki hiçbir şey ondan
   * yukarı çıkamaz. Perde gövdenin altında ve 70'te olduğu için
   * paneli örtüyor, telefonda sonuçlara DOKUNULAMIYORDU: tıklamayı
   * perde yutuyordu. Arama açıkken çubuk perdenin üstüne alınır.
   */
  body.ara-tam .topbar{z-index:80;flex-wrap:nowrap;row-gap:0}
  body.ara-tam .global-search{z-index:85;order:0;flex:1 1 auto;min-width:0;width:auto}
  body.ara-tam .search{height:40px}

  /**
   * Yazı alanı KÜÇÜLEBİLİR olmalı.
   *
   * .search input'un genişliği %100 idi; esnek bir kutuda %100
   * "küçülmem" demektir. "Vazgeç" kutunun dışına, ekranın sağ
   * kenarından taşacak biçimde itiliyordu. min-width:0 ile yazı
   * alanı yer açar.
   */
  body.ara-tam .search input{flex:1 1 auto;width:auto;min-width:0}
  /* width/height AÇIKÇA yazılır: .search>button kuralı bütün düğmeleri
     30×30 bir kareye sokuyor, "Vazgeç" yazısı kutunun ve ekranın
     dışına taşıyordu. */
  body.ara-tam .ara-kapat{
    display:inline-flex;align-items:center;flex:none;white-space:nowrap;
    width:auto;height:auto;min-width:0;
    border:0;background:none;padding:0 0 0 8px;
    color:var(--primary);font-size:12.5px;font-weight:700;cursor:pointer;
  }
  /* "Vazgeç" hem metni siler hem paneli kapatır: ayrıca çarpı gerekmez */
  body.ara-tam [data-clear-search]{display:none}
}


/* ==================================================================
   TELEFON YAZI ÖLÇEĞİ — EN KÜÇÜK YAZI 11 PİKSEL
   ------------------------------------------------------------------
   Masaüstünde 9–10 piksellik künye yazıları bilinçli bir tercihtir:
   1500 piksellik bir ekranda yoğun bir tablo okunabilir kalsın diye
   ikincil bilgi küçültülür. Aynı yazı 360 piksellik bir telefonda
   okunmuyor — kullanıcı yakınlaştırmak zorunda kalıyor, yakınlaşınca
   da sayfa yana kayıyordu.

   Bu blok ELDE TUTULAN ekranlarda 11 pikselin altındaki bütün
   yazıları 11 piksele çeker. Tek bir kural: "elde tutulan bir
   ekranda hiçbir yazı 11 pikselin altına inmez."

   İki ölçütten biri yeterlidir: ya ekran 820 pikselden dar (telefon
   ve dikey tablet), ya da 1024 piksele kadar PARMAKLA kullanılıyor
   (yatay tablet). Fareli bir dizüstünde kural hiç çalışmaz: orada
   yoğun tablo düzeni sürer ve küçük künye yazısı bilinçli bir
   tercihtir.

   Aşağıdaki seçici listesi app.css içinde font-size değeri 11
   pikselin altında olan bütün kuralların listesidir; yeni bir küçük
   yazı eklenirse mobil ölçek sınaması (mobil-olcek) bunu yakalar ve
   listeye eklenmesini ister.
   ================================================================== */
@media (max-width:820px), (max-width:1024px) and (pointer:coarse){
  th,
  .badge,
  .owner i,
  .attention-item p,
  .attention-item small,
  .attention-item button,
  .modal-head p,
  .track-line i,
  .approval-identity small,
  .mail-row>b,
  .week-nav small,
  .week-kpis span,
  .day-column>header span,
  .day-column>header>b,
  .week-card-top strong,
  .week-card-top small,
  .week-card>p,
  .week-tags span,
  .week-card footer span,
  .week-card footer button,
  .day-empty p,
  .assignment-file p,
  .assignment-file>div:last-child b,
  .assignment-file small,
  .transfer-title small,
  .authority-banner p,
  .transfer-flow>div>span,
  .transfer-flow small,
  .transfer-flow em,
  .transfer-checks,
  .authority-person>i,
  .authority-person small,
  .authority-person>span,
  .smtp-heading small,
  .smtp-test>small,
  .notice-item small,
  .live-status,
  .command-health small,
  .command-health em,
  .command-progress>div,
  .command-actions b,
  .command-actions small,
  .bar-chart small,
  .activity-row time,
  .activity-row small,
  .result-meta,
  .row-actions button,
  .detail-drawer header small,
  .drawer-status>span,
  .check-row>i,
  .tracking-overview small,
  .tracking-metrics span,
  .approval-summary small,
  .role-explainer p,
  .attention-item a,
  .permission-group legend,
  .rejected-reason b,
  .track-info dt,
  .brand-eyebrow,
  .login-head p,
  .print-picker > span,
  .leg-tag,
  .closed-tag,
  .logistics-hero small,
  .hero-metrics span,
  .logistics-table .num-sub,
  .brand-slot>small,
  .brand-state,
  table thead th,
  .status-usage,
  .brand-features small,
  .brand-stat small,
  .login-date,
  .login-secure,
  .switch-state small,
  .allowed-chip,
  .icon-btn .badge-count,
  .notice-section,
  .row-security,
  .row-notice,
  .notification-panel .panel-tools .btn-text,
  .decision-locked,
  .decision-note,
  .role-cc-name em,
  .queue-stat span,
  .mail-context,
  .mail-row small,
  .mail-status,
  .mail-row small .mail-time,
  .note-delivery,
  .kolon-rozet,
  .kolon-baslik,
  .kolon-not,
  .gorunum-etiket,
  .gorunum-form label,
  .yedek-govde .form-note code,
  .bildirim-sessiz,
  .toplu-kisi,
  .grafik-cizgi-y i,
  .grafik-x-oge,
  .grafik-ipucu b,
  .grafik-lejant,
  .grafik-tablo caption,
  .rapor-ay-tablo thead th,
  th .sirala i,
  .parola-metin,
  .parola-kural,
  .bildirim-govde small,
  .eyebrow,
  .missing-hint,
  .badge.missing,
  .missing-badge,
  .palette-group,
  .palette-tag,
  .palette-foot,
  kbd,
  .activity-day,
  .activity-time small,
  .activity-time a,
  .file-icon,
  .file-main > p,
  .file-tag,
  .file-badge,
  .report-kpi small,
  .report-mode small,
  .report-mode-value span,
  .report-duration-grid small,
  .report-table th,
  .tl-chip i,
  .desk-preview em,
  .desk-stamp,
  .trend-totals small,
  .olcu-rozet,
  .report-actual-grid small,
  .kapanis-toplam small,
  .kapanis-toplam span,
  .places-table td small.cari-ipucu,
  .print-hide>span,
  .shipment-filters label>span:first-child,
  .track-table .stage-step,
  .track-facts b,
  .track-note,
  .track-table .closed-tag,
  .program-filter-grid label>span:first-child,
  .program-summary span,
  .program-table .program-ref,
  .program-table .program-note,
  .program-table .program-goods,
  .program-table td.program-people .kisi i,
  .mail-option i,
  .pack,
  .pack-list,
  .places-table td small.place-mail,
  .kart-bilgi dt,
  .kart-bilgi dd small,
  .kart-dosyalar td small,
  .donem-dugme small,
  .donem-basi,
  .donem-dip,
  .bicim-basi,
  .bicim-secenek i,
  .help-role-head small,
  .help-alan>h3 b,
  .help-is-yer,
  .help-engel-satir small,
  .help-kim,
  .state-tag.vekalet,
  .drawer-lines .lines-count,
  .line-no,
  .line-main span,
  .line-side span,
  .table-wrap table.tablo-kart tbody td[data-mobil-etiket]::before,
  .pager-capped,
  .belge-ozet small,
  .belge-uzanti,
  .belge-ad > span > span,
  .belge-not,
  .belge-yok,
  .saglik-baslik,
  .saglik-cozum,
  .saglik-kunye,
  .hata-baslik,
  .zamanlayici-is span,
  .zamanlayici-is button,
  .modul-satir small,
  .nav-kapali,
  .ara-kume-ad,
  .ara-kume-ad span,
  .ara-etiket,
  .ara-alt{
    font-size:11px;
  }
  /* Tablo başlığı ve rozetler biraz daha ferah dursun */
  th{letter-spacing:.02em}

  /**
   * BİÇEMİ OLMAYAN <small>.
   *
   * Tarayıcı <small> için 0,83em uygular; 11,5 piksellik bir etiketin
   * içinde bu 9,6 piksel eder ve kural listesine takılmaz (px yazan
   * bir bildirim yoktur). max() bir TABAN koyar: oran korunur ama
   * 11 pikselin altına inmez.
   */
  small{font-size:max(11px,.8333em)}

  /* Alt gezinme çubuğu etiketleri: 9,5 piksel parmakla dokunulan bir
     çubukta okunmuyordu. */
  .alt-menu a,.alt-menu button{font-size:10.5px}

  /* "eyebrow" telefonda 10 pikselle sınırlanmıştı */
  .eyebrow{font-size:11px!important}
}

/* ==================================================================
   TELEFONDA DOKUNMA HEDEFLERİ
   ------------------------------------------------------------------
   Aşağıdaki bağlantı ve düğmeler masaüstünde fareyle rahatça
   tıklanan 12–30 piksellik satır içi öğelerdi. Parmak ucu yaklaşık
   9 milimetredir: 14 piksellik bir bağlantıya nişan almak, yanındaki
   yanlış bağlantıya basmakla aynı şeydir.

   Yükseklik metni büyütmeden, DOLGU ile kazanılır: yerleşim ve satır
   hizası bozulmaz, yalnız dokunulabilir alan büyür.

   Ölçüt genişlik DEĞİL, işaretleyicinin cinsidir: "pointer: coarse"
   parmakla kullanılan her aygıtta doğrudur — 360 piksellik telefon
   da, 768 piksellik tablet de. Fare kullanılan bir ekranda kural
   hiç çalışmaz, masaüstü düzeni olduğu gibi kalır.
   ================================================================== */
@media (max-width:1024px) and (pointer:coarse){
  /* Yardım ekranındaki "şuraya git" bağlantıları (en kalabalık küme) */
  .help-is-govde a.help-git,
  /* Cari kartı adları, kurulum hatası ekran bağlantıları */
  a.cari-ad,
  .hata-ekranlar a,
  /* Panel başlıklarındaki "tümünü gör", dikkat kutusu bağlantıları */
  .panel-head a,
  .attention-item a,
  /* Açıklama notları içindeki bağlantılar */
  .form-note a{
    display:inline-flex;align-items:center;
    min-height:38px;
  }

  /**
   * DENETİM İZİNDEKİ "DOSYAYA GİT".
   *
   * Satırın sağındaki bu bağlantı 61x12 pikseldi: bir parmakla
   * isabet ettirmek neredeyse imkânsız, üstelik dokunulduğunda
   * BAŞKA BİR EKRANA götürüyor — ıskalaması pahalı bir hedef.
   *
   * Yükseklik verilirken satır uzamasın diye dikey boşluk dışarı
   * taşırılır: hedef büyür, yerleşim aynı kalır.
   */
  .activity-time a{
    display:inline-flex;align-items:center;
    min-height:32px;padding-inline:8px;margin-inline:-8px;
  }

  /**
   * SAYI SÜTUNUNDAKİ BAĞLANTILAR.
   *
   * Yükseklikleri zaten 34 piksel (kart kipi kuralı), ama "1" yazan
   * bir bağlantı 7 PİKSEL genişliğinde kalıyordu: dokunulacak alan
   * yok denecek kadar dar. Genişlik tabanı konur, rakam ortalanır.
   */
  /* Seçici, kart kipindeki "td > * { min-width:0 }" kuralıyla aynı
     ağırlıkta olmalı; daha hafif bir seçici sessizce eziliyordu. */
  .table-wrap table tbody td.num a,
  .sayfalama a,.sayfalama button{
    /* display olmadan min-width/min-height satır içi bir kutuya
       İŞLEMEZ: kart kipinde (≤640) kural tutuyor, tablo kipinde
       (tablet) sessizce yok sayılıyordu. */
    display:inline-flex;align-items:center;justify-content:center;
    min-width:40px;min-height:38px;
  }

  /**
   * DÜZ YAZI İÇİNDEKİ BAĞLANTILAR.
   *
   * Satır içi bir bağlantıya yükseklik verilemez (paragrafın satır
   * düzenini bozar). Dikey DOLGU ise satır kutusunu büyütmez ama
   * dokunma alanını büyütür: metin olduğu yerde kalır, parmak için
   * 32 piksellik bir şerit doğar.
   */
  .content p > a{padding-block:10px}

  /* Satır içi ikincil düğmeler 30 pikselde kalıyordu */
  .gorunum-araclar button,
  .zamanlayici-is button,
  .bildirim-araclar .btn-text,
  th a.sirala,
  .missing-badge{
    min-height:38px;
  }
  .bildirim-araclar .btn-text{padding-left:10px;padding-right:10px}

  /**
   * ONAY KUTUSU SATIRLARI.
   *
   * Kutunun kendisi 22 pikseldir; ama kutu bir <label> içindeyse
   * kullanıcı satırın herhangi bir yerine dokunabilir — dokunulan
   * alan SATIRDIR. O satırlar 22–30 piksel yüksekliğinde kalıyordu:
   * iki satır alt alta durduğunda parmak sık sık yanlışını seçiyor,
   * kullanıcı "kendiliğinden değişti" sanıyordu.
   *
   * :has() desteklenmeyen bir tarayıcıda da çalışsın diye bilinen
   * sınıflar ayrıca yazılır.
   */
  label.toplu-kutu,
  label.tercih-satir,
  label.checkbox-row,
  label.bulk-all,
  label.switch,
  .transfer-checks label,
  .print-hide label,
  .policy-option,
  .status-hold,
  .assignment-pick,
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]){
    min-height:38px;
  }
  /* Tabloda seçim sütunu: satır yüksekliğini şişirmeden hedefi büyütür.
     Seçici, kart kipindeki "td > * { min-width:0 }" kuralıyla aynı
     ağırlıkta olmalı; daha hafifi sessizce eziliyor. */
  .table-wrap table tbody td.tick label.toplu-kutu,
  .table-wrap table thead th.tick label.toplu-kutu,
  td.tick label.toplu-kutu,
  th.tick label.toplu-kutu{
    min-height:38px;min-width:38px;
  }
}

/* ==================================================================
   GİRİŞ EKRANI — YENİLENMİŞ KATMAN
   ------------------------------------------------------------------
   Bu blok dosyanın sonundadır: yukarıdaki iki giriş bloğunu (yükseklik
   uyarlaması ve premium katman) bilerek ezer. Üç şeyi düzeltir:

   1) DENGE. Kart sol panel kadar uzundu; formun altında 147 piksellik
      boş bir alan kalıyor, ekran yarım kalmış gibi duruyordu. Kart
      artık üç katman: başlık, form ve en alta yapışan taban.

   2) DERİNLİK. Düz renkli bir kutu yerine ince ışık, dokulu ızgara ve
      tek bir sıcak aydınlanma. Gürültü değil, katman.

   3) TELEFON. 900 pikselin altında marka paneli tamamen kayboluyor,
      geriye adsız beyaz bir form kalıyordu. Artık kompakt bir marka
      bandı var.
   ================================================================== */

/* --- Zemin: ince ızgara + sıcak aydınlanma ------------------------ */
.login-body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}

.login-shell{
  /* Kenarı tek çizgi değil: üstte ışık, altta gölge — cam kenarı gibi */
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,255,255,.055),
    inset 0 1px 0 rgba(255,255,255,.075);
  border:0;
  overflow:hidden;
}

/* --- Sol marka paneli --------------------------------------------- */
.login-brand::before{
  /* Üstten inen tek bir sıcak ışık; ::after zaten alttaki aydınlanma */
  content:"";position:absolute;inset:-30% -20% auto -20%;height:75%;
  background:radial-gradient(closest-side, rgba(239,139,23,.13), transparent 70%);
  pointer-events:none;
}

.brand-eyebrow{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:rgba(239,139,23,.10);
  border:1px solid rgba(239,139,23,.22);
  border-radius:20px;padding:6px 13px;
  color:#f0a44a;letter-spacing:.11em;
}
.brand-eyebrow i{
  width:6px;height:6px;border-radius:50%;background:#f0a44a;flex:none;
  box-shadow:0 0 0 3px rgba(240,164,74,.16);
}

/**
 * Özellik satırları: kutu yığını yerine ince şeritler.
 * Dört kutunun kenarlığı yan yana gelince panel "kart çorbası"na
 * dönüyordu; tek bir ayırıcı çizgi ve soldan gelen vurgu daha sakin.
 */
.brand-features li{
  background:linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.065);
  border-left:2px solid rgba(239,139,23,.38);
  border-radius:0 11px 11px 0;
  transition:background .25s var(--ease), border-left-color .25s var(--ease);
}
.brand-features li:hover{
  background:linear-gradient(90deg, rgba(255,255,255,.085), rgba(255,255,255,.02));
  border-left-color:#ef8b17;
}
.brand-features li > span{
  background:linear-gradient(145deg, rgba(239,139,23,.22), rgba(239,139,23,.10));
  box-shadow:inset 0 0 0 1px rgba(239,139,23,.18);
}

/* Alt güven şeridi: iki sütun eşit hizada başlar */
.login-brand .brand-foot{align-items:start}
.brand-stat{align-items:flex-start}

/* --- Sağ kart: üç katman ------------------------------------------ */
.login-card{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#ffffff 0%,#fcfcfd 100%);
}
.login-head{display:flex;align-items:center;gap:14px}

/**
 * KARTIN İÇİ TEK BLOK OLARAK ORTALANIR.
 *
 * Önce gövdeyi ortalayıp tabanı en alta yapıştırmıştık; o zaman da
 * boşluk ikiye bölünüyor ama ortada 150 piksellik bir açıklık
 * kalıyordu — form ile alt bilgi birbirinden kopuk duruyordu.
 * Başlık, form ve taban TEK bir öbek olarak dikeyde ortalanır:
 * üstte ve altta eşit nefes payı kalır, öbek bir arada okunur.
 */
.login-card{justify-content:center}
.login-govde{display:block}
.login-taban{padding-top:clamp(18px,3vh,30px)}
.login-secure{margin-top:0;padding-top:16px}
.login-foot{margin-top:9px;color:#8b929d;text-align:center}

/* Künye: tarih solda, kurum sağda — kartın kapanış satırı */
.login-kunye{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:12px;
  border-top:1px solid #f0f2f5;
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:#a8b0ba;
}
.login-kunye span:last-child{color:#c58a2e}

/* --- Alanlar ------------------------------------------------------- */
.field-wrap{
  background:#fbfcfd;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.field-wrap:focus-within{background:#fff}

/**
 * Sunucu hangi alanı reddettiyse o alan işaretlenir. Kırmızı bir
 * uyarı metnini okumadan da nereye bakılacağı bellidir.
 */
.field-wrap.hatali{border-color:#e0a3a3;background:#fffafa}
.field-wrap.hatali:focus-within{border-color:#d98686;box-shadow:0 0 0 3px rgba(190,80,80,.12)}

/**
 * TARAYICI OTOMATİK DOLDURMASI.
 * Chrome doldurduğu alanı sarıya boyar ve kutunun köşe yuvarlaması
 * dışına taşar. İç gölgeyle zemin geri alınır.
 */
.field-wrap input:-webkit-autofill,
.field-wrap input:-webkit-autofill:hover,
.field-wrap input:-webkit-autofill:focus{
  -webkit-text-fill-color:#242b34;
  -webkit-box-shadow:0 0 0 40px #fbfcfd inset;
  box-shadow:0 0 0 40px #fbfcfd inset;
  transition:background-color 9999s ease-out 0s;
}
.field-wrap:focus-within input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 40px #fff inset;box-shadow:0 0 0 40px #fff inset;
}

/* Caps Lock uyarısı */
.field-uyari{
  display:flex;align-items:center;gap:6px;margin-top:7px;
  font-size:11px;font-weight:650;color:#9a6b12;
}
.field-uyari[hidden]{display:none}
.field-uyari svg{flex:none;color:#d08a15}

/* --- "E-postamı hatırla" ------------------------------------------- */
/* Seçici ağırlığı: form içindeki etiketleri ızgaraya çeviren genel
   kural bu satırı da ikiye bölüyor, yazı kutucuğun altına düşüyordu. */
.login-card form .login-hatirla{
  display:flex;align-items:center;gap:9px;
  margin-top:-2px;
  font-size:12px;color:#5c646f;cursor:pointer;user-select:none;
}
.login-card form .login-hatirla input{
  width:17px;height:17px;flex:none;margin:0;
  accent-color:var(--primary);cursor:pointer;
}
.login-card form .login-hatirla span{display:inline;width:auto;font-size:12px}

/* --- Giriş düğmesi -------------------------------------------------- */
.login-card .primary{
  position:relative;
  gap:10px;
  box-shadow:0 10px 24px -10px rgba(232,138,24,.85);
  transition:transform .16s var(--ease), box-shadow .22s var(--ease), filter .16s var(--ease);
}
.login-card .primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px -12px rgba(232,138,24,.95);
}
.login-card .primary:active{transform:translateY(0)}
.login-card .primary b{font-weight:750}

/* Enter ipucu: klavyeyle çalışanın Tab'a basmasına gerek olmadığını söyler */
.tus-ipucu{
  position:absolute;right:14px;
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.34);
  border-radius:5px;padding:2px 6px;
}

/**
 * GÖNDERİM KİLİDİ.
 * Düğme basılınca devre dışı kalır ve dönen bir halka gösterir:
 * ikinci tıklama ikinci bir giriş denemesi açmaz.
 */
.login-card .primary.yukleniyor{
  filter:saturate(.85);cursor:progress;
}
.login-card .primary.yukleniyor > svg,
.login-card .primary.yukleniyor .tus-ipucu{display:none}
.login-card .primary.yukleniyor::before{
  content:"";width:17px;height:17px;flex:none;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:giris-donsun .7s linear infinite;
}
.login-card .primary:disabled{opacity:1}
@keyframes giris-donsun{to{transform:rotate(360deg)}}

/* --- Telefon marka bandı -------------------------------------------- */
.login-mobil{display:none}

/* --- Açılış hareketi ------------------------------------------------- */
/**
 * Panel ve kart hafifçe yerine oturur. Süre kısa (280 ms): bekletme
 * değil, yerleşme hissi. Hareketi azaltma tercihi olan kullanıcıda
 * hiç oynamaz.
 */
@media (prefers-reduced-motion: no-preference){
  .login-shell{animation:giris-otur .34s var(--ease) both}
  .login-govde > *,.login-taban{animation:giris-yaklas .42s var(--ease) both}
  .login-govde > *:nth-child(1){animation-delay:.06s}
  .login-govde > *:nth-child(2){animation-delay:.10s}
  .login-govde > *:nth-child(3){animation-delay:.14s}
  .login-taban{animation-delay:.18s}
  @keyframes giris-otur{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
  @keyframes giris-yaklas{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
}

/* ------------------------------------------------------------------
   TELEFON VE DAR TABLET (≤900px)
   ------------------------------------------------------------------ */
@media (max-width:900px){
  .login-shell{border-radius:18px}

  .login-mobil{
    display:block;text-align:center;
    padding:clamp(22px,4vh,32px) 22px clamp(18px,3vh,24px);
  }
  .login-mobil .login-mark{
    display:block;margin:0 auto;width:clamp(132px,42vw,168px);height:auto;
  }
  .login-mobil-ad{
    margin:12px 0 0;font-size:13px;font-weight:700;letter-spacing:-.01em;color:#e8ebf0;
  }
  .login-mobil-rozet{
    display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:13px;
  }
  .login-mobil-rozet span{
    display:inline-flex;align-items:center;gap:5px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.085);
    border-radius:20px;padding:5px 11px;
    font-size:11px;font-weight:650;color:#aab2be;
  }
  .login-mobil-rozet svg{flex:none;color:#8fc9a9}

  /* Kart telefonda alt köşeleri kabuğa oturur */
  .login-card{border-radius:16px}
  .login-taban{padding-top:20px}
  .login-kunye{font-size:9.5px}
}

/* ------------------------------------------------------------------
   ALÇAK EKRAN — kart yine de tam sığar
   Taban artık "auto" ile aşağı yapıştığı için boşluk esner; gizlenecek
   öğe sayısı azaldı.
   ------------------------------------------------------------------ */
@media (max-height:700px) and (min-width:901px){
  .login-kunye{display:none}
  .login-foot{display:none}
}

/* ==================================================================
   SON OPERASYON HAREKETLERİ (.akis-*)
   ------------------------------------------------------------------
   KENDİ BİLEŞENİ. Eskiden denetim izi ekranının ".activity-row"
   sınıfını ödünç alıyordu; iki bileşenin satır yapısı farklı olduğu
   için telefonda denetim izi için yazılmış ızgara kuralı bu paneli
   parçalıyor, metin harf harf alt alta kırılıyor ve satır 52 piksel
   yerine 221 piksel oluyordu. Ad ayrıldı: bir daha çakışmaz.

   Düzen tek bir ızgaradır ve telefonda SÜTUN DEĞİL, AKIŞ değişir:
   saat sağdan alta iner, künyenin yanına oturur.
   ================================================================== */
.akis{list-style:none;margin:0;padding:0}

.akis-satir{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:12px;align-items:start;
  padding:13px 20px;
  border-top:1px solid #f1f3f6;
}
.akis-satir:first-child{border-top:0}
.akis-satir:hover{background:#fcfdfe}

.akis-ikon{
  width:34px;height:34px;border-radius:10px;flex:none;
  display:grid;place-items:center;
  background:#eef1f5;color:#5d6673;
  box-shadow:inset 0 0 0 1px rgba(20,28,44,.05);
}
.akis-ikon svg{width:16px;height:16px}
/* Ton adları denetim izindekilerle aynı: tek bir renk dili */
.akis-ikon.amber{background:#fff2e0;color:#b9730c}
.akis-ikon.violet{background:#f1eafa;color:#6e4e9c}
.akis-ikon.blue{background:#e7f1fa;color:#2f6d98}
.akis-ikon.green{background:#e7f4ec;color:#357353}
.akis-ikon.rose{background:#fbeaea;color:#a04848}
.akis-ikon.slate{background:#eef1f5;color:#5d6673}

.akis-govde{min-width:0}
.akis-govde > strong{
  display:block;font-size:12.5px;font-weight:650;color:#242a33;line-height:1.45;
  /* Uzun bir özet iki satırda kalır: liste bir ekranı doldurmaz */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.akis-kunye{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  margin:6px 0 0;font-size:11px;
}
.akis-ref{
  display:inline-flex;align-items:center;
  background:#f2f5f8;color:#5d6673;font-weight:700;
  border-radius:8px;padding:2px 7px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.akis-kisi{color:#868e9a;font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.akis-zaman{flex:none;text-align:right;white-space:nowrap}
.akis-zaman b{
  display:block;font-size:12px;font-weight:700;color:#4a5260;
  font-variant-numeric:tabular-nums;
}
.akis-zaman small{display:block;margin-top:3px;font-size:10.5px;color:#9aa1ac}

.akis-bos{
  display:grid;justify-items:center;gap:5px;text-align:center;
  padding:34px 20px;color:#8b929d;
}
.akis-bos svg{color:#c3c9d2}
.akis-bos b{font-size:13px;color:#434a55}
.akis-bos span{font-size:11.5px}

/* Başlıktaki "Tümü" bağlantısı */
.akis-kart .panel-head .btn-text{
  display:inline-flex;align-items:center;gap:5px;
  color:#c8760f;font-size:11.5px;font-weight:750;text-decoration:none;
}
.akis-kart .panel-head .btn-text:hover{text-decoration:underline}

/* ------------------------------------------------------------------
   TELEFON — saat sağdan alta iner
   360 piksellik bir ekranda üç sütun (ikon + metin + saat) metne
   170 piksel bırakıyor. Saat künye satırına inince metin genişler.
   ------------------------------------------------------------------ */
@media (max-width:640px){
  .akis-satir{
    grid-template-columns:32px minmax(0,1fr);
    gap:11px;padding:12px 14px;
  }
  .akis-ikon{width:32px;height:32px}
  .akis-govde > strong{font-size:13px;-webkit-line-clamp:3}

  .akis-zaman{
    grid-column:2;text-align:left;
    display:flex;align-items:center;gap:8px;margin-top:6px;
  }
  .akis-zaman b,.akis-zaman small{margin-top:0}
  .akis-zaman small::before{content:"·";margin-right:8px;color:#c6ccd4}

  .akis-kunye{gap:6px}
  .akis-kisi{max-width:100%}
}

/* Yazdırmada satırlar bölünmez */
@media print{
  .akis-satir{break-inside:avoid}
  .akis-satir:hover{background:none}
}

/* ==================================================================
   EZİLEN METİN DÜZELTMELERİ
   ------------------------------------------------------------------
   "Ezik metin" taraması (z-ezik-metin) şu imzayı arar: geniş bir
   kapsayıcının içinde 100 pikselden dar bir kutuya sıkışmış, dört
   satırdan uzun bir metin. Yatay taşma taraması bunu göremez — hiçbir
   şey ekrandan taşmaz, metin İÇERİ doğru ezilir. Aşağıdakiler o
   taramanın bulduklarıdır.
   ================================================================== */

/**
 * 1) DENETİM İZİNDE TÜR SİMGESİ TELEFONDA DA GÖRÜNÜR.
 *
 * Genel bir kural 760 pikselin altında bütün ".stat-icon" öğelerini
 * gizliyor (özet kartlarında süs oldukları için). Denetim izinde ise
 * simge süs değil: satırın TÜRÜNÜ söyleyen tek işaret o. Gizlenince
 * hem bilgi kayboluyor hem de ızgarada 30 piksellik boş bir sütun
 * kalıyordu.
 */
@media (max-width:760px){
  .activity-row .stat-icon{display:grid}
}

/**
 * 2) KAYDEDİLMİŞ GÖRÜNÜM ŞERİDİNİN BOŞ METNİ.
 *
 * "Süzgeçlerinizi adıyla kaydedin…" ipucu, esnek bir şeritte 46
 * piksele kadar eziliyor ve yedi satıra bölünüyordu. Telefonda ipucu
 * kendi satırını alır.
 */
@media (max-width:640px){
  .gorunum-serit{flex-wrap:wrap}
  .gorunum-liste{flex:1 1 100%}
  .gorunum-bos{flex:1 1 100%;min-width:0;line-height:1.5}
}

/**
 * 3) YARDIM EKRANINDAKİ İŞ BAŞLIKLARI.
 *
 * Başlık satırı üç öğeyi tek sıraya diziyordu: iş adı, ekran adı ve
 * ok. 320 piksellik bir ekranda iş adına 50 piksel kalıyor, ad harf
 * harf kırılıyordu. Ekran adı alt satıra iner.
 */
@media (max-width:640px){
  .help-is > summary{flex-wrap:wrap;gap:8px 10px;padding-inline:16px}
  .help-is-ad{flex:1 1 auto;min-width:0;line-height:1.45}
  .help-is-yer{margin-left:0;flex:0 0 auto;white-space:normal}
  .help-is > summary > svg{margin-left:auto;flex:none}
}

/* ==================================================================
   DIŞA AKTARIM DÜĞMESİ — İKİ BİÇİM
   ------------------------------------------------------------------
   Excel ve CSV tek bir düğme kümesi gibi görünür: iki ayrı düğme yan
   yana durduğunda kullanıcı "hangisi doğru olan?" diye duraksıyor.
   Birleşik kenarlık ikisinin AYNI listeyi indirdiğini söyler.
   ================================================================== */
/**
 * KÜME KÜÇÜLEBİLİR OLMALI.
 *
 * Havale ekranında bu düğme 250 piksellik dar bir yan sütunda duruyor.
 * "nowrap" + küçülemeyen bir kutu, ızgara sütununun en-küçük-içerik
 * genişliğini büyütür ve SAYFAYI taşırır (1280 pikselde tam bu oldu).
 * min-width:0 sütunun daralmasına izin verir; etiket gerekirse üç
 * noktayla kısalır, düğme yine tıklanabilir kalır.
 */
.disa-aktar-kume{display:inline-flex;align-items:stretch;max-width:100%;min-width:0}
.disa-aktar-kume > .disa-aktar{
  white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;
}
.disa-aktar-kume > .disa-aktar > svg{flex:none}
.disa-aktar-kume > .disa-aktar:first-child{
  border-top-right-radius:0;border-bottom-right-radius:0;
}
.disa-aktar-kume > .disa-aktar-csv{
  border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;
  padding-inline:11px;color:#79818d;font-size:11.5px;font-weight:700;
}
.disa-aktar-kume > .disa-aktar-csv:hover{background:#f6f7f9;color:#414a56}
/* Biçim rozeti: "Excel" bir etiket, ikinci bir düğme değil */
.disa-aktar-kume > .disa-aktar > b{
  flex:none;margin-left:7px;padding:2px 7px;border-radius:7px;
  background:#e9f2ec;color:#357353;
  font-size:10.5px;font-weight:800;letter-spacing:.02em;
}
.disa-aktar-kume > .disa-aktar:hover > b{background:#dceee3}

@media (max-width:640px){
  /**
   * Telefonda CSV gizlenmez — başka bir sisteme aktaran kullanıcı
   * telefonda da var. Ama ana düğme "flex:1" ile büyüyünce CSV
   * bağlantısı 24 piksele eziliyordu: parmakla basılamaz. Alt sınır
   * konur ve yazı ortalanır.
   */
  .disa-aktar-kume{width:100%}
  .disa-aktar-kume > .disa-aktar:first-child{flex:1 1 auto;justify-content:center}
  .disa-aktar-kume > .disa-aktar-csv{
    flex:0 0 auto;min-width:56px;justify-content:center;padding-inline:14px;
  }
}

/* ==================================================================
   KİŞİSEL TAKİP HATIRLATICISI
   ------------------------------------------------------------------
   Çekmecedeki bu kutu kişisel bir nottur, bir iş emri değil. Görsel
   dil de bunu söyler: havale ve onay kutularının turuncu/mor vurgusu
   yerine sakin bir zemin, ve her hâlinde "yalnız siz görürsünüz".
   ================================================================== */
.hatirlatici{display:block}

/* --- Kurulu hâl -------------------------------------------------- */
.hatirlatici-kurulu{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;
  align-items:start;
  padding:13px 15px;border-radius:11px;
  background:#f6f8fa;border:1px solid #e6eaef;
}
/* Günü gelmiş ya da geçmiş hatırlatıcı öne çıkar */
.hatirlatici-kurulu.yakin{background:#fff8ec;border-color:#f0d7ae}

.hatirlatici-gun{text-align:center;min-width:76px}
.hatirlatici-gun b{
  display:block;font-size:13px;font-weight:750;color:#2b323d;
  font-variant-numeric:tabular-nums;
}
.hatirlatici-gun small{display:block;margin-top:3px;font-size:11px;color:#858d99}
.hatirlatici-kurulu.yakin .hatirlatici-gun small{color:#a9700f;font-weight:700}

.hatirlatici-metin{min-width:0}
.hatirlatici-metin p{margin:0;font-size:12.5px;line-height:1.55;color:#414a56;overflow-wrap:anywhere}
.hatirlatici-metin p.soluk{color:#949ba6;font-style:italic}
.hatirlatici-gizli{
  display:inline-block;margin-top:7px;
  font-size:11px;font-weight:700;color:#4b7f63;
  background:#e9f4ed;border-radius:8px;padding:2px 8px;
}
.hatirlatici-eylem{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}

/* --- Kurma formu -------------------------------------------------- */
.hatirlatici-form{display:grid;gap:11px}
.hatirlatici-hizli{display:flex;gap:7px;flex-wrap:wrap}
.hatirlatici-alan{display:grid;grid-template-columns:150px minmax(0,1fr);gap:11px}
.hatirlatici-alan label{display:block;font-size:11.5px;font-weight:700;color:#4f5763}
.hatirlatici-alan input{
  display:block;width:100%;margin-top:6px;height:42px;
  border:1px solid #dfe3e8;border-radius:9px;background:#fff;padding:0 11px;
  font:inherit;font-size:13px;color:#242b34;outline:none;
}
.hatirlatici-alan input:focus{border-color:#f0a544;box-shadow:0 0 0 3px #f79a2322}

/* --- Kontrol merkezindeki "bugün hatırlatılacaklar" --------------- */
.hatirlatici-serit{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin-bottom:16px;padding:13px 17px;
  border-radius:12px;background:#fff8ec;border:1px solid #f0d7ae;
}
.hatirlatici-serit > svg{flex:none;color:#c8860f}
.hatirlatici-serit b{font-size:13px;color:#30373f}
.hatirlatici-serit span{font-size:12px;color:#8a6a2c}
.hatirlatici-serit a{
  margin-left:auto;font-size:12px;font-weight:750;color:#b9730c;text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;
}
.hatirlatici-serit a:hover{text-decoration:underline}

@media (max-width:640px){
  .hatirlatici-alan{grid-template-columns:1fr}
  .hatirlatici-kurulu{grid-template-columns:1fr;text-align:left}
  .hatirlatici-gun{text-align:left;display:flex;align-items:baseline;gap:9px}
  .hatirlatici-serit a{margin-left:0;flex:1 1 100%}
}

/* ==================================================================
   AÇILIŞ PERDESİ (v4.0)
   ------------------------------------------------------------------
   Tarayıcı oturumunda bir kez oynayan tam ekran açılış. Davranışı ve
   ne zaman oynadığı app/Acilis.php içinde anlatılır.

   BURADAKİ İKİ KRİTİK KARAR:

   1) pointer-events:none — perde İŞİ ENGELLEMEZ. Altındaki giriş
      formu perde dururken de tıklanır ve doldurulur. Yalnız "Geç"
      düğmesi tıklamayı geri alır.

   2) Sigorta animasyonu — betik çökerse perde 5. saniyede kendiliğinden
      görünmez olur. Kullanıcı hiçbir koşulda arkasında kalmaz.
   ================================================================== */
.acilis{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;overflow:hidden;
  background:#0d1017;color:#fff;
  pointer-events:none;                      /* (1) bkz. yukarısı */
  clip-path:inset(0 0 0 0);
  transition:clip-path .85s cubic-bezier(.76,0,.16,1),opacity .45s .4s;
  animation:acilis-sigorta .4s ease 5s forwards;   /* (2) */
}
.acilis-gecildi .acilis{display:none!important}
@keyframes acilis-sigorta{to{opacity:0;visibility:hidden}}
@media print{.acilis{display:none!important}}

/* Perde yukarı kalkar; içerik bir tık yukarı süzülerek küçülür */
.acilis.kalkiyor{clip-path:inset(0 0 100% 0)}
.acilis.kalkiyor .acilis-orta{
  transform:translateY(-34px) scale(.965);opacity:0;
  transition:transform .75s cubic-bezier(.76,0,.16,1),opacity .45s;
}

/* --- Zemin ---------------------------------------------------------
   Sevkiyat ekranlarının kılcal çizgili zeminini hatırlatan bir ızgara;
   ortadan dışa doğru maskeyle sönüyor ki kenarlarda ağ gibi durmasın. */
.acilis-zemin{position:absolute;inset:0}
/**
 * ZEMİN KATMANLARI EKRANDAN TAŞMAZ.
 *
 * Işık halesi önce 680 piksellik BİR KUTUYDU ve ortalanıyordu: 360
 * piksellik bir telefonda kutunun 160 pikseli ekranın dışında kalıyordu.
 * Perdenin "overflow:hidden" değeri onu GÖRÜNTÜDE kesiyordu ama öğe
 * ölçüldüğünde hâlâ ekrandan taşıyordu; yatay kayma denetimi bunu haklı
 * olarak yakaladı.
 *
 * Artık iki katman da tam olarak perde kadardır; hale, kutu büyütülerek
 * değil RENK GEÇİŞİNİN yarıçapıyla çizilir. Hiçbir ekranda taşamaz.
 */
.acilis-izgara{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(62% 56% at 50% 46%,#000 18%,transparent 76%);
  mask-image:radial-gradient(62% 56% at 50% 46%,#000 18%,transparent 76%);
  animation:acilis-izgara 2.6s ease-out both;
}
.acilis-isik{
  position:absolute;inset:0;
  background:radial-gradient(46% 40% at 50% 42%,
    rgba(247,154,35,.34),rgba(247,154,35,.10) 46%,transparent 72%);
  animation:acilis-isik 2.8s ease-out both;
}
.acilis-isik.b{
  background:radial-gradient(62% 34% at 50% 104%,rgba(64,104,168,.22),transparent 70%);
  animation-delay:.18s;
}

/* --- Orta sütun ---------------------------------------------------- */
.acilis-orta{
  position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:24px;max-width:min(560px,90vw);
  transition:transform .75s,opacity .45s;
}

/* --- Marka halesi ----------------------------------------------------
   Logonun ARKASINDA bir kez genişleyip sönen yumuşak ışık. Eskiden
   burada turuncu bir levha ve radar halkaları vardı; levhanın içindeki
   işaret logonun da parçası olduğu için aynı şekil ekranda iki kez
   görünüyordu. Levha kaldırıldı, "sistem uyanıyor" duygusunu veren
   hareket logonun kendi arkasına taşındı. */
.acilis-hale{
  position:absolute;left:50%;top:50%;width:min(420px,78vw);height:min(420px,78vw);
  margin:0;transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(247,154,35,.34),rgba(247,154,35,.08) 55%,transparent 72%);
  animation:acilis-hale 1.5s cubic-bezier(.2,.7,.2,1) .1s both;
}

/* --- Marka, ekran adı, güven satırı --------------------------------- */
/**
 * LOGO — PERDENİN TEK MARKA ÖĞESİ.
 *
 * Tek başına kaldığı için biraz büyüdü ve girişi kendi üzerine
 * kuruldu: aşağıdan gelirken bulanıklığı açılır, yerine oturduktan
 * hemen sonra da kendi şekline oturan bir ışık yanar. Işık
 * `drop-shadow` ile verilir; kutuyu değil GÖRÜNTÜNÜN KENDİSİNİ
 * sarar, bu yüzden logonun etrafında dikdörtgen bir parlama olmaz.
 */
.acilis-logo{
  position:relative;
  opacity:0;transform:translateY(14px) scale(.96);filter:blur(7px);
  animation:acilis-yuksel .6s cubic-bezier(.2,.8,.2,1) .2s both,
            acilis-parilti 1.1s ease-out .78s both;
}
.acilis-marka{
  position:relative;display:block;
  width:clamp(196px,52vw,268px);height:auto;object-fit:contain;
}
/**
 * LOGO GİZLİYKEN YAZI BİÇİMİNDEKİ KURUM ADI.
 *
 * "İSKUR LOJİSTİK" tek satırda dar telefona sığmaz; kelime kelime
 * sarınca da satır arası dağılıyordu. Bilerek İKİ SATIRA diziyoruz:
 * üstte kurum adı, altında hafif harf aralıklı iş kolu — yazı
 * biçiminde de olsa bir marka kilidi gibi dursun.
 */
.acilis-logo .brand-wordmark{
  display:flex;flex-direction:column;align-items:center;
  font-size:clamp(1.8rem,5.6vw,2.5rem);font-weight:800;line-height:1.02;
}
.acilis-logo .brand-wordmark strong{letter-spacing:.05em}
.acilis-logo .brand-wordmark em{
  font-style:normal;color:var(--orange);font-size:.76em;letter-spacing:.15em;
}

/**
 * EKRAN ADI SOLDAN SAĞA AÇILIR.
 * Uzun bir başlığı harf harf oynatmak yorucu olurdu; tek bir kırpma
 * hareketi hem kısa hem okunaklı.
 */
.acilis-ad{margin:16px 0 0;overflow:hidden}
.acilis-ad span{
  display:inline-block;font-weight:800;letter-spacing:.015em;
  font-size:clamp(1.05rem,2.6vw,1.4rem);
  background:linear-gradient(90deg,#ffca7d,#f79a23 45%,#ffd9a4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  clip-path:inset(0 100% 0 0);
  animation:acilis-supur .62s cubic-bezier(.65,0,.35,1) .68s both;
}
.acilis-alt{
  display:flex;gap:11px;align-items:center;justify-content:center;flex-wrap:wrap;
  margin:14px 0 0;color:#98a1b2;font-size:.95rem;
  opacity:0;transform:translateY(9px);
  animation:acilis-yuksel .5s ease .92s both;
}
.acilis-alt b{color:#dee4ef;font-weight:600}
.acilis-alt i{width:4px;height:4px;border-radius:50%;background:var(--orange);display:inline-block}

/* --- İlerleme çizgisi ----------------------------------------------- */
.acilis-cizgi{
  position:absolute;left:50%;bottom:clamp(38px,9vh,76px);
  width:min(210px,50vw);transform:translateX(-50%);
  height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;
}
.acilis-cizgi i{
  position:absolute;inset:0;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#ffb454,#ed8b18);box-shadow:0 0 10px rgba(237,139,24,.9);
  animation:acilis-cizgi 1.5s cubic-bezier(.4,0,.2,1) .06s both;
}

/* --- "Geç" düğmesi --------------------------------------------------
   Perdenin içinde tıklanabilir TEK öğe. Dokunmatikte parmak ölçüsüne
   çıkar (44px), aksi hâlde ıskalanan bir düğme olur. */
.acilis-gec{
  position:absolute;right:16px;top:14px;pointer-events:auto;
  display:inline-flex;gap:5px;align-items:center;
  min-height:34px;padding:.42em .95em;border-radius:99px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:#aeb6c6;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
  opacity:0;animation:acilis-yuksel .45s ease .6s both;
}
.acilis-gec:hover{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.1)}
.acilis-gec:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media (max-width:1024px) and (pointer:coarse){
  .acilis-gec{min-height:44px;min-width:76px;justify-content:center;right:12px;top:10px}
}

@keyframes acilis-izgara{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes acilis-isik{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes acilis-yuksel{to{opacity:1;transform:none;filter:none}}
@keyframes acilis-hale{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  45%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}
}
/* Işık logonun kendi şeklini sarar (drop-shadow), kutusunu değil */
@keyframes acilis-parilti{
  0%{filter:drop-shadow(0 0 0 rgba(247,154,35,0))}
  40%{filter:drop-shadow(0 0 22px rgba(247,154,35,.55))}
  100%{filter:drop-shadow(0 0 0 rgba(247,154,35,0))}
}
@keyframes acilis-supur{to{clip-path:inset(0 0 0 0)}}
@keyframes acilis-cizgi{to{transform:scaleX(1)}}

/**
 * HAREKETİ AZALT.
 * Hareketten rahatsız olan kullanıcıda perde hiç oynamaz: markayı
 * gösterir ve yarım saniyede söner. Gösteri değil, nezaket.
 */
@media (prefers-reduced-motion:reduce){
  .acilis *{animation-duration:.01s!important;animation-delay:0s!important}
  .acilis{animation:none;transition:opacity .35s}
  .acilis.kalkiyor{clip-path:none;opacity:0}
  .acilis.kalkiyor .acilis-orta{transform:none;transition:none}
}

/* Dar telefonda logo ve boşluklar küçülür, çizgi yukarı gelir */
@media (max-width:560px){
  .acilis-hale{width:min(320px,86vw);height:min(320px,86vw)}
  .acilis-alt{gap:8px;font-size:.9rem}
}
@media (max-height:520px){
  /* Yatay telefonda yükseklik az: hale ve boşluklar iyice küçülür */
  .acilis-hale{width:min(240px,52vh);height:min(240px,52vh)}
  .acilis-marka{width:clamp(150px,34vw,196px)}
  .acilis-ad{margin-top:10px}
  .acilis-alt{margin-top:8px}
  .acilis-cizgi{bottom:20px}
}

/**
 * AÇILIŞ ANİMASYONU ANAHTARI (Sistem Ayarları).
 *
 * "Logo görünmesin" anahtarıyla aynı bileşeni kullanır ama mantığı
 * TERSTİR: orada işaretli kutu "gizle", burada "göster" demektir.
 * `.is-hidden` sınıfı bu yüzden kutu BOŞKEN verilir; aksi hâlde açık
 * bir ayar kapalı renkte görünürdü.
 */
.acilis-ayar{margin-top:18px}

/* ==================================================================
   BAKIM EKRANI (v4.0)
   ------------------------------------------------------------------
   Giriş ekranıyla aynı düzen: koyu markalı sol panel + durum kartı.
   Bakım bir arıza değil, sistemin bir DURUMUDUR; ekranı da sistemin
   geri kalanı gibi görünmelidir.

   Eski sürüm tek bir kutuydu ve 1440x900'de ekranın yarısı boş
   kalıyordu; üstelik ziyaretçinin ilk sorusuna ("verilerim ne oldu?")
   hiçbir yerde yanıt vermiyordu. Yeni düzende sol sütun bu üç soruyu
   karşılar, sağ sütun süre bilgisini ve eylemi taşır.
   ================================================================== */
.bakim-body{
  min-height:100vh;min-height:100dvh;margin:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vh,40px) clamp(16px,4vw,40px);
  background:#0d1017;color:#e9edf4;overflow-x:hidden;
}

/* --- Zemin: açılış perdesiyle aynı dil ------------------------------ */
.bakim-zemin{position:fixed;inset:0;pointer-events:none;z-index:0}
.bakim-izgara{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 15%,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000 15%,transparent 78%);
}
.bakim-isik{
  position:absolute;inset:0;
  background:radial-gradient(44% 38% at 26% 34%,rgba(247,154,35,.20),transparent 70%);
}
.bakim-isik.b{background:radial-gradient(56% 34% at 78% 104%,rgba(64,104,168,.18),transparent 70%)}

/* --- Kabuk ---------------------------------------------------------- */
.bakim-shell{
  position:relative;z-index:1;width:min(1080px,100%);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
}

/* --- Sol: marka ve güvenceler --------------------------------------- */
.bakim-marka{
  display:flex;flex-direction:column;gap:clamp(20px,3vh,30px);
  padding:clamp(26px,4vw,42px);
  background:linear-gradient(155deg,#191d26 0%,#20252f 52%,#181c24 100%);
}
.bakim-marka-ust{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
/* Ekranın tek marka öğesi logodur; ayrı işaret levhası YOKTUR (bkz. view) */
.bakim-logo{display:block;width:clamp(168px,23vw,212px);height:auto;object-fit:contain}
.bakim-logo.brand-wordmark{
  display:flex;flex-direction:column;font-size:1.55rem;font-weight:800;line-height:1.04;
}
.bakim-logo.brand-wordmark strong{letter-spacing:.05em}
.bakim-logo.brand-wordmark em{
  font-style:normal;color:var(--orange);font-size:.78em;letter-spacing:.14em;
}
@media (max-width:900px){.bakim-logo.brand-wordmark{align-items:center}}
.bakim-ekran-adi{
  margin:0;font-size:1.02rem;font-weight:700;color:#aeb7c7;letter-spacing:.01em;
}

.bakim-guvence{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bakim-guvence li{
  display:flex;gap:13px;align-items:flex-start;
  padding:13px 15px;border-radius:13px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
  border-left:3px solid var(--orange);
}
.bakim-guvence li span{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(247,154,35,.14);color:var(--orange);
}
.bakim-guvence li b{display:block;font-size:.95rem;color:#eef1f6;font-weight:650}
.bakim-guvence li small{display:block;margin-top:3px;font-size:.845rem;line-height:1.55;color:#98a1b2}

.bakim-marka-alt{
  margin-top:auto;display:flex;gap:9px;align-items:flex-start;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  font-size:.845rem;color:#8c96a7;
}
.bakim-marka-alt svg{flex:none;margin-top:2px;color:#6f7a8c}

/* --- Sağ: durum kartı ----------------------------------------------- */
.bakim-kart{
  display:flex;flex-direction:column;
  background:#14181f;border-left:1px solid rgba(255,255,255,.07);
}
.bakim-kart-govde{
  /**
   * Sol sütun güvence listesi yüzünden daha uzundur; kart içeriği
   * dikeyde ortalanmazsa sağ tarafta kocaman bir boşluk kalır ve
   * ekran yarım kalmış gibi durur (giriş kartındaki aynı sorun).
   */
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(26px,4vw,42px);gap:16px;
}
@media (max-width:900px){.bakim-kart-govde{justify-content:flex-start}}

.bakim-rozet{
  align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  padding:.42em .95em;border-radius:99px;
  background:rgba(247,154,35,.12);border:1px solid rgba(247,154,35,.34);
  color:#ffc270;font-size:.76rem;font-weight:800;letter-spacing:.1em;
}
/* Üç noktalı nabız: sistem çalışıyor ama beklemede */
.bakim-nabiz{display:inline-flex;gap:4px}
.bakim-nabiz i{
  width:5px;height:5px;border-radius:50%;background:var(--orange);
  animation:bakim-nabiz 1.4s ease-in-out infinite;
}
.bakim-nabiz i:nth-child(2){animation-delay:.2s}
.bakim-nabiz i:nth-child(3){animation-delay:.4s}
@keyframes bakim-nabiz{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

.bakim-kart h1{
  margin:0;font-size:clamp(1.55rem,3.6vw,2rem);line-height:1.15;
  letter-spacing:-.02em;color:#fff;
}
.bakim-mesaj{margin:0;font-size:1rem;line-height:1.7;color:#b3bccb}

.bakim-uyari{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:13px;
  background:rgba(214,79,56,.12);border:1px solid rgba(214,79,56,.34);
}
.bakim-uyari.yumusak{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.bakim-uyari svg{flex:none;margin-top:1px;color:#ff9478}
.bakim-uyari.yumusak svg{color:#9aa4b5}
.bakim-uyari b{display:block;font-size:.95rem;color:#fff}
.bakim-uyari p{margin:5px 0 0;font-size:.885rem;line-height:1.65;color:#b7c0cd}

/* Künye: satır satır, en önemli satır öne çıkar */
.bakim-kunye{
  margin:2px 0 0;display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.08);border-radius:13px;overflow:hidden;
}
.bakim-kunye > div{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.06);
}
.bakim-kunye > div:last-child{border-bottom:0}
.bakim-kunye .one-cikan{background:rgba(247,154,35,.09)}
.bakim-kunye .one-cikan dd{color:#ffc270}
.bakim-kunye dt{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:.85rem;color:#8e98a9;
}
.bakim-kunye dt svg{color:#6f7a8c}
.bakim-kunye dd{margin:0;font-size:.9rem;font-weight:700;color:#e6eaf1;text-align:right}

.bakim-eylem{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.bakim-eylem a{
  display:inline-flex;align-items:center;gap:9px;
  min-height:46px;padding:0 20px;border-radius:12px;
  text-decoration:none;font-size:.95rem;font-weight:700;
}
.bakim-eylem .primary{
  background:linear-gradient(135deg,#f79a23,#ed8b18);color:#fff;
  box-shadow:0 14px 28px -12px rgba(237,139,24,.85);
}
.bakim-eylem .primary:hover{filter:brightness(1.06)}
.bakim-eylem .secondary{
  background:rgba(255,255,255,.06);color:#cdd4df;border:1px solid rgba(255,255,255,.12);
}
.bakim-eylem .secondary:hover{background:rgba(255,255,255,.1);color:#fff}

.bakim-yardim{margin:0;font-size:.855rem;line-height:1.65;color:#8b95a6}

/* --- Yenileme şeridi ------------------------------------------------ */
.bakim-yenile{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  padding:13px clamp(20px,4vw,42px);
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
  font-size:.8rem;color:#7d8798;
}
.bakim-yenile span{display:inline-flex;align-items:center;gap:7px}
/**
 * Alt şeritteki adres bağlantısı 137x15 pikseldi: parmakla
 * isabet ettirmesi zor. Yükseklik verilir, dikey boşluk dışarı
 * taşırılır ki şerit kalınlaşmasın.
 */
.bakim-yenile a{
  color:#9aa4b5;text-decoration:none;
  display:inline-flex;align-items:center;min-height:32px;
  padding-inline:6px;margin-inline:-6px;
}
.bakim-yenile a:hover{color:var(--orange)}
/**
 * SAYFANIN KENDİNİ YENİLEMESİNİ GÖSTEREN ÇUBUK.
 * 60 saniyede dolar — <meta refresh> ile aynı süre. Betik gerekmez;
 * yenilemeyi yapan zaten tarayıcının kendisidir.
 */
.bakim-yenile-cubuk{
  position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden;
  background:rgba(255,255,255,.06);
}
.bakim-yenile-cubuk i{
  display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#ffb454,#ed8b18);
  animation:bakim-yenile 60s linear both;
}
@keyframes bakim-yenile{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .bakim-nabiz i{animation:none;opacity:.75}
  .bakim-yenile-cubuk i{animation:none;transform:scaleX(1);opacity:.35}
}

/* --- Tablet ve telefon ---------------------------------------------- */
@media (max-width:900px){
  .bakim-body{align-items:flex-start;padding:0}
  .bakim-shell{grid-template-columns:1fr;border-radius:0;border:0;min-height:100dvh;box-shadow:none}
  .bakim-kart{border-left:0;border-top:1px solid rgba(255,255,255,.07)}
  /**
   * TELEFONDA ÖNCE DURUM, SONRA GÜVENCELER.
   * Küçük ekranda ziyaretçi önce "ne oldu" sorusunun yanıtını
   * görmeli; marka ve güvenceler aşağı iner.
   */
  .bakim-kart{order:1}
  .bakim-marka{order:2;background:linear-gradient(170deg,#181c24,#14181f)}
  .bakim-marka-ust{align-items:center;text-align:center;width:100%}
  .bakim-marka-alt{margin-top:8px}
}
@media (max-width:560px){
  .bakim-kunye > div{flex-direction:column;align-items:flex-start;gap:4px}
  .bakim-kunye dd{text-align:left}
  .bakim-eylem a{flex:1 1 100%;justify-content:center}
  .bakim-guvence li{padding:12px 13px}
}

/* ==================================================================
   UYGULAMA OLARAK KURULUM (Hesabım)
   ------------------------------------------------------------------
   Sol tarafta gerçek uygulama simgesi, sağda ne olduğu ve tek düğme.
   Simge burada süs değil: kullanıcı ana ekranında NEYİ göreceğini
   önceden görür.
   ================================================================== */
.uygulama-kart{
  display:flex;gap:16px;align-items:flex-start;
  padding:16px;border-radius:14px;
  background:var(--secondary);border:1px solid var(--line);
}
.uygulama-simge{
  flex:none;width:52px;height:52px;border-radius:14px;overflow:hidden;
  box-shadow:0 10px 22px -10px rgba(237,139,24,.75);
}
.uygulama-simge img{display:block;width:100%;height:100%;object-fit:cover}
.uygulama-metin{min-width:0;flex:1}
.uygulama-metin > b{display:block;font-size:14.5px;color:var(--ink)}
.uygulama-metin > p{margin:5px 0 0;font-size:13px;line-height:1.65;color:var(--muted)}
.uygulama-eylem{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.uygulama-eylem .primary{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:0 16px;border-radius:10px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#f79a23,#ed8b18);color:#fff;
  font:inherit;font-size:13.5px;font-weight:700;
}
.uygulama-eylem .primary:hover{filter:brightness(1.05)}
.uygulama-eylem .primary:disabled{opacity:.6;cursor:default}
.uygulama-rozet{
  display:inline-flex;align-items:center;gap:7px;
  padding:.4em .8em;border-radius:99px;
  background:#e7f6ed;border:1px solid #bfe3cd;color:#1f7a45;
  font-size:12.5px;font-weight:700;
}
/* Safari yolu: teklif gelmeyen cihazlarda iki adım */
.uygulama-elle{
  margin:12px 0 0;padding:0 0 0 20px;
  font-size:13px;line-height:1.7;color:var(--muted);
}
.uygulama-elle li{margin:2px 0}
.uygulama-elle b{color:var(--ink)}
.uygulama-surum{display:flex;align-items:center;gap:8px;margin-top:14px}
.uygulama-surum svg{flex:none;color:var(--muted)}

@media (max-width:560px){
  .uygulama-kart{flex-direction:column}
  .uygulama-eylem .primary{width:100%;justify-content:center;min-height:46px}
}

/* ==================================================================
   "BU SÜRÜMDE YENİLİKLER" KARTI
   ------------------------------------------------------------------
   Güncellemeden sonra bir kez çıkar. Bir duyuru panosu değil, kısa
   bir selam: koyu kurumsal zemin, en çok dört madde, tek kapatma
   düğmesi. Uzun olsaydı okunmaz, her sürümde çıksaydı rahatsız
   ederdi — ikisinden de kaçınıldı.
   ================================================================== */
.yenilik-kart{
  position:relative;margin:0 0 18px;padding:20px 22px;
  border-radius:16px;overflow:hidden;color:#e9edf4;
  background:linear-gradient(140deg,#181c25 0%,#20252f 55%,#171b23 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.8);
}
/* Sağ üstte yumuşak kurumsal ışık */
.yenilik-kart::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38% 60% at 88% 0%,rgba(247,154,35,.20),transparent 70%);
}
.yenilik-ust{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.yenilik-rozet{
  display:inline-flex;align-items:center;gap:7px;
  padding:.36em .8em;border-radius:99px;
  background:rgba(247,154,35,.14);border:1px solid rgba(247,154,35,.36);
  color:#ffc270;font-size:11px;font-weight:800;letter-spacing:.1em;
}
.yenilik-rozet svg{color:#ffc270}
.yenilik-surum{font-size:12.5px;color:#8f99a9;font-variant-numeric:tabular-nums}
.yenilik-kapat{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#9aa4b5;
}
.yenilik-kapat:hover{background:rgba(255,255,255,.1);color:#fff}
.yenilik-kapat:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.yenilik-kart h2{
  position:relative;z-index:1;margin:14px 0 0;
  font-size:clamp(1.15rem,2.4vw,1.4rem);letter-spacing:-.01em;color:#fff;
}
.yenilik-liste{
  position:relative;z-index:1;list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 22px;
}
.yenilik-liste li{display:flex;gap:10px;align-items:flex-start}
.yenilik-liste li svg{flex:none;margin-top:3px;color:#5fbe86}
.yenilik-liste li span{font-size:13.5px;line-height:1.65;color:#b6bfcd}
.yenilik-liste li b{color:#fff;font-weight:650}
.yenilik-alt{
  position:relative;z-index:1;margin:16px 0 0;
  font-size:12.5px;color:#7f8996;
}
.yenilik-alt a{color:var(--orange);text-decoration:none;font-weight:700}
.yenilik-alt a:hover{text-decoration:underline}

/* Kapanırken yerinden kayarak çıkar; sayfa zıplamasın diye yükseklik de iner */
.yenilik-kart.kapaniyor{
  opacity:0;transform:translateY(-8px);
  margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;
  max-height:0;border-width:0;
  transition:opacity .25s,transform .3s,max-height .35s,padding .35s,margin .35s;
}
@media (prefers-reduced-motion:reduce){.yenilik-kart.kapaniyor{transition:opacity .2s}}

@media (max-width:760px){
  .yenilik-kart{padding:17px 16px;border-radius:14px}
  .yenilik-liste{grid-template-columns:1fr;gap:9px}
}
@media (max-width:1024px) and (pointer:coarse){
  .yenilik-kapat{width:44px;height:44px}
}
@media print{.yenilik-kart{display:none}}
