/* myautopanel-ui 1.4.0 — ÜRETİLDİ, elle düzenleme. * Kaynak: myautopanel-ui/src. Değişiklik orada yapılır, `node bin/uret.mjs`. */ :root { --brand-blue: #1A56DB; --brand-green: #10B981; --brand-green-text: #047857; --brand-ink: #19222E; --brand-blue-50: #EFF6FF; --brand-blue-100: #DBEAFE; --brand-blue-200: #BFDBFE; --brand-blue-300: #93C5FD; --brand-blue-400: #60A5FA; --brand-blue-500: #3B82F6; --brand-blue-600: #1A56DB; --brand-blue-700: #1240CA; --brand-blue-800: #1533A1; --brand-blue-900: #142E7D; --brand-blue-950: #0E1A48; --ui-danger-50: #FFF8F8; --ui-danger-100: #FEE4E4; --ui-danger-200: #FDB0B0; --ui-danger-300: #F98B8B; --ui-danger-400: #EF5A5A; --ui-danger-500: #D42828; --ui-danger-600: #C11E1E; --ui-danger-700: #9F1717; --ui-danger-800: #7F1414; --ui-primary: #1A56DB; --ui-secondary: #047857; --ui-dark: #19222E; --ui-danger: #C11E1E; --ui-warning: #B45309; --ui-canvas: #F5F7FB; --ui-surface: #FFFFFF; --ui-line: #E6E9F0; --ui-line-strong: #D3D8E2; --ui-grad-brand: linear-gradient(135deg, #1A56DB 0%, #10B981 100%); --ui-grad-brand-text: linear-gradient(135deg, #1A56DB 0%, #047857 100%); --ui-font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif; --ui-font-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif; --ui-radius-field: 0.75rem; --ui-radius-card: 1.25rem; --ui-radius-pill: 9999px; } /* --- Yazı tipleri ------------------------------------------------------ DM Sans (başlık, buton, ağır etiket) + Open Sans (gövde): sitenin aileleri. Yerel servis edilir; saha tableti CDN'e bağımlı kalmaz. Değişken ağırlıklı dosyalar, latin + latin-ext (Türkçe harfler latin-ext'te: ikisinden biri eksikse aile "yüklü" görünür ama ğ/ş/İ sistem fontuyla basılır). */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/DMSans-var-latin-ext.woff2) format('woff2'); 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: 'DM Sans'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/DMSans-var-latin.woff2) format('woff2'); 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; } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/OpenSans-var-latin-ext.woff2) format('woff2'); 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: 'Open Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/OpenSans-var-latin.woff2) format('woff2'); 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; } /* --- Tipografi --------------------------------------------------------- Seçiciler `:where()` içinde: özgüllük sıfır, yani ekrandaki bir Tailwind `font-*` sınıfı her zaman kazanır. Tailwind'in stili bu dosyadan önce mi sonra mı eklendiği sıraya bağlı kalmaz. Rakam alanları (`.font-mono`) DM Sans'a çekilmez. `` iken hiçbiri uygulanmaz: baskı ve PDF çıktıları kendi yazı tipinde kalır. Özniteliği Tailwind dosyası `data-fontlar="kapali"` ile yüklendiğinde kendisi koyar — tek anahtar. */ :where(html:not([data-mp-fontlar="kapali"]) body) { font-family: var(--ui-font-sans); -webkit-font-smoothing: antialiased; } :where(html:not([data-mp-fontlar="kapali"])) :where(h1, h2, h3, h4, h5, h6, .font-display, .font-extrabold, .font-black):not(.font-mono) { font-family: var(--ui-font-display); } /* --- Kabuk: sol menü + üst bar (açık tema) ----------------------------- Sitenin dili: beyaz yüzey, ince çizgi, gölgesiz kart, mavi vurgu. Aktif menü öğesi mavi zemin + mavi metin; koyu lacivert (brand-ink) yalnız başlık metninde kalır. Bu dosya GENİŞLİK ve AÇ/KAPA davranışı tanımlamaz. İkisi projeye ait (terminal `.collapsed`, bia360 `w-64 ↔ w-0` değiştiriyor); kit burada genişlik yazsaydı projenin Tailwind sınıfıyla sıra savaşına girerdi. Metin renkleri beyaz ve blue-50 zeminde ölçüldü (test/tokenlar): slate-700 #334155 10.4:1, slate-600 #475569 7.2:1, blue-700 #1240CA blue-100 üstünde 6.6:1. slate-400 #94A3B8 yalnız ikonda (metin değil). */ .mp-sidebar { display: flex; flex-direction: column; background: var(--ui-surface); border-right: 1px solid var(--ui-line); color: #334155; } .mp-sidebar__brand { display: flex; align-items: center; gap: 0.75rem; height: 4rem; flex-shrink: 0; padding-inline: 1.25rem; overflow: hidden; border-bottom: 1px solid var(--ui-line); text-decoration: none; } .mp-brand-mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--ui-radius-field); background-image: var(--ui-grad-brand-text); color: #fff; box-shadow: 0 6px 16px -6px rgb(26 86 219 / 0.55); } .mp-brand-name { font-family: var(--ui-font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; color: var(--brand-ink); } .mp-brand-name > span { color: var(--brand-blue); } /* Menü listesi */ .mp-nav { display: flex; flex: 1; flex-direction: column; gap: 0.125rem; min-height: 0; padding: 0.75rem; overflow-x: hidden; overflow-y: auto; } .mp-nav__label { padding: 1rem 0.75rem 0.375rem; font-family: var(--ui-font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748B; } .mp-nav__item { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2.625rem; padding: 0.5rem 0.75rem; border: 0; border-radius: var(--ui-radius-field); background: transparent; font-size: 0.875rem; font-weight: 600; line-height: 1.25; text-align: left; text-decoration: none; color: #334155; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .mp-nav__item:hover { background: var(--brand-blue-50); color: var(--brand-blue-700); } .mp-nav__item:focus-visible, .mp-nav__subitem:focus-visible { outline: 2px solid var(--brand-blue-600); outline-offset: -2px; } /* Lucide (svg) ve Font Awesome ( glifi) ikisi de aynı kutuya oturur. */ .mp-nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex-shrink: 0; font-size: 1rem; color: #94A3B8; transition: color 0.15s ease; } .mp-nav__text { flex: 1; min-width: 0; } .mp-nav__chevron { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; flex-shrink: 0; color: #94A3B8; transition: transform 0.2s ease; } .mp-nav__item:hover .mp-nav__icon, .mp-nav__item:hover .mp-nav__chevron { color: var(--brand-blue-600); } /* Bulunduğun sayfa: mavi zemin. */ .mp-nav__item.is-active { background: var(--brand-blue-100); color: var(--brand-blue-700); font-weight: 700; } /* Alt sayfası açık olan grup başlığı: zemin yok, yalnız mavi yazı. */ .mp-nav__item.is-current { color: var(--brand-blue-700); } .mp-nav__item.is-active .mp-nav__icon, .mp-nav__item.is-current .mp-nav__icon { color: var(--brand-blue-600); } /* Alt menü: sol çizgili ağaç. */ .mp-nav__sub { display: flex; flex-direction: column; gap: 1px; margin: 0.125rem 0 0.375rem 1.375rem; padding-left: 0.75rem; border-left: 1.5px solid var(--ui-line); } .mp-nav__sub.hidden { display: none; } .mp-nav__subitem { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4375rem 0.625rem; border-radius: 0.625rem; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; text-decoration: none; color: #475569; transition: background-color 0.15s ease, color 0.15s ease; } .mp-nav__subitem:hover { background: var(--brand-blue-50); color: var(--brand-blue-700); } .mp-nav__subitem.is-active { background: var(--brand-blue-50); color: var(--brand-blue-700); font-weight: 700; } /* Ağaç çizgisinin üstünde aktif işaret. */ .mp-nav__subitem.is-active::before { content: ""; position: absolute; top: 0.375rem; bottom: 0.375rem; left: calc(-0.75rem - 1.75px); width: 2px; border-radius: 2px; background: var(--brand-blue); } /* Sayaç rozeti. Beyaz metin #EF4444 üstünde 3.76:1 kalıyordu; danger #C11E1E 6.05:1. */ .mp-count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.125rem; padding-inline: 0.375rem; border-radius: var(--ui-radius-pill); background: var(--ui-danger); font-size: 0.625rem; font-weight: 700; line-height: 1; color: #fff; } /* --- Üst bar ------------------------------------------------------------ */ .mp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; padding-inline: 1.5rem; border-bottom: 1px solid var(--ui-line); background: rgb(255 255 255 / 0.88); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); } .mp-breadcrumb { display: flex; align-items: center; gap: 0.375rem; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: #64748B; } .mp-breadcrumb a { text-decoration: none; color: inherit; transition: color 0.15s ease; } .mp-breadcrumb a:hover { color: var(--brand-blue-700); } .mp-breadcrumb [aria-current] { font-family: var(--ui-font-display); font-weight: 700; color: var(--brand-ink); } .mp-search { position: relative; width: 100%; } .mp-search__icon { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 0.875rem; width: 1rem; height: 1rem; transform: translateY(-50%); color: #94A3B8; pointer-events: none; } .mp-search__input { width: 100%; height: 2.5rem; padding: 0 4.5rem 0 2.5rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-pill); background: var(--ui-canvas); font-size: 0.8125rem; font-weight: 500; color: var(--brand-ink); outline: none; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } /* slate-500 canvas zemininde 4.44:1 kalıyordu; slate-600 7.0:1. */ .mp-search__input::placeholder { color: #475569; } .mp-search__input:focus { border-color: var(--brand-blue-300); background: var(--ui-surface); box-shadow: 0 0 0 4px rgb(26 86 219 / 0.12); } .mp-search__keys { position: absolute; top: 50%; right: 0.625rem; display: flex; gap: 0.25rem; transform: translateY(-50%); pointer-events: none; transition: opacity 0.15s ease; } .mp-search:focus-within .mp-search__keys { opacity: 0; } .mp-kbd { padding: 0.125rem 0.375rem; border: 1px solid var(--ui-line); border-radius: 0.375rem; background: var(--ui-surface); font-family: var(--ui-font-sans); font-size: 0.625rem; font-weight: 600; color: #64748B; } .mp-icon-btn { position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border: 0; border-radius: var(--ui-radius-pill); background: transparent; color: #64748B; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .mp-icon-btn:hover { background: var(--brand-blue-50); color: var(--brand-blue-700); } .mp-icon-btn:focus-visible { outline: 2px solid var(--brand-blue-600); outline-offset: 2px; } .mp-avatar { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border: 2px solid var(--ui-surface); border-radius: var(--ui-radius-pill); object-fit: cover; box-shadow: 0 0 0 1px var(--ui-line); } /* Açılır menü paneli. Görünürlük projenin (terminal `.dropdown-menu.show`). */ .mp-menu { padding: 0.375rem; border: 1px solid var(--ui-line); border-radius: 1rem; background: var(--ui-surface); box-shadow: 0 18px 40px -14px rgb(25 34 46 / 0.2); } .mp-menu__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.625rem 0.625rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--ui-line); font-family: var(--ui-font-display); font-size: 0.8125rem; font-weight: 700; color: var(--brand-ink); } .mp-menu__item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 0.75rem; border-radius: 0.625rem; font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: #334155; transition: background-color 0.15s ease, color 0.15s ease; } .mp-menu__item:hover { background: var(--brand-blue-50); color: var(--brand-blue-700); } .mp-menu__item--danger { color: var(--ui-danger); } .mp-menu__item--danger:hover { background: #FEF2F2; color: #B91C1C; } .mp-menu__divider { height: 1px; margin: 0.25rem 0.375rem; background: var(--ui-line); } /* --- Ana aksiyon butonu ------------------------------------------------- Sitenin `.pp-theme-btn` reçetesi: pill + gradient, hover'da koyu lacivert daire soldan büyüyerek butonu doldurur. Yalnız ekranın ANA aksiyonunda (giriş, oluştur, gönder). Tek fark gradientin yeşil ucu: sitenin #10B981'i üstünde beyaz metin 2.54:1, gradientin ortası 4.11:1 kalıyor. `--ui-grad-brand-text` (#1A56DB → #047857) rampanın her noktasında ≥ 5.48:1. BOYUT (dolgu, yazı boyu) bilerek yok: yoğun operasyon ekranlarında buton kendi Tailwind ölçüsünü taşır. Aynı elemanda `bg-*` rengi yazılmaz; gradienti gizler. */ .btn-brand, .mp-btn--primary { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 0; border-radius: var(--ui-radius-pill); background-image: var(--ui-grad-brand-text); font-family: var(--ui-font-display); font-weight: 600; line-height: 1; color: #fff; cursor: pointer; } .btn-brand::after, .mp-btn--primary::after { content: ""; position: absolute; top: 50%; left: 0; z-index: -1; width: 250%; aspect-ratio: 1; border-radius: 50%; background-color: var(--brand-ink); opacity: 0; transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease, opacity 0.5s ease; } .btn-brand:hover::after, .btn-brand:focus-visible::after, .mp-btn--primary:hover::after, .mp-btn--primary:focus-visible::after { opacity: 1; transform: translate(-50%, -50%) scale(1); } .btn-brand:focus-visible, .mp-btn--primary:focus-visible { outline: 3px solid var(--brand-blue-300); outline-offset: 2px; } .btn-brand:disabled, .mp-btn--primary:disabled { cursor: not-allowed; opacity: 0.6; } .btn-brand:disabled::after, .mp-btn--primary:disabled::after { display: none; } /* --- İkincil butonlar -------------------------------------------------- `.mp-btn` ölçü taşır (kabukta ve formlarda tutarlı yükseklik); `.btn-brand` taşımaz. Varyant tek başına da kullanılabilir. */ .mp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1.125rem; border: 1px solid transparent; border-radius: var(--ui-radius-pill); font-family: var(--ui-font-display); font-size: 0.875rem; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* Sitenin "Demo Talep" butonu. */ .mp-btn--outline { border: 2px solid var(--brand-blue); background: transparent; color: var(--brand-blue); } .mp-btn--outline:hover { background: var(--brand-blue); color: #fff; } .mp-btn--soft { border-color: var(--brand-blue-100); background: var(--brand-blue-50); color: var(--brand-blue-700); } .mp-btn--soft:hover { border-color: var(--brand-blue-200); background: var(--brand-blue-100); } .mp-btn:focus-visible { outline: 3px solid var(--brand-blue-300); outline-offset: 2px; } /* --- Kart --------------------------------------------------------------- Sitenin ürün kartı: beyaz, ince çizgi, gölge yok. */ .mp-card { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); background: var(--ui-surface); } @media (prefers-reduced-motion: reduce) { .btn-brand::after, .mp-btn--primary::after { transition: none; } .mp-nav__item, .mp-nav__subitem, .mp-nav__chevron, .mp-btn, .mp-icon-btn { transition: none; } }