:root { --gold: #9c783c; --gold-dark: #7e5f2c; --gold-light: #b8945a; --bg: #faf9f6; --ink: #2b2620; --muted: #756e5e; --card: #ffffff; --line: #e8e4db; --var: #2f9e54; --yok: #d14343; --izinli: #d18a2a; --turkuaz: #00a3bf; --turkuaz-dark: #007e94; --turkuaz-bg: #dff3f7; /* Sezon Merceği (v1) — geçmiş-sezon amber paleti (mock sezon-wheel-hepsi.html ile birebir). */ --sezon-amber: #b8860b; --sezon-amber-bg: #fdf3d7; --sezon-amber-line: #e6c200; --sezon-amber-ink: #7a5c00; --shadow: 0 1px 3px rgba(0,0,0,.06); --shadow-hover: 0 2px 6px rgba(0,0,0,.07), 0 8px 20px rgba(0,0,0,.08); --hdr-gap: 9px; /* header kenar ritmi: menü↔logo = pil↔avatar (tek token) */ --radius: 14px; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } [hidden] { display: none !important; } /* hidden özniteliği her CSS display kuralını yener */ /* dvh desteklemeyen tarayıcı için vh satırı önce gelir (fallback). */ html, body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-size: 15px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* PWA-hissi: dokununca metin seçimi + iOS/Android "Google'da ara" balonu çıkmasın. Girdi alanları + düzenlenebilir/işaretli metin aşağıda geri açılır. */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Metin seçimi GEREKEN yerler: form girdileri + inline düzenleme + açıkça işaretli metin. */ input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* .secilebilir (çoklu-seçim satırları — Talebeler/Dersler/Başvurular/Sohbet Yönetimi, secimModu.satirBagla) BİLEREK yukarıdaki istisnaya dahil DEĞİL: eskiden dahildi (14.07 öncesi) → uzun-basış (seçim modunu açan jest) tarayıcı metin-seçimini de tetikliyordu, satır işaretlenemez hale geliyordu. Body varsayılanı (yukarıda user-select:none) zaten yeterli; burada TEKRAR none yazmak yalnız belge-amaçlı (istisnaya asla girmesin diye kasıtlı hariç tutulduğu iz bıraksın) — kaldırılırsa body varsayılanı yine korur. */ .secilebilir { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* Açılış (splash) */ .splash { position: fixed; inset: 0; z-index: 100; background: #fff; display: grid; place-items: center; transition: opacity .5s ease; } .splash-img { width: 100%; height: 100%; object-fit: cover; } .splash.hide { opacity: 0; pointer-events: none; } /* madde 5: splash'e dokununca HEMEN kapansın — fade kısa kesilir (platform-geneli). */ .splash.hizli-kapan { transition-duration: .14s; } /* Splash-flash önleyici (index.html inline script'i "splash-gecildi" sınıfını erkenden koyar, sessionStorage guard zaten dolu ise) — İLK BOYAMADAN önce splash'i tamamen devre dışı bırakır, app.js'in yüklenip hideSplash()'ı çalıştırmasını beklemez. */ html.splash-gecildi #splash { display: none; } /* Marka görselleri (splash/logo) — kaydedilmek için değil, OS uzun-bas menüsü kapalı. */ .splash-img, .brand-logo, .login-logo, .mutteka-app-ikon-foto img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* touch-callout iOS-only; Android'de resim uzun-bas "kaydet" menüsünü kapatmak için logo img'i tıklama-hedefinden çıkar → uzun-bas sarmalayan .app-logo butonuna düşer (buton "resmi kaydet" sunmaz), buton tıklaması etkilenmez (img dekoratif). */ .app-logo .brand-logo { pointer-events: none; } /* Üst bar — beyaz, altın logo + wordmark */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 8px) 16px 8px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(40,30,10,.02), 0 2px 10px rgba(40,30,10,.03); } /* Ortak header — 3 küme: [☰ logo] · başlık · [pil avatar]. Kenar ritmi SİMETRİK: menü↔logo aralığı = pil↔avatar aralığı (ikisi de --hdr-gap → birlikte değişir). */ .hdr-left { display: flex; align-items: center; gap: var(--hdr-gap); flex: none; } .hdr-right { display: flex; align-items: center; gap: var(--hdr-gap); flex: none; } .hdr-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; } /* Sol-üst KARE logo (app kimliği; tap→platform evi). Yuvarlak DEĞİL — avatar yuvarlak. */ .app-logo { border: none; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; flex: none; } .app-logo .brand-logo { width: 32px; height: 32px; display: block; border-radius: 7px; object-fit: contain; } .app-logo:active { transform: scale(.94); } .app-logo-pasif { cursor: default; } .app-logo-pasif:active { transform: none; } .brand-logo { width: 32px; height: 32px; display: block; } .brand-text { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: .01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-sub { color: var(--ink); font-weight: 700; } /* Platform evi başlığı — 2 satır (Müttekâ + Uygulamalar), mevcut ev-başlık diliyle. */ .brand-text.hdr-ev { display: flex; flex-direction: column; line-height: 1.12; font-size: 17px; white-space: normal; } .brand-text.hdr-ev .hdr-alt { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; } /* Yuvarlak avatar (kişi fotoğrafı / baş-harf) → platform menüsü (SAĞ) */ .avatar-btn { border: none; background: none; padding: 0; cursor: pointer; flex: none; display: grid; place-items: center; } .avatar-btn:active { transform: scale(.94); } .avatar-btn:focus-visible { outline: 2px solid var(--turkuaz); outline-offset: 2px; border-radius: 50%; } /* .avatar (kişi avatarı) tabanı .avatar-yuvarlak'tan SONRA tanımlı — aynı özgüllükte kaynak-sırası kazanır, o yüzden burada BİLEŞİK seçici (.avatar.avatar-yuvarlak) kullanılır: özgüllüğü kasıtlı yükseltip .avatar'ın border-radius'unu ezer (aksi halde köşeli görünürdü). Boyut header logosuyla AYNI (--hdr-gap kompakt ritmi). */ .avatar.avatar-yuvarlak { width: 32px; height: 32px; border-radius: 50%; font-size: 12px; } .avatar.avatar-yuvarlak .avatar-img { border-radius: 50%; } .pill { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #f2ede2; color: var(--gold-dark); } /* İçerik */ .app { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; scrollbar-gutter: stable; display: flex; flex-direction: column; } /* Tek kolon mantığı: başlık + içerik AYNI ortalanmış kolonda akar. Genişlik kademesi ekrana göre (JS data-kolon): dar 640 · orta 760 · geniş 920. */ .app > * { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; flex: none; } .app[data-kolon="orta"] > * { max-width: 760px; } .app[data-kolon="genis"] > * { max-width: 920px; } .section-title { font-size: 12px; font-weight: 600; color: #625b4c; text-transform: uppercase; letter-spacing: .09em; margin: 8px auto 12px; padding: 0 6px; } .sayac { color: var(--turkuaz-dark); font-weight: 600; font-variant-numeric: tabular-nums; } .hoca-ekle-eylem { display: flex; gap: 16px; flex-wrap: wrap; margin: -6px 2px 8px; } .hoca-ekle-eylem button { background: none; border: none; padding: 2px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--turkuaz-dark); cursor: pointer; } .hoca-ekle-eylem button:active { opacity: .6; } /* STANDART zengin seçici (modal-picker) — merkez/branş/hoca/talebe */ .sec-satir.sec-zengin { display: flex; align-items: center; gap: 11px; } .sec-zengin .sec-metin { min-width: 0; flex: 1; } .sec-zengin .sec-ad { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sec-zengin .sec-alt2 { font-size: 12px; color: var(--turkuaz-dark); opacity: .72; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sec-eylem { border-top: 1px solid #e6ecec; } .sec-eylem .sec-ad { color: var(--turkuaz-dark); font-weight: 600; } .sec-eylem:active { background: var(--turkuaz-bg); } .avatar.avatar-ikon { background: var(--turkuaz-bg); color: var(--turkuaz-dark); } .avatar-ikon .bik { width: 26px; height: 26px; } .avatar-ikon > svg { width: 26px; height: 26px; display: block; } /* Duyuru avatarı: megafon ikonu (altın zemin) */ .avatar.avatar-duyuru { background: var(--gold); color: #fff; } .avatar-duyuru > svg { width: 22px; height: 22px; display: block; } .thread-avatar.avatar-duyuru > svg { width: 20px; height: 20px; } /* Form içi picker-buton (native select yerine) */ button.secici-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; } button.secici-btn.secici-bos .secici-label { color: #93a3a3; } .secici-ok { color: var(--turkuaz-dark); flex: 0 0 auto; font-weight: 700; } /* Arama input'ları type=search: mobilde şifre/kart/adres autofill'i kapatır; iOS oval görünümünü normalize et */ .ekle-input[type="search"] { -webkit-appearance: none; appearance: none; } .ekle-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; } .ders { display: flex; align-items: center; gap: 13px; padding: 14px 16px; cursor: pointer; transition: background .15s; } .ders + .ders { border-top: 1px solid #f1eee7; } .ders:active { background: rgba(0,163,191,.12); } @media (hover: hover) { .ders:hover { background: rgba(0,163,191,.05); } } .ders-icon { position: relative; overflow: hidden; /* ders fotoğrafı (.avatar-img inset:0) barınabilsin */ width: 40px; height: 40px; border-radius: 11px; flex: none; background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: #fff; display: grid; place-items: center; font-size: 17px; font-weight: 700; } .ders-icon svg { width: 22px; height: 22px; } .ders-body { flex: 1; min-width: 0; } .ders-title { font-weight: 700; font-size: 15px; } .ders-sub { font-size: 13px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; } .ders-chev { color: #a59c89; font-size: 22px; } /* Yoklama */ .backbar { display: flex; align-items: center; gap: 8px; margin: 0 auto 14px; } .hdr { padding: 2px 4px 14px; } .hdr h1 { font-size: 22px; font-weight: 700; margin: 0; } .hdr p { margin: 4px 0 0; color: var(--muted); font-size: 14px; } /* Ders detay başlığı: 54px ders avatarı + başlık yan yana */ .hdr-dersli { display: flex; align-items: center; gap: 12px; } .talebe { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .talebe:last-child { border-bottom: none; } /* Detay kapak (hero) görseli: içerik kolonu genişliğinde, kart diliyle uyumlu çerçeve. img yüklenince JS ekler; blok yoksa sayfa bugünkü gibi akar. */ .hero-foto { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .hero-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; } /* Kişi/ders/branş/merkez kapak görseli kaydedilmek İÇİN değil → OS uzun-bas callout'u bastır (body zaten none ama position:absolute/mutlak-boyutlu img'lerde iOS'ta tutarsız kalabiliyor — .msg-resim/.avatar-img idiyomuyla aynı savunma). İSTİSNA: başvuru fotoğrafı (heroYukle tamEkran:true) BİLEREK bu sınıfı almaz — native kaydet/paylaş orada kasıtlı açık (bkz. app.js heroYukle). */ .hero-kilitli img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Kişi avatarları: tam kare, keskin köşeli — baş harfli ve fotoğraflı hali aynı. */ .avatar { position: relative; overflow: hidden; width: 54px; height: 54px; border-radius: 3px; flex: none; background: linear-gradient(135deg, #f6f0e3, #ecdfc6); color: var(--gold-dark); display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: .02em; } /* Kişi resmi baş harflerin üzerine biner; yüklenemezse harfler görünür kalır */ .avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; } /* Avatar'lar (liste satırı/baloncuk gönderen/üye listesi/kişi hero/picker — TÜM render'lar resimBindir tek noktasından geçer) OS uzun-bas resim menüsünü/callout'unu göstermesin (medya baloncuğu .msg-resim/.msg-video/.msg-belge ile aynı idiyom, bkz. 725e3d4). draggable=false + contextmenu preventDefault → app.js resimBindir. */ .avatar, .avatar-img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .talebe-name { flex: 1; font-size: 15px; } .states { display: flex; gap: 6px; } .state { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 7px 11px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; min-width: 42px; } .state[data-on="var"] { background: var(--var); border-color: var(--var); color: #fff; } .state[data-on="yok"] { background: var(--yok); border-color: var(--yok); color: #fff; } .state[data-on="izinli"] { background: var(--izinli); border-color: var(--izinli); color: #fff; } .savebar { position: sticky; bottom: 0; margin-top: auto; padding: 12px 0 calc(env(safe-area-inset-bottom) + 12px); } .save { width: 100%; padding: 14px; border: none; border-radius: 12px; background: var(--gold); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); } .save:active { background: var(--gold-dark); } .saved-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: rgba(43, 38, 32, .82); color: #fff; padding: 10px 18px; border-radius: 22px; font-size: 14px; white-space: normal; width: max-content; max-width: min(92vw, 520px); text-align: center; line-height: 1.45; opacity: 0; transition: opacity .2s; pointer-events: none; backdrop-filter: blur(3px); } .saved-toast.show { opacity: 1; } .saved-toast.tiklanir { pointer-events: auto; cursor: pointer; border: 1px solid var(--turkuaz); box-shadow: 0 4px 16px rgba(0,0,0,.22); } .footnote { text-align: center; color: var(--muted); font-size: 12px; padding: 14px; } /* Üst bar sağı: bağlantı pill'i + oturum alanı */ .topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; } .user { display: flex; align-items: center; gap: 6px; min-width: 0; } .user-name { font-size: 13px; font-weight: 600; color: var(--ink); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Rol rozetleri */ .rol { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #f2ede2; color: var(--gold-dark); white-space: nowrap; } .rol-admin { background: var(--gold); color: #fff; } .rol-idareci { background: var(--ink); color: #fff; } /* Sohbet üye-listesi rol çipleri (UYE_ROL_AD): Yönetici=soft-turkuaz, Hoca=soft-altın (moderator çipiyle aynı idiom; solid-altın admin ve solid-siyah idareci'den ayrışır). */ .rol-hoca { background: #f6ecd2; color: var(--gold-dark); } /* Mümessil (14.07): soft-lavanta — turkuaz(moderator)/altın(hoca)/yeşil(--var) ile çakışmayan ayrı ton; üye-listesi rozet ailesinde dördüncü, en zayıf-vurgulu bant (uye çipsiz kalır). */ .rol-mumessil { background: #ece3f7; color: #6a4a9e; } /* Çıkış düğmesi */ .cikis { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; } .cikis:active { background: #faf7f0; color: var(--gold-dark); } /* Giriş / yetkisiz / yapılandırma ekranı kartı */ .login-wrap { display: grid; place-items: center; min-height: 60vh; min-height: 60dvh; padding: 16px 0; } .login-card { width: 100%; max-width: 340px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 32px 24px 28px; } .login-logo { width: 56px; height: 56px; margin-bottom: 12px; } .login-title { margin: 0 0 18px; font-size: 24px; font-weight: 700; color: var(--gold); letter-spacing: .01em; } .login-sub { margin: 6px 0 22px; color: var(--muted); font-size: 14px; line-height: 1.5; } .login-btn { width: 100%; padding: 13px; border: none; border-radius: 12px; background: var(--gold); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); } .login-btn:active { background: var(--gold-dark); } .login-btn-out { background: #fff; color: var(--gold-dark); border: 1px solid var(--line); box-shadow: none; } .login-err { margin: 14px 0 0; color: var(--yok); font-size: 13px; } /* Giriş: ASIL = OAuth butonları (üstte, baskın); İKİNCİL = magic-link (altta, küçük). */ .login-oauth { display: flex; flex-direction: column; gap: 10px; } /* İç yönlendirme (uygulama içi/aynı-site) — iOS uzun-bas önizleme kartı KAPALI; dış bağlantılar (sohbet .msg-link/.paylas-link) kasıtlı DOKUNULMADI, önizleme orada faydalı (bkz. görev notu). */ .login-btn-link { display: block; text-align: center; text-decoration: none; margin-bottom: 10px; -webkit-touch-callout: none; } .login-yardim { margin: 6px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; } .login-magic-ac { margin-top: 16px; background: none; border: none; color: var(--gold-dark); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 4px; } .login-magic { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .login-magic-input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; background: #fff; color: var(--ink); } .login-magic-gonder { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--gold-dark); font-size: 14px; font-weight: 600; cursor: pointer; } .login-magic-gonder:active { background: #faf7f0; } .login-magic-ok { margin: 14px 0 0; color: var(--var); font-size: 13px; line-height: 1.5; } /* ── OTP-kilit ekranı (F3, no-logout): tam-ekran overlay, tüm UI'ı bloke eder ── */ .otp-kilit-overlay { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: grid; place-items: center; padding: 20px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; } .otp-kilit-card { width: 100%; max-width: 360px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 28px 24px 22px; } .otp-kilit-ikon { width: 48px; height: 48px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 14px; background: #f2ede2; color: var(--gold-dark); } .otp-kilit-ikon svg { width: 26px; height: 26px; } .otp-kilit-baslik { margin: 0; font-size: 21px; font-weight: 700; color: var(--gold); letter-spacing: .01em; } .otp-kilit-aciklama { margin: 8px 0 14px; color: var(--muted); font-size: 14px; line-height: 1.55; } .otp-kilit-numara { margin: 0 0 16px; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .04em; font-variant-numeric: tabular-nums; } .otp-kilit-alan { text-align: left; margin-bottom: 12px; } .otp-kilit-alan label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; } .otp-kilit-tel { width: 100%; } .otp-kilit-gonder { width: 100%; } .otp-kilit-gonder:disabled { opacity: .55; cursor: default; } .otp-kilit-kod-satir { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .otp-kilit-kod { width: 100%; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: .35em; font-variant-numeric: tabular-nums; } .otp-kilit-dogrula { width: 100%; } .otp-kilit-err { margin: 12px 0 0; color: var(--yok); font-size: 13px; line-height: 1.5; } .otp-kilit-cikis { margin-top: 18px; background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 4px; } body.otp-kilitli { overflow: hidden; } /* Kişi kartı — OTP doğrulama yönetimi (governance butonları) */ .otp-gov-kart { padding: 14px 16px; } .otp-gov-baslik { margin-bottom: 10px; font-weight: 700; color: var(--ink); } .otp-gov-btns { display: flex; flex-wrap: wrap; gap: 8px; } /* ── Grup hesap portalı (SPEC §14 — talebe/kişi self-servis, C1 salt-okuma) ── Hesap bilgisi (isim+eposta+çıkış) sol panelde/canvas'ta DEĞİL — kimlik/sürüm/ çıkış yalnız SAĞ platform menüsünde (avatar → platformMenuAc, bkz app.js). */ .portal-ipucu { color: var(--muted); font-size: 13.5px; margin: 0 4px 12px; line-height: 1.5; } .portal-ders { padding: 4px 0 6px; margin-bottom: 14px; } .portal-ders-hdr { padding: 12px 14px 6px; } .portal-ders-hdr h1 { margin: 0; font-size: 17px; } .portal-ders-hdr p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; } /* Portal dersler picker: tıklanır kart (yoklamalar iç ekranda) */ .portal-ders-sec { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; } .portal-ders-sec:active { background: var(--turkuaz-bg); } .portal-ders-bilgi { flex: 1; min-width: 0; } .portal-ders-ozet { margin-top: 4px !important; color: var(--turkuaz-dark) !important; font-size: 12.5px !important; font-weight: 600; } .portal-ders-hdr .ders-chev { flex: none; align-self: center; } .portal-ders-sohbet { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 28px); margin: 4px 14px 8px; } .portal-yoklama { border-top: 1px solid var(--line); margin-top: 8px; } .portal-oturum { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); } .portal-oturum:last-child { border-bottom: none; } .portal-oturum-tarih { font-size: 14px; } .portal-oturum-bos { padding: 10px 14px; color: var(--muted); font-size: 13px; } /* Salt-okuma durum rozeti: yoklama chip'inin tıklanmaz hâli. */ .portal-oturum .state { cursor: default; } .portal-oturum .state.portal-bos { color: var(--muted); min-width: 42px; text-align: center; } /* Dar ekranda isim yerine sadece rozetler */ @media (max-width: 430px) { .user-name { display: none; } } /* Gezinme: PC'de sol panel, mobilde alt tab bar (girişten sonra görünür) */ .nav-item { border: none; background: none; color: var(--muted); font-weight: 600; cursor: pointer; font-family: inherit; } .nav-ikon { display: grid; place-items: center; } .nav-ikon svg { width: 20px; height: 20px; } /* Buton içi satır-hizalı ikon: metinle aynı yükseklik, currentColor (ağırbaşlı, tek renk) */ .bik { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; } .bik svg { width: 100%; height: 100%; display: block; } .nav-ad { font-size: 13px; } /* Sohbetler tab okunmamış rozeti: ikonun sağ-üstünde turkuaz nokta (chat kimliğiyle aynı dil), beyaz halka ile hem beyaz hem aktif-turkuaz tab üstünde görünür. */ .nav-item.nav-okunmamis .nav-ikon { position: relative; } .nav-item.nav-okunmamis .nav-ikon::after { content: ""; position: absolute; top: -3px; right: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--turkuaz); box-shadow: 0 0 0 2px #fff; } .nav-item.nav-okunmamis[data-on] .nav-ikon::after { background: #fff; box-shadow: 0 0 0 2px var(--turkuaz); } @media (min-width: 720px) { .nav { position: fixed; left: 0; top: 58px; bottom: 0; width: 188px; z-index: 20; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; background: #fff; border-right: 1px solid var(--line); } .nav-item { display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 14px; border-radius: 10px; font-size: 14px; border-left: 3px solid transparent; transition: background .15s, color .15s; } .nav-item:hover { background: var(--turkuaz-bg); color: var(--turkuaz-dark); } .nav-item[data-on] { background: var(--turkuaz-bg); color: var(--turkuaz-dark); border-left-color: var(--turkuaz); } body.has-nav .app, body.has-nav .footnote { margin-left: 188px; } body.has-nav .topbar .user { display: none; } /* hesap panelde — üst bar sade */ } @media (max-width: 719.9px) { .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around; align-items: stretch; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px 10px; margin: 0; border-radius: 0; } .nav-item[data-on] { color: #fff; background: var(--turkuaz); } .nav-ad { font-size: 12px; font-weight: 600; letter-spacing: .01em; } .topbar .user { display: none; } /* hesap ☰ menünün altında */ body.has-nav .footnote { display: none; } /* Mobilde scrollbar görünmez (dokunmatik kaydırma yeter) */ .app { scrollbar-gutter: auto; scrollbar-width: none; } .app::-webkit-scrollbar { display: none; } /* Nav'ın ayak izini body'nin flex kutusunda REZERVE et (box-sizing:border-box): .app (flex:1) tam nav'ın üstünde biter → içerik nav'ın ardına HİÇ girmez. Saf layout — iOS'un iç-scroll padding tuhaflığına güvenmez. 62px = nav içerik yüksekliği (bizim CSS'imiz, cihazdan bağımsız); safe-area env ile eklenir. */ body.has-nav { padding-bottom: calc(env(safe-area-inset-bottom) + 62px); } body.has-nav .savebar { bottom: 0; } body.has-nav .footnote { padding-bottom: 72px; } } /* İç sayfa: sessiz (ghost) geri butonu + büyük başlık */ .back { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px 8px 11px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; } @media (hover: hover) { .back:hover { border-color: var(--turkuaz); color: var(--turkuaz-dark); } } .back:active { background: var(--turkuaz-bg); color: var(--turkuaz-dark); } /* Ders detayı aksiyonları: simge çubuğu (Sohbet/Yoklama/Düzenle/Foto/İstatistik) + ayrı bir satırda metin butonları (Klonla/Oturumlar) — saha geri bildirimi 18.07 gece, "çorbaya dönmüş" buton yığınının yerine geçti (bkz. renderDersDetay). */ .detay-aksiyon { display: flex; flex-direction: column; gap: 10px; margin: 0 auto 6px; } .btn-birincil { flex: 1; border: none; border-radius: 12px; padding: 13px; background: var(--gold); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); font-family: inherit; } .btn-birincil:active { background: var(--gold-dark); } .btn-ghost { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; } @media (hover: hover) { .btn-ghost:hover { border-color: var(--turkuaz); color: var(--turkuaz-dark); } } .btn-ghost:active { background: var(--turkuaz-bg); color: var(--turkuaz-dark); } /* Simge çubuğu: tek kompakt yatay sıra, ~44px dokunma hedefi (Sohbet/Yoklama/Düzenle/ Foto/İstatistik) — .btn-ghost ile AYNI görsel dil (çizgi kenar, turkuaz hover/active). */ .aksiyon-simge-cubuk { display: flex; flex-wrap: wrap; gap: 8px; } .simge-btn { flex: none; width: 59px; height: 59px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer; font-family: inherit; } .simge-btn .bik { width: 27px; height: 27px; } @media (hover: hover) { .simge-btn:hover { border-color: var(--turkuaz); color: var(--turkuaz-dark); } } .simge-btn:active { background: var(--turkuaz-bg); color: var(--turkuaz-dark); } .simge-btn:disabled { opacity: .5; cursor: default; } /* Devret/Klonla/Oturumlar gibi kalan METİN butonları — düzenli ayrı satır. */ .aksiyon-metin-satir { display: flex; flex-wrap: wrap; gap: 10px; } /* Ders detay meta satırındaki hoca bağlantısı — iç yönlendirme (#/kisi/…), iOS uzun-bas önizleme kartı KAPALI (dış linkler .login-btn-link ile aynı gerekçe). */ .hoca-link { color: var(--turkuaz-dark); text-decoration: underline; text-underline-offset: 2px; -webkit-touch-callout: none; } .hoca-link:active { color: var(--turkuaz); } /* İstatistik: oran çubuğu + yüzde rozeti */ .bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--line); margin-top: 7px; } .bar-var { background: var(--var); } .bar-izinli { background: var(--izinli); } .bar-yok { background: var(--yok); } .stat-pct { color: var(--turkuaz-dark); font-weight: 700; font-size: 13px; margin-left: 6px; font-variant-numeric: tabular-nums; } .stat-row .ders-body, .stat-talebe .ders-body { min-width: 0; flex: 1; } .stat-ozet { padding: 14px 16px; } .stat-talebe .talebe-name { display: block; } /* Topbar ☰ menü butonu (çizgi-SVG hamburger) — kenar ritmi hdr-left gap'inden gelir (margin YOK; içerik simetrisi için padding minimal). */ .menu-btn { border: none; background: none; color: var(--gold-dark); cursor: pointer; padding: 2px; display: grid; place-items: center; flex: none; } .menu-btn svg { width: 24px; height: 24px; display: block; } /* Rozet satırı (rol rozetleri + varsa çıkış) — paylaşılan sınıf, kullanan tek yer artık SAĞ platform menüsü (.platform-roller.nav-hesap-alt, bkz app.js platformMenuAc). Sol menüde kimlik/çıkış artık YOK (kullanıcı testi, 13.07). */ .nav-hesap-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 8px; } /* Kenar overlay-menüler — ORTAK kabuk, iki farklı içerik: SOL ☰ (.drawer) = AKTİF APP'İN menüsü (navigasyon/yönetim maddeleri, ör. Yoklama). SAĞ avatar (.platform-menu) = PLATFORM menüsü (kişisel bilgi/sürüm/çıkış — app'ten bağımsız, her app'te aynı). .drawer-wrap/.drawer-bg her ikisi de PAYLAŞIR (aynı overlay/karartma); yalnız panelin kendisi kenar+gölge yönünde ayrılır. */ .drawer-wrap { position: fixed; inset: 0; z-index: 60; } .drawer-bg { position: absolute; inset: 0; background: rgba(40, 30, 10, .35); } .drawer, .platform-menu { position: absolute; top: 0; bottom: 0; width: 250px; background: #fff; padding: calc(env(safe-area-inset-top) + 16px) 12px 16px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .drawer { left: 0; box-shadow: 4px 0 24px rgba(40,30,10,.15); } .platform-menu { right: 0; box-shadow: -4px 0 24px rgba(40,30,10,.15); } .drawer-baslik { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 4px 14px 10px; } .drawer-item { display: flex; align-items: center; gap: 13px; text-align: left; border: none; background: none; color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; padding: 12px 14px; border-radius: 10px; font-family: inherit; transition: background .15s, color .15s; } .drawer-item:hover, .drawer-item:active { background: var(--turkuaz-bg); color: var(--turkuaz-dark); } /* Bekleyen başvuru rozeti (drawer maddesi sağında) */ .menu-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--yok); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Drawer altı silik sürüm satırı (5 cihazdan hangisinin güncel olduğunu ayırt etmek için) — tıklanamaz, göze batmasın diye küçük+soluk. */ .drawer-versiyon { margin-top: 10px; padding: 10px 14px 2px; border-top: 1px solid var(--line); text-align: center; font-size: 11.5px; color: var(--muted); opacity: .6; font-variant-numeric: tabular-nums; user-select: none; } /* "Güncelle" — güvenli-an otomasyonunun ELLE yedeği (yalnız reg.waiting varken görünür; drawerVersiyonEkle). Bilinçli tasarım kararı: uygulamanın turkuaz paletini KIRAR — trafik ışığı / "ON AIR" lambası gibi bir sinyal lambası; fosforlu yeşil dolgu + yumuşak dış hâle (glow) + hafif nabız. Küçük ve özenli kalsın — dikkat çekici ama abartısız. */ .drawer-guncelle-btn { display: block; margin: 10px auto 0; border: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 6px 18px; border-radius: 999px; background: #2eff6e; color: #063613; /* koyu metin — fosforlu zemin üzerinde okunaklı */ box-shadow: 0 0 0 0 rgba(46,255,110,.55), 0 0 10px 1px rgba(46,255,110,.55); animation: guncelle-isik 2.2s ease-in-out infinite; } .drawer-guncelle-btn:disabled { cursor: default; opacity: .75; animation: none; } .drawer-guncelle-btn:active:not(:disabled) { background: #22e05e; } @keyframes guncelle-isik { 0%, 100% { box-shadow: 0 0 0 0 rgba(46,255,110,.55), 0 0 10px 1px rgba(46,255,110,.55); } 50% { box-shadow: 0 0 0 6px rgba(46,255,110,0), 0 0 16px 4px rgba(46,255,110,.8); } } @media (prefers-reduced-motion: reduce) { /* Nabız durur, hâle SABİT kalır — sinyal yine de fark edilir. */ .drawer-guncelle-btn { animation: none; box-shadow: 0 0 10px 2px rgba(46,255,110,.65); } } /* ☰ hamburger: bekleyen varken sağ üstte minik nokta */ .menu-btn { position: relative; } .menu-btn.has-dot::after { content: ""; position: absolute; top: 3px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--yok); box-shadow: 0 0 0 2px var(--bg); } /* Kişi kartı + tek-tık iletişim */ .kisi-kart { padding: 18px 16px; } .kisi-ust { display: flex; align-items: center; gap: 14px; } .avatar-buyuk { width: 56px; height: 56px; font-size: 20px; } .kisi-isim { margin: 0 0 2px; font-size: 22px; font-weight: 700; } .iletisim { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .ilet-btn { text-decoration: none; background: #f5eee1; color: var(--gold-dark); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 700; } .ilet-btn:active { background: var(--gold); color: #fff; } .uyelik-rol { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 4px; } /* Geri bildirim: okunmamış noktası, mesaj önizleme (tek satır), satır oku, sil butonu */ .gb-nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--yok); margin-right: 7px; vertical-align: middle; } .gb-onizleme { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; } .ders-ok { color: var(--muted); font-size: 20px; flex: none; padding-left: 6px; align-self: center; } .gb-sil-btn { border: none; cursor: pointer; background: #fbeaea; color: var(--yok); text-align: center; } .gb-sil-btn:active { background: var(--yok); color: #fff; } /* Kişi kartı: fotoğraf değiştirme (admin/idareci) — sessiz ghost dili */ .foto-alan { margin-top: 12px; } .foto-degistir { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } @media (hover: hover) { .foto-degistir:hover { border-color: var(--turkuaz); color: var(--turkuaz-dark); } } .foto-degistir:active { background: var(--turkuaz-bg); color: var(--turkuaz-dark); } .foto-degistir:disabled { opacity: .6; cursor: default; } .foto-hata { color: var(--yok); font-size: 13px; margin-top: 8px; } /* Dersler: gün-gruplu kompakt yatay kart grid'i */ .grup-baslik { font-size: 14px; font-weight: 700; color: #625b4c; margin: 16px 4px 8px; } .ders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(338px, 1fr)); gap: 12px; } .ders-kart { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; transition: box-shadow .18s, transform .18s, border-color .18s; } .ders-kart:active { border-color: var(--turkuaz); background: rgba(0,163,191,.05); } @media (hover: hover) { .ders-kart:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); background: rgba(0,163,191,.05); } } /* Ders görseli 4:3 (72×54) — kare kırpım ders fotoğraflarını basık gösteriyor. */ .ders-kart-avatar { position: relative; overflow: hidden; width: 88px; height: 66px; aspect-ratio: 4 / 3; border-radius: 3px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #f5eee1, #ece0c8); color: var(--gold-dark); font-size: 19px; font-weight: 700; } .ders-kart-body { flex: 1; min-width: 0; } .ders-kart-ad { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ders-kart-alt { color: var(--muted); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } /* Devamsızlar pencere şeridi: [Sezon] çipi + "son N oturum" stepper çipi */ .dev-filtre { display: flex; align-items: center; gap: 8px; margin: 0 auto 4px; } .dev-stepper { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } .dev-stepper .dev-n { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; } .dev-adim { border: 1px solid var(--line); background: #fff; color: var(--gold-dark); border-radius: 999px; width: 22px; height: 22px; padding: 0; line-height: 1; font-size: 14px; font-weight: 700; cursor: pointer; display: grid; place-items: center; font-family: inherit; } .dev-adim:active { background: var(--turkuaz-bg); color: var(--turkuaz-dark); } /* Devamsızlar rozetleri */ .dev-rozet { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; } .dev-agir { background: #fbeaea; color: var(--yok); } .dev-orta { background: #fdf3e4; color: var(--izinli); } .dev-onay { background: #e9f5ee; color: var(--var); } /* Sürekli ders rozeti (Faz-2 Wave-1) — ders detayı başlık altı, aktif-rozet ile aynı turkuaz dil. */ .surekli-rozet { font-size: 10.5px; font-weight: 700; background: var(--turkuaz-bg); color: var(--turkuaz-dark); border-radius: 10px; padding: 1px 7px; vertical-align: middle; } /* İletişim günlüğü (kişi kartı) */ .gunluk-satir { padding: 10px 16px; border-bottom: 1px solid var(--line); } .gunluk-satir:last-child { border-bottom: none; } /* Ders Değişiklik Günlüğü (SPEC §1c — ders detayındaki "Değişiklik Geçmişi") */ .gunluk-kaydir { max-height: 320px; overflow-y: auto; } /* uzun günlük kart içinde kayar */ .gunluk-ust { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .gunluk-ust b { color: var(--ink); font-weight: 600; } .gunluk-metin { font-size: 14px; margin-top: 2px; } .gunluk-ok { color: var(--muted); } .gunluk-ozet { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; } .gunluk-kaydeden { font-size: 11.5px; color: var(--muted); opacity: .8; margin-top: 3px; } /* Form alanı altındaki küçük gri açıklama (ör. geçerlilik tarihi) */ .alan-aciklama { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.35; } /* Yoklama tarih gezgini */ .tarih-serit { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px 10px; } .tarih-ok { border: 1px solid var(--line); background: #fff; color: var(--gold-dark); border-radius: 9px; width: 38px; height: 34px; font-size: 17px; font-weight: 700; cursor: pointer; } .tarih-ok:disabled { opacity: .3; cursor: default; } .tarih-orta { flex: 1; text-align: center; font-size: 14px; } .tarih-bugun { font-size: 11px; font-weight: 700; background: #eaf6ee; color: var(--var); border-radius: 999px; padding: 2px 8px; margin-left: 4px; } .tarih-bugune { border: none; background: none; color: var(--gold-dark); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; margin-left: 6px; } /* Referans tablo yönetimi: ekleme formu + korumalı sil */ .ekle-input { flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font-size: 14px; font-family: inherit; outline: none; } .ekle-input:focus { border-color: var(--gold-light); } .ekle-btn { border: none; background: var(--gold); color: #fff; border-radius: 9px; padding: 9px 14px; font-size: 14px; font-weight: 700; cursor: pointer; } .ekle-btn:active { background: var(--gold-dark); } /* Devre dışı onay/ekle butonu GÖRÜNÜR biçimde pasif olmalı — aksi halde (ör. güçlü silme onayındaki "yaz-say" kapısı) tam-renkli buton tıklanabilir görünür ama tıklama yutulur → "buton hiçbir şey yapmıyor". Diğer :disabled desenleriyle aynı idiom. */ .ekle-btn:disabled { opacity: .45; cursor: default; } .ekle-btn:disabled:active { background: var(--gold); } .modal-onay.tehlike:disabled:active { background: var(--yok); } .sil-btn { border: none; background: none; font-size: 16px; cursor: pointer; opacity: .55; padding: 6px; } .sil-btn:hover, .sil-btn:active { opacity: 1; } /* Taşıma (Faz-2 Wave-2, kadro satırı; eski adı transfer-btn) — sil-btn ile AYNI hafif ikon-buton idiyomu, yalnız renk turkuaz (tehlike DEĞİL, nötr eylem). */ .tasima-btn { border: none; background: none; cursor: pointer; opacity: .55; padding: 6px; color: var(--turkuaz-dark, inherit); display: flex; align-items: center; } .tasima-btn:hover, .tasima-btn:active { opacity: 1; } .tasima-btn .bik { width: 18px; height: 18px; } /* FAB (+) ve ekleme diyaloğu */ .fab { position: fixed; right: 20px; bottom: calc(env(safe-area-inset-bottom) + 20px); width: 56px; height: 56px; border-radius: 16px; border: none; z-index: 30; background: var(--turkuaz); color: #fff; font-size: 26px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,163,191,.38); cursor: pointer; } .fab:active { background: var(--turkuaz-dark); } @media (max-width: 719.9px) { body.has-nav .fab { bottom: calc(env(safe-area-inset-bottom) + 78px); } } /* FAB (position:fixed, sağ-alt) listenin son satırını/başlığını örtmesin — FAB varken .app'e onun boyu (56px) + konumu + pay kadar ekstra alt boşluk (saha bulgusu 18.07 gece: "Bu sezonda etkinliği olmayanlar" başlığı FAB'ın altında neredeyse kayboluyordu). Değerler yukarıdaki .fab bottom kurallarıyla BİREBİR türetilir (fab-bottom + 56px yükseklik + 16px pay). */ .app:has(> .fab) { padding-bottom: calc(env(safe-area-inset-bottom) + 92px); } @media (max-width: 719.9px) { body.has-nav .app:has(> .fab) { padding-bottom: calc(env(safe-area-inset-bottom) + 150px); } } .modal-wrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; } .modal-bg { position: absolute; inset: 0; background: rgba(40,30,10,.35); } .modal { position: relative; width: min(92vw, 360px); background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(40,30,10,.3); padding: 20px; max-height: 90vh; display: flex; flex-direction: column; } .modal-baslik { font-weight: 700; font-size: 16px; margin-bottom: 12px; flex: none; } /* Uzun formlar (ör. ders düzenle) viewport'u aşınca gövde kayar; başlık+butonlar sabit. */ .modal-govde { overflow-y: auto; flex: 1 1 auto; min-height: 0; } .modal .ekle-input { width: 100%; } .modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex: none; } .modal-vazgec { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 9px; padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer; } /* Blocking işlem maskesi (spinner + mesaj) — çift tıklamayı önler */ .mesgul-maske { position: fixed; inset: 0; z-index: 200; background: rgba(43, 38, 32, .32); backdrop-filter: blur(1.5px); display: grid; place-items: center; } .mesgul-kutu { background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 15px 22px; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--ink); } .mesgul-spin { width: 18px; height: 18px; border: 2.5px solid var(--line); border-top-color: var(--turkuaz); border-radius: 50%; animation: mesgul-don .7s linear infinite; flex: none; } @keyframes mesgul-don { to { transform: rotate(360deg); } } /* Onay diyaloğu mesajı + tehlikeli (kırmızı) onay butonu */ .onay-mesaj { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); } .modal-onay.tehlike { background: var(--yok); } .modal-onay.tehlike:active { background: #b23636; } /* Form diyaloğu alanları (kişi/ders düzenleme, yeni ders) */ .modal-alan { margin-bottom: 10px; } /* Alan-içi (inline) doğrulama hatası — alanın hemen altında, kalıcı (toast değil). */ .modal-hata { margin: -4px 0 10px; color: var(--yok); font-size: 12.5px; line-height: 1.35; } .modal-alan label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; } .modal select.ekle-input, .modal-alan .ekle-input { width: 100%; background: #fff; } .modal-alan label.secim-satir { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); margin: 0; cursor: pointer; } .modal-alan label.secim-satir input { width: auto; } .gun-secim { display: flex; flex-wrap: wrap; gap: 6px; } .gun-secim label.gun-kutu { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink); margin: 0; padding: 5px 9px; border: 1px solid var(--line, #ddd); border-radius: 8px; background: #fff; cursor: pointer; } .gun-secim label.gun-kutu input { width: auto; margin: 0; } .gun-secim label.gun-kutu:has(input:checked) { background: var(--accent-soft, #eef4ff); border-color: var(--accent, #3b6fd4); } /* Ders formu (Yeni Ders / Dersi Düzenle, dersFormAc) — bölümlü tek modal (18.07 modernizasyon, kullanıcı onaylı yön). KATLANMAZ: yalnız görsel gruplama. */ .modal-ders-form { width: min(94vw, 460px); } .modal-bolum-baslik { font-size: 14px; font-weight: 700; color: #625b4c; margin: 18px 0 8px; } /* İlk bölümün üst boşluğu az — .modal-baslik zaten üstte yeterli boşluk bırakıyor. */ .modal-bolum:first-child .modal-bolum-baslik { margin-top: 0; } /* Tarih ikilisi / saat ikilisi — auto-fit grid: modal geniş yeterliyse (~440px+) iki sütun yan yana, dar modalda (küçük telefon) doğal olarak tek sütuna düşer (grid'in kendi davranışı — ayrı bir media query gerekmez). */ .ders-form-ikili { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 0 10px; } /* Başvuru Dönemleri düzenleyici — sezon + iki tarih + sil, satır başına (dar modalda alt alta) */ .pencere-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .pencere-satir { border: 1px solid var(--line); border-radius: 9px; padding: 8px; } .pencere-ust { display: flex; align-items: center; gap: 6px; } .pencere-ust .pencere-sezon { flex: 1; } .pencere-alt { display: flex; gap: 6px; margin-top: 6px; } .pencere-alt input { flex: 1; min-width: 0; } /* Satır-altı hata — pencere-satir zaten dolgulu kutu, .modal-hata'nın negatif üst marjı burada gerekmiyor (bkz. yukarıdaki genel .modal-hata kuralı). [hidden] iken display:none (global kural) zaten yer kaplamıyor. */ .pencere-hata { margin: 6px 0 0; } /* Derse ekleme — aranabilir ders seçici. .modal-ders-sec (geniş modal) başvuru katalog seçicisiyle (portalBasvuruAc, kart-tabanlı .ders-sec-kart) PAYLAŞILIR — o akış DOKUNULMADI. Derse Ekle modalının kendi satırları (.ders-sec-satir) ise standart-satır ilkesine göre STANDART kompakt satır (sec-satir/sec-zengin, küçük avatar) — 18.07 saha bulgusu: eski büyük-avatarlı kart görünümü büyütüyordu. */ .modal-ders-sec { width: min(94vw, 480px); } /* Merkez switch (çoklu-toggle pill satırı) — Dersler destesi, Derse Ekle modalı, başvuru */ .merkez-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .merkez-switch button { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .merkez-switch button.aktif { background: var(--turkuaz-bg); color: var(--turkuaz-dark); border-color: var(--turkuaz); } /* Kanal galerisi modalı (thread header "Medya, belgeler ve bağlantılar") — 3 sekmeli, .merkez-switch'in AYNI pill sekme idiyomu (eşit genişlik, tek seçili). */ .modal-galeri { width: min(94vw, 460px); } .galeri-tab-switch { display: flex; gap: 6px; margin-bottom: 10px; flex: none; } .galeri-tab { flex: 1; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 999px; padding: 6px 4px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; } .galeri-tab.aktif { background: var(--turkuaz-bg); color: var(--turkuaz-dark); border-color: var(--turkuaz); } .galeri-govde { min-height: 120px; } .galeri-bos { padding: 30px 6px; text-align: center; color: var(--muted); font-size: 13.5px; } .galeri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .galeri-tile { position: relative; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; border: none; padding: 0; cursor: zoom-in; background: #efe9dd; } .galeri-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .galeri-tile-video { cursor: default; } .galeri-tile-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } .galeri-belge-liste, .galeri-link-liste { display: flex; flex-direction: column; gap: 8px; } .galeri-belge-satir { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); } .galeri-belge-satir:active { background: var(--line); } .galeri-link-satir { padding: 8px 2px; border-bottom: 1px solid var(--line); } .galeri-link-satir:last-child { border-bottom: none; } .galeri-link-href { display: block; word-break: break-all; font-size: 13.5px; } .galeri-link-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .ders-sec-ara { margin-bottom: 10px; } /* .ders-sec-liste/.ders-sec-bos: yalnız JS hook (Derse Ekle) — görsel .sec-liste/ .sec-satir.sec-bos'tan gelir (markup'ta birlikte uygulanır). */ /* flex:none ŞART — flex-column'da çok item olunca kartlar shrink olur, sabit-boy avatar overflow:hidden'la ALTTAN/ÜSTTEN kırpılır. Thumbnail sol/üst/alt duvarlara flush (kart padding 0, gap 0); yalnız yazı gövdesi padding'li. Bu blok YALNIZ başvuru katalog seçicisinin (portalBasvuruAc) büyük ders kartları için — Derse Ekle artık .ders-sec-satir (standart kompakt satır) kullanır, DOKUNMADI. */ .ders-sec-kart { cursor: pointer; flex: none; padding: 0; gap: 0; align-items: stretch; overflow: hidden; } /* TN: yükseklik SABİT 80px, genişlik resmin oranına göre (crop YOK). Resimsizde harf-kutusu. */ .ders-sec-kart .ders-kart-avatar { width: auto; min-width: 56px; height: 80px; aspect-ratio: auto; align-self: stretch; display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 0; } .ders-sec-kart .ders-kart-avatar.resimli { min-width: 0; font-size: 0; background: none; } .ders-sec-kart .avatar-img { position: static !important; inset: auto !important; width: auto !important; height: 100% !important; object-fit: contain !important; border-radius: 0; } .ders-sec-kart .ders-kart-body { padding: 14px 16px; } .ders-sec-kart .ders-kart-ad { font-size: 16px; } .ders-sec-kart .ders-kart-alt { font-size: 14px; margin-top: 4px; } .ders-sec-kart.secili { border-color: var(--turkuaz); background: var(--turkuaz-bg); box-shadow: 0 0 0 2px var(--turkuaz) inset; } /* Aramalı seçici listesi (derse talebe ekleme) */ .sec-liste { max-height: 46vh; max-height: 46dvh; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; } .sec-satir { padding: 9px 12px; font-size: 14px; font-weight: 600; cursor: pointer; border-bottom: 1px solid #f1eee7; } .sec-satir:last-child { border-bottom: none; } .sec-satir[data-on] { background: var(--turkuaz-bg); color: var(--turkuaz-dark); } .sec-alt { display: block; font-size: 12px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .sec-bos { cursor: default; color: var(--muted); font-weight: 400; font-size: 13px; } /* Fotoğraf kaynağı menüsü (Kamera / Galeri) */ .foto-secenekler { display: flex; flex-direction: column; gap: 8px; } .foto-secenekler .btn-ghost { text-align: left; } /* Aksiyon menüsü (uzun-bas / sağ-tık: Paylaş · Bilgi · Sil) — foto-secenekler idiomu */ .aksiyon-menu { display: flex; flex-direction: column; gap: 8px; } .aksiyon-menu .btn-ghost { display: flex; align-items: center; gap: 10px; text-align: left; } .aksiyon-menu .btn-ghost .bik { flex: 0 0 auto; } .aksiyon-menu .btn-ghost.aksiyon-tehlike { color: var(--yok); } @media (hover: hover) { .aksiyon-menu .btn-ghost.aksiyon-tehlike:hover { border-color: var(--yok); color: var(--yok); } } .aksiyon-menu .btn-ghost.aksiyon-tehlike:active { background: #fdecea; color: var(--yok); } /* Uzun-bas aksiyon menüsü — KOMPAKT & zarif (kullanıcı: "gövde kocaman ve zevksiz"). İçerik-boyu kart (geniş modal değil), ince ritim, sınırsız-çizgi satırlar. Vazgeç butonu gizli — backdrop/geri-tuş/Escape kapatır (overlayKaydet); menü hafif kalır. */ .modal.modal-aksiyon { width: max-content; min-width: 172px; max-width: min(78vw, 264px); padding: 6px; border-radius: 15px; box-shadow: 0 10px 34px rgba(40,30,10,.24); } .modal.modal-aksiyon .modal-baslik { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 5px 12px 3px; } .modal.modal-aksiyon .aksiyon-menu { gap: 1px; } .modal.modal-aksiyon .aksiyon-menu .btn-ghost { border: none; background: none; border-radius: 10px; padding: 11px 13px; font-size: 14.5px; font-weight: 500; width: 100%; } @media (hover: hover) { .modal.modal-aksiyon .aksiyon-menu .btn-ghost:hover { background: var(--turkuaz-bg); color: var(--turkuaz-dark); border-color: transparent; } } .modal.modal-aksiyon .aksiyon-menu .btn-ghost:active { background: var(--turkuaz-bg); color: var(--turkuaz-dark); } .modal.modal-aksiyon .aksiyon-menu .btn-ghost.aksiyon-tehlike:active { background: #fdecea; color: var(--yok); } .modal.modal-aksiyon .modal-btns { display: none; } /* Vazgeç gizli — hafif menü hissi */ /* Otomatik kayıt durum satırı */ .kayit-durum { text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); padding: 10px; border-radius: 10px; } .kayit-durum[data-hal="tamam"] { color: var(--var); } .kayit-durum[data-hal="bekliyor"] { color: var(--izinli); } .kayit-durum[data-hal="gonderiyor"] { color: var(--turkuaz-dark); } .kayit-durum[data-hal="cevrimdisi"], .kayit-durum[data-hal="hata"] { color: var(--yok); } /* Senkron pili: YALNIZ ikon (metin yok — bkz. #net title attr'i hover/erişilebilirlik için taşır). Kare dolgu → yuvarlak/kompakt görünüm, topbar'da az yer kaplar. */ .pill { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px; transition: background .25s, color .25s; } .pill-ikon { display: grid; place-items: center; } .pill-ikon svg { width: 13px; height: 13px; } /* Senkron pili v2 — durum renkleri (bkz. syncGoster) */ .pill-bekliyor { background: #fdf3e4; color: var(--izinli); } /* turuncu: değişiklik bekliyor */ .pill-sync { background: #e9f5ee; color: var(--var); } /* yeşil: gönderiliyor (dönen ok) */ .pill-tamam { background: #e9f5ee; color: var(--var); } /* yeşil: kaydedildi (tik, 5sn) */ .pill-hata { background: #fbeaea; color: var(--yok); } /* kırmızı: kaydetme hatası */ .pill-sync .pill-ikon svg { animation: donme 1.1s linear infinite; } .pill-bekliyor .pill-ikon svg { animation: nabiz 1.6s ease-in-out infinite; } .pill-tamam .pill-ikon svg { animation: pit .35s cubic-bezier(.5,1.8,.6,1) both; } @keyframes donme { to { transform: rotate(360deg); } } @keyframes nabiz { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .65; } } @keyframes pit { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Hareket duyarlılığı: spinner/nabız durur, durum yine renk+simgeyle okunur */ @media (prefers-reduced-motion: reduce) { .pill .pill-ikon svg { animation: none !important; } } /* Üst bar araması: mercek → açılır kutu */ .ara-btn { border: none; background: none; color: var(--muted); cursor: pointer; padding: 5px; display: grid; place-items: center; border-radius: 8px; } .ara-btn:hover { color: var(--turkuaz-dark); } .ara-btn svg { width: 18px; height: 18px; } .ara { width: 0; opacity: 0; padding: 8px 0; margin: 0; border: 1px solid transparent; border-radius: 999px; font-size: 13.5px; font-family: inherit; background: #faf9f6; color: var(--ink); outline: none; /* Kapalıyken width:0/opacity:0 ile GİZLİ ama DOM'da → dokununca odaklanıp mobil klavye açıyordu (sezon stepper'ın sağ komşusu). Kapalı input'u dokunulamaz yap; arama açılınca (.acik / .aramada) geri aç. Programatik .focus() etkilenmez. */ pointer-events: none; transition: width .25s ease, opacity .2s, padding .25s, border-color .2s; } .ara.acik { width: min(46vw, 240px); opacity: 1; padding: 8px 14px; border-color: var(--line); pointer-events: auto; } .topbar.aramada .ara { pointer-events: auto; } .ara:focus { border-color: var(--turkuaz); background: #fff; } .ara::placeholder { color: var(--muted); } /* Arama modu: kutu başlık alanını (tüm barı) kaplar; sol/sağ kümeler + başlık metni gizlenir. Sezon stepper de brand-text'le AYNI mekanizmayla (tamamen) gizlenir — arama önceliklidir. */ .topbar.aramada .hdr-left, .topbar.aramada .hdr-right, .topbar.aramada .hdr-title .brand-text, .topbar.aramada .sezon-stepper { display: none; } .topbar.aramada .hdr-title { flex: 1; } .topbar.aramada .ara { flex: 1; max-width: none; } /* Filtre paneli + chip'ler */ .filtre-panel { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 12px rgba(40,30,10,.05); } .filtre-satir { display: flex; align-items: baseline; gap: 10px; } .filtre-ad { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; flex: none; width: 58px; } .filtre-chipler { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .filtre-chipler::-webkit-scrollbar { display: none; } .filtre-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; } .filtre-chip[data-on] { background: var(--turkuaz); border-color: var(--turkuaz); color: #fff; } /* Başvurular */ .basvuru-btnler { display: flex; gap: 8px; padding: 0 16px 14px; } .onay-btn { flex: 1; border: none; border-radius: 10px; padding: 11px; background: var(--var); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; } .red-btn { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: #fff; color: var(--yok); font-size: 14px; font-weight: 700; cursor: pointer; } /* Başvuru detayı: ders-bazlı karar satırı */ .ders-karar-btnler { display: flex; gap: 6px; flex: none; align-items: center; } .onay-btn.kucuk, .red-btn.kucuk { flex: none; padding: 7px 11px; font-size: 13px; border-radius: 8px; } /* Başvuru arşivi: filtre çipleri + seçimli silme */ .arsiv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; } .arsiv-btnler { display: flex; gap: 8px; } .arsiv-btnler .red-btn { flex: none; padding: 7px 12px; font-size: 13px; } .arsiv-btnler .red-btn:disabled { opacity: .45; cursor: default; } .arsiv-sec { width: 17px; height: 17px; flex: none; accent-color: var(--turkuaz); cursor: pointer; } /* Bölüm başlığı yanındaki küçük eylem düğmesi (＋ Derse Ekle) */ .baslik-btn { border: 1px solid var(--line); background: #fff; color: var(--turkuaz-dark); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; margin-left: 8px; font-family: inherit; vertical-align: 1px; } .baslik-btn:active { background: var(--turkuaz-bg); } /* ── Seçim modu (çoklu seçim + toplu eylem) ─────────────────────────────── */ /* Satır sol işaret kutusu — yalnız seçim modunda görünür; seçiliyken dolu. */ .secim-tik { display: none; flex: none; width: 24px; height: 24px; margin-right: 2px; border: 2px solid var(--line); border-radius: 7px; align-items: center; justify-content: center; } .secim-modu .ders.secilebilir .secim-tik, .secim-modu .talebe.secilebilir .secim-tik, .secim-modu .ders-kart.secilebilir .secim-tik, .secim-modu .basvuru-kart.secilebilir .secim-tik { display: flex; } .secim-tik .bik { width: 16px; height: 16px; color: #fff; opacity: 0; } .secili > .secim-tik { background: var(--turkuaz); border-color: var(--turkuaz); } .secili > .secim-tik .bik { opacity: 1; } /* Seçim modunda: satır dokunuşu seçim → nav/tekil çev-imlerini gizle; FAB'ı sakla. */ .secim-modu .fab { display: none; } .secim-modu .ders.secilebilir .ders-chev, .secim-modu .basvuru-kart.secilebilir .ders-chev { visibility: hidden; } .secim-modu .ders.secilebilir .sil-btn, .secim-modu .ders.secilebilir .tasima-btn, .secim-modu .ders.secilebilir .sohbet-yonetim-sil { display: none; } /* tekil silme/taşıma gizli */ /* Güçlü kökten-sil onayı: silinecek kanal adları listesi */ .kokten-sil-liste { margin: 8px 0 4px; padding-left: 20px; max-height: 180px; overflow-y: auto; font-size: 13px; color: var(--ink); line-height: 1.5; } .kokten-sil-liste li { margin: 1px 0; } /* Yaz-say kapısının CANLI geri bildirimi: kutuya doğru sayı yazılana dek pasif ipucu, yazılınca yeşil "hazır" durumu — butonun neden pasif olduğunu açık eder. */ .kokten-sil-ipucu { margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.35; } .kokten-sil-ipucu-hazir { color: var(--var); font-weight: 600; } .secilebilir { cursor: pointer; } .secili { background: var(--turkuaz-bg); } /* Seçim çubuğu — .section-title'ın yerini alır; uzun listede üstte yapışır. */ .secim-bar { position: sticky; top: -16px; z-index: 5; margin: -4px auto 12px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--turkuaz); border-radius: 12px; box-shadow: var(--shadow); } .secim-vazgec { flex: none; width: 32px; height: 32px; border: none; border-radius: 8px; background: none; color: var(--ink); font-size: 19px; cursor: pointer; line-height: 1; } .secim-vazgec:active { background: var(--turkuaz-bg); } .secim-sayi { font-weight: 700; font-size: 14px; color: var(--ink); flex: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .secim-eylemler { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .secim-eylem { flex: none; border: 1px solid var(--turkuaz); background: var(--turkuaz); color: #fff; border-radius: 9px; padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; } .secim-eylem.tehlike { background: #fff; border-color: var(--yok); color: var(--yok); } .secim-eylem:disabled { opacity: .45; cursor: default; } /* Çoklu seçici modal satırı: checkbox + STANDART zengin satır (avatar/isim/alt) — sec-zengin ile birlikte kullanılır (Derse Talebe Ekle); avatar/metin oradan gelir, burada yalnız kutu. */ .coklu-sec-kutu { width: 20px; height: 20px; flex: none; accent-color: var(--turkuaz); pointer-events: none; margin: 0; } /* ── Oturumlar formu (REDESIGN 17.07) — liste kahraman, kademeli açılım ───── */ .modal.modal-oturum { width: min(94vw, 460px); } .oturum-setup-bas { flex: none; margin-bottom: 10px; } .oturum-setup-bas .modal-baslik { margin-bottom: 2px; } .oturum-setup-alt { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } /* Üretici araç çubuğu — iki odaklı düğme; mini-modal açar (inline fieldset yığını YOK). */ .oturum-arac { flex: none; display: flex; gap: 8px; margin-bottom: 10px; } .oturum-arac-btn { flex: 1; padding: 9px 10px; font-size: 13.5px; border-radius: 10px; } .oturum-arac-btn .bik { width: 15px; height: 15px; } /* Liste (kahraman) — kaydırılabilir gövde; başlık + araç + kapat sabit kalır. */ .oturum-liste-govde { border-top: 1px solid var(--line); } .oturum-satir { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 2px; border-bottom: 1px solid rgba(128,128,128,.14); } .oturum-satir-ana { display: flex; align-items: center; gap: 10px; min-width: 0; } .oturum-tarih { font-size: 14px; } .oturum-satir .oturum-saat { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .oturum-rozet { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #f0ece3; color: var(--muted); letter-spacing: .02em; } .oturum-dropped { opacity: .5; } .oturum-dropped .oturum-tarih { text-decoration: line-through; text-decoration-thickness: 1px; } .oturum-satir-aks { display: flex; align-items: center; gap: 6px; flex: none; } .oturum-mini-btn { padding: 5px 12px; font-size: 12.5px; border-radius: 8px; flex: none; } .oturum-mini-ikon { padding: 6px; border-radius: 8px; flex: none; line-height: 0; } .oturum-mini-ikon .bik { width: 16px; height: 16px; } /* "bugün" ayracı — geçmiş/gelecek sınırı; ilk açılışta buraya kaydırılır. */ .oturum-bugun-ayrac { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--turkuaz-dark); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .oturum-bugun-ayrac::before, .oturum-bugun-ayrac::after { content: ""; flex: 1; height: 1px; background: var(--turkuaz); opacity: .4; } .oturum-bos { color: var(--muted); font-size: 14px; line-height: 1.5; padding: 18px 4px; text-align: center; } /* Toplu tatil sonuç dökümü */ .tt-sonuc-ozet { font-size: 15px; } .tt-engel-liste { max-height: 40vh; overflow: auto; } .tt-engel-satir { padding: 8px 12px; border-bottom: 1px solid var(--line); } .tt-engel-satir:last-child { border-bottom: none; } /* Takvim */ .takvim-gun-ad { font-weight: 700; font-size: 15px; padding: 13px 16px 8px; } .takvim-bugun { border-color: var(--turkuaz); box-shadow: 0 0 0 1px var(--turkuaz-bg), var(--shadow); } /* Ayarlar */ .ayar-kart { padding: 6px 0; } .ayar-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #f1eee7; } .ayar-satir:last-child { border-bottom: none; } .ayar-satir label { font-size: 14px; } .ayar-satir input { width: 84px; text-align: center; border: 1px solid var(--line); border-radius: 9px; padding: 8px; font-size: 15px; font-family: inherit; outline: none; } /* Sayısal ayar hücresi + sağında birim etiketi ("[16] yaş") */ .ayar-deger { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .ayar-birim { font-size: 13px; color: var(--muted); } /* Belge doğrulama alt-satırı (başvuru detay — rozet + kod + Katman-2 e-Devlet linki) */ .ayar-satir:has(+ .belge-dogrulama-satir) { border-bottom: none; } .belge-dogrulama-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 12px; border-bottom: 1px solid #f1eee7; } .belge-dogrulama-satir:last-child { border-bottom: none; } .belge-dogrulama-kod { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .3px; background: #faf9f6; border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; user-select: all; } .idareci-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #f1eee7; } .idareci-satir:last-child { border-bottom: none; } .idareci-kisi { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; cursor: pointer; border-radius: 8px; } .idareci-kisi:focus-visible { outline: 2px solid var(--turkuaz); outline-offset: 2px; } .avatar-kucuk { width: 38px; height: 38px; font-size: 12px; } .idareci-metin { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .idareci-ad { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idareci-eposta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idareci-cikar { border: 1px solid var(--line); background: #fff; color: #b23b3b; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-family: inherit; cursor: pointer; } .idareci-cikar:hover { background: #fbeaea; border-color: #e0b4b4; } .ayar-satir input:focus { border-color: var(--turkuaz); } .ayar-satir input:disabled { background: #faf9f6; color: var(--muted); } /* SMS/Netgsm kartı: metin kimlik/şifre alanları — geniş, sola dayalı, label üstte */ .sms-kart .ayar-satir { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 16px; } .sms-kart .ayar-satir label { font-size: 13px; font-weight: 600; color: var(--muted); } .sms-kart .ayar-satir input[type="text"], .sms-kart .ayar-satir input[type="password"] { width: 100%; text-align: left; padding: 11px 13px; font-size: 16px; box-sizing: border-box; } .sms-kart .ayar-satir .sms-satir-yatay { flex-direction: row; align-items: center; justify-content: space-between; } .sms-kart .ayar-satir input[type="checkbox"] { width: 22px; height: 22px; } /* Başvurular: kayıt formu paylaşım şeridi (bilgi dili — hata değil) */ .paylas-serit { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; background: var(--turkuaz-bg); border: 1px solid rgba(0,163,191,.22); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; } .paylas-etiket { font-weight: 700; color: var(--turkuaz-dark); flex: none; } .paylas-link { flex: 1; min-width: 0; color: var(--turkuaz-dark); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .paylas-kopyala { flex: none; border: 1px solid rgba(0,163,191,.35); background: #fff; color: var(--turkuaz-dark); border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; } .paylas-kopyala:hover, .paylas-kopyala:active { background: var(--turkuaz); border-color: var(--turkuaz); color: #fff; } /* "Yeni sürüm hazır" şeridi — alt kenarda sabit ince bar (sync-pill dili) */ .surum-serit { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 16px); z-index: 80; display: flex; align-items: center; gap: 14px; white-space: nowrap; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 4px 16px rgba(40,30,10,.18); padding: 8px 9px 8px 17px; font-size: 13.5px; font-weight: 600; color: var(--ink); } .surum-yenile { border: none; background: var(--turkuaz); color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; } .surum-yenile:active { background: var(--turkuaz-dark); } @media (max-width: 719.9px) { body.has-nav .surum-serit { bottom: calc(env(safe-area-inset-bottom) + 74px); } /* tab bar'ın üstü */ } /* Başvurular: elle yenileme */ .basvuru-baslik { display: flex; align-items: center; gap: 8px; } .yenile-btn { border: none; background: none; color: var(--turkuaz-dark); cursor: pointer; padding: 3px; display: grid; place-items: center; border-radius: 7px; } .yenile-btn svg { width: 15px; height: 15px; } .yenile-btn:hover { background: var(--turkuaz-bg); } .yenile-btn.donuyor svg { animation: donme .8s linear infinite; } /* ── Görüntüle (view-as) — önizleme banner'ı + kişi seçici ─────────────────── */ .onizleme-banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; min-height: 38px; padding: 8px 16px; background: var(--gold); color: #fff; font-size: 13.5px; font-weight: 600; /* Düz (canvas) durum şeridi — gölge/yükselti YOK: kart gibi görünüp "tıklanabilir" hissi vermesin (aldatıcıydı). Tek etkileşimli öğe .oniz-cik butonu. Alta ince çizgiyle içerikten ayrılır. */ position: relative; z-index: 9; border-bottom: 1px solid rgba(40,30,10,.18); } .onizleme-banner b { font-weight: 800; } .onizleme-banner .oniz-rol { font-weight: 500; opacity: .9; } .onizleme-banner .oniz-cik { border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.16); color: #fff; font-weight: 700; font-family: inherit; padding: 4px 13px; border-radius: 8px; cursor: pointer; font-size: 13px; } .onizleme-banner .oniz-cik:hover { background: rgba(255,255,255,.3); } /* PC: sabit sol nav'ı banner yüksekliği kadar aşağı it (üst üste binmesin). */ @media (min-width: 720px) { body.onizlemede .nav { top: calc(58px + 38px); } } /* Önizlemede yazma UI'si gizli (çift savunma; server zaten 403 döner). */ body.onizlemede .fab, body.onizlemede .sil-btn { display: none !important; } /* Kişi seçici (aranabilir) — satırlar artık STANDART .sec-satir/.sec-zengin (18.07 gece); burada yalnız modal gövde düzeni + arama kutusu kalıyor. */ .oniz-modal .modal-govde { display: flex; flex-direction: column; gap: 10px; } .oniz-ara { width: 100%; } /* ── Sezon Merceği (v1) — stepper (header ortası) + geçmiş-sezon banner'ı ──── Port: sezon-wheel-hepsi.html mock, app palette'ine uyarlanmış (petrol→turkuaz-dark, amber aynen). Görünürlük app.js sezonStepperGuncelle'de kararlaştırılır. */ .sezon-stepper { position: relative; flex: 1 1 auto; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: center; gap: 4px; } .sezon-ok { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 14px; color: var(--turkuaz-dark); flex: none; padding: 0; display: grid; place-items: center; font-family: inherit; } .sezon-ok:disabled { opacity: .25; cursor: default; } .sezon-ok:active:not(:disabled) { background: var(--turkuaz-bg); } .sezon-etiket { font-weight: 800; font-size: 14.5px; color: var(--turkuaz-dark); min-width: 122px; text-align: center; cursor: pointer; user-select: none; touch-action: pan-y; will-change: transform; } .sezon-etiket.sezon-geri-yaylan { transition: transform .25s cubic-bezier(.2,.9,.3,1.3); } .sezon-etiket small { display: block; font-weight: 400; font-size: 10.5px; color: var(--muted); } /* Geçmiş sezon: topbar + stepper amber'a döner (mock "amberli"). */ .topbar.sezon-gecmis { background: var(--sezon-amber-bg); } .topbar.sezon-gecmis .sezon-etiket { color: var(--sezon-amber); } .topbar.sezon-gecmis .sezon-ok { color: var(--sezon-amber); } /* Etikete tek-tap → açılan sezon listesi (standart-satır idiyomu, .oniz-sat ailesi) */ .sezon-liste { position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%) translateY(-6px); z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.18); min-width: 230px; max-width: min(88vw, 280px); padding: 6px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; } .sezon-liste.acik { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .sezon-liste .satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; } .sezon-liste .satir:hover { background: var(--turkuaz-bg); } .sezon-liste .satir.secili { background: var(--turkuaz); color: #fff; } .sezon-liste .satir.secili .yan { color: rgba(255,255,255,.8); } .sezon-liste .satir .yan { font-size: 12px; font-weight: 400; color: var(--muted); } .sezon-liste .satir.pasif { color: var(--muted); font-style: italic; } .sezon-liste .satir .aktif-rozet { font-size: 10.5px; font-weight: 700; background: var(--turkuaz-bg); color: var(--turkuaz-dark); border-radius: 10px; padding: 2px 8px; } .sezon-liste .satir.secili .aktif-rozet { background: rgba(255,255,255,.22); color: #fff; } /* Sezon arşiv rozeti (Faz-2 Wave-1) — dropdown satırı + stepper alt-satır ortak; amber palette. */ .sezon-arsiv-rozet { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; background: var(--sezon-amber-bg); color: var(--sezon-amber-ink); border: 1px solid var(--sezon-amber-line); border-radius: 10px; padding: 1px 7px; white-space: nowrap; vertical-align: middle; } .sezon-arsiv-rozet .bik { width: 10px; height: 10px; } .sezon-liste .satir.secili .sezon-arsiv-rozet { background: rgba(255,255,255,.22); color: #fff; border-color: transparent; } /* Geçmiş-sezon banner'ı — onizleme-banner'ın amber ikizi, tek eylem "Bu sezona dön". */ .sezon-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 34px; padding: 7px 16px; background: var(--sezon-amber-bg); color: var(--sezon-amber-ink); font-size: 13px; font-weight: 600; position: relative; z-index: 8; border-bottom: 1px solid var(--sezon-amber-line); } .sezon-banner-metin { display: flex; align-items: center; gap: 6px; } .sezon-banner-eylemler { display: flex; align-items: center; gap: 14px; flex: none; } .sezon-banner .sezon-don { border: none; background: none; color: var(--sezon-amber-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-family: inherit; font-size: 13px; padding: 0; flex: none; } /* Arşivle/Arşivden çıkar (Faz-2 Wave-1, admin) — "Bu sezona dön" ile aynı satır, dolgulu pil (linkten ayrışsın: bu bir yazma eylemi, dön eylemi salt navigasyon). */ .sezon-banner .sezon-arsiv-btn { border: 1px solid var(--sezon-amber-line); background: #fff; color: var(--sezon-amber-ink); font-weight: 700; cursor: pointer; font-family: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; flex: none; } .sezon-banner .sezon-arsiv-btn:active { background: var(--sezon-amber-bg); } /* Ders detayı: sezonda etkinlik yok — boş-durum (Sezon Merceği v1) */ .sezon-bos-durum { text-align: center; color: var(--muted); padding: 46px 20px; font-size: 14px; } .sezon-bos-durum .sezon-bos-ikon { font-size: 34px; margin-bottom: 10px; } /* "Bu sezonda etkinliği olmayanlar" grubu (Sezon Merceği v1) HER ZAMAN AÇIK (18.07 gece — katlama + ▾ ipucu kaldırıldı, "tuzak" gibi algılanıyordu); artık sade .grup-baslik, ayrı sınıf gerekmiyor. FAB'ın (sağ-alt) listenin son satırını örtmesi ayrıca aşağıda düzeltilir. */ /* Yoklama: geçmiş sezonda durum düğmeleri salt-okuma (Sezon Merceği v1) */ .state.disabled { cursor: default; opacity: .5; pointer-events: none; } /* ── Sohbet (chat) ─────────────────────────────────────────────────────── */ .sohbet-liste .ders-sub.sohbet-onizleme { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sohbet-onizleme-bos { color: #a59c89; font-style: italic; } /* Okunmamış kanal: başlık daha koyu/kalın, önizleme belirginleşir + turkuaz nokta */ .sohbet-okunmamis .ders-title { font-weight: 800; color: var(--ink); } .sohbet-okunmamis .sohbet-onizleme { color: var(--ink); font-weight: 600; } .sohbet-nokta { flex: none; align-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--turkuaz); } /* Yeni görüşme "+" (inbox başlığı) + picker */ .section-title.sohbet-bas { display: flex; align-items: center; justify-content: space-between; } .sohbet-yeni-btn { flex: none; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--turkuaz); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .sec-satir.sy-geri { color: var(--turkuaz-dark); font-weight: 600; } /* App-içi ders başvurusu (portal): "Yeni Ders Başvurusu" butonu + katalog + onay */ .portal-basvur-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--gold); border-radius: 999px; background: var(--card); color: var(--gold-dark); font-size: 12px; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: normal; } .portal-basvur-btn:hover { background: #fbf6ec; } .portal-basvur-btn .bik svg { width: 15px; height: 15px; } .basvuru-katalog { display: flex; flex-direction: column; gap: 12px; } .basvuru-sezon-blok { display: flex; flex-direction: column; gap: 8px; } .basvuru-sezon-bas { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 8px 0 2px; } /* Ders satırları: standart avatarlı ders kartı (.ders-kart.ders-sec-kart — Dersler destesi/Derse Ekle modalı ile AYNI bileşen). Seçilebilir satır