/* ============================================================================ MiaPOS+ Design System · v1.0 · Delivery (PaketServis) uyarlamasi --------------------------------------------------------------------------- "Look" (app-header / stacked-menu) sablonu + Bootstrap 4.4.x ustune binen tema katmani. Kaynak: Mia_Order/Content/dist/css/miapos-theme.css. Bolum 1-11 ortak (sablondan bagimsiz), bolum 12-16 Delivery'ye ozgudur. Mevcut markup'i BOZMAZ; sadece degisken + override tanimlar. Yukleme sirasi (ONEMLI - en sonda olmali): theme.min.css -> custom.css -> miapos-theme.css Tema modu: | Varsayilan: light. Sablonun kendi koyu skin'i (theme-dark.min.css) ve localStorage skin swap'i 2026-09-01'de kaldirildi - tek acik skin karari. Auth ekranlari her zaman koyu (bolum 7). ========================================================================= */ /* --- 1. FONTLAR ---------------------------------------------------------- */ /* Self-host. Dosyalar: assets/fonts/ (4 adet woff2, toplam 96 KB). Google Fonts KULLANILMIYOR — mobil WebView'da aga cikis garanti degil ve kullanici IP'sinin Google'a gitmesi KVKK acisindan sorunlu. unicode-range SART: Turkce g s I (U+011E/011F/015E/015F/0130) ve TL isareti (U+20BA) latin-ext araliginda. Yalnizca 'latin' dosyasi yuklenirse bu karakterler yedek fonta duser ve kelime ortasinda font degisir. ('i' U+0131 latin araliginda, o sorun degil.) Bricolage variable (wght 200-800): iki agirligin statik hali 66 KB tutuyordu, variable tum agirliklari 60 KB'de veriyor. Tek dosya, daha az csproj kaydi. */ @font-face{ font-family:'Bricolage Grotesque'; src:url('../fonts/bricolage-latin-ext.woff2') format('woff2'); font-weight:200 800; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF, U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Bricolage Grotesque'; src:url('../fonts/bricolage-latin.woff2') format('woff2'); font-weight:200 800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } /* Plex Mono yalniz 600. Tasarimda 500/600 ayrimi vardi; 600'de birlestirdim — 28 KB ve iki csproj kaydi tasarrufu, gorsel fark ihmal edilebilir. */ @font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/plexmono-600-latin-ext.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF, U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/plexmono-600-latin.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } /* --- 2. TOKENLAR --------------------------------------------------------- */ :root{ /* Marka paleti - miapos.com ile birebir */ --mp-navy-900:#070F18; --mp-navy-800:#0B1826; --mp-navy-700:#0F2032; --mp-navy-600:#16293D; --mp-ink:#1A2430; --mp-paper:#F6F2E9; --mp-text-dark:#E8EFF5; --mp-muted-dark:#8CA3B6; --mp-red:#E32B1F; --mp-red-hot:#FF4438; --mp-line-dark:rgba(151,178,201,.14); --mp-line-dark-2:rgba(151,178,201,.26); /* Durum renkleri - marka ile ayni sicaklikta tutuldu */ --mp-ok:#1F9D67; --mp-warn:#C8890C; --mp-info:#2B6CB0; /* Tipografi */ --mp-font-display:'Bricolage Grotesque',Georgia,'Times New Roman',serif; /* Govde: sistem fontu. Source Sans Pro Google Fonts'tan geliyordu, kaldirildi; indirilecek dosya yok, iOS'ta SF / Android'de Roboto ile yerli duruyor. */ --mp-font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --mp-font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Olcek - 4px tabanli */ --mp-s1:4px; --mp-s2:8px; --mp-s3:12px; --mp-s4:16px; --mp-s5:24px; --mp-s6:32px; --mp-s7:48px; --mp-s8:64px; --mp-r-sm:6px; --mp-r:10px; --mp-r-lg:16px; --mp-r-pill:999px; /* Dokunma hedefi - WCAG 2.5.8 minimum 44px, tablet icin 48px */ --mp-touch:48px; --mp-touch-lg:56px; --mp-ease:cubic-bezier(.2,.7,.3,1); --mp-dur:180ms; } /* Acik tema (varsayilan) */ :root,[data-theme="light"]{ --mp-bg:#EFEBE1; --mp-surface:#FFFFFF; --mp-surface-2:var(--mp-paper); --mp-surface-3:#E7E2D6; --mp-fg:var(--mp-ink); --mp-fg-muted:#5C6470; --mp-line:rgba(26,36,48,.12); --mp-line-2:rgba(26,36,48,.20); --mp-accent:var(--mp-red); --mp-accent-fg:#FFFFFF; --mp-shadow:0 1px 2px rgba(7,15,24,.06),0 8px 24px -12px rgba(7,15,24,.18); --mp-shadow-lg:0 2px 4px rgba(7,15,24,.08),0 24px 48px -20px rgba(7,15,24,.28); } /* Koyu tema */ [data-theme="dark"]{ --mp-bg:var(--mp-navy-900); --mp-surface:var(--mp-navy-700); --mp-surface-2:var(--mp-navy-800); --mp-surface-3:var(--mp-navy-600); --mp-fg:var(--mp-text-dark); --mp-fg-muted:var(--mp-muted-dark); --mp-line:var(--mp-line-dark); --mp-line-2:var(--mp-line-dark-2); --mp-accent:var(--mp-red-hot); /* koyu zeminde 5.66:1 - AA gecer */ --mp-accent-fg:#FFFFFF; --mp-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --mp-shadow-lg:0 2px 4px rgba(0,0,0,.5),0 24px 48px -20px rgba(0,0,0,.7); } /* Sistem tercihi - kullanici secim yapmadiysa */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --mp-bg:var(--mp-navy-900); --mp-surface:var(--mp-navy-700); --mp-surface-2:var(--mp-navy-800); --mp-surface-3:var(--mp-navy-600); --mp-fg:var(--mp-text-dark); --mp-fg-muted:var(--mp-muted-dark); --mp-line:var(--mp-line-dark); --mp-line-2:var(--mp-line-dark-2); --mp-accent:var(--mp-red-hot); --mp-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --mp-shadow-lg:0 2px 4px rgba(0,0,0,.5),0 24px 48px -20px rgba(0,0,0,.7); } } /* --- 3. TABAN ------------------------------------------------------------ */ html{ -webkit-text-size-adjust:100%; } body{ background:var(--mp-bg); color:var(--mp-fg); font-family:var(--mp-font-body); font-size:16px; /* iOS focus-zoom'u engeller (<16px zoomlatir) */ line-height:1.5; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; /* WebView'da pull-to-refresh bounce'u kapat */ } h1,h2,h3,h4,h5,h6,.mp-display{ font-family:var(--mp-font-display); font-weight:600; letter-spacing:-.02em; color:var(--mp-fg); } /* Sayisal her sey mono: masa no, tutar, saat, siparis kodu. tabular-nums olmadan rakamlar zipliyor - liste ekranlarinda sart. */ .mp-num,.mp-amount,.mp-code,.mp-clock{ font-family:var(--mp-font-mono); font-weight:600; /* tek agirlik yuklu; belirsiz birakma */ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; letter-spacing:-.01em; } .mp-amount::after{ content:' ₺'; opacity:.6; } /* U+20BA - latin-ext dosyasindan gelir */ .mp-amount--bare::after{ content:none; } /* Odak halkasi - klavye/erisilebilirlik. Asla outline:none birakma. */ :focus-visible{ outline:2px solid var(--mp-accent); outline-offset:2px; border-radius:var(--mp-r-sm); } /* Dokunmatik: gri tap highlight'i kaldir, kendi state'imizi kullan */ a,button,.btn,[role="button"]{ -webkit-tap-highlight-color:transparent; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; } } /* --- 4. YUZEYLER / KARTLAR ---------------------------------------------- */ .card,.mp-card{ background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:var(--mp-r-lg); box-shadow:var(--mp-shadow); color:var(--mp-fg); } .card-header{ background:transparent; border-bottom:1px solid var(--mp-line); padding:var(--mp-s4) var(--mp-s5); font-family:var(--mp-font-display); font-weight:600; } .card-body{ padding:var(--mp-s5); color:var(--mp-fg); } /* Marka cizgisi: kartin ustunde 3px kirmizi kesit. Tek vurgu, az kullan. */ .mp-card--accent{ position:relative; overflow:hidden; } .mp-card--accent::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--mp-red) 0%,var(--mp-red-hot) 60%,transparent 100%); } /* --- 5. BUTONLAR --------------------------------------------------------- */ .btn{ font-family:var(--mp-font-body); font-weight:600; letter-spacing:-.01em; border-radius:var(--mp-r); min-height:var(--mp-touch); padding:0 var(--mp-s5); display:inline-flex; align-items:center; justify-content:center; gap:var(--mp-s2); border:1px solid transparent; transition:background var(--mp-dur) var(--mp-ease), border-color var(--mp-dur) var(--mp-ease), transform 90ms var(--mp-ease); } .btn:active{ transform:translateY(1px); } .btn-lg{ min-height:var(--mp-touch-lg); font-size:17px; padding:0 var(--mp-s6); } .btn-sm{ min-height:38px; font-size:14px; padding:0 var(--mp-s4); border-radius:var(--mp-r-sm); } .btn-primary,.btn-primary:not(:disabled):not(.disabled){ background:var(--mp-red); border-color:var(--mp-red); color:#fff; /* 4.53:1 - AA */ } .btn-primary:hover,.btn-primary:focus{ background:var(--mp-red-hot); border-color:var(--mp-red-hot); color:#fff; } .btn-primary:disabled,.btn-primary.disabled{ background:var(--mp-red); border-color:var(--mp-red); opacity:.45; } .btn-secondary,.btn-default{ background:var(--mp-surface-3); border-color:var(--mp-line-2); color:var(--mp-fg); } .btn-secondary:hover{ background:var(--mp-surface-2); border-color:var(--mp-line-2); color:var(--mp-fg); } .btn-outline-primary{ background:transparent; border-color:var(--mp-accent); color:var(--mp-accent); } .btn-outline-primary:hover{ background:var(--mp-accent); color:var(--mp-accent-fg); border-color:var(--mp-accent); } .btn-ghost{ background:transparent; border-color:var(--mp-line-2); color:var(--mp-fg); } .btn-ghost:hover{ background:var(--mp-surface-3); color:var(--mp-fg); } .btn-block{ width:100%; } /* Yukleniyor durumu - cift submit'i gorsel olarak da engelle */ .btn.is-loading{ pointer-events:none; position:relative; color:transparent!important; } .btn.is-loading::after{ content:''; position:absolute; width:20px; height:20px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; color:#fff; animation:mp-spin .6s linear infinite; } @keyframes mp-spin{ to{ transform:rotate(360deg); } } /* --- 6. FORM ------------------------------------------------------------- */ .mp-field{ margin-bottom:var(--mp-s4); } .mp-label{ display:block; margin-bottom:var(--mp-s2); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:none; color:var(--mp-fg-muted); } .form-control,.custom-select{ min-height:var(--mp-touch); font-size:16px; /* iOS zoom guard */ background:var(--mp-surface); border:1px solid var(--mp-line-2); border-radius:var(--mp-r); color:var(--mp-fg); padding:0 var(--mp-s4); box-shadow:none; transition:border-color var(--mp-dur) var(--mp-ease), box-shadow var(--mp-dur) var(--mp-ease); } textarea.form-control{ padding:var(--mp-s3) var(--mp-s4); min-height:96px; line-height:1.5; } .form-control::placeholder{ color:var(--mp-fg-muted); opacity:.7; } .form-control:focus{ background:var(--mp-surface); border-color:var(--mp-accent); color:var(--mp-fg); box-shadow:0 0 0 3px rgba(227,43,31,.22); /* fallback */ box-shadow:0 0 0 3px color-mix(in srgb,var(--mp-accent) 22%,transparent); outline:none; } .form-control.input-validation-error,.form-control.is-invalid{ border-color:var(--mp-red-hot); box-shadow:0 0 0 3px rgba(255,68,56,.18); } .field-validation-error,.invalid-feedback{ display:block; margin-top:var(--mp-s2); font-size:13px; font-weight:600; color:var(--mp-red-hot); } /* Ikonlu input - input-group yerine, daha az DOM ve daha iyi hizalama */ .mp-input-icon{ position:relative; } .mp-input-icon > .form-control{ padding-left:46px; } .mp-input-icon > .mp-icon{ position:absolute; left:0; top:0; width:46px; height:var(--mp-touch); display:flex; align-items:center; justify-content:center; color:var(--mp-fg-muted); pointer-events:none; font-size:16px; } /* Parola goster/gizle - tablet klavyesinde yazim hatasi cok oluyor, sart */ .mp-input-icon > .mp-toggle{ position:absolute; right:0; top:0; width:var(--mp-touch); height:var(--mp-touch); display:flex; align-items:center; justify-content:center; background:none; border:0; color:var(--mp-fg-muted); cursor:pointer; border-radius:0 var(--mp-r) var(--mp-r) 0; } .mp-input-icon > .mp-toggle:hover{ color:var(--mp-fg); } .mp-input-icon--pass > .form-control{ padding-right:var(--mp-touch); } /* :has() gerektirmez */ .mp-input-icon:has(.mp-toggle) > .form-control{ padding-right:var(--mp-touch); } /* Bootstrap 4 input-group kullanan ESKI markup icin geri uyum */ .input-group > .form-control{ border-radius:var(--mp-r) 0 0 var(--mp-r); } .input-group-append .input-group-text{ background:var(--mp-surface-3); border:1px solid var(--mp-line-2); border-left:0; border-radius:0 var(--mp-r) var(--mp-r) 0; color:var(--mp-fg-muted); min-width:46px; justify-content:center; } .custom-control-label::before{ background:var(--mp-surface); border-color:var(--mp-line-2); } .custom-control-input:checked ~ .custom-control-label::before{ background:var(--mp-accent); border-color:var(--mp-accent); } /* --- 7. AUTH EKRANI ------------------------------------------------------ */ /* Auth her zaman koyu: marka kimligi burada en gucluk, ve isletme sahibi uygulamayi ilk burada goruyor. */ .mp-auth{ --mp-surface:var(--mp-navy-700); --mp-surface-3:var(--mp-navy-600); --mp-fg:var(--mp-text-dark); --mp-fg-muted:var(--mp-muted-dark); --mp-line:var(--mp-line-dark); --mp-line-2:var(--mp-line-dark-2); --mp-accent:var(--mp-red-hot); min-height:100vh; min-height:100dvh; background:var(--mp-navy-900); color:var(--mp-text-dark); display:flex; flex-direction:column; /* Centikli telefonlar + tablet home indicator */ padding:max(var(--mp-s5),env(safe-area-inset-top)) max(var(--mp-s5),env(safe-area-inset-right)) max(var(--mp-s5),env(safe-area-inset-bottom)) max(var(--mp-s5),env(safe-area-inset-left)); position:relative; overflow:hidden; } /* Atmosfer: iki yumusak radyal + ince grid. Duz renk zemin ucuz duruyor. */ .mp-auth::before{ content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(60% 45% at 78% 6%, rgba(227,43,31,.16) 0%, transparent 62%), radial-gradient(70% 50% at 12% 96%, rgba(43,108,176,.14) 0%, transparent 60%); } .mp-auth::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image: linear-gradient(var(--mp-line-dark) 1px,transparent 1px), linear-gradient(90deg,var(--mp-line-dark) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(80% 60% at 50% 40%,#000 0%,transparent 78%); -webkit-mask-image:radial-gradient(80% 60% at 50% 40%,#000 0%,transparent 78%); } .mp-auth__inner{ position:relative; z-index:1; width:100%; max-width:420px; margin:auto; animation:mp-rise 520ms var(--mp-ease) both; } @keyframes mp-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } .mp-auth__brand{ text-align:center; margin-bottom:var(--mp-s6); } .mp-auth__mark{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:18px; margin-bottom:var(--mp-s4); background:linear-gradient(150deg,var(--mp-navy-600),var(--mp-navy-800)); border:1px solid var(--mp-line-dark-2); box-shadow:0 12px 32px -14px rgba(227,43,31,.55); } .mp-auth__mark img{ width:34px; height:34px; object-fit:contain; } .mp-auth__wordmark{ font-family:var(--mp-font-display); font-weight:700; font-size:30px; letter-spacing:-.03em; color:var(--mp-text-dark); margin:0; } .mp-auth__wordmark b{ color:var(--mp-red-hot); font-weight:700; } .mp-auth__tagline{ margin:var(--mp-s2) 0 0; font-family:var(--mp-font-mono); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:none; color:var(--mp-muted-dark); } .mp-auth__card{ background:rgba(15,32,50,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--mp-line-dark-2); border-radius:20px; padding:var(--mp-s6) var(--mp-s5); box-shadow:0 32px 64px -28px rgba(0,0,0,.8); } .mp-auth__foot{ margin-top:var(--mp-s5); text-align:center; font-size:12px; color:var(--mp-muted-dark); line-height:1.7; } .mp-auth__foot .mp-code{ font-size:11px; opacity:.75; } /* Genis tablet yatay: iki kolon - solda marka, sagda form */ @media (min-width:900px) and (orientation:landscape){ .mp-auth__inner{ max-width:940px; display:grid; grid-template-columns:1fr 420px; gap:var(--mp-s8); align-items:center; } .mp-auth__brand{ text-align:left; margin-bottom:0; } .mp-auth__wordmark{ font-size:44px; } .mp-auth__mark{ width:72px; height:72px; } } /* --- 8. UYGULAMA KABUGU (dokunmatik) ------------------------------------ */ .mp-shell{ min-height:100dvh; display:flex; flex-direction:column; background:var(--mp-bg); } .mp-topbar{ /* Bar her iki temada koyu kalir; tokenlari yerelde ezmezsek acik temada h1{color:var(--mp-fg)} basligi okunmaz hale getiriyor. */ --mp-fg:var(--mp-text-dark); --mp-fg-muted:var(--mp-muted-dark); --mp-line:var(--mp-line-dark); --mp-line-2:var(--mp-line-dark-2); position:sticky; top:0; z-index:1030; display:flex; align-items:center; gap:var(--mp-s3); height:calc(56px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) max(var(--mp-s4),env(safe-area-inset-left)) 0 max(var(--mp-s4),env(safe-area-inset-right)); background:var(--mp-navy-900); color:var(--mp-text-dark); border-bottom:1px solid var(--mp-line-dark); } .mp-topbar__title{ color:var(--mp-text-dark); font-family:var(--mp-font-display); font-weight:600; font-size:17px; letter-spacing:-.02em; margin:0; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mp-topbar__btn{ width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:var(--mp-r); color:var(--mp-text-dark); font-size:18px; } .mp-topbar__btn:hover,.mp-topbar__btn:active{ background:rgba(151,178,201,.12); } .mp-main{ flex:1; padding:var(--mp-s4); padding-bottom:calc(var(--mp-s8) + 40px); } /* Alt tab bar - telefon/tablet icin sidebar'dan cok daha kullanilabilir */ .mp-tabbar{ --mp-fg:var(--mp-text-dark); --mp-fg-muted:var(--mp-muted-dark); position:fixed; left:0; right:0; bottom:0; z-index:1030; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--mp-navy-900); border-top:1px solid var(--mp-line-dark); padding-bottom:env(safe-area-inset-bottom); } .mp-tabbar__item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:var(--mp-touch-lg); padding:var(--mp-s2) var(--mp-s1); color:var(--mp-muted-dark); text-decoration:none; font-size:11px; font-weight:600; letter-spacing:.01em; position:relative; } .mp-tabbar__item i{ font-size:19px; } .mp-tabbar__item:hover{ color:var(--mp-text-dark); text-decoration:none; } .mp-tabbar__item.is-active{ color:var(--mp-text-dark); } .mp-tabbar__item.is-active::before{ content:''; position:absolute; top:0; left:24%; right:24%; height:2px; background:var(--mp-red-hot); border-radius:0 0 2px 2px; } .mp-tabbar__badge{ position:absolute; top:6px; left:calc(50% + 8px); min-width:18px; height:18px; padding:0 5px; display:flex; align-items:center; justify-content:center; background:var(--mp-red); color:#fff; border-radius:var(--mp-r-pill); font-family:var(--mp-font-mono); font-size:10px; font-weight:600; } /* --- 9. LISTE / SIPARIS KARTI ------------------------------------------- */ .mp-order{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--mp-s4); align-items:center; background:var(--mp-surface); border:1px solid var(--mp-line); border-left:3px solid var(--mp-line-2); border-radius:var(--mp-r); padding:var(--mp-s4); margin-bottom:var(--mp-s3); min-height:var(--mp-touch-lg); transition:border-color var(--mp-dur) var(--mp-ease), transform 90ms var(--mp-ease); } .mp-order:active{ transform:scale(.995); } .mp-order--new{ border-left-color:var(--mp-red); } .mp-order--prep{ border-left-color:var(--mp-warn); } .mp-order--ready{ border-left-color:var(--mp-ok); } .mp-order__table{ width:44px; height:44px; border-radius:var(--mp-r-sm); display:flex; align-items:center; justify-content:center; background:var(--mp-surface-3); color:var(--mp-fg); font-family:var(--mp-font-mono); font-weight:600; font-size:15px; } .mp-order__title{ font-weight:600; font-size:15px; margin:0 0 2px; } .mp-order__meta{ font-size:13px; color:var(--mp-fg-muted); margin:0; } .mp-order__right{ text-align:right; } .mp-chip{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:var(--mp-r-pill); font-size:12px; font-weight:600; letter-spacing:.01em; border:1px solid transparent; white-space:nowrap; } .mp-chip--new{ background:rgba(227,43,31,.12); color:var(--mp-red); border-color:rgba(227,43,31,.28); } .mp-chip--prep{ background:rgba(200,137,12,.14); color:var(--mp-warn); border-color:rgba(200,137,12,.3); } .mp-chip--ready{ background:rgba(31,157,103,.14); color:var(--mp-ok); border-color:rgba(31,157,103,.3); } [data-theme="dark"] .mp-chip--new{ color:var(--mp-red-hot); } /* --- 10. KPI ------------------------------------------------------------- */ .mp-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--mp-s3); margin-bottom:var(--mp-s5); } .mp-kpi{ background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:var(--mp-r); padding:var(--mp-s4); } .mp-kpi__label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mp-fg-muted); margin:0 0 var(--mp-s2); } .mp-kpi__value{ font-family:var(--mp-font-mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:26px; letter-spacing:-.02em; margin:0; } /* --- 11. TABLO ----------------------------------------------------------- */ .table{ color:var(--mp-fg); } .table thead th{ border-bottom:1px solid var(--mp-line-2); border-top:0; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--mp-fg-muted); padding:var(--mp-s3) var(--mp-s4); } .table td{ border-top:1px solid var(--mp-line); padding:var(--mp-s4); vertical-align:middle; } .table-hover tbody tr:hover{ background:var(--mp-surface-2); color:var(--mp-fg); } .table-responsive{ -webkit-overflow-scrolling:touch; } /* --- 12. KABUK UYUMU (Look / stacked-menu sablonu) ----------------------- */ /* Delivery, Order'daki AdminLTE 3 yerine "Look" sablonunu kullanir: .app > .app-header > .top-bar | .app-aside > .stacked-menu | .app-main. Order dosyasindaki AdminLTE bolumu burada TAMAMEN yeniden yazildi; sinif adlari ortusmuyor, o kurallar bu projede hicbir sey tutmuyordu. */ /* Kabuk yuksekligi: sablonda .app min-height:100% ve .app-main akista serbest - icerik kisa oldugunda alt bilgi sayfanin ORTASINDA asili kaliyor, altinda olu zemin kaliyordu (2026-09-02 canli gozlem). Header ve aside position:fixed, yani akistan cikmis; dolayisiyla .app'i flex sutun yapmak yalniz main+footer'i etkiler ve alt bilgi sayfanin dibine oturur. */ .app{ background:var(--mp-bg); display:flex; flex-direction:column; min-height:100vh; } .app-main{ background:var(--mp-bg); color:var(--mp-fg); flex:1 1 auto; } /* Sabit yan menu 15rem; alt bilgi tam genislikte oldugu icin metnini gorunur alanda ortalamak adina ayni payi verir (sablon bunu yalniz .app-main'e veriyor). */ @media (min-width:768px){ .main-footer{ padding-left:15rem; } } /* Ust bar - her iki temada koyu kalir. Tokenlari yerelde ezmezsek acik temada icerideki basliklar okunmaz hale geliyor. */ .app-header,.app-header.app-header-dark{ --mp-fg:var(--mp-text-dark); --mp-fg-muted:var(--mp-muted-dark); --mp-line:var(--mp-line-dark); --mp-line-2:var(--mp-line-dark-2); background:var(--mp-navy-900); border-bottom:1px solid var(--mp-line-dark); color:var(--mp-text-dark); } .app-header .top-bar{ background:transparent; border:0; } /* Marka kilidi: logo + kelime isareti. Once burada duz metin "MiaIncentive+" yaziyordu - baska bir urunun adi; alt bilgi ise MiaPOS+ diyordu. */ /* display'e DOKUNMA: sablon markayi <768px'te gizliyor (hamburger + kullanici adi o genislikte yeri dolduruyor). Kapsayici 15rem sabit genislikte, tasma olmasin. */ .top-bar-brand{ align-items:center; gap:var(--mp-s2); min-width:0; overflow:hidden; white-space:nowrap; } .top-bar-logo{ width:26px; height:26px; object-fit:contain; flex:0 0 26px; } .top-bar-wordmark{ font-family:var(--mp-font-display); font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--mp-text-dark); line-height:1; } .top-bar-wordmark b{ color:var(--mp-red-hot); font-weight:700; } /* Not: ust barda marka alani 15rem sabit; hamburger + logo + kelime isareti zaten ~174px tutuyor. "Paket Servis" gibi bir ek ibare sigmiyor (tasip kirpiliyordu), o yuzden urun adi giris ekraninin sloganinda duruyor. */ .top-bar-brand a,.top-bar-brand a:hover{ color:var(--mp-text-dark); text-decoration:none; } .top-bar-item,.top-bar-list .nav-link,.top-bar .user-info h6{ color:var(--mp-text-dark); } .top-bar .user-info h6{ font-weight:600; letter-spacing:-.01em; margin:0; } .top-bar-list .nav-link:hover{ color:#fff; } /* Hamburger cizgileri: sablon acik zemine gore koyu ciziyor, koyu barda kaybolur. */ .app-header .hamburger-inner, .app-header .hamburger-inner::before, .app-header .hamburger-inner::after{ background-color:var(--mp-text-dark); } /* Yan menu. Kabuk yuzeyleri (sidebar + footer) BEYAZ, icerik zemini krem kalir: ikisi de kagit tonu oldugunda kontrast 1,06:1 cikiyordu ve iki sutun tek duz alan gibi okunuyordu (2026-09-02 canli gozlem). */ .app-aside,.app-aside.app-aside-light,.app-aside .aside-content{ background:var(--mp-surface); border-right:1px solid var(--mp-line-2); } .stacked-menu .menu-link{ color:var(--mp-fg-muted); font-weight:600; letter-spacing:-.005em; border-radius:var(--mp-r-sm); margin:2px var(--mp-s2); } .stacked-menu .menu-link:hover{ background:var(--mp-surface-3); color:var(--mp-fg); } /* AKTIF MENU - 2026-09-02 duzeltmesi. Once kirmizi dolgu + beyaz ikon deneniyordu; ikisi de tutmadi ve ikon KAYBOLDU: - Dolgu: sablonun .stacked-menu > .menu > .menu-item.has-active > .menu-link kurali (ozgulluk 0,4,0) background:transparent diyor, benim 0,3,0 kuralimi yiyordu. - Metin rengi: markup'ta buton uzerinde inline style="color:inherit" var; inline stil hicbir stylesheet kuraliyla yenilemez. - Ikon rengi ise tuttugu icin beyaz ikon krem zeminde gorunmez oldu. Cozum: dolgu iddiasindan vazgec, sablonun kendi dilini koru (seffaf zemin + renkli ikon) ve rengi mavi yerine marka kirmizisi yap. Not: markup'ta has-active ILK ogeye SABIT yazili, yani hangi sayfada olursak olalim "Guncel Durum" aktif gorunuyor - dolgulu bir vurgu bu yuzden zaten yaniltici olurdu. */ .stacked-menu .menu-item.has-active > .menu-link .menu-icon, .stacked-menu .menu-item.is-active > .menu-link .menu-icon, .stacked-menu .menu-link.is-active .menu-icon{ color:var(--mp-accent); opacity:1; } /* Sablonun kendi ikon rengi #a6abbd; krem/beyaz zeminde kontrast 2,05:1 - WCAG'in arayuz ogeleri icin istedigi 3:1'in altinda ve canlida zar zor seciliyordu. Marka lacivertinin soluk tonuna cekildi (beyaz zeminde ~5,9:1). Ozgullugu sablonunkiyle esitlemek icin > .menu-icon sart. */ .stacked-menu .menu-link > .menu-icon{ color:var(--mp-fg-muted); opacity:1; } /* Menu ogeleri

. Onceden