/* ORBİ 11 · "Gün Işığı Ofis" — telefon açık teması (varsayılan, 06.11.2026; masaüstündeki arayuz_web/tema-acik.css ile * aynı görsel dil). Porselen zemin + beyaz kâğıt, lacivert mürekkep yazı; üstte Autopol lacivertinde kabuk bandı. * Sarı #FFC400 YALNIZ kararınız (onay sayısının fosforlu izi, seçili sekmenin izi, karar düğmesi); metinde ve halkada sarının * okunur karşılığı bal tonu (--altin #8a6100). Camgöbeği yerine okunur deniz mavisi (--canli) "şu an canlı" demek. * Kapsam: her kural :root[data-tema="acik"] altında; v10 (Koyu) ve v9 (Eski koyu) style.css / tema-v10.css'te olduğu gibi kalır. * Tema index.html 'deki satır içi betikle seçilir (localStorage 'orbi_tema': 'acik' varsayılan | 'v10' | 'v9'); * anahtar: üst banttaki bağlantı noktası › Görünüm (app.js gorunumSatiri). Küre data-tema'yı izler (app.js paletSec). * Yerleşim ve ölçüler (satır, girdi, sekme, rakam boyları) değişmez; yalnız renk, yazı, yüzey ve gölge değişir. * Kontrast (WCAG, ölçüldü 06.11): --m-1 beyazda 15,6:1 · --m-3 #56677f 5,8:1 (--kat-2 üstünde 5,3:1) · --altin 5,5:1 · * --canli 5,6:1 · --uyari 5,4:1 · --tamam 5,4:1 · --kritik 5,5:1 · lacivert bantta beyaz 12,6:1. */ /* 1–7, 10, 14. bölümler masaüstü tema-acik.css ile BİREBİR aynı; telefon boyları aşağıda */ :root[data-tema="acik"]{ color-scheme: light; /* 1 · Yüzeyler */ --zemin: #eef2f7; --yaprak: #ffffff; --kat: #ffffff; --kat-2: #f2f5f9; --kat-3: #e3e9f1; --perde: rgba(16,34,60,.32); --hale: radial-gradient(700px 520px at 20% 18%, rgba(255,255,255,.85), rgba(255,255,255,0) 66%); --ust-isik: inset 0 1px 0 rgba(255,255,255,.9); --vurgu-hover: rgba(15,36,64,.045); --vurgu-secili: rgba(15,36,64,.075); /* 2 · Çizgiler */ --cizgi-ince: rgba(15,36,64,.08); --cizgi: rgba(15,36,64,.13); --cizgi-guclu: rgba(15,36,64,.22); --hud-kose: rgba(0,52,99,.26); --odak: #1f6fd1; --odak-hale: 0 0 0 3px rgba(31,111,209,.18); --odak-kenar: rgba(31,111,209,.45); /* 3 · Metin */ --m-1: #0f2440; --m-2: #3a4d6b; --m-3: #56677f; --m-4: #97a4b7; --m-ters: #ffffff; /* 4 · Vurgu */ --canli: #0a6e9e; --canli-2: #2a8cc0; --canli-zemin: rgba(10,110,158,.09); --altin: #8a6100; --altin-2: #6f4e00; --altin-zemin: rgba(255,196,0,.18); --altin-isik: rgba(255,196,0,.45); --altin-kenar: rgba(168,119,0,.45); --sari: #ffc400; --sari-2: #ffd447; --lacivert: #003463; --lacivert-2: #0b4a86; --lacivert-3: #002647; /* 5 · Durum */ --tamam: #0d7a53; --tamam-zemin: rgba(13,122,83,.09); --uyari: #ad5000; --uyari-zemin: rgba(173,80,0,.09); --kritik: #c9283d; --kritik-zemin: rgba(201,40,61,.08); --notr: #77859b; /* 6 · Rol ve sektör renkleri */ --rol-sef: #a87700; --rol-analist: #2f78a8; --rol-reklamci: #4f5bb5; --rol-icerik: #b0477f; --rol-metin: #b35d33; --rol-tasarim: #7656bf; --rol-video: #b8433f; --rol-arastirmaci: #4d7f25; --rol-yetenek: #7d7614; --rol-musteri: #18817b; --rol-seo: #23805a; --rol-denetci: #5d6878; --rol-kreatif: #9c43b0; --rol-kullanici: var(--m-1); --rol-sistem: var(--m-3); /* Sektör rengi: masaüstüyle aynı, dataviz doğrulayıcısından geçen set (yalnız işaret; metin mürekkep renginde) */ --sektor-autopol: #0057b3; --sektor-autofol: #957ff6; --sektor-istanbul_temizlik: #a0376d; --sektor-autopol_mekanik: #10a3ad; --sektor-youtube: #ec6955; --sektor-auto_ppf_center: #1b6226; /* 7 · Yazı */ --baslik: "Poppins", "Inter", "Segoe UI Variable Display", "Segoe UI", sans-serif; --mono: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --kod: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace; --t-kicker: 12px; --t-baslik: 19px; --s-kicker: .01em; --a-kalin: 600; /* 10 · Gölge: lacivert tonlu, iki katman */ --g-0: 0 0 0 1px rgba(15,36,64,.07), 0 1px 2px rgba(15,36,64,.05), 0 12px 32px -20px rgba(15,36,64,.28); --g-1: 0 0 0 1px rgba(15,36,64,.08), 0 2px 6px -2px rgba(15,36,64,.10), 0 16px 32px -14px rgba(15,36,64,.26); --g-2: 0 0 0 1px rgba(15,36,64,.08), 0 10px 24px -10px rgba(15,36,64,.18), 0 40px 90px -30px rgba(15,36,64,.42); } /* */ /* §3.2 telefon eki: tema seçicisi :root'tan özgül olduğundan style.css'teki telefon boyları burada yinelenir */ :root[data-tema="acik"]{ --t-rakam: 30px; --t-manset: 24px; } @media (max-width: 360px){ :root[data-tema="acik"]{ --t-rakam: 26px; } } /* Lacivert kabuk bandı: içindeki her şey bu tokenlarla açık renge döner */ :root[data-tema="acik"] .ust{ --m-1: #ffffff; --m-2: #d9e1ea; --m-3: #b8c7d9; --cizgi-ince: rgba(255,255,255,.12); --cizgi: rgba(255,255,255,.2); --vurgu-hover: rgba(255,255,255,.12); --vurgu-secili: rgba(255,255,255,.18); --tamam: #6be3b0; --uyari: #ffb36b; --kritik: #ff9aa5; --odak: #ffd447; background: var(--lacivert); border-bottom-color: transparent; color: var(--m-1); } /* ═══ TEMEL ══════════════════════════════════════════════════════════════════════════════════════════════ */ :root[data-tema="acik"] body{ background: var(--hale), linear-gradient(180deg, #f6f8fb 0, var(--zemin) 360px); background-color: var(--zemin); } :root[data-tema="acik"] ::selection{ background: rgba(31,111,209,.18); } :root[data-tema="acik"] :is(.ek-md code, .ek-md pre){ font-family: var(--kod); } :root[data-tema="acik"] ::-webkit-scrollbar-thumb{ background: rgba(15,36,64,.18); } /* Etiketler: cümle düzeninde Poppins */ :root[data-tema="acik"] :is(.kicker, .sohbet .row small, .md-tablo th){ font-family: var(--baslik); font-weight: 500; font-size: var(--t-kicker); letter-spacing: var(--s-kicker); text-transform: none; } :root[data-tema="acik"] .grup > .kicker{ color: var(--m-2); } /* ═══ ÜST BANT VE ALT SEKMELER ═══════════════════════════════════════════════════════════════════════════ */ :root[data-tema="acik"] :is(.ust .ad, .key-title){ font-family: var(--baslik); font-weight: var(--a-kalin); letter-spacing: .34em; } :root[data-tema="acik"] .ust .ad{ font-size: 12.5px; } :root[data-tema="acik"] .sektor-sec{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); } :root[data-tema="acik"] .sekmeler{ background: #fff; border-top-color: var(--cizgi-ince); box-shadow: 0 -6px 18px -14px rgba(15,36,64,.35); } :root[data-tema="acik"] .sekme.aktif{ color: var(--lacivert); } :root[data-tema="acik"] .sekme.aktif::before{ width: 16px; height: 3px; margin-left: -8px; background: var(--sari); } :root[data-tema="acik"] .rozet{ color: #fff; } :root[data-tema="acik"] #rozet-ekip{ background: var(--sari); box-shadow: 0 0 0 1.5px #fff; } :root[data-tema="acik"] .alt-cubuk{ background: transparent; } /* ═══ İMZA: lacivert + sarı çift ince "coachline" (Asistan'daki rakam şeridi ve sektör kapağı) ═══════════ */ :root[data-tema="acik"] :is(.ozet-serit, .kapak){ border-bottom-color: transparent; background: linear-gradient(90deg, var(--sari) 0, rgba(255,196,0,0) 130px) 0 calc(100% - 3px) / 100% 2px no-repeat, linear-gradient(90deg, var(--lacivert) 0, rgba(0,52,99,.5) 100px, var(--cizgi) 58%, var(--cizgi) 100%) 0 100% / 100% 1px no-repeat; background-origin: border-box; } /* ═══ ASİSTAN: rakam şeridi ═════════════════════════════════════════════════════════════════════════════ */ :root[data-tema="acik"] .serit-oge{ border-left: 0; background: linear-gradient(180deg, transparent, var(--cizgi) 24%, var(--cizgi) 76%, transparent) 0 0 / 1px 100% no-repeat; } :root[data-tema="acik"] .serit-oge:first-child{ background: none; } :root[data-tema="acik"] .serit-oge:active{ background-color: var(--vurgu-hover); } :root[data-tema="acik"] .serit-oge .kicker{ max-width: 100%; margin: -2px 0; line-height: 1.34; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-tema="acik"] .serit-oge b{ font-family: var(--baslik); font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums; } /* Onay bekleyen (sıfır değilse app.js --h:var(--altin) yazar): fosforlu kalem izi, rakam mürekkep */ :root[data-tema="acik"] .serit-oge[data-filtre="onay"][style*="--altin"] b{ align-self: flex-start; margin-left: -.12em; padding: 0 .12em; color: var(--m-1) !important; background: linear-gradient(100deg, rgba(255,196,0,0) 0, var(--sari) .14em, var(--sari) calc(100% - .1em), rgba(255,196,0,0) 100%) 0 82% / 100% 40% no-repeat; } :root[data-tema="acik"] .durum{ font-family: var(--baslik); font-weight: 500; font-size: 12.5px; } /* ═══ SEKTÖR KAPAĞI ═════════════════════════════════════════════════════════════════════════════════════ */ :root[data-tema="acik"] .kapak .tarih-satiri{ font-size: 12.5px; color: var(--m-3); } :root[data-tema="acik"] .kapak-ad{ font-family: var(--baslik); font-weight: var(--a-kalin); line-height: 1.1; letter-spacing: -.022em; color: var(--lacivert); } :root[data-tema="acik"] .kapak-rakam b{ font-family: var(--baslik); font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums; } :root[data-tema="acik"] .veri-cip{ background: #fff; box-shadow: inset 0 0 0 1px var(--cizgi); } :root[data-tema="acik"] .veri-cip:active{ background: var(--vurgu-secili); } /* ═══ GÜNDEM VE LİSTELER ═════════════════════════════════════════════════════════════════════════════════ */ :root[data-tema="acik"] .grup > i{ width: 6px; height: 6px; } :root[data-tema="acik"] .grup:has(> i){ padding-left: 11px; } :root[data-tema="acik"] #isler .grup > .kicker{ color: color-mix(in srgb, var(--o, var(--m-3)) 70%, var(--m-2)); } :root[data-tema="acik"] #isler .grup::after{ background: linear-gradient(90deg, color-mix(in srgb, var(--o, var(--m-3)) 34%, transparent), var(--cizgi-ince) 40%); } :root[data-tema="acik"] .ig-halka.a{ --c: var(--m-2); } :root[data-tema="acik"] #ig-govde .grup.onay{ --o: var(--m-2); } /* ═══ ÇİPLER ═════════════════════════════════════════════════════════════════════════════════════════════ */ :root[data-tema="acik"] :is(.tur, .ed-cip){ background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 36%, transparent); } :root[data-tema="acik"] .tur.kapali{ box-shadow: none; } :root[data-tema="acik"] .ed-cip{ background: rgba(255,196,0,.14); box-shadow: inset 0 0 0 1px var(--altin-kenar); } :root[data-tema="acik"] .cip-sec{ background: transparent; } /* ═══ DÜĞMELER VE YAZMA ALANI ════════════════════════════════════════════════════════════════════════════ */ :root[data-tema="acik"] .btn{ background: #fff; color: var(--m-1); box-shadow: inset 0 0 0 1px var(--cizgi-guclu); } :root[data-tema="acik"] .btn:active{ background: var(--kat-2); } :root[data-tema="acik"] .btn.dolu:not(.kirmizi){ background: var(--lacivert); color: #fff; box-shadow: none; } :root[data-tema="acik"] .btn.dolu:not(.kirmizi):active{ background: var(--lacivert-2); } :root[data-tema="acik"] .btn.dolu.yesil{ background: var(--sari); color: var(--lacivert-3); } :root[data-tema="acik"] .btn.dolu.kirmizi{ color: #fff; } :root[data-tema="acik"] .btn:is(.hayalet, .gri){ background: transparent; box-shadow: none; } :root[data-tema="acik"] .yazma{ background: #fff; border-color: var(--cizgi); box-shadow: 0 6px 18px -14px rgba(15,36,64,.4); } :root[data-tema="acik"] .yazma:focus-within{ border-color: var(--odak-kenar); box-shadow: var(--odak-hale); } :root[data-tema="acik"] .ctl .kayit-nokta{ box-shadow: 0 0 0 2px #fff; } /* ═══ ALT SAYFA, ALT LİSTE, DİYALOG ══════════════════════════════════════════════════════════════════════ */ :root[data-tema="acik"] .sayfa{ background: #fff; box-shadow: 0 -10px 30px -12px rgba(15,36,64,.3); } :root[data-tema="acik"] :is(.alt-liste, .diyalog){ background: #fff; } :root[data-tema="acik"] .sayfa-bas{ border-bottom-color: transparent; background: linear-gradient(var(--sari), var(--sari)) 56px 100% / 22px 2px no-repeat, linear-gradient(var(--cizgi-ince), var(--cizgi-ince)) 0 100% / 100% 1px no-repeat; background-origin: border-box; } :root[data-tema="acik"] :is(.sayfa-bas h3, .ar-bas h2, .diyalog h4){ font-family: var(--baslik); font-weight: 500; letter-spacing: -.01em; } /* ═══ BOŞ DURUM ══════════════════════════════════════════════════════════════════════════════════════════ */ :root[data-tema="acik"] div.bos:not(.olumlu):not(.hata)::before{ content: ""; position: absolute; left: 9px; top: 15px; width: 10px; height: 10px; box-sizing: border-box; border-radius: var(--r-tam); border: 1.5px dashed var(--m-4); } :root[data-tema="acik"] .ed-icerik > .bos::before{ content: none; } /* ═══ TOAST VE GÖRÜNÜM ANAHTARI ══════════════════════════════════════════════════════════════════════════ */ :root[data-tema="acik"] .bildirim{ background: #fff; } :root[data-tema="acik"] .bildirim .b .bm{ font-family: var(--baslik); } :root[data-tema="acik"] .bildirim .b .bm span{ font-family: var(--yazi); } :root[data-tema="acik"] .gorunum-sec [aria-pressed="true"]{ text-decoration: underline 2px var(--sari); text-underline-offset: 6px; }