/* site.css — giriş yapıldıktan sonraki sayfaların kabuğu ve ana sayfa. Renkler mobil uygulamanın paletinden (app/lib/core/theme/ app_theme_colors.dart ve app_theme.dart): aynı lacivert, aynı mavi, aynı yeşil/kehribar aşama renkleri. Ölçüler birebir kopyalanmadı — dokunmatik için seçilmiş yükseklikler farede fazla iri, geniş ekranda tek sütun fazla dar kalıyor. KOYU TEMA VAR: uygulamada da var ve aynı değerleri kullanıyor. ÜÇ DURUM: Ayarlar'daki tema seçimi yazıyor; "sistem" seçiliyken öznitelik HİÇ olmuyor ve karar `prefers-color-scheme`e kalıyor. Bu yüzden koyu değerler İKİ yerde tanımlı — biri sistem tercihi için (açık temayı SEÇMİŞ kullanıcıyı dışarıda bırakarak), biri açık seçim için. Renkler yalnızca medya sorgusunun içinde tanımlansaydı, koyu temayı elle seçen kullanıcı açık temada kalırdı. Mobilde de tema ayarlanabilir bir şey (`AppSettings.themeMode`); web'in yalnızca işletim sistemine uyması eksikti. */ :root { --lacivert: #22315F; --mavi: #4058D2; --zemin: #F3F5FB; --yuzey: #FFFFFF; --yuzey-soluk: #F0F2F8; --kenar: #D8DDE9; --yazi: #1A2138; --soluk: #60697A; --silik: #747C90; --golge: rgba(34, 49, 95, .10); /* Aşama renkleri — TEK İŞ İÇİN. Kehribar başka hiçbir yerde kullanılmıyor ki gördüğü yerde "burası bekliyor" demek olsun. */ --tamam: #0F8F55; --bekleyen: #C27803; --bekleyen-halka: #FDF1D8; --bos: #A9B0C4; } /* Sistem tercihi — açık temayı AÇIKÇA seçmiş kullanıcıya uygulanmaz. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { --lacivert: #121A31; --mavi: #7A8CE8; --zemin: #0B1020; --yuzey: #151E35; --yuzey-soluk: #202D49; --kenar: #35415F; --yazi: #E7EBF4; --soluk: #B4BED2; --silik: #8F9AB1; --golge: rgba(0, 0, 0, .40); --tamam: #5FD79C; --bekleyen: #EFB247; --bekleyen-halka: #33260E; --bos: #5A657F; } } /* Elle seçilen koyu tema — sistem ne derse desin. */ :root[data-tema="koyu"] { --lacivert: #121A31; --mavi: #7A8CE8; --zemin: #0B1020; --yuzey: #151E35; --yuzey-soluk: #202D49; --kenar: #35415F; --yazi: #E7EBF4; --soluk: #B4BED2; --silik: #8F9AB1; --golge: rgba(0, 0, 0, .40); --tamam: #5FD79C; --bekleyen: #EFB247; --bekleyen-halka: #33260E; --bos: #5A657F; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--zemin); color: var(--yazi); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; } .simge-deposu { position: absolute; } /* Klavyeyle gezene menüyü atlama kapısı; fareye görünmüyor. */ .atla { position: absolute; left: -9999px; z-index: 20; padding: 10px 16px; border-radius: 0 0 12px 0; background: var(--mavi); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; } .atla:focus { left: 0; top: 0; } /* ── Üst çubuk ───────────────────────────────────────────────────── */ .ust-cubuk { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 22px; background: var(--lacivert); color: #fff; } .ust-cubuk .marka { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.2px; text-decoration: none; } .hesap { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; } .hesap form { margin: 0; } .avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; } .avatar-harf { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); font-size: 14px; font-weight: 800; } .hesap-yazi { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .hesap-yazi .ad { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .hesap-yazi .eposta { overflow: hidden; color: rgba(255, 255, 255, .55); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } .cikis { padding: 7px 15px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 13px; cursor: pointer; } .cikis:hover { background: rgba(255, 255, 255, .12); } /* ── Kabuk: yan menü + içerik ────────────────────────────────────── */ .kabuk { display: flex; align-items: flex-start; gap: 28px; max-width: 1200px; margin: 0 auto; padding: 24px 22px 64px; } .icerik { flex: 1; /* min-width:0 OLMAZSA uzun sınav adı esnek kutuyu şişirip yan menüyü ekran dışına itiyor. */ min-width: 0; } /* ── Menü ────────────────────────────────────────────────────────── */ .menu ul { display: flex; margin: 0; padding: 0; list-style: none; } .menu a { display: flex; align-items: center; gap: 12px; border-radius: 13px; color: var(--soluk); font-weight: 600; text-decoration: none; transition: background-color .12s ease, color .12s ease; } .menu svg { width: 21px; height: 21px; fill: currentColor; } .menu a:hover { background: var(--yuzey-soluk); color: var(--yazi); } .menu a.acik { color: var(--mavi); font-weight: 800; } /* Yan menü — geniş ekran. */ .yan-menu { position: sticky; top: 76px; flex: none; width: 214px; padding: 8px; border-radius: 18px; background: var(--yuzey); box-shadow: 0 8px 24px var(--golge); } .yan-menu ul { flex-direction: column; gap: 2px; } .yan-menu a { padding: 11px 13px; font-size: 14.5px; } .yan-menu a.acik { background: color-mix(in srgb, var(--mavi) 12%, transparent); } /* Alt çubuk — dar ekran. Uygulamadaki YÜZEN çubuğun aynısı: kartlarla aynı dili konuşuyor, ekranın kenarına yapışmıyor. */ .alt-menu { display: none; position: fixed; right: 12px; bottom: 12px; left: 12px; z-index: 10; padding: 8px 6px; border-radius: 26px; background: var(--yuzey); box-shadow: 0 8px 24px var(--golge); } .alt-menu ul { justify-content: space-between; } .alt-menu li { flex: 1; } .alt-menu a { flex-direction: column; gap: 4px; padding: 4px 2px; font-size: 11px; text-align: center; } .alt-menu a:hover { background: transparent; } /* Seçili sekme ikonun ARKASINDAKİ hapla belli oluyor, çubuğun tamamını boyamadan. */ .alt-menu .menu-simge { display: inline-flex; padding: 5px 17px; border-radius: 15px; } .alt-menu a.acik .menu-simge { background: color-mix(in srgb, var(--mavi) 14%, transparent); } @media (max-width: 900px) { .yan-menu { display: none; } .alt-menu { display: block; } .kabuk { padding: 18px 16px 104px; } .ust-cubuk { padding: 10px 16px; } /* Telefonda e-posta satırı adın altında yer kaplıyor; kim olduğunu ad zaten söylüyor. */ .hesap-yazi .eposta { display: none; } } @media (max-width: 560px) { .hesap-yazi { display: none; } } /* ── Ana sayfa: selamlama ────────────────────────────────────────── */ .karsilama { display: flex; align-items: center; gap: 16px; padding: 22px 26px 54px; border-radius: 20px; background: var(--lacivert); color: #fff; } .karsilama-marka { flex: none; } .karsilama h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.3px; } .karsilama .marka-etiket { margin: 3px 0 0; color: rgba(255, 255, 255, .5); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; } /* ── Ana sayfa: iki durak ────────────────────────────────────────── */ /* Kartlar lacivertin alt kenarına BİNİYOR — uygulamadaki yerleşimin aynısı; iki bölüm arasında sınır değil, geçiş var. */ .duraklar { display: grid; position: relative; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: -34px 16px 0; } .durak { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 12px; border-radius: 16px; background: var(--yuzey); box-shadow: 0 8px 24px var(--golge); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; } .durak:hover { transform: translateY(-2px); box-shadow: 0 12px 28px var(--golge); } .durak-no { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--mavi) 12%, transparent); color: var(--mavi); font-size: 13px; font-weight: 900; } .durak-yazi { display: flex; flex: 1; flex-direction: column; min-width: 0; } .durak-yazi strong { font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; } .durak-yazi small { margin-top: 1px; overflow: hidden; color: var(--soluk); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; } .durak-ok { flex: none; width: 20px; height: 20px; fill: var(--kenar); } /* ── Ana sayfa: bölüm başlığı ────────────────────────────────────── */ .bolum-basligi { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 30px 4px 12px; } .bolum-basligi h2 { margin: 0; font-size: 17px; font-weight: 900; letter-spacing: -.2px; } .yeni-sinav { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--mavi) 12%, transparent); color: var(--mavi); font-size: 13px; font-weight: 800; text-decoration: none; } .yeni-sinav:hover { background: color-mix(in srgb, var(--mavi) 20%, transparent); } .yeni-sinav svg { width: 17px; height: 17px; fill: currentColor; } /* ── Ana sayfa: sınav kartları ───────────────────────────────────── */ .sinavlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 12px; } .sinav-karti { display: flex; flex-direction: column; padding: 14px 15px 13px; border: 1px solid var(--kenar); border-radius: 16px; background: var(--yuzey); } /* Okumaya hazır sınav çerçevesinden belli oluyor: sayfadaki tek dolu düğme de onun içinde. */ .sinav-karti.one-cikan { border-color: color-mix(in srgb, var(--mavi) 45%, transparent); } .sinav-karti header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .sinav-karti h3 { margin: 0; overflow: hidden; font-size: 15px; font-weight: 800; letter-spacing: -.2px; text-overflow: ellipsis; white-space: nowrap; } .sinav-karti time { flex: none; color: var(--soluk); font-size: 11.5px; } .alt-bilgi { margin: 4px 0 0; overflow: hidden; color: var(--soluk); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } /* ── Aşama şeridi: Optik → Anahtar → Okuma ───────────────────────── */ .asama-seridi { display: flex; align-items: center; margin: 13px 0; } .asama { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; } .asama-nokta { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 50%; } .asama-nokta svg { width: 9px; height: 9px; fill: #fff; } .asama.tamam { color: var(--tamam); } .asama.tamam .asama-nokta { background: var(--tamam); } .asama.sirada { color: var(--bekleyen); } /* Sıradaki adımın halkası: gözün ilk gittiği yer olsun diye. */ .asama.sirada .asama-nokta { box-shadow: 0 0 0 3px var(--bekleyen-halka); } .asama.bekleyen { color: var(--bos); } .asama-cizgi { flex: 1; height: 1.5px; margin: 0 8px; border-radius: 1px; background: var(--kenar); } .asama-cizgi.tamam { background: color-mix(in srgb, var(--tamam) 55%, transparent); } /* ── Düğmeler ────────────────────────────────────────────────────── */ .dugme-dolu, .dugme-soluk { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: auto; padding: 11px 16px; border-radius: 12px; font-size: 13px; font-weight: 800; text-decoration: none; } .dugme-dolu svg, .dugme-soluk svg { width: 16px; height: 16px; fill: currentColor; } .dugme-dolu { background: var(--mavi); color: #fff; } .dugme-dolu:hover { filter: brightness(.94); } .dugme-soluk { background: color-mix(in srgb, var(--mavi) 10%, transparent); color: var(--mavi); } .dugme-soluk:hover { background: color-mix(in srgb, var(--mavi) 18%, transparent); } .dugme-cizgili { display: inline-flex; align-items: center; padding: 9px 18px; border: 1px solid color-mix(in srgb, var(--mavi) 45%, transparent); border-radius: 999px; color: var(--mavi); font-size: 13.5px; font-weight: 700; text-decoration: none; } .dugme-cizgili:hover { background: color-mix(in srgb, var(--mavi) 10%, transparent); } /* ── Boş liste ve uyarı ──────────────────────────────────────────── */ .bos-liste { padding: 30px 22px; border: 1px solid var(--kenar); border-radius: 18px; background: var(--yuzey); text-align: center; } .bos-liste svg { width: 30px; height: 30px; fill: var(--mavi); } .bos-liste p { margin: 8px 0 14px; font-weight: 800; } .uyari { margin: 0; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--bekleyen) 45%, transparent); border-radius: 14px; background: var(--bekleyen-halka); color: var(--yazi); font-size: 13.5px; } /* ── Hazırlanacak bölüm sayfası ──────────────────────────────────── */ .hazirlanacak { max-width: 560px; margin: 40px auto; padding: 34px 30px; border: 1px solid var(--kenar); border-radius: 20px; background: var(--yuzey); text-align: center; } .hazirlanacak h1 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.3px; } .hazirlanacak .aciklama { margin: 10px 0 20px; color: var(--soluk); line-height: 1.6; } .hazirlanacak .rozet { display: inline-block; margin: 0; padding: 7px 15px; border-radius: 999px; background: var(--bekleyen-halka); color: var(--bekleyen); font-size: 12.5px; font-weight: 800; } .hazirlanacak .yonlendirme { margin: 20px 0 0; color: var(--silik); font-size: 13.5px; } .hazirlanacak .yonlendirme a { color: var(--mavi); font-weight: 700; } /* ── Şablon başlangıç yolları ─────────────────────────────────────── */ .hazir-katalog { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); } .hazir-kart { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: center; padding: 20px; background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 18px; box-shadow: 0 8px 24px var(--golge); } .hazir-kart .dugme-dolu { grid-column: 1 / -1; justify-content: center; text-decoration: none; } .hazir-bilgi h2 { margin: 0 0 5px; font-size: 18px; } .hazir-bilgi p { margin: 0; color: var(--silik); font-size: 13px; } .hazir-bilgi ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; } .hazir-bilgi li { padding: 4px 8px; border-radius: 999px; background: var(--yuzey-soluk); color: var(--silik); font-size: 11px; font-weight: 700; } .hazir-onizleme { width: 76px; height: 108px; padding: 10px 8px; background: white; border: 1px solid #ccd2df; border-radius: 6px; box-shadow: 0 5px 16px rgba(20, 35, 75, .12); } .hazir-onizleme span { display: block; height: 9px; margin-bottom: 7px; background: radial-gradient(circle, #22315f 1.2px, transparent 1.5px) 0 0 / 8px 8px; } .sihirbaz-formu { display: grid; gap: 14px; } .sihirbaz-adim { display: grid; grid-template-columns: 42px minmax(190px, 1fr) repeat(2, minmax(110px, 180px)); gap: 16px; align-items: center; padding: 18px; border: 1px solid var(--kenar); border-radius: 16px; background: var(--yuzey); } .sihirbaz-adim h2 { margin: 0 0 3px; font-size: 16px; } .sihirbaz-adim p { margin: 0; color: var(--silik); font-size: 12px; } .sihirbaz-adim label, .kodla-al label { display: grid; gap: 5px; color: var(--silik); font-size: 12px; font-weight: 700; } .sihirbaz-adim input[type="number"], .sihirbaz-adim select, .kodla-al input { min-height: 42px; padding: 8px 10px; color: var(--yazi); background: var(--zemin); border: 1px solid var(--kenar); border-radius: 10px; } .adim-no { display: grid; place-items: center; width: 36px; height: 36px; color: white; background: var(--mavi); border-radius: 12px; font-weight: 900; } .sihirbaz-sec { display: flex !important; align-items: center; gap: 8px !important; color: var(--yazi) !important; } .sihirbaz-adim.son { grid-template-columns: 42px 1fr auto; } .kodla-al { max-width: 560px; margin: 32px auto; padding: 30px; text-align: center; background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 20px; box-shadow: 0 8px 24px var(--golge); } .kodla-al > p { color: var(--silik); line-height: 1.55; } .kodla-al form { display: grid; gap: 14px; margin-top: 24px; text-align: left; } .kodla-al input { text-align: center; text-transform: uppercase; letter-spacing: .18em; font-size: 19px; font-weight: 900; } .kod-simge { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; color: var(--mavi); background: color-mix(in srgb, var(--mavi) 12%, transparent); border-radius: 16px; font-size: 26px; font-weight: 900; } @media (max-width: 760px) { .sihirbaz-adim, .sihirbaz-adim.son { grid-template-columns: 42px 1fr; } .sihirbaz-adim > label, .sihirbaz-adim > button { grid-column: 2; } } /* ── Yardım ve Destek ─────────────────────────────────────────────── */ .destek-sayfa{display:grid;gap:18px;max-width:920px;margin:0 auto}.destek-obek,.destek-detay-baslik,.destek-form{padding:22px;background:var(--yuzey);border:1px solid var(--kenar);border-radius:18px;box-shadow:0 8px 24px var(--golge)} .destek-obek h2,.destek-detay-baslik h2{margin:0 0 10px}.destek-arama input,.destek-form input,.destek-form select,.destek-form textarea,.destek-dialog textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--kenar);border-radius:11px;background:var(--zemin);color:var(--metin);font:inherit}.faq-liste{display:grid;gap:8px;margin-top:14px}.faq{border:1px solid var(--kenar);border-radius:12px;padding:0 14px;background:var(--zemin)}.faq summary{padding:14px 0;font-weight:750;cursor:pointer}.faq p{white-space:pre-line;line-height:1.55;color:var(--soluk)}.faq a{display:inline-block;margin:0 0 14px;color:var(--mavi);font-weight:700} .destek-talep-baslik{display:flex;align-items:center;justify-content:space-between;gap:16px}.dugme-dolu.pasif{opacity:.5;pointer-events:none}.destek-talep-listesi{display:grid;gap:10px}.destek-talep-karti{display:flex;justify-content:space-between;gap:18px;padding:17px;background:var(--yuzey);border:1px solid var(--kenar);border-radius:15px;color:var(--metin);text-decoration:none}.destek-talep-karti:hover{border-color:var(--mavi)}.destek-talep-karti h3{margin:9px 0 5px}.destek-talep-karti p,.destek-talep-karti time{margin:0;color:var(--soluk);font-size:.82rem}.destek-rozet,.destek-yeni{display:inline-block;padding:4px 8px;border-radius:99px;font-size:.72rem;font-weight:800}.destek-rozet{background:color-mix(in srgb,var(--mavi) 14%,transparent);color:var(--mavi)}.durum-answered{background:#e7f7ef;color:#148254}.durum-resolved,.durum-closed{background:var(--zemin);color:var(--soluk)}.destek-yeni{background:#fff0d6;color:#9b5b00} .destek-form{display:grid;gap:18px}.destek-form label{display:grid;gap:7px;font-weight:750}.destek-form small{color:var(--soluk);font-weight:400}.destek-baglam,.destek-bilgi{padding:13px;border-radius:12px;background:var(--zemin);color:var(--soluk)}.destek-baglam p{margin:5px 0 0}.destek-onizlemeler{display:flex;gap:8px;flex-wrap:wrap}.destek-onizlemeler img{width:96px;height:72px;object-fit:cover;border-radius:9px;border:1px solid var(--kenar)} .geri{color:var(--mavi);font-weight:750;text-decoration:none}.destek-kategori{margin-left:8px;color:var(--soluk);font-size:.8rem;font-weight:700}.destek-detay-baslik>div>p{color:var(--soluk)}.destek-detay-baslik details{margin-top:14px}.destek-detay-baslik dl div{display:grid;grid-template-columns:140px 1fr;gap:10px}.destek-detay-baslik dt{color:var(--soluk)}.destek-detay-baslik dd{margin:0;overflow-wrap:anywhere}.destek-yazisma{display:grid;gap:12px}.destek-mesaj{padding:16px;background:var(--yuzey);border:1px solid var(--kenar);border-radius:16px}.destek-mesaj.yonetici{background:color-mix(in srgb,var(--mavi) 8%,var(--yuzey));border-color:color-mix(in srgb,var(--mavi) 35%,var(--kenar))}.destek-mesaj header{display:flex;justify-content:space-between;gap:12px;color:var(--soluk);font-size:.8rem}.destek-mesaj p{white-space:pre-wrap;line-height:1.55}.destek-ekler{display:flex;gap:8px;flex-wrap:wrap}.destek-ekler img{width:150px;height:110px;object-fit:cover;border-radius:10px}.destek-yenile{text-align:center;color:var(--soluk);font-size:.8rem}.destek-eylemler{display:flex;justify-content:flex-end;gap:10px}.destek-eylemler form{margin:0}.destek-cozuldu{background:#148254}.destek-dialog{width:min(560px,calc(100% - 30px));border:1px solid var(--kenar);border-radius:18px;background:var(--yuzey);color:var(--metin)}.destek-dialog::backdrop{background:#101426aa}.destek-dialog form{display:grid;gap:13px}.dialog-kapat{justify-self:end;border:0;background:transparent;color:var(--metin);font-size:1.6rem;cursor:pointer} @media(max-width:640px){.destek-obek,.destek-detay-baslik,.destek-form{padding:16px}.destek-talep-baslik,.destek-talep-karti{align-items:flex-start}.destek-talep-baslik{flex-direction:column}.destek-talep-karti time{white-space:nowrap}.destek-eylemler{display:grid;grid-template-columns:1fr 1fr}.destek-eylemler button{width:100%}.destek-detay-baslik dl div{grid-template-columns:1fr;gap:2px}} .tuval .pdf-arka-plan { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; opacity: .88; } .tuval > .blok, .tuval > .kayit-katmani { position: absolute; z-index: 2; } /* Hareketi rahatsız edici bulan kullanıcı için animasyon yok. */ @media (prefers-reduced-motion: reduce) { .durak, .dugme-dolu { transition: none; } .durak:hover { transform: none; } } /* ════════════════════════════════════════════════════════════════════ ŞABLONLAR Renkli tonlar mobil uygulamadan birebir (`forms_list_screen.dart` başlangıç yolu paletleri ve `eylem_sayfasi.dart` eylem renkleri). Her birinin açık ve koyu tema için ayrı değeri var: açık temada okunan bir ton koyu zeminde kararıyor. DURUM PALETİNDEN AYRI tutuldular. Uygulamada yeşil "tamamlandı", kehribar "bekliyor" demek; bir gezinme satırının o tonları taşıması olmayan bir durum bildirirdi. ════════════════════════════════════════════════════════════════════ */ :root { --mor: #6C4BD6; /* sihirbaz — "kendiliğinden oluyor" hissi */ --gok: #2F6FE0; /* hazır şablonlar — uygulamanın kendi içeriği */ --turkuaz: #0E8F86; /* sıfırdan tasarla; "tamamlandı" yeşilinden uzak */ --kiremit: #C2503A; /* PDF için alışılmış renk */ --erguvan: #A33F86; /* paylaşım kodu — diğerlerinin arasında boş hue */ --lacivert-yumusak: #3B4A7A; --kirmizi: #C24141; } @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { --mor: #A88CF5; --gok: #7FA9F2; --turkuaz: #4FC9BE; --kiremit: #EE8E77; --erguvan: #E99BD4; --lacivert-yumusak: #97A6D8; --kirmizi: #F08E8E; } } :root[data-tema="koyu"] { --mor: #A88CF5; --gok: #7FA9F2; --turkuaz: #4FC9BE; --kiremit: #EE8E77; --erguvan: #E99BD4; --lacivert-yumusak: #97A6D8; --kirmizi: #F08E8E; } /* ── Başlık ve arama ─────────────────────────────────────────────── */ .karsilama-sablon { justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; } .karsilama-sablon h1 { font-size: 22px; } .ara { display: flex; position: relative; align-items: center; flex: 1; min-width: 220px; max-width: 340px; } .ara-simge { position: absolute; left: 12px; width: 18px; height: 18px; fill: rgba(255, 255, 255, .6); pointer-events: none; } .ara input { width: 100%; padding: 10px 38px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 13px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 14px; } .ara input::placeholder { color: rgba(255, 255, 255, .55); } .ara input:focus { outline: none; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .16); } /* Tarayıcının kendi temizleme düğmesi bizimkiyle üst üste binerdi. */ .ara input::-webkit-search-cancel-button { display: none; } .ara-temizle { display: inline-flex; position: absolute; right: 10px; padding: 4px; border-radius: 50%; } .ara-temizle svg { width: 16px; height: 16px; fill: rgba(255, 255, 255, .75); } .ara-temizle:hover { background: rgba(255, 255, 255, .16); } /* ── Başlangıç yolları ───────────────────────────────────────────── */ /* Ana sayfadaki duraklar gibi lacivertin alt kenarına biniyor. */ .yollar { position: relative; margin: -34px 16px 0; padding: 6px; border-radius: 18px; background: var(--yuzey); box-shadow: 0 8px 24px var(--golge); } /* İkisi geniş ekranda yan yana, dar ekranda alt alta. Gruplama korunuyor: üstteki öbek hızlı yollar, alttaki tasarım işi. */ .yol-ikili { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); } .yol-ayirac { height: 1px; margin: 4px 10px; border: 0; background: var(--kenar); } .yol { display: flex; align-items: center; gap: 11px; padding: 12px 10px; border-radius: 13px; text-decoration: none; } .yol:hover { background: var(--yuzey-soluk); } .yol-birincil { padding: 14px 12px; background: var(--mavi); color: #fff; } .yol-birincil:hover { background: var(--mavi); filter: brightness(.94); } .yol-simge { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; /* Renk satırın kendi paletinden; varsayılan mor. */ background: color-mix(in srgb, var(--yol-renk, var(--mor)) 16%, transparent); color: var(--yol-renk, var(--mor)); } .yol-simge svg { width: 19px; height: 19px; fill: currentColor; } /* Birincil satırda zemin zaten mavi; üstüne ikinci bir renk alacalı yapardı. */ .yol-birincil .yol-simge { background: rgba(255, 255, 255, .18); color: #fff; } .yol-hazir { --yol-renk: var(--gok); } .yol-kod { --yol-renk: var(--erguvan); } .yol-sifirdan { --yol-renk: var(--turkuaz); } .yol-pdf { --yol-renk: var(--kiremit); } .yol-yazi { display: flex; flex: 1; flex-direction: column; min-width: 0; } .yol-yazi strong { font-size: 15px; font-weight: 700; letter-spacing: -.2px; } .yol-yazi small { margin-top: 1px; overflow: hidden; color: var(--soluk); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } .yol-birincil .yol-yazi small { color: rgba(255, 255, 255, .72); } .yol-ok { flex: none; width: 20px; height: 20px; fill: var(--kenar); } .yol-birincil .yol-ok { fill: rgba(255, 255, 255, .8); } /* ── Liste başlığındaki sayı ─────────────────────────────────────── */ .bolum-basligi .adet { color: var(--soluk); font-size: 12.5px; } /* ── Şablon kartı ────────────────────────────────────────────────── */ .sablonlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; } .sablon-karti { display: flex; flex-direction: column; padding: 14px 15px 12px; border: 1px solid var(--kenar); border-radius: 17px; background: var(--yuzey); } .sablon-ust { display: flex; gap: 13px; } .sablon-yazi { flex: 1; min-width: 0; } .sablon-yazi h3 { margin: 0 0 4px; overflow: hidden; font-size: 15px; font-weight: 900; letter-spacing: -.2px; text-overflow: ellipsis; white-space: nowrap; } .sablon-yazi h3 a { text-decoration: none; } .sablon-yazi h3 a:hover { text-decoration: underline; } /* ── Künye ───────────────────────────────────────────────────────── */ .kunye { margin: 0; } .kunye > div { display: flex; align-items: baseline; gap: 6px; padding-top: 2px; } .kunye dt { flex: none; /* Sabit genişlik: değerler hizalansın, göz tek dikey çizgide tarasın. En uzun etiket (Sorular) sığıyor. */ width: 52px; color: var(--silik); font-size: 10px; font-weight: 700; } .kunye dd { margin: 0; overflow: hidden; color: var(--soluk); font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } /* ── Şema ────────────────────────────────────────────────────────── */ /* Çerçeve SABİT: bazı kartlarda geometri gelmediğinde liste zıplamasın. */ .sema-kutusu { display: flex; flex: none; align-items: center; justify-content: center; width: 76px; height: 100px; border-radius: 9px; text-decoration: none; } .sema { max-width: 100%; max-height: 100%; height: 100%; width: auto; } .sema-kagit { fill: var(--yuzey); stroke: var(--kenar); stroke-width: 1; } /* Cevap blokları formun kendi rengini alıyor (yoksa marka mavisi); kimlik blokları soluk kalıyor ki göz önce nerede cevap verileceğini bulsun. */ .blok-cevap { fill: var(--form-rengi, var(--mavi)); fill-opacity: .65; } .blok-logo { fill: var(--form-rengi, var(--lacivert)); fill-opacity: .35; } .blok-kimlik { fill: var(--form-rengi, var(--kenar)); fill-opacity: .55; } .blok-bilgi { fill: var(--form-rengi, var(--kenar)); fill-opacity: .4; } /* Sütun bölmeleri: bloğun içini kağıt renginde kesiyor. */ .sema-bosluk { fill: var(--yuzey); } .sema-yok { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 100px; border: 1px solid var(--kenar); border-radius: 6px; background: var(--yuzey-soluk); } .sema-yok svg { width: 26px; height: 26px; fill: var(--bos); } /* ── Kart düğmeleri ──────────────────────────────────────────────── */ .sablon-eylemler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kenar); } .kart-eylem { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border: 1px solid transparent; border-radius: 11px; background: var(--yuzey-soluk); font-size: 12px; font-weight: 700; text-decoration: none; } .kart-eylem svg { width: 15px; height: 15px; flex: none; fill: currentColor; } .kart-eylem:hover { border-color: var(--kenar); } .kart-eylem.vurgulu { background: color-mix(in srgb, var(--mavi) 10%, transparent); color: var(--mavi); } .kart-eylem.vurgulu:hover { border-color: transparent; background: color-mix(in srgb, var(--mavi) 18%, transparent); } /* ── Şablon sayfası ──────────────────────────────────────────────── */ .geri { margin: 0 0 14px; font-size: 13.5px; font-weight: 700; } .geri a { color: var(--mavi); text-decoration: none; } .geri a:hover { text-decoration: underline; } .sablon-sayfasi { padding: 22px 24px 24px; border: 1px solid var(--kenar); border-radius: 20px; background: var(--yuzey); } .sablon-sayfasi h1 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.3px; } .sablon-sayfasi .guncelleme { margin: 4px 0 18px; color: var(--soluk); font-size: 12.5px; } .sablon-sayfasi-govde { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 26px; align-items: start; } @media (max-width: 720px) { .sablon-sayfasi-govde { grid-template-columns: 1fr; } } .sema-buyuk { text-align: center; } .sema-buyuk .sema { width: 100%; height: auto; max-height: 420px; } .sema-buyuk .sema-yok { width: 100%; height: 200px; } .sema-not { margin: 10px 0 0; color: var(--silik); font-size: 12px; line-height: 1.5; } .sablon-sayfasi-yazi .kunye { margin-bottom: 22px; } .sablon-sayfasi-yazi .kunye dt { width: 62px; font-size: 11px; } .sablon-sayfasi-yazi .kunye dd { font-size: 13px; white-space: normal; } .sablon-sayfasi-yazi h2 { margin: 0 0 10px; font-size: 15px; font-weight: 900; letter-spacing: -.2px; } .islemler { margin: 0; padding: 0; list-style: none; } /* Satırın kendisi TIKLANABİLİR ögenin ta kendisi: eylem bir