@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap'); /* ebyoklama — ortak stil. Renkler token; koyu tema otomatik. Yazı tipi Nunito (kullanıcı isteği). İç sayfalar evrakburada iç şablonunda (evrakburada.com/kelebek/): beyaz kart, gri zemin, mavi #2563eb, sistem yazı tipi, masaüstünde sol menü (kullanıcı isteği 2026-11-06). */ :root { --bg: #f1f3f5; --yuzey: #ffffff; --yuzey2: #f8fafc; --cizgi: #e5e7eb; --metin: #111827; --metin2: #475569; --metin3: #6b7280; /* evrakburada kelebek paleti: lacivert menü + petrol yeşili vurgu */ --lacivert: #0b1a33; --lacivert2: #13274a; --ana: #0f766e; --ana2: #115e59; --ana-acik: #f0fdfa; --ana-isik: rgba(15,118,110,.16); --ana-parlak: #5eead4; --var: #16a34a; --var-bg: #dcfce7; --yok: #dc2626; --yok-bg: #fee2e2; --gec: #d97706; --gec-bg: #fef3c7; --izin: #7c3aed; --izin-bg: #ede9fe; --kismi: #c2410c; --kismi-bg: #ffedd5; --golge: 0 1px 3px rgba(0,0,0,.04); --r: 12px; color-scheme: light; } /* Tema: tema.js renk paletini (--lacivert, --ana, --ana-parlak…) kökte değiştirir; koyu modda olur. 5 palet: petrol (varsayılan) · okyanus · mor · orman · kiraz. Mod: açık (varsayılan) · koyu · sistem. */ :root { --ana-isik: color-mix(in srgb, var(--ana) 18%, transparent); } :root[data-koyu] { --bg: #0f172a; --yuzey: #111827; --yuzey2: #1e293b; --cizgi: #334155; --metin: #f1f5f9; --metin2: #cbd5e1; --metin3: #94a3b8; --ana: #14b8a6; --ana2: #0d9488; --ana-acik: #042f2e; --izin: #a78bfa; --lacivert: #060f1f; --lacivert2: #0f1d38; --var-bg: #12351f; --yok-bg: #3d1717; --gec-bg: #3a2c0d; --izin-bg: #172a4d; --kismi: #fb923c; --kismi-bg: #3b1d0c; --golge: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); color-scheme: dark; } :root[data-koyu] .btn.ikincil { color: var(--ana-parlak); } :root[data-koyu] a { color: var(--ana-parlak); } :root[data-koyu] .mobil-yakinda { color: var(--ana-parlak); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--metin); min-height: 100vh; font-size: 15px; line-height: 1.45; padding-bottom: env(safe-area-inset-bottom); } a { color: var(--ana); } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3 { line-height: 1.2; } /* Üst çubuk */ /* Üst modül çubuğu (evrakburada'daki gibi beyaz, ince) */ .ust { position: sticky; top: 0; z-index: 20; background: var(--lacivert); color: #fff; border-bottom: 1px solid rgba(255,255,255,.06); padding: calc(8px + env(safe-area-inset-top)) 16px 8px; display: flex; align-items: center; gap: 10px; min-height: 56px; } .ust .logo { font-weight: 800; font-size: 16px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } .ust .logo::before { content: ''; display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background: var(--logo, url(/favicon.svg)) center / contain no-repeat; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,.15); } .ust .logo small { display: block; font-weight: 600; font-size: 12px; color: var(--ana-parlak); } .ust button { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 9px; padding: 7px 11px; cursor: pointer; position: relative; } .ust button:hover { background: rgba(255,255,255,.12); } .ust .rozet { position: absolute; top: -4px; right: -4px; background: var(--yok); color: #fff; font-size: 11px; border-radius: 9px; padding: 0 5px; min-width: 18px; text-align: center; } .kap { max-width: 1080px; margin: 0 auto; padding: 16px; } .kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge); padding: 16px; margin-bottom: 14px; } .kart h2 { font-size: 17px; margin-bottom: 10px; } .kart h3 { font-size: 15px; margin-bottom: 8px; } .ince { color: var(--metin3); font-size: 13px; } .satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .satir > .esnek { flex: 1; min-width: 0; } .izgara { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* Sekmeler */ .sekmeler { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; } .sekmeler::-webkit-scrollbar { display: none; } .sekme { border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; font-weight: 600; color: var(--metin2); } .sekme.aktif { background: var(--ana); border-color: var(--ana); color: #fff; } /* Form */ label.alan { display: block; margin-bottom: 12px; } label.alan > span { display: block; font-size: 13px; font-weight: 600; color: var(--metin2); margin-bottom: 5px; } input[type=text], input[type=tel], input[type=password], input[type=date], input[type=search], input[type=email], input[type=number], select, textarea { width: 100%; padding: 11px 12px; border: 1.5px solid var(--cizgi); border-radius: 11px; background: var(--yuzey2); outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--ana); } textarea { min-height: 90px; resize: vertical; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 11px; padding: 11px 16px; font-weight: 700; cursor: pointer; background: var(--ana); color: #fff; text-decoration: none; } .btn:disabled { opacity: .55; cursor: default; } .btn.ikincil { background: var(--ana-acik); color: var(--ana); } .btn.cizgili { background: transparent; border: 1.5px solid var(--cizgi); color: var(--metin2); } .btn.tehlike { background: var(--yok-bg); color: var(--yok); } .btn.kucuk { padding: 7px 11px; font-size: 13px; border-radius: 9px; } .btn.tam { width: 100%; } /* Tablo */ .tablo-kap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--metin3); font-weight: 700; padding: 8px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; } td { padding: 9px 8px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; } tr:last-child td { border-bottom: 0; } /* ═══ İç şablon (evrakburada / kelebek düzeni) ═══════════════════════════ Telefonda: üstte yatay sekmeler. Masaüstünde (≥900px): solda 212px sabit menü. */ .app-layout { display: flex; flex-direction: column; } .yan { background: var(--lacivert); padding: 6px 10px 8px; position: sticky; top: 56px; z-index: 15; } .yan-marka { display: none; } .yan-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .yan-nav::-webkit-scrollbar { display: none; } .nav-tab { display: flex; align-items: center; gap: 7px; text-decoration: none; color: rgba(255,255,255,.86); font-size: 13.5px; font-weight: 700; padding: 8px 12px; border-radius: 8px; white-space: nowrap; border: 0; background: none; cursor: pointer; } .nav-tab:hover { color: #fff; background: rgba(255,255,255,.07); } .nav-tab.aktif { color: #fff; background: var(--ana); font-weight: 800; } .nav-tab .rozet-k { margin-left: auto; background: var(--yok); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; font-weight: 700; } .yan-alt { display: none; } .main-content { flex: 1; min-width: 0; padding: 16px; } .main-content > * { max-width: 1100px; } @media (min-width: 900px) { .app-layout { flex-direction: row; align-items: stretch; min-height: calc(100vh - 56px); } /* Kompakt: 768px yükseklikte bile kaydırmadan sığsın (kullanıcı isteği) */ /* Menünün kendi kaydırma çubuğu YOK: sayfayla birlikte aşağı uzar (kullanıcı isteği) */ .yan { width: 212px; flex: 0 0 212px; display: flex; flex-direction: column; gap: 5px; padding: 10px 8px; position: static; height: auto; min-height: calc(100vh - 56px); overflow: visible; } .yan-nav { flex-direction: column; gap: 1px; } .nav-tab { width: 100%; padding: 6px 11px; border-radius: 7px; font-size: 13px; } .yan .btn.tam { padding: 7px 10px; font-size: 13.5px; border-radius: 9px; } .yan .oneri-kutu { padding: 7px 10px; font-size: 12px; } .yan .oneri-kutu small { font-size: 11px; margin-top: 1px; } .yan-alt { display: block; margin-top: 10px; } .main-content { padding: 20px 24px 60px; } } /* Sekme kartı başlığı */ /* Başlık altında ince çizgi + soldan kısa yeşil vurgu (kelebek'teki gibi) */ .tab-header { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); position: relative; } .tab-header::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 64px; height: 3px; border-radius: 3px; background: var(--ana); } .tab-header h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 4px; } .tab-header p { color: var(--metin3); font-size: .9rem; } .tab-header .satir { justify-content: space-between; } /* Excel yükleme satırı */ .upload-compact { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .6rem; } .upload-label { display: inline-flex; align-items: center; gap: .45rem; background: var(--yuzey2); border: 1px dashed #cbd5e1; padding: .55rem 1rem; border-radius: 8px; cursor: pointer; color: var(--metin2); font-size: .9rem; transition: .2s; } .upload-label:hover { border-color: var(--ana); color: var(--metin); background: var(--ana-acik); } .upload-label small { opacity: .65; } .upload-file-name { font-weight: 600; font-size: .85rem; color: var(--var); } .upload-status { font-size: .85rem; } .template-btn-sm { padding: .4rem .7rem; font-size: .8rem; background: transparent; border: 1px solid var(--cizgi); color: var(--metin2); border-radius: 6px; cursor: pointer; font-weight: 600; } .template-btn-sm:hover { background: var(--yuzey2); color: var(--metin); } .excel-onizleme { margin-top: .8rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--ana) 30%, transparent); background: var(--ana-acik); border-radius: 12px; } /* Elle ekleme kutusu */ .manuel-ekle { margin-top: 1.2rem; padding: 1.1rem 1.2rem; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--yuzey2); } .manuel-ekle h3 { font-size: 1rem; margin-bottom: .25rem; } .manuel-ack { font-size: .82rem; color: var(--metin3); margin-bottom: .85rem; line-height: 1.5; } .manuel-satir { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; } .manuel-satir input, .manuel-satir select { flex: 1 1 140px; min-width: 0; width: auto; padding: .6rem .75rem; border: 1px solid var(--cizgi); border-radius: 9px; font-size: .9rem; background: var(--yuzey); } .manuel-satir input:focus, .manuel-satir select:focus { border-color: var(--ana); box-shadow: 0 0 0 2px var(--ana-isik); } .manuel-btn { flex: 0 0 auto; padding: .62rem 1.15rem; border: none; border-radius: 9px; cursor: pointer; background: var(--ana); color: #fff; font-size: .9rem; font-weight: 700; } .manuel-btn:hover { background: var(--ana2); } /* Veri tablosu (kelebek data-table) */ .liste-bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 1.4rem 0 .6rem; } .liste-bas h3 { font-size: 1rem; } .liste-bas .araclar { display: flex; gap: 8px; flex-wrap: wrap; } .liste-bas input, .liste-bas select { width: auto; min-width: 160px; padding: .45rem .7rem; border: 1px solid var(--cizgi); border-radius: 8px; font-size: .85rem; } .data-table { font-size: .86rem; } .data-table th { background: var(--yuzey2); font-size: .72rem; padding: .55rem .7rem; position: sticky; top: 0; } .data-table td { padding: .5rem .7rem; border-bottom: 1px solid #f3f4f6; } .data-table tr:nth-child(even) td { background: #fafafa; } .data-table tr:hover td { background: var(--ana-acik); } :root[data-koyu] .data-table tr:nth-child(even) td { background: rgba(255,255,255,.02); } :root[data-koyu] .data-table td { border-bottom-color: var(--cizgi); } :root[data-koyu] .upload-label { border-color: var(--cizgi); } :root[data-koyu] .excel-onizleme { border-color: var(--cizgi); } .oneri-kutu { display: block; border-radius: 11px; padding: 11px 12px; background: rgba(255,255,255,.04); color: #fff; border: 1px solid color-mix(in srgb, var(--ana-parlak) 35%, transparent); font-size: 13px; font-weight: 800; line-height: 1.35; text-decoration: none; } .oneri-kutu small { display: block; font-weight: 600; font-size: 11.5px; color: var(--ana-parlak); margin-top: 3px; } .oneri-kutu:hover { background: rgba(255,255,255,.08); } .yan .btn.yoklama-al { background: var(--ana); } .yan .btn.yoklama-al:hover { background: var(--ana2); } .main-content .sayi { border-top: 4px solid var(--lacivert); border-radius: 10px; } .main-content .kart { border-radius: 10px; } /* Durum rozetleri */ .etiket { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; } .e-var { background: var(--var-bg); color: var(--var); } .e-yok { background: var(--yok-bg); color: var(--yok); } .e-gec { background: var(--gec-bg); color: var(--gec); } .e-izinli { background: var(--izin-bg); color: var(--izin); } .e-kismi { background: var(--kismi-bg); color: var(--kismi); } .e-gri { background: var(--yuzey2); color: var(--metin3); border: 1px solid var(--cizgi); } /* Sayı kutuları */ .sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; } .sayi { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 14px; } .sayi b { display: block; font-size: 26px; } .sayi span { color: var(--metin3); font-size: 13px; } /* Modal */ .ort { position: fixed; inset: 0; background: rgba(10,14,40,.5); display: flex; align-items: flex-end; justify-content: center; z-index: 50; padding: 0; } .ort[hidden] { display: none; } .modal { background: var(--yuzey); width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); } .modal h2 { font-size: 18px; margin-bottom: 14px; } @media (min-width: 640px) { .ort { align-items: center; padding: 16px; } .modal { border-radius: 18px; } } /* Bildirim (toast) */ #tost { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); opacity: 0; background: #1e1b4b; color: #fff; padding: 11px 18px; border-radius: 12px; font-weight: 600; z-index: 99; transition: .25s; max-width: calc(100% - 32px); text-align: center; pointer-events: none; } #tost.gor { opacity: 1; transform: translateX(-50%) translateY(0); } #tost.hata { background: var(--yok); } .bos { text-align: center; color: var(--metin3); padding: 28px 10px; } .demo-serit { position: fixed; bottom: 0; left: 0; right: 0; background: var(--ana-parlak); color: var(--lacivert); text-align: center; font-weight: 700; font-size: 13px; box-shadow: 0 -2px 12px rgba(11,26,51,.18); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); z-index: 40; } .demo-serit { display: flex; align-items: center; justify-content: center; gap: 8px 12px; flex-wrap: wrap; } .demo-serit button { border: 0; background: var(--lacivert); color: #fff; border-radius: 8px; padding: 5px 11px; cursor: pointer; font-weight: 700; } .demo-gorunum { display: inline-flex; background: rgba(0,0,0,.12); border-radius: 9px; padding: 2px; gap: 2px; } .demo-gorunum button { background: transparent; color: var(--lacivert); padding: 4px 10px; } .demo-gorunum button.secili { background: #fff; color: var(--ana2); } .demo-serit .demo-satin { background: var(--ana2); color: #fff; padding: 6px 14px; } .demo-serit .demo-giris { color: var(--lacivert); font-weight: 700; font-size: 13px; } /* Tema seçici (🎨) */ .tema-mod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .tema-mod button, .tema-renk button { border: 2px solid var(--cizgi); background: var(--yuzey2); border-radius: 12px; padding: 10px 6px; cursor: pointer; font-weight: 700; color: var(--metin2); display: flex; flex-direction: column; align-items: center; gap: 6px; } .tema-mod button.secili, .tema-renk button.secili { border-color: var(--ana); color: var(--metin); box-shadow: 0 0 0 3px var(--ana-isik); } .tema-renk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .tema-renk img { width: 40px; height: 40px; border-radius: 9px; display: block; } .tema-renk small { font-size: 11.5px; } .tema-renk .seritler { display: flex; gap: 3px; } .tema-renk .seritler i { width: 10px; height: 6px; border-radius: 3px; display: block; } .tema-baslik { font-size: 13px; font-weight: 800; color: var(--metin2); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; } @media (max-width: 420px) { .tema-renk { grid-template-columns: repeat(3, 1fr); } } .sifre-kutu { font-family: ui-monospace, Consolas, monospace; font-size: 22px; font-weight: 800; letter-spacing: .12em; background: var(--yuzey2); border: 1.5px dashed var(--ana); border-radius: 12px; padding: 12px; text-align: center; margin: 10px 0; } .gizli { display: none !important; } .deneme-serit { background: #fef3c7; color: #78350f; text-align: center; font-size: 13px; font-weight: 600; padding: 8px 12px; } .deneme-serit.bitti { background: #fee2e2; color: #7f1d1d; } .deneme-serit a { color: inherit; } /* Alt boşluk: demo şeridi ve öğretmenin yapışkan kaydet çubuğu üstüne binmesin */ .alt-bilgi { text-align: center; font-size: 12px; color: var(--metin3); padding: 20px 12px calc(76px + env(safe-area-inset-bottom)); } .alt-bilgi a { color: inherit; font-weight: 700; } .mobil-yakinda { display: inline-block; margin-bottom: 6px; padding: 4px 12px; border-radius: 999px; background: var(--ana-acik); color: var(--ana); font-weight: 600; } /* ═══ Görsel cila (EB Yurt ile ortak, 2026-11-09) — yapı aynı, yalnız derinlik, renk vurgusu ve geçişler ═══ Kaynak: EBYURT-TASARIM-KARARLARI.txt §3. Renkler hep token'dan → 5 palet + koyu mod kendiliğinden çalışır. */ :root { --golge: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.05); --golge-yuksek: 0 2px 4px rgba(15,23,42,.05), 0 12px 28px rgba(15,23,42,.10); --gecis: .18s cubic-bezier(.4,0,.2,1); } :root[data-koyu] { --golge-yuksek: 0 2px 4px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.4); } body { -webkit-font-smoothing: antialiased; } ::selection { background: var(--ana-isik); } .ust { background: linear-gradient(100deg, var(--lacivert) 0%, var(--lacivert2) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(2,6,23,.18); } .ust button { transition: background var(--gecis), transform var(--gecis); } .ust button:active { transform: scale(.95); } .yan { background: linear-gradient(180deg, var(--lacivert) 0%, color-mix(in srgb, var(--lacivert) 82%, var(--ana)) 100%); } .nav-tab { transition: background var(--gecis), color var(--gecis), padding var(--gecis); } .nav-tab.aktif { background: linear-gradient(90deg, var(--ana), color-mix(in srgb, var(--ana) 75%, var(--ana-parlak))); box-shadow: 0 4px 14px color-mix(in srgb, var(--ana) 40%, transparent); } @media (min-width: 900px) { .nav-tab:hover:not(.aktif) { padding-left: 15px; } } .kart { box-shadow: var(--golge); transition: box-shadow var(--gecis); } .main-content > .kart, .main-content > section > .kart, .main-content .kart { border-radius: 14px; } .tab-header h1 { letter-spacing: -.01em; } .tab-header::after { width: 72px; background: linear-gradient(90deg, var(--ana), var(--ana-parlak)); } /* Sayı kutuları: rakamın rengi üst şeride ve zemine yansır (rakama style="color:var(--var)" vermek yeter) */ .sayi { --v: var(--ana); position: relative; overflow: hidden; box-shadow: var(--golge); background: linear-gradient(160deg, color-mix(in srgb, var(--v) 7%, var(--yuzey)) 0%, var(--yuzey) 60%); transition: transform var(--gecis), box-shadow var(--gecis); } .main-content .sayi { border-top: 0; border-radius: 14px; } .sayi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--v); } .sayi:hover { transform: translateY(-2px); box-shadow: var(--golge-yuksek); } .sayi b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 2px; } .sayi span { font-weight: 600; } .sayi:has(> b[style*="--var)"]) { --v: var(--var); } .sayi:has(> b[style*="--izin)"]) { --v: var(--izin); } .sayi:has(> b[style*="--gec)"]) { --v: var(--gec); } .sayi:has(> b[style*="--yok)"]) { --v: var(--yok); } .sayi:has(> b[style*="--kismi)"]) { --v: var(--kismi); } /* Tıklanır sayı kutusu: