/* Demo-only phone and tablet layout; desktop geometry is unchanged. */
.demo-mobile-login,.demo-menu-close,.demo-menu-backdrop{display:none}
@media(max-width:1024px){
 html{min-width:0}
 body[data-kabuk=operator]{min-width:0;width:100%;--sidebar:0px;--ust:0px;--alt:0px}
 .native-demo-controls{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100vw - 24px));max-width:calc(100vw - 24px)}
 .native-demo-controls.collapsed{width:auto}
 .native-demo-toolbar{gap:6px}
 .native-demo-home,.native-demo-toolbar .native-demo-toggle{min-height:44px;font-size:12px;border-radius:24px;padding:10px 12px}
 .native-demo-toggle span{display:none}
 .native-demo-panel{max-height:calc(100dvh - 180px);overflow:auto;overscroll-behavior:contain;padding:16px}
 .native-demo-panel p,.native-demo-login,.native-demo-roles a{font-size:13px}
 .native-demo-panel button,.native-demo-panel select{min-height:44px;font-size:13px}
 .native-demo-roles a{display:flex;align-items:center;min-height:44px}
 .native-demo-actions select{width:64px}
 body.gm-mobile-ready .native-demo-controls{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 body.gm-mobile-ready .calisma-alani{padding-bottom:calc(148px + env(safe-area-inset-bottom,0px))}
 body:is(.mobil-sidebar-acik,.demo-menu-open,.ozellestirme-acik,.gm-keyboard-open) .native-demo-controls,body:has(dialog[open],[role=dialog][aria-hidden=false]) .native-demo-controls{display:none}
 .demo-mobile-login{display:grid;gap:8px;margin:14px 0;font-size:12px;line-height:1.5;color:var(--metin,#18324c)}
 .demo-mobile-login button{width:100%;min-height:44px;padding:10px;border:1px solid var(--cizgi,#ccd9e5);border-radius:10px;background:var(--yuzey-ikincil,#f2f6fa);color:inherit;cursor:pointer;font-size:13px}
 #girisKatmani{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));overflow-y:auto}
 #girisFormu :is(input,select){font-size:16px}
 /* The operator's original shell has an 1180px minimum width. Release that constraint on mobile. */
 body[data-kabuk=operator] .uygulama{min-width:0;width:100%;padding:0 0 calc(82px + env(safe-area-inset-bottom,0px))}
 body[data-kabuk=operator] .ust-bar{position:sticky;inset:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;height:auto;min-height:64px;padding:10px 12px;z-index:40}
 body[data-kabuk=operator] .ust-sol{width:100%;min-width:0;gap:10px}
 body[data-kabuk=operator] .ust-sol h1{font-size:18px;white-space:normal;line-height:1.3}
 body[data-kabuk=operator] .ust-durumlar{width:100%;display:flex;flex-wrap:wrap;gap:8px;flex-shrink:1;justify-content:space-between}
 body[data-kabuk=operator] .ust-durumlar>.staff-ust-suresi{width:auto;min-width:0;padding:0;border:0;gap:6px;flex:1}
 body[data-kabuk=operator] .staff-ust-suresi b{font-size:14px}
 body[data-kabuk=operator] .staff-ust-suresi small{font-size:10px;white-space:normal}
 body[data-kabuk=operator] #masaUstDurumu{min-width:0;font-size:12px}
 body[data-kabuk=operator] .tema-secici{margin:0;gap:4px}
 body[data-kabuk=operator] .tema-secici>span{display:none}
 body[data-kabuk=operator] .tema-secici select{min-height:44px;max-width:120px;font-size:14px}
 body[data-kabuk=operator] :is(.ikon-dugme,#sidebarDaralt){width:44px;min-width:44px;height:44px}
 body[data-kabuk=operator] .ana-icerik{position:static;min-width:0;width:100%;max-width:100%;padding:12px;margin:0}
 body[data-kabuk=operator] .ana-icerik>:is(.operator-ana-gorunumu,.operator-alt-gorunumu){width:100%;margin-inline:0}
 body[data-kabuk=operator] .ana-icerik :is(section,article,form,header,footer,div){min-width:0;max-width:100%;box-sizing:border-box}
 body[data-kabuk=operator] .ana-icerik :is(button,input,select,textarea){min-height:44px;max-width:100%}
 body[data-kabuk=operator] .ana-icerik :is(input,select,textarea){font-size:16px;min-width:0}
 body[data-kabuk=operator] .ana-icerik :is(button,label){white-space:normal}
 body[data-kabuk=operator] .ana-icerik :is(h2,h3,p,strong){overflow-wrap:anywhere}
 body[data-kabuk=operator] .operator-baglanti-karti{display:flex;flex-direction:column;align-items:stretch;padding:14px;gap:12px}
 body[data-kabuk=operator] .operator-baglanti-ozet{flex:0 0 auto;min-height:36px}
 body[data-kabuk=operator] .operator-baglanti-eylemleri{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;gap:10px}
 body[data-kabuk=operator] .operator-baglanti-eylemleri>label{display:grid;gap:6px}
 body[data-kabuk=operator] .operator-baglanti-eylemleri>label:has(#operatorBaslangicDurumu){grid-column:1/-1}
 body[data-kabuk=operator] .operator-baglanti-eylemleri select{width:100%}
 body[data-kabuk=operator] .operator-baglanti-eylemleri>button{align-self:end}
 body[data-kabuk=operator] #operatorBaglantiDahili{width:100%}
 body[data-kabuk=operator] #operatorBaslangicDurumu{width:100%;max-width:none}
 body[data-kabuk=operator] :is(.kart-izgarasi,.masa-izgarasi,.degerlendirme-calisma-alani,.musteri-gecmisi-yerlesimi,.karsilama-yerlesimi,.bilgi-bankasi-yerlesimi){display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 body[data-kabuk=operator] .masa-karti{grid-column:auto!important;grid-row:auto!important;min-height:0}
 body[data-kabuk=operator] :is(.calisma-donemi-ozeti,.yardimci-durum-ozeti){grid-template-columns:minmax(0,1fr)}
 body[data-kabuk=operator] :is(.operator-cagri-kpi-seridi,.degerlendirme-metrikleri,.degerlendirme-bilgileri,.giris-cikis-metrikleri){grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-kabuk=operator] .operator-cagri-kpi-seridi article{padding:12px;gap:8px}
 body[data-kabuk=operator] .operator-cagri-kpi-seridi small{white-space:normal;line-height:1.4}
 body[data-kabuk=operator] :is(.menu-sayfa-basligi,.menu-kart-basligi,.operator-is-araclari){flex-wrap:wrap;gap:10px;height:auto}
 body[data-kabuk=operator] :is(.gorusme-filtreleri,.bilgi-bankasi-arama){display:grid;grid-template-columns:minmax(0,1fr)}
 body[data-kabuk=operator] .ekip-arama{grid-template-columns:minmax(0,1fr)}
 body[data-kabuk=operator] .rehber-kisisi{grid-template-columns:38px minmax(0,1fr) 88px;gap:8px;padding:12px}
 body[data-kabuk=operator] .rehber-kimlik{grid-column:2;grid-row:1}
 body[data-kabuk=operator] .rehber-kimlik small{white-space:normal;overflow-wrap:anywhere}
 body[data-kabuk=operator] .rehber-dahili{grid-column:2;grid-row:2}
 body[data-kabuk=operator] .rehber-kisisi>button{grid-column:3;grid-row:1/3}
 body[data-kabuk=operator] .geri-arama-gorevi{grid-template-columns:30px minmax(0,1fr);gap:10px}
 body[data-kabuk=operator] .geri-arama-zaman{display:grid;grid-column:2}
 body[data-kabuk=operator] .geri-arama-durum{grid-column:2;justify-self:start}
 body[data-kabuk=operator] .geri-arama-gorevi>button{grid-column:1/-1}
 body[data-kabuk=operator] .degerlendirme-kriterleri>div{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px}
 body[data-kabuk=operator] .danisma-taraflari{grid-template-columns:minmax(0,1fr)}
 body[data-kabuk=operator] .danisma-eylemleri{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-kabuk=operator] .kayit-oynaticisi{display:flex;flex-wrap:wrap;gap:8px}
 body[data-kabuk=operator] .oynatici-akis{flex:1 0 100%}
 body[data-kabuk=operator] .altyapi-seridi{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;padding:16px 12px;gap:16px;left:auto;right:auto}
 body[data-kabuk=operator] .altyapi-seridi>span{padding:0;border:0}
 body[data-kabuk=operator] .altyapi-seridi time{grid-column:1/-1;width:auto;border:0;padding:0}
 body[data-kabuk=operator] .ozellestirme{z-index:105;width:min(380px,100%);max-width:100%;overflow-y:auto;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
 body[data-kabuk=operator].ozellestirme-acik :is(.ust-bar,.ana-icerik,.altyapi-seridi){right:0}
 /* Use the original menu and actions inside a modal drawer; no duplicate navigation. */
 body[data-kabuk=operator] .sidebar{z-index:101;width:min(320px,88vw)!important;height:100dvh;padding:20px 14px;transform:translateX(-105%)!important;visibility:hidden;transition:transform .2s ease,visibility .2s}
 body[data-kabuk=operator].demo-menu-open{overflow:hidden}
 body[data-kabuk=operator].demo-menu-open .sidebar{transform:none!important;visibility:visible}
 body[data-kabuk=operator] .sidebar :is(.marka span,.yerli-kimlik,.operator-kimligi>span:nth-child(2),nav p,nav button>span,nav a>span){display:revert}
 body[data-kabuk=operator] .sidebar nav :is(button,a){justify-content:flex-start;min-height:46px;font-size:14px}
 body[data-kabuk=operator] .sidebar .marka{padding-right:28px}
 body[data-kabuk=operator] .sidebar .operator-kimligi{display:grid;grid-template-columns:35px minmax(0,1fr) auto}
 .demo-menu-close{display:grid;place-items:center;position:absolute;top:16px;right:8px;width:40px;height:44px;border:0;background:transparent;color:inherit;font-size:26px;cursor:pointer}
 .demo-menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:100;width:100%;height:100dvh;border:0;background:#03102099;backdrop-filter:blur(2px)}
 body[data-kabuk=operator] :is(dialog,[role=dialog],.modal-kart){max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
 body[data-kabuk=operator] #telefonKonsolu .telefon-basligi{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px}
 body[data-kabuk=operator] #telefonKonsolu .telefon-basligi>dl{flex-wrap:wrap;gap:12px}
 body[data-kabuk=operator] #telefonKonsolu .telefon-govdesi{display:block}
 body[data-kabuk=operator] #telefonKonsolu :is(.cagri-kimligi,.telefon-komutlari){padding:12px;min-height:0}
 body[data-kabuk=operator] #telefonKonsolu .telefon-komutlari{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 body[data-kabuk=operator] #telefonKonsolu :is(.temel-kontroller,.gelismis-kontroller){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px}
 body[data-kabuk=operator] #telefonKonsolu :is(.temel-kontroller,.gelismis-kontroller)>button{width:100%;min-width:0;padding:8px 4px;min-height:58px;white-space:normal}
 body[data-kabuk=operator] #telefonKonsolu .ses-konsolu{display:flex;flex-wrap:wrap;padding:12px;gap:10px}
 body[data-kabuk=operator] #telefonKonsolu+.operator-durumlari{display:flex;flex-direction:column;align-items:stretch;padding:12px;gap:12px}
 body[data-kabuk=operator] #telefonKonsolu+.operator-durumlari .operator-durum-etiketi{min-width:0;max-width:100%;padding:0;margin:0}
 body[data-kabuk=operator] #telefonKonsolu+.operator-durumlari .operator-durum-secenekleri{display:flex;flex-wrap:wrap;gap:6px}
 body[data-kabuk=operator] .aktif-cagri-seridi{position:static;display:flex;flex-wrap:wrap;margin:12px 0;gap:12px;max-width:100%}
 body[data-kabuk=operator] .aktif-cagri-seridi dl{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:10px}
 body[data-kabuk=operator] .aktif-cagri-eylemleri{flex-wrap:wrap}
 body[data-kabuk=operator] .gelen-cagri-katmani{padding:12px}
 body[data-kabuk=operator] .gelen-cagri-karti{width:100%;max-width:420px;max-height:calc(100dvh - 24px);overflow:auto}
 body[data-kabuk=operator] .gelen-cagri-karti dl{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-kabuk=operator]:not(.telefon-kokpiti-acik) .telefon-cekmecesi{max-height:none;overflow:visible;margin:12px 0}
 body[data-kabuk=operator]:not(.telefon-kokpiti-acik) .telefon-cekmece-icerigi{display:none}
 body[data-kabuk=operator] #telefonCekmeceSekmesi{position:static;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;width:100%;height:auto;min-height:44px;transform:none;border-radius:10px;padding:10px}
 body[data-kabuk=operator] #telefonCekmeceSekmesi span{writing-mode:horizontal-tb;transform:none}
 body[data-kabuk=operator].telefon-kokpiti-acik #telefonCekmeceSekmesi{display:none}
 body[data-kabuk=operator] [hidden][hidden]{display:none!important}
}
@media(max-width:600px){
 body[data-kabuk=operator] .ust-durumlar{display:grid;grid-template-columns:minmax(0,1fr) auto}
 body[data-kabuk=operator] .ust-durumlar>.staff-ust-suresi{grid-column:1;grid-row:1}
 body[data-kabuk=operator] #masaUstDurumu{grid-column:2;grid-row:1}
 body[data-kabuk=operator] .tema-secici{grid-column:1;grid-row:2}
 body[data-kabuk=operator] .tema-secici select{width:100%;max-width:none}
 body[data-kabuk=operator] #masayiOzellestir{grid-column:2;grid-row:2;justify-self:end}
}
@media(max-width:820px){
 body[data-oturum=uygulama] #sayfaIcerigi .operasyon-kpi-izgarasi{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body[data-oturum=uygulama] #sayfaIcerigi .operasyon-kpi-izgarasi>.supervisor-kpi-karti{grid-column:auto!important}
}
@media(prefers-reduced-motion:reduce){.demo-menu-backdrop,.demo-menu-close{transition:none}}

/* Keep live status/timer changes from moving the mobile reading position. */
@media(max-width:1024px){
 body[data-kabuk=operator] .ana-icerik{overflow-anchor:none}
 body[data-kabuk=operator] :is(#cagriSuresi,#seritSuresi,#telefonMiniSure){font-variant-numeric:tabular-nums}
}
@media(max-width:600px){
 body[data-kabuk=operator] .ust-durumlar{grid-template-columns:minmax(0,1fr) minmax(112px,auto);grid-template-rows:44px 44px;align-items:center}
 body[data-kabuk=operator] .ust-durumlar>.staff-ust-suresi{width:100%;height:44px}
 body[data-kabuk=operator] .ust-durumlar>.staff-ust-suresi small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body[data-kabuk=operator] .ust-durumlar>.staff-ust-suresi>span{min-width:0}
 body[data-kabuk=operator] #masaUstDurumu{justify-self:end;white-space:nowrap}
 body[data-kabuk=operator] #telefonKonsolu .telefon-basligi>dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;min-height:54px;gap:8px;align-items:start}
 body[data-kabuk=operator] #telefonKonsolu .telefon-basligi>dl>div{display:grid;gap:4px}
 body[data-kabuk=operator] #telefonKonsolu .telefon-basligi dd{margin:0;font-size:11px;line-height:1.4}
}