/* Pusula Ajans Paneli — stil.css 1) Tema paletleri (CSS değişkenleri) 2) Arayüz Tema, ile değişir. Varsayılan: Grafit & Altın. */ :root{ --f: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --m: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Grafit & Altın — koyu */ :root{ --ground: #0C0C0D; --panel: #141517; --card: #1F2023; --card-2: #282A2E; --card-3: #191A1D; --edge: #232427; --outside: #08080A; --hair: rgba(255,255,255,.075); --hair-2: rgba(255,255,255,.15); --sunken: rgba(0,0,0,.30); --grid: rgba(255,255,255,.045); --zebra: rgba(255,255,255,.03); --scrim: rgba(0,0,0,.72); --on-accent: #17130A; --ink: #F2F0EB; --ink-2: #BDBAB3; --ink-3: #928F88; --ink-4: #6E6C66; --amber: #D9A84E; --amber-deep: #BF8F37; --amber-dim: rgba(217,168,78,.13); --green: #6FB894; --green-dim: rgba(111,184,148,.14); --hold: #8A877F; --red: #D2696B; --red-dim: rgba(210,105,107,.14); } /* Obsidyen & Amber — koyu */ [data-tema="obsidyen"]{ --ground: #09090A; --panel: #121316; --card: #23262A; --card-2: #2D3136; --card-3: #1B1E21; --edge: #24272B; --outside: #060607; --hair: rgba(255,255,255,.075); --hair-2: rgba(255,255,255,.15); --sunken: rgba(0,0,0,.30); --grid: rgba(255,255,255,.045); --zebra: rgba(255,255,255,.03); --scrim: rgba(0,0,0,.72); --on-accent: #1A1204; --ink: #F1F2F3; --ink-2: #C2C6C9; --ink-3: #969B9F; --ink-4: #71767A; --amber: #F5A623; --amber-deep: #D98C10; --amber-dim: rgba(245,166,35,.13); --green: #45C07A; --green-dim: rgba(69,192,122,.14); --hold: #838A90; --red: #E2565C; --red-dim: rgba(226,86,92,.14); } /* Mürekkep & Şampanya — koyu */ [data-tema="murekkep"]{ --ground: #0C0B09; --panel: #14120F; --card: #1E1B17; --card-2: #272320; --card-3: #191612; --edge: #241F1A; --outside: #080706; --hair: rgba(255,255,255,.075); --hair-2: rgba(255,255,255,.15); --sunken: rgba(0,0,0,.30); --grid: rgba(255,255,255,.045); --zebra: rgba(255,255,255,.03); --scrim: rgba(0,0,0,.72); --on-accent: #17120A; --ink: #FAF6EF; --ink-2: #C9C1B4; --ink-3: #9A9184; --ink-4: #746C60; --amber: #E0BE86; --amber-deep: #C9A468; --amber-dim: rgba(224,190,134,.13); --green: #7FB98F; --green-dim: rgba(127,185,143,.14); --hold: #8B8377; --red: #CF7A72; --red-dim: rgba(207,122,114,.14); } /* Kobalt Gece — koyu */ [data-tema="kobalt"]{ --ground: #080B12; --panel: #101623; --card: #18202F; --card-2: #202939; --card-3: #131A26; --edge: #1E2636; --outside: #05070C; --hair: rgba(255,255,255,.075); --hair-2: rgba(255,255,255,.15); --sunken: rgba(0,0,0,.30); --grid: rgba(255,255,255,.045); --zebra: rgba(255,255,255,.03); --scrim: rgba(0,0,0,.72); --on-accent: #061024; --ink: #EDF1F8; --ink-2: #B6C0D2; --ink-3: #8994A8; --ink-4: #667084; --amber: #5B9CFF; --amber-deep: #3D7FE0; --amber-dim: rgba(91,156,255,.14); --green: #3FCB8E; --green-dim: rgba(63,203,142,.14); --hold: #7C879B; --red: #FF6B72; --red-dim: rgba(255,107,114,.14); } /* Zümrüt Kasa — koyu */ [data-tema="zumrut"]{ --ground: #060C0A; --panel: #0D1714; --card: #14211C; --card-2: #1C2C26; --card-3: #101A17; --edge: #1A2823; --outside: #040807; --hair: rgba(255,255,255,.075); --hair-2: rgba(255,255,255,.15); --sunken: rgba(0,0,0,.30); --grid: rgba(255,255,255,.045); --zebra: rgba(255,255,255,.03); --scrim: rgba(0,0,0,.72); --on-accent: #04231A; --ink: #EAF3EE; --ink-2: #B3C4BB; --ink-3: #86988E; --ink-4: #63736B; --amber: #35D6A2; --amber-deep: #17B27C; --amber-dim: rgba(53,214,162,.14); --green: #8BD450; --green-dim: rgba(139,212,80,.14); --hold: #7A8A82; --red: #F2777A; --red-dim: rgba(242,119,122,.14); } /* Ametist Oda — koyu */ [data-tema="ametist"]{ --ground: #0B0910; --panel: #14101C; --card: #1C1727; --card-2: #251F32; --card-3: #17131F; --edge: #221C2E; --outside: #080610; --hair: rgba(255,255,255,.075); --hair-2: rgba(255,255,255,.15); --sunken: rgba(0,0,0,.30); --grid: rgba(255,255,255,.045); --zebra: rgba(255,255,255,.03); --scrim: rgba(0,0,0,.72); --on-accent: #150B24; --ink: #F1ECF8; --ink-2: #C0B7CF; --ink-3: #948AA5; --ink-4: #6E667D; --amber: #B78BFA; --amber-deep: #9B6BEA; --amber-dim: rgba(183,139,250,.15); --green: #4FCF9A; --green-dim: rgba(79,207,154,.14); --hold: #8A8296; --red: #F0708C; --red-dim: rgba(240,112,140,.14); } /* Bakır Fırın — koyu */ [data-tema="bakir"]{ --ground: #0F0B09; --panel: #191210; --card: #241B16; --card-2: #2E241E; --card-3: #1D1512; --edge: #2A2019; --outside: #0A0706; --hair: rgba(255,255,255,.075); --hair-2: rgba(255,255,255,.15); --sunken: rgba(0,0,0,.30); --grid: rgba(255,255,255,.045); --zebra: rgba(255,255,255,.03); --scrim: rgba(0,0,0,.72); --on-accent: #1B0C05; --ink: #F7EEE6; --ink-2: #CBB9AC; --ink-3: #9C8B7F; --ink-4: #75665C; --amber: #E2743C; --amber-deep: #C55D28; --amber-dim: rgba(226,116,60,.14); --green: #77BE7C; --green-dim: rgba(119,190,124,.14); --hold: #8D7F74; --red: #E0575C; --red-dim: rgba(224,87,92,.14); } /* Porselen — açık */ [data-tema="porselen"]{ --ground: #F6F5F2; --panel: #FFFFFF; --card: #FFFFFF; --card-2: #F0EEE9; --card-3: #FAF9F6; --edge: #E4E1DA; --outside: #EDEBE6; --hair: rgba(0,0,0,.085); --hair-2: rgba(0,0,0,.17); --sunken: rgba(0,0,0,.035); --grid: rgba(0,0,0,.055); --zebra: rgba(0,0,0,.028); --scrim: rgba(22,24,28,.45); --on-accent: #FFFFFF; --ink: #1B1A17; --ink-2: #4E4B45; --ink-3: #7A756C; --ink-4: #9E998F; --amber: #B8502F; --amber-deep: #9A3F22; --amber-dim: rgba(184,80,47,.10); --green: #2F8A5B; --green-dim: rgba(47,138,91,.12); --hold: #8A857C; --red: #C0392B; --red-dim: rgba(192,57,43,.12); } /* Fildişi & Lacivert — açık */ [data-tema="fildisi"]{ --ground: #F5F1E8; --panel: #FFFDF7; --card: #FFFDF7; --card-2: #EFEADD; --card-3: #FAF7EF; --edge: #E3DCCB; --outside: #EDE7DA; --hair: rgba(0,0,0,.085); --hair-2: rgba(0,0,0,.17); --sunken: rgba(0,0,0,.035); --grid: rgba(0,0,0,.055); --zebra: rgba(0,0,0,.028); --scrim: rgba(22,24,28,.45); --on-accent: #FFFFFF; --ink: #1A1C22; --ink-2: #4A4E58; --ink-3: #767A85; --ink-4: #9B9EA6; --amber: #1F4E79; --amber-deep: #163A5B; --amber-dim: rgba(31,78,121,.10); --green: #2E7D5B; --green-dim: rgba(46,125,91,.12); --hold: #8A8578; --red: #B03A3A; --red-dim: rgba(176,58,58,.12); } /* Kuzey Işığı — açık */ [data-tema="kuzey"]{ --ground: #EFF2F4; --panel: #FFFFFF; --card: #FFFFFF; --card-2: #E9EDF0; --card-3: #F7F9FA; --edge: #DCE2E6; --outside: #E6EAED; --hair: rgba(0,0,0,.085); --hair-2: rgba(0,0,0,.17); --sunken: rgba(0,0,0,.035); --grid: rgba(0,0,0,.055); --zebra: rgba(0,0,0,.028); --scrim: rgba(22,24,28,.45); --on-accent: #FFFFFF; --ink: #12171B; --ink-2: #414A52; --ink-3: #6E7880; --ink-4: #98A1A8; --amber: #0E7C74; --amber-deep: #0A5F59; --amber-dim: rgba(14,124,116,.10); --green: #17795A; --green-dim: rgba(23,121,90,.12); --hold: #7E8890; --red: #C0453F; --red-dim: rgba(192,69,63,.12); } /* ==================================================================== Pusula Ajans Paneli — arayüz Renkler yukarıdaki tema değişkenlerinden gelir; burada sabit renk yok. ==================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--f); font-size: 15px; font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } b, strong { font-weight: 600; color: var(--ink); } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; } img { max-width: 100%; display: block; } code, .tekaralik { font-family: var(--m); font-variant-numeric: tabular-nums; } /* ---- kabuk ---------------------------------------------------------- */ .kabuk { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; } .yan { background: var(--panel); border-right: 1px solid var(--edge); padding: 22px 16px 26px; display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .marka { display: flex; align-items: center; gap: 12px; padding: 0 6px; } .marka img, .marka .harf { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; border: 1px solid var(--hair-2); flex: 0 0 auto; } .marka .harf { display: grid; place-items: center; background: var(--amber); color: var(--on-accent); font-weight: 700; font-size: 17px; } .marka .ad { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; line-height: 1.25; } .marka .alt { font-size: 11.5px; color: var(--ink-4); } .menu { display: flex; flex-direction: column; gap: 3px; } .menu .baslik { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); padding: 14px 10px 6px; } .menu a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--ink-2); font-weight: 400; transition: background .13s, color .13s; } .menu a svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .8; } .menu a:hover { background: var(--card); color: var(--ink); } .menu a.aktif { background: var(--amber-dim); color: var(--amber); font-weight: 500; } .menu a.aktif svg { opacity: 1; } .menu a .sayi { margin-left: auto; font-size: 11px; font-weight: 600; background: var(--card-2); color: var(--ink-3); border-radius: 20px; padding: 1px 7px; min-width: 20px; text-align: center; } .menu a.aktif .sayi { background: var(--amber); color: var(--on-accent); } .yan-alt { margin-top: auto; display: flex; flex-direction: column; gap: 3px; } /* ---- ana sütun ------------------------------------------------------ */ .ana { min-width: 0; display: flex; flex-direction: column; } .ust { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--edge); padding: 18px 30px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ust h1 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.025em; } .ust .alt { font-size: 13px; color: var(--ink-3); margin: 2px 0 0; } .ust .sag { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .govde { padding: 26px 30px 90px; flex: 1; } .govde > section + section { margin-top: 30px; } /* ---- düğmeler ------------------------------------------------------- */ .dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1; padding: 10px 16px; border-radius: 10px; cursor: pointer; border: 1px solid var(--hair-2); background: var(--card); color: var(--ink); transition: background .13s, border-color .13s, color .13s, opacity .13s; white-space: nowrap; } .dugme:hover { background: var(--card-2); border-color: var(--ink-4); } .dugme svg { width: 15px; height: 15px; } .dugme.ana { background: var(--amber); border-color: var(--amber); color: var(--on-accent); font-weight: 600; } .dugme.ana:hover { background: var(--amber-deep); border-color: var(--amber-deep); } .dugme.hayalet { background: transparent; } .dugme.hayalet:hover { background: var(--card); } .dugme.tehlike { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: transparent; } .dugme.tehlike:hover { background: var(--red-dim); } .dugme.kucuk { padding: 7px 11px; font-size: 12.5px; border-radius: 8px; } .dugme[disabled] { opacity: .45; cursor: not-allowed; } /* ---- sekmeler ------------------------------------------------------- */ .sekmeler { display: flex; gap: 4px; background: var(--card-3); padding: 4px; border-radius: 11px; border: 1px solid var(--hair); } .sekmeler a, .sekmeler button { font-family: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; } .sekmeler a:hover, .sekmeler button:hover { color: var(--ink); } .sekmeler a.aktif, .sekmeler button.aktif { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px var(--sunken); } /* ---- kartlar -------------------------------------------------------- */ .kart { background: var(--card); border: 1px solid var(--hair); border-radius: 15px; padding: 20px 22px; } .kart > h2, .kart > h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; } .kart .aciklama { font-size: 13px; color: var(--ink-3); margin: 0 0 16px; } .izgara { display: grid; gap: 16px; } .izgara.dort { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .izgara.uc { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .izgara.iki { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .kutu { background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 17px 19px; } .kutu .etiket { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); } .kutu .rakam { font-size: 27px; font-weight: 600; letter-spacing: -.03em; margin-top: 7px; font-variant-numeric: tabular-nums; } .kutu .not { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; } .kutu .rakam.iyi { color: var(--green); } .kutu .rakam.kotu { color: var(--red); } .kutu .rakam.vurgu { color: var(--amber); } /* ---- günün sözü ----------------------------------------------------- */ .soz { background: linear-gradient(135deg, var(--amber-dim), transparent 65%), var(--card); border: 1px solid var(--hair); border-left: 3px solid var(--amber); border-radius: 14px; padding: 20px 24px; } .soz .tip { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); } .soz .metin { font-size: 16px; line-height: 1.6; margin: 9px 0 0; font-weight: 300; } .soz .metin.arapca { font-size: 21px; line-height: 2; direction: rtl; text-align: right; font-weight: 400; } .soz .kaynak { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; } /* ---- rozetler ------------------------------------------------------- */ .rozet { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 20px; background: var(--card-2); color: var(--ink-2); white-space: nowrap; } .rozet .nokta { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .rozet.iyi { background: var(--green-dim); color: var(--green); } .rozet.kotu { background: var(--red-dim); color: var(--red); } .rozet.vurgu { background: var(--amber-dim); color: var(--amber); } /* ---- tablolar ------------------------------------------------------- */ .tablo-sar { border: 1px solid var(--edge); border-radius: 14px; overflow-x: auto; background: var(--card); } table.veri { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 13.5px; } table.veri th, table.veri td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--edge); vertical-align: middle; } table.veri thead th { background: var(--card-3); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); position: sticky; top: 0; z-index: 1; } table.veri tbody tr:last-child td { border-bottom: 0; } table.veri tbody tr:hover { background: var(--zebra); } table.veri td.sayi { text-align: right; font-variant-numeric: tabular-nums; } table.veri a.satir-ad { font-weight: 500; } table.veri a.satir-ad:hover { color: var(--amber); } /* ---- formlar -------------------------------------------------------- */ .form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .alan.genis { grid-column: 1 / -1; } .alan > label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); } .alan input, .alan select, .alan textarea { width: 100%; font-family: inherit; font-size: 14px; font-weight: 300; background: var(--sunken); color: var(--ink); border: 1px solid var(--hair-2); border-radius: 10px; padding: 10px 13px; } .alan textarea { min-height: 96px; resize: vertical; line-height: 1.6; } .alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-color: var(--amber); } .alan input::placeholder, .alan textarea::placeholder { color: var(--ink-4); } .alan select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; } .alan .ipucu { font-size: 12px; color: var(--ink-4); } .form-alt { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; } .form-alt .sag { margin-left: auto; display: flex; gap: 10px; } input[type="checkbox"], input[type="radio"] { accent-color: var(--amber); width: 16px; height: 16px; cursor: pointer; } .onay { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; } /* ---- kanban --------------------------------------------------------- */ .kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; align-items: stretch; min-height: 320px; } .kolon { flex: 0 0 268px; background: var(--card-3); border: 1px solid var(--hair); border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 210px); } .kolon > header { padding: 13px 15px 10px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--hair); } .kolon > header .nokta { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .kolon > header .ad { font-size: 13px; font-weight: 600; letter-spacing: -.005em; } .kolon > header .adet { margin-left: auto; font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; } .kolon .liste { padding: 11px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; flex: 1; min-height: 70px; } .kolon.hedef .liste { background: var(--amber-dim); border-radius: 0 0 13px 13px; } .kk { background: var(--card); border: 1px solid var(--hair); border-radius: 11px; padding: 12px 13px; cursor: grab; transition: border-color .12s, transform .12s; } .kk:hover { border-color: var(--hair-2); } .kk:active { cursor: grabbing; } .kk.suruklenen { opacity: .45; transform: scale(.98); } .kk .ad { font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; } .kk .firma { font-size: 12px; color: var(--ink-3); margin-top: 2px; } .kk .satir { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; font-size: 11.5px; color: var(--ink-3); } .kk .tutar { font-weight: 600; color: var(--amber); font-variant-numeric: tabular-nums; } /* ---- takvim --------------------------------------------------------- */ .takvim { border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; background: var(--card); } .takvim .basliklar, .takvim .gunler { display: grid; grid-template-columns: repeat(7, 1fr); } .takvim .basliklar div { padding: 10px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); text-align: center; background: var(--card-3); border-bottom: 1px solid var(--edge); } .takvim .gun { min-height: 106px; padding: 8px; border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); display: flex; flex-direction: column; gap: 5px; } .takvim .gun:nth-child(7n) { border-right: 0; } .takvim .gun.disari { background: var(--outside); } .takvim .gun .no { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .takvim .gun.bugun .no { background: var(--amber); color: var(--on-accent); font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; } .takvim .olay { font-size: 11.5px; padding: 3px 7px; border-radius: 6px; border-left: 3px solid; background: var(--card-2); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- boş durum ------------------------------------------------------ */ .bos { text-align: center; padding: 54px 20px; color: var(--ink-3); } .bos .simge { font-size: 30px; opacity: .35; } .bos h3 { margin: 12px 0 5px; font-size: 15.5px; font-weight: 600; color: var(--ink-2); } .bos p { margin: 0 auto; max-width: 42ch; font-size: 13.5px; } .bos .dugme { margin-top: 18px; } /* ---- pencere (modal) ------------------------------------------------ */ .pencere-fon { position: fixed; inset: 0; background: var(--scrim); z-index: 60; display: grid; place-items: start center; padding: 40px 18px; overflow-y: auto; animation: bel .14s ease; } @keyframes bel { from { opacity: 0 } to { opacity: 1 } } .pencere { background: var(--panel); border: 1px solid var(--hair-2); border-radius: 18px; width: min(660px, 100%); box-shadow: 0 24px 60px rgba(0,0,0,.4); } .pencere > header { padding: 20px 24px 0; display: flex; align-items: flex-start; gap: 14px; } .pencere > header h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.02em; } .pencere > header .alt { font-size: 13px; color: var(--ink-3); margin: 3px 0 0; } .pencere > header .kapat { margin-left: auto; background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: 7px; } .pencere > header .kapat:hover { background: var(--card); color: var(--ink); } .pencere .govde-p { padding: 18px 24px 24px; } /* ---- bildirim ------------------------------------------------------- */ .bildirim { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--card); border: 1px solid var(--hair-2); border-radius: 11px; padding: 11px 18px; font-size: 13.5px; z-index: 80; box-shadow: 0 12px 34px rgba(0,0,0,.35); animation: yukari .22s ease; } @keyframes yukari { from { opacity: 0; transform: translate(-50%, 12px) } to { opacity: 1; transform: translate(-50%, 0) } } .bildirim.hata { border-color: color-mix(in srgb, var(--red) 55%, transparent); color: var(--red); } .bildirim.ok { border-color: color-mix(in srgb, var(--green) 55%, transparent); } /* ---- giriş ekranı --------------------------------------------------- */ .giris-sayfa { min-height: 100vh; display: grid; place-items: center; padding: 30px 20px; } .giris-kutu { width: min(410px, 100%); } .giris-kutu .marka { justify-content: center; margin-bottom: 26px; } .giris-kutu .kart { padding: 28px 26px; } .giris-kutu h1 { margin: 0 0 5px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; } .giris-kutu .alt { font-size: 13.5px; color: var(--ink-3); margin: 0 0 22px; } .giris-kutu .alan + .alan { margin-top: 14px; } .giris-kutu .dugme { width: 100%; margin-top: 20px; padding: 12px; } .giris-kutu .dip { text-align: center; font-size: 12px; color: var(--ink-4); margin-top: 20px; } .uyari { background: var(--red-dim); color: var(--red); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; } /* ---- müşteri kartı -------------------------------------------------- */ .kisi-ust { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; } .kisi-ust .harf { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: var(--amber-dim); color: var(--amber); font-size: 21px; font-weight: 600; flex: 0 0 auto; } .bilgi-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px 22px; } .bilgi-liste div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--grid); font-size: 13.5px; } .bilgi-liste dt, .bilgi-liste .k { color: var(--ink-3); } .bilgi-liste dd, .bilgi-liste .d { margin: 0; text-align: right; color: var(--ink); font-weight: 400; word-break: break-word; } /* ---- görev listeleri ------------------------------------------------ */ .gorev-liste { border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; background: var(--card-3); } .gorev-liste > header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .gorev-liste > header h4 { margin: 0; font-size: 13.5px; font-weight: 600; } .gorev-liste > header .oran { margin-left: auto; font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; } .gorev { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 13.5px; } .gorev.bitti span { text-decoration: line-through; color: var(--ink-4); } .cubuk { height: 4px; border-radius: 3px; background: var(--card-2); overflow: hidden; margin-bottom: 10px; } .cubuk i { display: block; height: 100%; background: var(--green); border-radius: 3px; transition: width .25s; } /* ---- belgeler ------------------------------------------------------- */ .belge { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--grid); font-size: 13.5px; } .belge:last-child { border-bottom: 0; } .belge .simge { width: 34px; height: 34px; border-radius: 9px; background: var(--card-2); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--ink-3); flex: 0 0 auto; } .belge .ad { font-weight: 500; } .belge .meta { font-size: 12px; color: var(--ink-4); } .belge .sag { margin-left: auto; display: flex; gap: 8px; } /* ---- filtre çubuğu -------------------------------------------------- */ .filtre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } .filtre input[type="search"], .filtre select { font-family: inherit; font-size: 13.5px; background: var(--card); color: var(--ink); border: 1px solid var(--hair-2); border-radius: 10px; padding: 9px 13px; } .filtre input[type="search"] { min-width: 220px; } .filtre input:focus, .filtre select:focus { outline: none; border-color: var(--amber); } /* ---- mobil ---------------------------------------------------------- */ .mobil-ust, .mobil-menu { display: none; } @media (max-width: 980px) { .kabuk { grid-template-columns: 1fr; } .yan { display: none; } .mobil-ust { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--edge); background: var(--panel); position: sticky; top: 0; z-index: 30; } .mobil-ust .marka img, .mobil-ust .marka .harf { width: 34px; height: 34px; border-radius: 10px; } .mobil-ust .marka .ad { font-size: 13.5px; } .mobil-menu { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--panel); border-top: 1px solid var(--edge); padding: 7px 4px calc(7px + env(safe-area-inset-bottom)); } .mobil-menu a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: var(--ink-4); padding: 5px 2px; border-radius: 9px; } .mobil-menu a svg { width: 20px; height: 20px; } .mobil-menu a.aktif { color: var(--amber); } .ust { padding: 14px 16px; position: static; } .ust h1 { font-size: 18.5px; } .govde { padding: 18px 16px 96px; } .kart { padding: 16px 17px; border-radius: 13px; } .izgara.dort { grid-template-columns: repeat(2, 1fr); gap: 11px; } .kutu { padding: 13px 14px; } .kutu .rakam { font-size: 21px; } .kolon { flex: 0 0 84vw; max-height: none; } .takvim .gun { min-height: 74px; padding: 5px; } .takvim .olay { font-size: 10px; padding: 2px 4px; } .pencere-fon { padding: 0; place-items: end center; } .pencere { border-radius: 18px 18px 0 0; width: 100%; } .form-izgara { grid-template-columns: 1fr; } .bilgi-liste { grid-template-columns: 1fr; } } @media (min-width: 1700px) { .govde { padding-left: 46px; padding-right: 46px; } body { font-size: 15.5px; } } @media print { .yan, .mobil-menu, .mobil-ust, .ust .sag, .dugme { display: none !important; } body { background: #fff; color: #000; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---- Ayarlar: tema önizleme şeritleri ---- */ [data-tema-onizle="grafit"] .o-ground{background:#0C0C0D} [data-tema-onizle="grafit"] .o-card{background:#1F2023} [data-tema-onizle="grafit"] .o-amber{background:#D9A84E} [data-tema-onizle="grafit"] .o-ink{background:#F2F0EB} [data-tema-onizle="obsidyen"] .o-ground{background:#09090A} [data-tema-onizle="obsidyen"] .o-card{background:#23262A} [data-tema-onizle="obsidyen"] .o-amber{background:#F5A623} [data-tema-onizle="obsidyen"] .o-ink{background:#F1F2F3} [data-tema-onizle="murekkep"] .o-ground{background:#0C0B09} [data-tema-onizle="murekkep"] .o-card{background:#1E1B17} [data-tema-onizle="murekkep"] .o-amber{background:#E0BE86} [data-tema-onizle="murekkep"] .o-ink{background:#FAF6EF} [data-tema-onizle="kobalt"] .o-ground{background:#080B12} [data-tema-onizle="kobalt"] .o-card{background:#18202F} [data-tema-onizle="kobalt"] .o-amber{background:#5B9CFF} [data-tema-onizle="kobalt"] .o-ink{background:#EDF1F8} [data-tema-onizle="zumrut"] .o-ground{background:#060C0A} [data-tema-onizle="zumrut"] .o-card{background:#14211C} [data-tema-onizle="zumrut"] .o-amber{background:#35D6A2} [data-tema-onizle="zumrut"] .o-ink{background:#EAF3EE} [data-tema-onizle="ametist"] .o-ground{background:#0B0910} [data-tema-onizle="ametist"] .o-card{background:#1C1727} [data-tema-onizle="ametist"] .o-amber{background:#B78BFA} [data-tema-onizle="ametist"] .o-ink{background:#F1ECF8} [data-tema-onizle="bakir"] .o-ground{background:#0F0B09} [data-tema-onizle="bakir"] .o-card{background:#241B16} [data-tema-onizle="bakir"] .o-amber{background:#E2743C} [data-tema-onizle="bakir"] .o-ink{background:#F7EEE6} [data-tema-onizle="porselen"] .o-ground{background:#F6F5F2} [data-tema-onizle="porselen"] .o-card{background:#FFFFFF} [data-tema-onizle="porselen"] .o-amber{background:#B8502F} [data-tema-onizle="porselen"] .o-ink{background:#1B1A17} [data-tema-onizle="fildisi"] .o-ground{background:#F5F1E8} [data-tema-onizle="fildisi"] .o-card{background:#FFFDF7} [data-tema-onizle="fildisi"] .o-amber{background:#1F4E79} [data-tema-onizle="fildisi"] .o-ink{background:#1A1C22} [data-tema-onizle="kuzey"] .o-ground{background:#EFF2F4} [data-tema-onizle="kuzey"] .o-card{background:#FFFFFF} [data-tema-onizle="kuzey"] .o-amber{background:#0E7C74} [data-tema-onizle="kuzey"] .o-ink{background:#12171B}