/* ============================================================================ ÖĞRETMEN EVRAK — SOSYAL PLATFORM · **MODERN TEMA** ("Öğretmen Odası") ---------------------------------------------------------------------------- Kaynak tasarım : Claude Design → "Sosyal Arayüz v3 — Öğretmen Odası" Doküman : evrakcepde/sosyal_medya/tema/ (00 yol haritası · 01 token haritası · 02 bileşen kıyas · 03 metin sözlüğü · 04 sapmalar) ⚠️ İKİ AYRI EKSEN VARDIR — KARIŞTIRMA: TEMA = modern | klasik → (SUNUCUDAN, sosyal_profiller.tema) GÖRÜNÜM = sistem | acik | koyu → (CİHAZDA, localStorage 'sos-tema') ⚠️ KURALLAR (bu dosyaya yazan herkes için): 1. HER kural `[data-sos-tema="modern"]` altında olmalı. Kapsamsız tek bir kural Klasik temayı da bozar — regresyon kapısı budur. 2. Bu dosya `sosyal.css`'ten SONRA ve HER ZAMAN yüklenir. Tema anahtarı = attribute'unun anlık değişimi; sayfa yenilenmez (AJAX/no-reload kuralı). 3. Bölüm sırası `sosyal.css` ile birebir aynı tutulur (bakım kolaylığı). 4. Yeni bir şekil kararı BİRDEN FAZLA sınıfı ilgilendiriyorsa `sosyal.css` :root'una token olarak eklenir (Klasik değeriyle), burada ezilir. Tek sınıflık farklar doğrudan burada sınıf bazlı yazılır — `sosyal.css`'e dokunulmaz. ============================================================================ */ /* --------------------------------------------------------------------------- 1) TOKEN — AÇIK GÖRÜNÜM (kâğıt + mürekkep + plum) --------------------------------------------------------------------------- */ :root[data-sos-tema="modern"]{ /* yüzeyler — kâğıt tonları (tasarım: --paper/--sheet/--sheet-2/--sheet-3) */ --bg:#f6f2ed; --surface:#fffdfb; --surface-2:#f1ece5; --surface-3:#e6ded4; /* kenarlar — tasarım: --line/--line-2 */ --border:#e0d7cb; --border-2:#c9bcac; /* metin — tasarım: --ink/--ink-2/--ink-3 */ --text:#241d21; --text-2:#6f6259; --text-3:#71665d; /* W11 AA: text-3 #a2958a→#71665d (2.87→≥4.5 surface-2'de de) */ /* aksan — plum. Modern'de DEGRADE YOK: --gradient düz renge indirilir (avatar fallback, logo, etiket rozeti hep aynı düz plum olsun diye). */ --primary:#7b2d52; --primary-press:#5e2040; --primary-soft:#f6e9ef; --accent-2:#5e2040; --primary-line:#e3c8d5; /* tasarım --plum-line: yumuşak aksan kenarı (Modern'e özel) */ --gradient:#7b2d52; --on-primary:#fffdfb; /* dolu aksan zemin üstü — kâğıt beyazı */ /* semantik — repost yeşili zeytin, puan/premium okre, yıkıcı kiremit */ --green:#5c6f3a; --green-soft:#eef1e6; --success:#5c6f3a; --gold1:#d7a53f; --gold2:#b07d1a; --warning:#b07d1a; --warning-soft:#f8efd9; --danger:#a53328; --danger-soft:#f7e8e6; --danger-press:#8a2820; --info:#33507a; /* tasarım --ink-blue: DOCX/bilgi (Modern'e özel) */ /* W8 — semantik şerit aileleri (zemin·kenar·metin) kâğıt paletinde */ --warning-line:#e3d2ab; --warning-text:#6b4a0e; --av-fb:var(--gradient); --av-fb-text:var(--on-primary); /* pastel degrade → düz plum */ --switch-knob:var(--surface); --danger-line:#e6cbc7; --danger-text:#75241c; --success-soft:#eef1e6; --success-line:#cdd6b8; --success-text:#3f4d28; --info-soft:#e9edf4; --info-line:#c6cfdd; --info-text:#25395a; /* şekil — dikdörtgen dil: hap yok, keskin köşe yok */ --r-xs:7px; --r-sm:9px; --r-md:9px; --r-lg:12px; --r-xl:16px; --radius:12px; --radius-sm:9px; /* geriye uyumlu alias'lar (kart/toast/dialog) */ --r-avatar:10px; /* daire DEĞİL → yuvarlak kare (imza) */ /* gölge — çok yumuşak, kâğıt üstü kağıt hissi (tasarım --f1/--f2/--f3) */ --e1:0 1px 0 rgba(36,29,33,.05); --e2:0 2px 10px rgba(36,29,33,.07); --e3:0 14px 40px rgba(36,29,33,.16); --shadow:var(--e1); /* tipografi — arayüz Gabarito (sans), içerik Lora (serif) */ --font-ui:Gabarito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --font-icerik:Lora,Georgia,"Times New Roman",serif; } /* --------------------------------------------------------------------------- 2) TOKEN — KOYU GÖRÜNÜM İki seçici gerekir (sosyal.css §1.1 deseni): a) sistem koyu + kullanıcı 'acik' zorlamamış → @media + :not([data-theme="light"]) b) kullanıcı 'koyu' zorlamış → [data-theme="dark"] ⚠️ Koyu görünümde aksan AÇIK bir pembeye döner → --on-primary KOYU yüzeye geçer, yoksa dolu butonlarda beyaz-üstü-pembe okunmaz olur. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark){ :root[data-sos-tema="modern"]:not([data-theme="light"]){ --bg:#161316; --surface:#1f1a1e; --surface-2:#282127; --surface-3:#332a31; --border:#3a3137; --border-2:#544851; --text:#f4efec; --text-2:#b3a5a0; --text-3:#9c8d87; /* W11 AA: text-3 #82746f→#9c8d87 (3.5→~4.7) */ --primary:#e28cb1; --primary-press:#f0a8c5; --primary-soft:#2c1c25; --accent-2:#f0a8c5; --primary-line:#45303a; --gradient:#e28cb1; --on-primary:#1f1a1e; --green:#9ab26a; --green-soft:#232a1b; --success:#9ab26a; --gold1:#e6bd68; --gold2:#d9ab4e; --warning:#d9ab4e; --warning-soft:#2c2415; --danger:#e08376; --danger-soft:#33201d; --danger-press:#f0a08f; --info:#8fa8d0; /* W8 — koyu'da `line`/`text` tanımsızdı → AÇIK değerler miras alınıyordu (koyu zemin + koyu kahve metin = okunmaz). Kapatıldı. */ --warning-line:#d9ab4e55; --warning-text:#e6c98a; --av-fb:var(--gradient); --av-fb-text:var(--on-primary); --switch-knob:#e8ddd6; --danger-line:#e0837655; --danger-text:#f0b3a9; --success-soft:#232a1b; --success-line:#9ab26a55; --success-text:#c3d49b; --info-soft:#1b2430; --info-line:#8fa8d055; --info-text:#b8cae6; --e1:0 1px 0 rgba(0,0,0,.4); --e2:0 2px 12px rgba(0,0,0,.45); --e3:0 16px 44px rgba(0,0,0,.6); --shadow:var(--e1); } } :root[data-sos-tema="modern"][data-theme="dark"]{ --bg:#161316; --surface:#1f1a1e; --surface-2:#282127; --surface-3:#332a31; --border:#3a3137; --border-2:#544851; --text:#f4efec; --text-2:#b3a5a0; --text-3:#9c8d87; /* W11 AA: text-3 #82746f→#9c8d87 (3.5→~4.7) */ --primary:#e28cb1; --primary-press:#f0a8c5; --primary-soft:#2c1c25; --accent-2:#f0a8c5; --primary-line:#45303a; --gradient:#e28cb1; --on-primary:#1f1a1e; --green:#9ab26a; --green-soft:#232a1b; --success:#9ab26a; --gold1:#e6bd68; --gold2:#d9ab4e; --warning:#d9ab4e; --warning-soft:#2c2415; --danger:#e08376; --danger-soft:#33201d; --danger-press:#f0a08f; --info:#8fa8d0; /* W8 — koyu `line`/`text` (yukarıdaki media bloğunun ikizi) */ --warning-line:#d9ab4e55; --warning-text:#e6c98a; --av-fb:var(--gradient); --av-fb-text:var(--on-primary); --switch-knob:#e8ddd6; --danger-line:#e0837655; --danger-text:#f0b3a9; --success-soft:#232a1b; --success-line:#9ab26a55; --success-text:#c3d49b; --info-soft:#1b2430; --info-line:#8fa8d055; --info-text:#b8cae6; --e1:0 1px 0 rgba(0,0,0,.4); --e2:0 2px 12px rgba(0,0,0,.45); --e3:0 16px 44px rgba(0,0,0,.6); --shadow:var(--e1); } /* --------------------------------------------------------------------------- 3) TEMEL — tipografi Gövde (sans) fontu `body{font-family:var(--font-ui)}` ile otomatik gelir. Burada İÇERİK (serif) yüzeyleri ve başlık dili bağlanır. Ayrım kuralı: **arayüz** (nav, buton, meta, sayaç, etiket) = Gabarito · **içerik + başlık** (okunan her şey) = Lora. Şüphede: kullanıcı OKUYOR mu, yoksa TIKLIYOR mu? Okuyorsa serif. --------------------------------------------------------------------------- */ [data-sos-tema="modern"] body{line-height:1.5} /* başlıklar — Lora 600 + negatif tracking (tasarımın imzası) */ [data-sos-tema="modern"] h1, [data-sos-tema="modern"] h2, [data-sos-tema="modern"] h3, [data-sos-tema="modern"] .ara-bas, [data-sos-tema="modern"] .etiket-ad, [data-sos-tema="modern"] .grup-bas-ad, [data-sos-tema="modern"] .dok-detay-baslik, [data-sos-tema="modern"] .dokuman-baslik, [data-sos-tema="modern"] .sos-dialog h3{ font-family:var(--font-icerik);font-weight:600;letter-spacing:-.015em; } /* 800/700 ağırlıklar Lora'da fazla ağır durur → 600'e indirilir (yukarıdaki blok zaten 600 veriyor; burada line-height ince ayarı) */ [data-sos-tema="modern"] .dok-detay-baslik{font-size:27px;line-height:1.25} [data-sos-tema="modern"] .etiket-ad, [data-sos-tema="modern"] .grup-bas-ad{line-height:1.22} /* içerik gövdeleri — okunan metin serif, cömert satır aralığı, sınırlı satır uzunluğu */ [data-sos-tema="modern"] .post-body, [data-sos-tema="modern"] .yorum-metin, [data-sos-tema="modern"] .dok-detay-aciklama{ font-family:var(--font-icerik);font-size:15.5px;line-height:1.68;max-width:62ch;text-wrap:pretty; } [data-sos-tema="modern"] .yorum-metin{font-size:15px;line-height:1.65} /* açıklama/altyazı satırları da serif (tasarımda sayfa girişleri Lora) */ [data-sos-tema="modern"] .ayar-aciklama, [data-sos-tema="modern"] .gor-bolum-not{font-family:var(--font-icerik)} /* sayılar her yerde hizalı (tasarım: tabular-nums yaygın) */ [data-sos-tema="modern"] .meta, [data-sos-tema="modern"] .post-zaman, [data-sos-tema="modern"] .dokuman-meta{font-variant-numeric:tabular-nums} /* --------------------------------------------------------------------------- 4) ATOMLAR --------------------------------------------------------------------------- */ /* ---- buton — dikdörtgen dil (hap YOK), 600 ağırlık, basılıda 1px aşağı ---- */ [data-sos-tema="modern"] .btn{ padding:10px 18px;border-radius:9px;font-weight:600;font-size:13.5px; transition:background var(--ms-fast) var(--ease),transform var(--ms-fast) var(--ease); } [data-sos-tema="modern"] .btn:active:not(:disabled){transform:translateY(1px)} [data-sos-tema="modern"] .btn.sm{padding:8px 15px;font-size:12.5px;border-radius:9px} [data-sos-tema="modern"] .btn.ghost{ background:var(--surface);border:1px solid var(--border);color:var(--text); } [data-sos-tema="modern"] .btn.ghost:hover{background:var(--surface-2)} /* degrade YOK → altın buton düz okre */ [data-sos-tema="modern"] .btn.gold{background:var(--gold2)} [data-sos-tema="modern"] .btn.gold:hover{background:var(--gold1)} /* ---- ikon buton ---- */ [data-sos-tema="modern"] .top-ic{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:var(--surface)} [data-sos-tema="modern"] .top-ic:hover{color:var(--primary);border-color:var(--primary-line);background:var(--surface)} /* ---- çip / etiket — dikdörtgen + hairline kenar (tasarımın etiket dili) ---- */ [data-sos-tema="modern"] .chip{ padding:4px 10px;border-radius:8px;font-size:12px;font-weight:500; border:1px solid var(--primary-line); } [data-sos-tema="modern"] .chip.green{border-color:transparent} /* pill grupları (gündem/keşfet/kayıt/kategori çipleri) da dikdörtgene iner */ [data-sos-tema="modern"] .gundem-tab, [data-sos-tema="modern"] .kayit-cip, [data-sos-tema="modern"] .dok-kat-cip, [data-sos-tema="modern"] .dok-altkat-link, [data-sos-tema="modern"] .grup-rozet, [data-sos-tema="modern"] .dok-bilgi-chip, [data-sos-tema="modern"] .mod-tip-rozet, [data-sos-tema="modern"] .post-rozet{border-radius:8px;font-weight:600} [data-sos-tema="modern"] .kesfet-mod, [data-sos-tema="modern"] .kesfet-modbtn, [data-sos-tema="modern"] .profil-sekmeler, [data-sos-tema="modern"] .profil-sekme{border-radius:9px} /* görünürlük seçici: hap → dikdörtgen çip */ [data-sos-tema="modern"] .gor-sel{border-radius:8px;border-color:var(--primary-line);font-weight:600} /* ---- avatar — yuvarlak kare; radius boyutla ORANTILI olmalı ---- Genel değer --r-avatar (10px) küçük/orta avatarlar için doğru; büyük avatarlarda 10px "neredeyse kare" görünür → tasarımın oranına göre kademelenir. */ [data-sos-tema="modern"] .profil-avatar, [data-sos-tema="modern"] .profil-avatar img{border-radius:14px} [data-sos-tema="modern"] .pd-avatar-onz, [data-sos-tema="modern"] .pd-avatar-onz img, [data-sos-tema="modern"] .pd-kirp-alan{border-radius:16px} [data-sos-tema="modern"] .ara-kisi-av{border-radius:12px} /* degrade yok → düz aksan zemin (token'dan zaten geliyor); harf ağırlığı 600 kalır */ /* ---- rozetler — sabit hex'ler token'a iner ---- */ [data-sos-tema="modern"] .prem-rozet{color:var(--gold2)} /* ANKET (2026-08-26) — Modern: pill yerine yumuşak köşe (Öğretmen Odası buton dili) */ [data-sos-tema="modern"] .anket-secenek{border-radius:12px;border-width:1px} [data-sos-tema="modern"] .anket-bar{border-radius:10px} [data-sos-tema="modern"] .dog-rozet{color:var(--info)} [data-sos-tema="modern"] .badge-prem{background:var(--gold2);color:var(--on-primary);border-radius:5px} /* ---- input / form ---- */ [data-sos-tema="modern"] .sos-input, [data-sos-tema="modern"] .sos-ig, [data-sos-tema="modern"] .grup-arama-in{ border-radius:9px;background:var(--surface); } [data-sos-tema="modern"] .sos-input:focus, [data-sos-tema="modern"] .sos-ig:focus-within{ border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft); } [data-sos-tema="modern"] .idsel .opt{border-radius:11px;border-width:1px} [data-sos-tema="modern"] .idsel .opt:hover{border-color:var(--border-2)} [data-sos-tema="modern"] .idsel .opt.on{border-color:var(--primary);background:var(--primary-soft)} [data-sos-tema="modern"] .sos-label{font-weight:600;font-size:12.5px} /* ---- kart ---- */ [data-sos-tema="modern"] .card{border-radius:12px} /* ---- toast / modal ---- */ [data-sos-tema="modern"] .sos-toast{border-radius:10px;font-weight:600} [data-sos-tema="modern"] .sos-toast .tic{border-radius:8px} [data-sos-tema="modern"] .sos-modal{background:rgba(36,29,33,.5)} [data-sos-tema="modern"] .sos-dialog{border-radius:14px} [data-sos-tema="modern"] .sos-dialog .dic{border-radius:14px} [data-sos-tema="modern"] .sos-dialog p{font-family:var(--font-icerik);line-height:1.6} /* ---- sekme şeridi — kapsül yerine tasarımın alt-çizgi dili ---- */ [data-sos-tema="modern"] .feed-tabs{ background:transparent;border:0;box-shadow:none;padding:0;gap:18px; border-bottom:1px solid var(--border);border-radius:0; } [data-sos-tema="modern"] .feed-tab{ flex:0 0 auto;padding:0 0 8px;border-radius:0;background:none; font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px; } [data-sos-tema="modern"] .feed-tab.on{ background:none;color:var(--primary);box-shadow:none;border-bottom-color:var(--primary); } [data-sos-tema="modern"] .feed-tab:hover:not(.on){background:none;color:var(--text)} [data-sos-tema="modern"] .feed-tab-say{ border-radius:6px;background:var(--surface-2);color:var(--text-2); } [data-sos-tema="modern"] .feed-tab.on .feed-tab-say{background:var(--primary-soft);color:var(--primary)} /* ---- "yeni gönderi" pili — mavi glow yerine plum, dikdörtgene yakın ---- */ [data-sos-tema="modern"] .yeni-pil{ border-radius:10px;font-weight:600;box-shadow:var(--e2); } /* ---- skeleton — kâğıt tonlarında shimmer kontrastı zayıf kalıyor, surface-3 ile açılır ---- */ [data-sos-tema="modern"] .post-skel .ps-av, [data-sos-tema="modern"] .post-skel .ps-lines span, [data-sos-tema="modern"] .post-skel .ps-body, [data-sos-tema="modern"] .embed-skel{ background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%); background-size:200% 100%; } [data-sos-tema="modern"] .post-skel .ps-body{border-radius:10px} /* ---- boş durum / akış sonu — italik serif, sıcak dil ---- */ [data-sos-tema="modern"] .feed-empty, [data-sos-tema="modern"] .feed-son, [data-sos-tema="modern"] .yorum-bos, [data-sos-tema="modern"] .gundem-bos, [data-sos-tema="modern"] .kat-bos, [data-sos-tema="modern"] .engel-bos, [data-sos-tema="modern"] .mod-bos, [data-sos-tema="modern"] .dok-kut-bos, [data-sos-tema="modern"] .dok-yorum-bos{ font-family:var(--font-icerik);font-style:italic;color:var(--text-2); } [data-sos-tema="modern"] .bld-bos, [data-sos-tema="modern"] .kesfet-kisi-bos{font-family:var(--font-icerik)} /* ---- link / mention / hashtag ---- */ [data-sos-tema="modern"] .post-link, [data-sos-tema="modern"] .post-mention, [data-sos-tema="modern"] .post-hashtag{font-weight:600} /* ---- etiket hash imzası — degrade yok, yumuşak aksan kutusu ---- */ [data-sos-tema="modern"] .etiket-hash{ background:var(--primary-soft);border:1px solid var(--primary-line);color:var(--primary); border-radius:15px;font-family:var(--font-icerik);font-weight:600;box-shadow:none; } /* ---- focus ring — tasarımın dili: yumuşak hale değil, net outline ---- */ [data-sos-tema="modern"] a:focus-visible, [data-sos-tema="modern"] button:focus-visible, [data-sos-tema="modern"] [tabindex]:focus-visible{ outline:2px solid var(--primary);outline-offset:2px;box-shadow:none;border-radius:var(--r-xs); } /* W11 — form öğeleri de Modern halkasını alır (radius kendilerinden) */ [data-sos-tema="modern"] input:focus-visible, [data-sos-tema="modern"] textarea:focus-visible, [data-sos-tema="modern"] select:focus-visible, [data-sos-tema="modern"] summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;box-shadow:none} [data-sos-tema="modern"] .ayar-switch input:focus-visible + .ayar-track{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--primary)} /* ---- W0 borcu: koyu görünümde sırıtan sabit beyazlar ---- */ [data-sos-tema="modern"] .ayar-track::after{background:var(--surface);box-shadow:var(--e1)} [data-sos-tema="modern"] .dm-kon-bas .avatar.dm-cevrimici::after{border-color:var(--surface)} /* ---- Ayarlar > Görünüm (W0'da eklenen ekran) ---- */ [data-sos-tema="modern"] .gor-tema-kart{border-radius:12px} [data-sos-tema="modern"] .gor-tema-nokta{border-radius:7px} /* =========================================================================== 5) KABUK (W2) — başlık · 3 kolon · sol nav · sağ panel · şeritler Tasarımın kabuk imzası: **kolonlar arası dikey hairline**, kartsız sağ panel, cam yerine düz kâğıt başlık. Kolon genişlikleri tasarımdan: 196 / 1fr / 316. =========================================================================== */ /* ---- üst başlık — cam (blur) DEĞİL, düz kâğıt + hairline ---- */ [data-sos-tema="modern"] .sos-top{ background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none; display:block;padding:0; } /* 🔴 W8.5 — üst bar İÇERİĞİ kabukla AYNI 1280px hattına oturur (tasarım: header > div{max-width:1280px}). Bu olmadan marka ekranın sol kenarında, içerik ortada kalıyordu — en görünür sadakat sapmasıydı. */ [data-sos-tema="modern"] .sos-top-ic{ display:flex;align-items:center;gap:20px;height:60px; max-width:1280px;margin:0 auto;padding:0 26px; } /* marka | dikey ayraç | sayfa etiketi */ [data-sos-tema="modern"] .sos-top-ayrac{ display:block;flex:none;width:1px;height:22px;background:var(--border); } [data-sos-tema="modern"] .sos-top-sayfa{ display:block;flex:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--primary);font-weight:600; } /* arama tasarımda SAĞDA (flex:1 boşluğundan sonra) — DOM'da solda kaldı, sırayı CSS veriyor */ [data-sos-tema="modern"] .sos-ara{order:3;width:250px;flex:none} [data-sos-tema="modern"] .sos-top .spacer{order:2} [data-sos-tema="modern"] #temaBtn{order:4} [data-sos-tema="modern"] .top-kisi{order:5} /* görünüm butonu: daire ikon → 34px kenarlı kutu */ [data-sos-tema="modern"] .top-ic{ width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:var(--surface); } [data-sos-tema="modern"] .top-ic:hover{color:var(--primary);border-color:var(--primary-line);background:var(--surface)} /* kullanıcı: 32px avatar + görünen ad */ [data-sos-tema="modern"] .top-kisi{ display:flex;align-items:center;gap:9px;flex:none;color:var(--text);text-decoration:none; } [data-sos-tema="modern"] .top-av{width:32px;height:32px;font-size:12px} [data-sos-tema="modern"] .top-av-ad{ display:block;font-size:13px;font-weight:500;white-space:nowrap; } /* ust-tab Modern'de ana kolonda (blade koşulu) — akış sekmeleri içeriğin başında */ [data-sos-tema="modern"] .col-main > .feed-tabs{margin:0 0 16px} /* W11: 900→960 (yol haritası kırılımı) + dar dropdown viewport'a sığar */ @media (max-width:960px){ [data-sos-tema="modern"] .sos-ara{width:190px} [data-sos-tema="modern"] .top-av-ad{display:none} [data-sos-tema="modern"] .sos-ara-pop{left:auto;right:0;width:min(320px,calc(100vw - 28px))} } [data-sos-tema="modern"] .sos-brand{ font-family:var(--font-icerik);font-weight:600;font-size:18px;letter-spacing:-.01em; } [data-sos-tema="modern"] .sos-brand .muted{ font-family:var(--font-ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--text-3);font-weight:600;align-self:center; } [data-sos-tema="modern"] .logo-dot{border-radius:9px;font-weight:700} /* arama kutusu */ [data-sos-tema="modern"] .sos-ara-in, [data-sos-tema="modern"] .sos-ara{border-radius:10px} [data-sos-tema="modern"] .sos-ara{background:var(--surface);border:1px solid var(--border)} /* ---- 3 kolon ızgara — gap YOK, kolonlar dikey hairline ile ayrılır ---- */ [data-sos-tema="modern"] .sos-web{ max-width:1280px;grid-template-columns:196px minmax(0,1fr) 316px;gap:0;padding:0 26px;margin:0 auto; } [data-sos-tema="modern"] .sos-web:has(.yan-col:empty){grid-template-columns:196px minmax(0,1fr)} /* kolonlar üst barın hemen altına yapışır (Klasik 78px; Modern'de bar tam 60px) */ [data-sos-tema="modern"] .sos-web .col{top:60px} [data-sos-tema="modern"] .sol-col{ padding:22px 22px 40px 0;border-right:1px solid var(--border);min-height:calc(100vh - 60px); } [data-sos-tema="modern"] .col-main{ padding:22px 26px 60px;border-right:1px solid var(--border);max-width:none; } [data-sos-tema="modern"] .yan-col{padding:22px 0 40px 22px} /* sağ panel boşken orta kolonun sağ çizgisi anlamsız kalır */ [data-sos-tema="modern"] .sos-web:has(.yan-col:empty) .col-main{border-right:0} /* breadcrumb + askı şeridi aynı kabuk genişliğine hizalanır */ [data-sos-tema="modern"] .sos-bc-serit, [data-sos-tema="modern"] .aski-serit{max-width:1280px;padding-left:26px;padding-right:26px} [data-sos-tema="modern"] .aski-serit{border-radius:10px} /* ---- sol nav — bölüm başlıklı metin listesi ---- */ [data-sos-tema="modern"] .nav-bolum{ display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--text-3);margin:0 0 10px;padding:0 10px; } [data-sos-tema="modern"] .nav-bolum:not(:first-child){margin-top:20px;padding-top:18px;border-top:1px solid var(--border)} [data-sos-tema="modern"] .nav{gap:1px} [data-sos-tema="modern"] .nav .navitem{ padding:8px 10px;border-radius:9px;gap:11px;font-size:14px;font-weight:400;color:var(--text-2); } [data-sos-tema="modern"] .nav .navitem.nav-cikis{border-bottom-color:var(--border);margin-bottom:14px;padding-bottom:14px} [data-sos-tema="modern"] .nav .navitem.on{font-weight:600;background:var(--primary-soft);color:var(--primary)} [data-sos-tema="modern"] .nav .navitem:hover:not(.on){background:var(--surface-2);color:var(--text)} /* sayaç: dolu pill yerine sade rakam (tasarım) */ [data-sos-tema="modern"] .nav .count, [data-sos-tema="modern"] .nav .navitem .bld-badge{ background:transparent;color:var(--primary);font-weight:600;font-size:11px; padding:0;min-width:0;border-radius:0;box-shadow:none;font-variant-numeric:tabular-nums; } /* ---- sağ panel — kart YOK; mikro başlık + hairline ayraçlı liste ---- */ [data-sos-tema="modern"] .yan-blok, [data-sos-tema="modern"] .side-card{ background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;margin-bottom:22px; } [data-sos-tema="modern"] .yan-blok + .yan-blok, [data-sos-tema="modern"] .side-card + .side-card{padding-top:20px;border-top:1px solid var(--border)} /* 🔴 W8.5 — ORTAK BÖLÜM ŞERİDİ. Tasarımın HER sayfada tekrarlayan bölüm ayracı: mikro-uppercase etiket + flex:1 hairline + sağda eylem/sayaç. W5'te `.bolum-serit` sınıfı yazılmış ama HİÇBİR blade'de kullanılmamıştı; bölümler düz başlık olarak kalmıştı. Mevcut başlık kutuları bu dile çekildi (markup'a dokunmadan). */ [data-sos-tema="modern"] .bolum-serit, [data-sos-tema="modern"] .yan-bas, [data-sos-tema="modern"] .side-card h4, [data-sos-tema="modern"] .side-card-bas, [data-sos-tema="modern"] .kesfet-bolum-ad, [data-sos-tema="modern"] .dok-bolum-bas, [data-sos-tema="modern"] .dm-liste-bas h2, [data-sos-tema="modern"] .grup-panel-bas{ display:flex;align-items:center;gap:12px;margin:0 0 12px; font-family:var(--font-ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--text-3);font-weight:600; } [data-sos-tema="modern"] .bolum-serit::after, [data-sos-tema="modern"] .yan-bas::after, [data-sos-tema="modern"] .side-card h4::after, [data-sos-tema="modern"] .side-card-bas::after, [data-sos-tema="modern"] .kesfet-bolum-ad::after, [data-sos-tema="modern"] .dok-bolum-bas::after, [data-sos-tema="modern"] .dm-liste-bas h2::after, [data-sos-tema="modern"] .grup-panel-bas::after{ content:"";flex:1;height:1px;background:var(--border); } /* şeritte ikon yok — tasarım yalnız etiket + çizgi gösteriyor */ [data-sos-tema="modern"] .kesfet-bolum-ad > svg, [data-sos-tema="modern"] .side-card-bas > svg, [data-sos-tema="modern"] .dok-bolum-bas > svg{display:none} /* keşfet: şerit başlıkla sağdaki toggle arasında uzasın */ [data-sos-tema="modern"] .kesfet-bolum-ad{flex:1} /* F3 — tasarımın şerit sağındaki sayaç (DOLABIN ─── 12 dosya) */ [data-sos-tema="modern"] .side-card-sayi{ display:block;order:3;flex:none;font-size:11px;letter-spacing:0;text-transform:none; color:var(--text-2);font-variant-numeric:tabular-nums;font-weight:500; } [data-sos-tema="modern"] .kesfet-bolum-bas{padding:22px 0 10px;align-items:center} /* doküman detay yorum sayacı şeridin sağ ucuna */ [data-sos-tema="modern"] .dok-bolum-bas .dok-yorum-sayi{order:2;font-size:11px;letter-spacing:0;color:var(--text-2)} [data-sos-tema="modern"] .yan-sabit-oge, [data-sos-tema="modern"] .yan-grup{border-radius:9px} [data-sos-tema="modern"] .yan-sabit-oge .ys-ik{border-radius:9px} [data-sos-tema="modern"] .yan-sabit-oge .ys-baslik{font-family:var(--font-icerik);font-weight:500;font-size:14px} [data-sos-tema="modern"] .yan-grup-ad{font-weight:500} [data-sos-tema="modern"] .yan-grup-pil{border-radius:6px;font-weight:600} [data-sos-tema="modern"] .yan-gruplar-tum{font-weight:600} /* =========================================================================== 6) AKIŞ & GÖNDERİ (W3) Tasarımın en belirgin farkı: **gönderi bir KART DEĞİL**. Hairline ayraçlı liste, gövde avatar hizasından girintili, metin serif ve satır uzunluğu sınırlı. =========================================================================== */ /* ---- composer — kart KALIR (tasarımda da kartlı), sadece dil ---- */ [data-sos-tema="modern"] .compose{padding:16px 18px;border-radius:12px} [data-sos-tema="modern"] .sos-textarea{ font-family:var(--font-icerik);font-size:16.5px;line-height:1.6;min-height:46px; } [data-sos-tema="modern"] .compose-bar{border-top:1px dashed var(--border);padding-top:12px;margin-top:12px} [data-sos-tema="modern"] .ikon-btn{border-radius:8px} /* ---- gönderi — kart kabuğu KALKAR ---- */ [data-sos-tema="modern"] .post{ background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0; box-shadow:none;padding:20px 0;margin-bottom:0; } [data-sos-tema="modern"] .post-head{align-items:flex-start;gap:11px} [data-sos-tema="modern"] .post-head .name{font-weight:600;font-size:15px} [data-sos-tema="modern"] .post-head .meta{font-size:11.5px;color:var(--text-2);font-variant-numeric:tabular-nums} [data-sos-tema="modern"] .post-zaman{color:var(--text-2)} /* gövde ve altındaki her blok avatar hizasından girintili (42px avatar + 11px gap) */ [data-sos-tema="modern"] .post-body, [data-sos-tema="modern"] .post-medya, [data-sos-tema="modern"] .post-dokumanlar, [data-sos-tema="modern"] .post .embed-direct, [data-sos-tema="modern"] .post .embed-facade, [data-sos-tema="modern"] .post .embed-sosyal, [data-sos-tema="modern"] .post > .post-gomulu, [data-sos-tema="modern"] .post-aksiyon{margin-left:53px} [data-sos-tema="modern"] .post-body{margin-top:12px;margin-bottom:0} [data-sos-tema="modern"] .post-medya{border-radius:11px;margin-top:14px} [data-sos-tema="modern"] .post-dokumanlar{margin-top:14px;max-width:560px} [data-sos-tema="modern"] .post-aksiyon{margin-top:14px;gap:16px} /* onay/zamanlandı şeridi ve repost üstü girintisiz kalır (gönderinin üstünde tam genişlik) */ [data-sos-tema="modern"] .post-onay-serit{border-radius:8px;font-weight:600} [data-sos-tema="modern"] .post-onay-bekliyor{ border-bottom-style:solid;border-left:2px solid var(--primary-line);padding-left:12px;opacity:1; } [data-sos-tema="modern"] .repost-ust{font-size:12.5px;padding:0 0 10px} /* ---- aksiyon barı — zeminsiz metin butonları (tasarım) ---- */ [data-sos-tema="modern"] .post-akt{ padding:0;border-radius:0;font-size:12.5px;font-weight:600;gap:7px;background:none; } [data-sos-tema="modern"] .post-akt:hover{background:none;color:var(--primary)} [data-sos-tema="modern"] .post-akt.begeniBtn:hover{color:var(--danger)} [data-sos-tema="modern"] .post-akt.repostBtn:hover{color:var(--green)} [data-sos-tema="modern"] .post-akt span{font-variant-numeric:tabular-nums} /* "kaydet" tasarımda etiketli kutu buton — ikon-only kalıyor ama çerçeveleniyor */ [data-sos-tema="modern"] .post-akt.kaydetBtn{ padding:5px 9px;border:1px solid var(--border);border-radius:8px; } [data-sos-tema="modern"] .post-akt.kaydetBtn:hover{border-color:var(--primary-line);background:var(--primary-soft)} [data-sos-tema="modern"] .post-akt.kaydetBtn.aktif{border-color:var(--primary-line);background:var(--primary-soft);color:var(--primary)} /* ---- gömülü gönderi (alıntı kaynağı) — kart KALIR ---- */ [data-sos-tema="modern"] .post-gomulu{border-radius:11px;padding:12px 14px} [data-sos-tema="modern"] .post-gomulu-ad{font-weight:600} [data-sos-tema="modern"] .post-gomulu-metin{font-family:var(--font-icerik);font-size:14.5px;line-height:1.6} /* ---- rozetler (sabit/boost/grup) ---- */ [data-sos-tema="modern"] .post-rozet{font-size:10px;letter-spacing:.06em;text-transform:uppercase} [data-sos-tema="modern"] .post-rozet.boost{background:var(--gold2);color:var(--on-primary)} [data-sos-tema="modern"] .post-grup-rozet{ border-radius:7px;font-size:11.5px;border:1px solid var(--primary-line);background:var(--primary-soft); } /* ---- yorumlar — balon yerine hairline satır (tasarım dili) ---- */ [data-sos-tema="modern"] .post-yorumlar{margin-top:16px;padding-top:16px} [data-sos-tema="modern"] .yorum-composer{border-radius:11px;background:var(--surface)} [data-sos-tema="modern"] .yorum-liste{gap:0} [data-sos-tema="modern"] .yorum{padding:14px 0;border-top:1px solid var(--border);gap:12px} [data-sos-tema="modern"] .yorum-liste .yorum:first-child{border-top:0} [data-sos-tema="modern"] .yorum-balon{background:transparent;border-radius:0;padding:0;display:block} [data-sos-tema="modern"] .yorum-ad{font-weight:600;font-size:14px} [data-sos-tema="modern"] .yorum-alt{margin-left:0;margin-top:8px;gap:16px} [data-sos-tema="modern"] .yorum-gorsel{border-radius:10px} [data-sos-tema="modern"] .yorum-begen:hover, [data-sos-tema="modern"] .yorum-begen.aktif{color:var(--danger)} [data-sos-tema="modern"] .yorum-begen.aktif .ic{fill:var(--danger);stroke:var(--danger)} /* ---- akış sonu / durum satırları ---- */ [data-sos-tema="modern"] .feed-son{font-size:12.5px} /* =========================================================================== 7) DOKÜMAN (W4) Fazın iki imzası: a) **Klasör sekmesi** — dosya kartının üstünde tip etiketi, gövde `0 11 11 11` radius. Sekme CSS `::before` + `content:attr(data-uz)` ile çizilir → Blade'e TEK attribute. b) **Çubuklu puan** — yıldız SVG'leri gizlenip aynı `` kutuları 13×4px çubuğa dönüştürülür → markup'a HİÇ dokunulmadan tasarımın göstergesi gelir. ⛔ Feed/kütüphane kartında puan **GÖSTERİLMEZ** (rakip koruması — 04_sapmalar.md S1). =========================================================================== */ /* ---- a) klasör sekmesi ---- */ [data-sos-tema="modern"] .dokuman-kart-sar[data-uz]::before{ content:attr(data-uz);display:inline-block; padding:4px 12px;border-radius:8px 8px 0 0; background:var(--primary);color:var(--on-primary); font-size:9.5px;font-weight:700;letter-spacing:.1em;line-height:1.4; /* sarmalayıcı ızgarada flex-column → sekme etiket genişliğinde kalmalı, gerilmemeli */ align-self:flex-start;flex:none;width:auto; } /* tip-bazlı sekme rengi (tasarım: PDF plum · DOCX mürekkep mavisi · XLSX zeytin) */ [data-sos-tema="modern"] .dokuman-kart-sar[data-uz="DOC"]::before, [data-sos-tema="modern"] .dokuman-kart-sar[data-uz="DOCX"]::before{background:var(--info)} [data-sos-tema="modern"] .dokuman-kart-sar[data-uz="XLS"]::before, [data-sos-tema="modern"] .dokuman-kart-sar[data-uz="XLSX"]::before{background:var(--green)} [data-sos-tema="modern"] .dokuman-kart-sar[data-uz="PPT"]::before, [data-sos-tema="modern"] .dokuman-kart-sar[data-uz="PPTX"]::before{background:var(--gold2)} [data-sos-tema="modern"] .dokuman-kart-sar[data-uz="ZIP"]::before, [data-sos-tema="modern"] .dokuman-kart-sar[data-uz="RAR"]::before{background:var(--text-2)} [data-sos-tema="modern"] .dokuman-kart{ border-radius:0 11px 11px 11px;background:var(--surface);align-items:flex-start;padding:14px 16px; } [data-sos-tema="modern"] .dokuman-kart:hover{ background:var(--surface);border-color:var(--primary-line);box-shadow:var(--e2);transform:translateY(-1px); } [data-sos-tema="modern"] .dokuman-baslik{ font-family:var(--font-icerik);font-weight:600;font-size:16px;white-space:normal;line-height:1.35; } [data-sos-tema="modern"] .dokuman-meta{font-size:11.5px;color:var(--text-2);font-variant-numeric:tabular-nums;margin-top:6px} /* sekme zaten tipi söylüyor → meta'daki uzantı tekrarı kalkar */ [data-sos-tema="modern"] .dokuman-uzanti{display:none} [data-sos-tema="modern"] .dokuman-ikon, [data-sos-tema="modern"] .dokuman-onizleme{border-radius:9px} [data-sos-tema="modern"] .dokuman-yukleyen{font-size:11.5px;color:var(--text-2)} [data-sos-tema="modern"] .dokuman-kaydet{border-radius:8px} /* ---- kütüphane ızgarası — önizleme kartları KORUNUR (S-U5), sekme üstte oturur ---- */ [data-sos-tema="modern"] .dokuman-izgara{gap:18px} [data-sos-tema="modern"] .dokuman-izgara .dokuman-kart{ border-radius:0 11px 11px 11px;padding:0;align-items:stretch; } [data-sos-tema="modern"] .dokuman-izgara .dokuman-kart:hover{transform:translateY(-2px)} [data-sos-tema="modern"] .dokuman-izgara .dokuman-kart-sar{flex-direction:column} [data-sos-tema="modern"] .dokuman-izgara .dokuman-onizleme, [data-sos-tema="modern"] .dokuman-izgara .dokuman-ikon{border-radius:0} [data-sos-tema="modern"] .dokuman-izgara .dokuman-baslik{font-size:15.5px} [data-sos-tema="modern"] .dok-ara-kutu{border-radius:10px;background:var(--surface)} [data-sos-tema="modern"] .dok-kut-arac{gap:14px} /* ---- kategori ağacı / çipleri ---- */ [data-sos-tema="modern"] .kat-panel{border-radius:12px} [data-sos-tema="modern"] .kat-sayi{border-radius:6px;font-variant-numeric:tabular-nums} /* ---- b) çubuklu puan göstergesi (yıldız → çubuk, markup değişmeden) ---- */ [data-sos-tema="modern"] .sos-yildizlar{gap:2px;align-items:center;color:var(--warning)} [data-sos-tema="modern"] .sos-yildizlar .yildiz{ display:inline-block;width:13px;height:4px;border-radius:2px;background:var(--surface-3); } [data-sos-tema="modern"] .sos-yildizlar .yildiz .lic{display:none} [data-sos-tema="modern"] .sos-yildizlar .yildiz.dolu{background:var(--warning)} [data-sos-tema="modern"] .sos-yildizlar .yildiz:not(.dolu){color:inherit} [data-sos-tema="modern"] .dok-puan-satir .sos-yildizlar{color:var(--warning)} /* puan VERME (interaktif) — dokunma hedefi korunmalı, o yüzden buton kutusu kalır, içindeki yıldız SVG'si çubuğa döner */ [data-sos-tema="modern"] .sos-yildiz-sec{gap:3px} [data-sos-tema="modern"] .yildiz-btn{ padding:0;width:34px;height:10px;border:1px solid var(--border-2);border-radius:3px; background:transparent;transition:background var(--ms-fast),transform var(--ms-fast); } [data-sos-tema="modern"] .yildiz-btn .lic{display:none} [data-sos-tema="modern"] .yildiz-btn.dolu{background:var(--warning);border-color:var(--warning)} [data-sos-tema="modern"] .yildiz-btn:hover{transform:none;border-color:var(--warning)} [data-sos-tema="modern"] .dok-puanla{gap:12px} [data-sos-tema="modern"] .dok-puanla-not{font-family:var(--font-icerik);font-style:italic;color:var(--text-2)} [data-sos-tema="modern"] .dok-puan-deg{font-variant-numeric:tabular-nums} /* ---- doküman detay ---- */ [data-sos-tema="modern"] .dok-detay{border-radius:12px} [data-sos-tema="modern"] .dok-detay-baslik{font-size:27px;letter-spacing:-.02em;line-height:1.22} [data-sos-tema="modern"] .dok-detay-aciklama{ font-family:var(--font-icerik);font-size:15.5px;line-height:1.68;color:var(--text-2);max-width:58ch; } [data-sos-tema="modern"] .dok-detay-kategori{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)} [data-sos-tema="modern"] .dok-detay-ikon{border-radius:11px} [data-sos-tema="modern"] .dok-bilgi-kutu{border-radius:11px} [data-sos-tema="modern"] .dok-indir-btn{border-radius:9px;font-weight:600;font-size:13.5px;padding:10px 20px} [data-sos-tema="modern"] .dok-indir-btn:active{transform:translateY(1px)} [data-sos-tema="modern"] .dok-onizleme-gorsel{border-radius:11px} /* doküman yorumları — gönderi yorumlarıyla aynı dil (kutu → hairline satır) */ [data-sos-tema="modern"] .dok-yorum-liste{gap:0} [data-sos-tema="modern"] .dok-yorum{padding:14px 0;border-top:1px solid var(--border);gap:12px} [data-sos-tema="modern"] .dok-yorum-liste .dok-yorum:first-child{border-top:0} [data-sos-tema="modern"] .dok-yorum-govde{background:transparent;border:0;border-radius:0;padding:0} [data-sos-tema="modern"] .dok-yorum-ad{font-weight:600} [data-sos-tema="modern"] .dok-yorum-metin{font-family:var(--font-icerik);font-size:15px;line-height:1.65} [data-sos-tema="modern"] .dok-yorum-ta{border-radius:9px;background:var(--surface)} [data-sos-tema="modern"] .dok-yorum-gonder{border-radius:9px;font-weight:600} [data-sos-tema="modern"] .dok-yorum-daha{border-radius:9px;font-weight:600} /* 🔴 W8.5 (F5) — doküman detay: üst blok ORTALANMIŞTI; tasarımda TÜM düzen sola hizalı (başlık · meta · açıklama · etiketler soldan akar). Önizleme görseli korunur (U5). */ [data-sos-tema="modern"] .dok-detay-ust-blok{text-align:left;padding:24px 26px 22px} [data-sos-tema="modern"] .dok-onizleme-kol{margin:0} [data-sos-tema="modern"] .dok-detay-baslik{font-size:26px;line-height:1.22;margin:0 0 10px} /* ---- sağ panel "öne çıkan dosyalar" — mini klasör sekmesi dili (S10) ---- */ [data-sos-tema="modern"] .yan-sabit-oge .ys-ik{background:var(--primary-soft);color:var(--primary)} /* =========================================================================== 8) PROFİL · KEŞFET · ARAMA · ETİKET (W5) =========================================================================== */ /* ---- ORTAK: bölüm ayracı deseni ---- Tasarımın her sayfada tekrarlayan başlık şeridi: mikro-uppercase etiket + hairline + sağda sayaç. Mevcut markup'ta hazır bir kap yok; en yakın karşılıklar (`.yan-bas`, `.dok-bolum-bas`, `.oneri-kisi-tum` üstü) bu dile çekildi. Yeni bir kap gerektiğinde `.bolum-serit` kullanılır. */ [data-sos-tema="modern"] .bolum-serit{ display:flex;align-items:center;gap:12px;margin:22px 0 4px; } [data-sos-tema="modern"] .bolum-serit::after{content:"";flex:1;height:1px;background:var(--border)} [data-sos-tema="modern"] .bolum-serit b{ font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600; } /* ---- PROFİL — künye kartsız + SOLA hizalı (tasarımın düzeni) ---- */ [data-sos-tema="modern"] .profil-card{ background:transparent;border:0;border-radius:0;box-shadow:none; padding:6px 0 22px;text-align:left; display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;align-items:start; } [data-sos-tema="modern"] .profil-card .profil-avatar{ width:76px;height:76px;font-size:25px;margin:0;grid-row:1 / span 5; } [data-sos-tema="modern"] .profil-ad{ font-family:var(--font-icerik);font-weight:600;font-size:26px;letter-spacing:-.015em;margin:0 0 3px; } [data-sos-tema="modern"] .profil-card > .muted{font-size:13px;color:var(--text-2)} [data-sos-tema="modern"] .profil-bio{ font-family:var(--font-icerik);font-size:15.5px;line-height:1.68;color:var(--text-2); max-width:58ch;margin:11px 0 0; } /* sayaçlar: tasarımın ayraçlı istatistik şeridi */ [data-sos-tema="modern"] .profil-sayaclar{ justify-content:flex-start;gap:0;margin:20px 0 0;border-top:1px solid var(--border); } [data-sos-tema="modern"] .profil-sayaclar > *{ flex:1;padding:14px 16px 0;text-align:left;border-right:1px solid var(--border); } /* ilk kolon ana kolonun kenarına hizalı kalır; sonrakiler ayraçtan 16px içeride (sol padding olmadan sayı+etiket dikey çizgiye YAPIŞIYORDU) */ [data-sos-tema="modern"] .profil-sayaclar > *:first-child{padding-left:0} [data-sos-tema="modern"] .profil-sayaclar > *:last-child{border-right:0} [data-sos-tema="modern"] .profil-sayaclar b{ display:block;font-size:22px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums; } [data-sos-tema="modern"] .profil-sayaclar .muted{ display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:5px; } [data-sos-tema="modern"] .profil-aksiyon{justify-content:flex-start;margin-top:16px} [data-sos-tema="modern"] .profil-ust-menu{border-radius:9px;top:0;right:0} /* profil sekmeleri — kapsül → tasarımın alt-çizgi dili (feed sekmeleriyle aynı) */ [data-sos-tema="modern"] .profil-sekmeler{ background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0; padding:0;gap:18px;box-shadow:none; } [data-sos-tema="modern"] .profil-sekme{ flex:0 0 auto;background:none;border-radius:0;padding:0 0 8px; font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px; } [data-sos-tema="modern"] .profil-sekme.on{ background:none;color:var(--primary);box-shadow:none;border-bottom-color:var(--primary); } [data-sos-tema="modern"] .profil-sekme .sekme-sayi{opacity:.85;font-variant-numeric:tabular-nums} /* ---- KEŞFET ---- */ [data-sos-tema="modern"] .kesfet-wrap{max-width:none} [data-sos-tema="modern"] .kesfet-kart{ background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;margin-bottom:22px; } [data-sos-tema="modern"] .kesfet-kart + .kesfet-kart{padding-top:20px;border-top:1px solid var(--border)} /* gündem kapsam çipleri — hap grubu → dikdörtgen segment */ [data-sos-tema="modern"] .kesfet-mod{border-radius:9px;padding:3px;background:var(--surface-2)} [data-sos-tema="modern"] .kesfet-modbtn{border-radius:7px;font-size:11.5px;font-weight:600} [data-sos-tema="modern"] .gundem-tab{font-size:11.5px} /* trend satırı — tasarımın "etiket kartı" dili (ad plum serif + alan + sayı) */ [data-sos-tema="modern"] .kesfet-wrap .trend{border-top:1px solid var(--border)} [data-sos-tema="modern"] .kesfet-wrap .trend:first-of-type{border-top:0} [data-sos-tema="modern"] .kesfet-wrap .trend .t{ font-family:var(--font-icerik);font-weight:600;font-size:15.5px;color:var(--primary); } [data-sos-tema="modern"] .kesfet-wrap .trend .c{color:var(--text-2);font-variant-numeric:tabular-nums} /* kişi/grup öneri satırları */ [data-sos-tema="modern"] .oneri-kisi, [data-sos-tema="modern"] .oneri-grup{border-radius:9px} [data-sos-tema="modern"] .oneri-kisi-tum, [data-sos-tema="modern"] .oneri-grup-tum{font-weight:600} [data-sos-tema="modern"] .oneri-kisi-yok, [data-sos-tema="modern"] .oneri-grup-yok{border-radius:8px} /* ---- ARAMA — sonuç kartları hairline satıra iner ---- */ [data-sos-tema="modern"] .ara-bas{ font-family:var(--font-icerik);font-weight:600;font-size:24px;letter-spacing:-.015em; } [data-sos-tema="modern"] .ara-ozet{font-size:12.5px;color:var(--text-2)} [data-sos-tema="modern"] .ara-liste{gap:0} [data-sos-tema="modern"] .ara-kisi, [data-sos-tema="modern"] .ara-etiket, [data-sos-tema="modern"] .ara-dokuman{ background:transparent;border:0;border-top:1px solid var(--border);border-radius:0; box-shadow:none;padding:14px 0; } [data-sos-tema="modern"] .ara-liste > :first-child{border-top:0} [data-sos-tema="modern"] .ara-kisi:hover, [data-sos-tema="modern"] .ara-etiket:hover, [data-sos-tema="modern"] .ara-dokuman:hover{ background:var(--surface-2);box-shadow:none;border-color:var(--border); } [data-sos-tema="modern"] .ara-kisi-ad, [data-sos-tema="modern"] .ara-etiket-ad, [data-sos-tema="modern"] .ara-dokuman-ad{ font-family:var(--font-icerik);font-weight:600;font-size:15.5px; } [data-sos-tema="modern"] .ara-kisi-alt, [data-sos-tema="modern"] .ara-kisi-bio, [data-sos-tema="modern"] .ara-etiket-alt, [data-sos-tema="modern"] .ara-dokuman-alt{font-size:12.5px;color:var(--text-2)} [data-sos-tema="modern"] .ara-etiket-ic, [data-sos-tema="modern"] .ara-dokuman-ic{ border-radius:11px;background:var(--primary-soft);border:1px solid var(--primary-line); font-family:var(--font-icerik);font-weight:600; } [data-sos-tema="modern"] .ara-bos{font-family:var(--font-icerik);font-style:italic} [data-sos-tema="modern"] .ara-yukleniyor{font-family:var(--font-icerik);font-style:italic} /* ---- ETİKET künyesi — tasarımın kart düzeni ---- */ [data-sos-tema="modern"] .etiket-bas-ic{gap:16px} [data-sos-tema="modern"] .etiket-hash{width:56px;height:56px;font-size:26px} [data-sos-tema="modern"] .etiket-ad{font-size:24px;color:var(--primary)} /* =========================================================================== 9) GRUPLAR (W6) ⚠️ Tasarım "Zümre" diyor — **ad "Gruplar" KALIR** (K3 / 04_sapmalar.md S8); yalnız biçim alınır. ⚠️ Tasarımda karşılığı olmayan ama KORUNAN özellikler: kapak görseli · gizlilik türleri · aidiyet rozeti · onay kuyruğu · davet linki · üye engelleme · uyarı banner'ı · okul değerlendirme. Hepsi modern dile uyarlandı, hiçbiri kaldırılmadı. =========================================================================== */ /* 🔴 W8.5 (F2) — SAYFA AÇILIŞ BLOĞU: tasarımın her ana ekranı "Lora başlık + serif açıklama" ile açılıyor. Başlıklar genel h1/h2 kuralıyla zaten serifti; AÇIKLAMA satırları sans kalmıştı. */ [data-sos-tema="modern"] .dok-kut-bas h1, [data-sos-tema="modern"] .kesfet-hero-ad{font-size:26px;letter-spacing:-.015em} [data-sos-tema="modern"] .dok-kut-bas p, [data-sos-tema="modern"] .kesfet-hero-alt, [data-sos-tema="modern"] .grup-kesif-bas .muted, [data-sos-tema="modern"] .ara-bas + .muted, [data-sos-tema="modern"] .etiket-aciklama{ font-family:var(--font-icerik);font-size:14.5px;line-height:1.6;max-width:56ch;color:var(--text-2); } [data-sos-tema="modern"] .dok-kut-bas, [data-sos-tema="modern"] .kesfet-hero{padding:0 0 18px;background:none;border:0;box-shadow:none} /* ---- grup keşfi ---- */ [data-sos-tema="modern"] .grup-kesif-bas{ background:transparent;border:0;border-radius:0;box-shadow:none;padding:0 0 18px;margin-bottom:0; } [data-sos-tema="modern"] .grup-kesif-baslik{ font-family:var(--font-icerik);font-weight:600;font-size:24px;letter-spacing:-.015em; } [data-sos-tema="modern"] .grup-arama-in{border-radius:10px;height:44px;background:var(--surface)} [data-sos-tema="modern"] .grup-grid{gap:16px} [data-sos-tema="modern"] .grup-kart{border-radius:12px} [data-sos-tema="modern"] .grup-kart:hover{transform:translateY(-1px);border-color:var(--primary-line)} /* kapak: degrade yok → sakin kâğıt tonu (kapak GÖRSELİ varsa onu ezmez, o inline background) */ [data-sos-tema="modern"] .grup-kart-kapak, [data-sos-tema="modern"] .grup-bas-kapak{background-color:var(--surface-3);background-image:none} [data-sos-tema="modern"] .grup-kart-kapak[style*="url"], [data-sos-tema="modern"] .grup-bas-kapak[style*="url"]{background-image:inherit} [data-sos-tema="modern"] .grup-kart-av{border-radius:13px;font-weight:600} [data-sos-tema="modern"] .grup-kart-ad{font-family:var(--font-icerik);font-weight:600;font-size:16px} [data-sos-tema="modern"] .grup-kart-ack{font-size:12.5px;color:var(--text-2)} [data-sos-tema="modern"] .grup-uye-sayi{font-variant-numeric:tabular-nums} [data-sos-tema="modern"] .grup-bos{font-family:var(--font-icerik);font-style:italic} /* ---- grup künyesi ---- */ [data-sos-tema="modern"] .grup-bas{border-radius:12px} [data-sos-tema="modern"] .grup-bas-av{border-radius:16px;font-weight:600} [data-sos-tema="modern"] .grup-bas-ad{ font-family:var(--font-icerik);font-weight:600;font-size:24px;letter-spacing:-.015em; } [data-sos-tema="modern"] .grup-bas-meta{font-size:12.5px;font-variant-numeric:tabular-nums} [data-sos-tema="modern"] .grup-uye-rozet{border-radius:8px;font-size:12.5px} [data-sos-tema="modern"] .grup-mnu-btn{border-radius:9px;width:40px;height:40px} [data-sos-tema="modern"] .grup-rozet-aidiyet{background:var(--warning-soft);color:var(--warning)} /* ---- grup sekmeleri — kapsül → alt-çizgi (feed/profil/arama ile aynı dil) ---- */ [data-sos-tema="modern"] .grup-sekme{ background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0; padding:0;gap:18px;box-shadow:none;margin-bottom:16px; } [data-sos-tema="modern"] .grup-sekme .feed-tab{padding:0 0 8px;font-size:12px} [data-sos-tema="modern"] .grup-tab-say, [data-sos-tema="modern"] .grup-sekme .grup-tab-say{ font-size:10.5px;padding:0;margin-left:5px;color:var(--text-3);font-variant-numeric:tabular-nums; } [data-sos-tema="modern"] .feed-tab.on .grup-tab-say{color:var(--primary)} /* panel kapları kartsızlaşır — ⚠️ COMPOSER HARİÇ: o tasarımda da kartlıdır. ⚠️ Grup composer'ının sınıfı `.compose` DEĞİL, **`.grup-composer`** (ana akıştan farklı!); ilk denemede `.grup-panel .card` toptan sıfırlanınca composer kabuğunu kaybetti. */ [data-sos-tema="modern"] .grup-panel .card:not(.grup-composer):not(.compose){ padding:0;background:transparent;border:0;box-shadow:none; } [data-sos-tema="modern"] .grup-panel .card.grup-composer{padding:16px 18px;border-radius:12px} [data-sos-tema="modern"] .grup-panel-bas{ font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600; } /* ---- üye / istek / onay / engel satırları ---- */ [data-sos-tema="modern"] .grup-uye-av{font-weight:600} [data-sos-tema="modern"] .grup-uye-ad{font-weight:600} [data-sos-tema="modern"] .grup-uye-etiket{border-radius:6px;font-size:10px;letter-spacing:.06em;text-transform:uppercase} [data-sos-tema="modern"] .grup-uye-cikar, [data-sos-tema="modern"] .grup-uye-engelle{border-radius:8px} [data-sos-tema="modern"] .grup-istek-onay, [data-sos-tema="modern"] .grup-istek-red, [data-sos-tema="modern"] .grup-davet-et{border-radius:8px;font-weight:600} [data-sos-tema="modern"] .grup-onay-etiket{color:var(--warning)} /* ---- grup modalları (kur/düzenle · davet · engel) ---- */ [data-sos-tema="modern"] .grup-modal{background:rgba(36,29,33,.55)} [data-sos-tema="modern"] .grup-modal-kutu{border-radius:14px} [data-sos-tema="modern"] .grup-modal-bas b{font-family:var(--font-icerik);font-weight:600;font-size:17px} [data-sos-tema="modern"] .grup-form-in{border-radius:9px;background:var(--surface)} [data-sos-tema="modern"] .grup-form-l{font-weight:600;font-size:12.5px} [data-sos-tema="modern"] .grup-giz-sec{border-radius:11px} [data-sos-tema="modern"] .grup-yukle-kapak{border-radius:11px;border-style:dashed} [data-sos-tema="modern"] .grup-yukle-avatar{border-radius:14px} [data-sos-tema="modern"] .grup-yukle-kapak.dolu .grup-yukle-ipucu{border-radius:8px} /* ---- boş / kilitli durumlar ---- */ [data-sos-tema="modern"] .grup-bos-akis, [data-sos-tema="modern"] .grup-kilit-mini{font-family:var(--font-icerik);font-style:italic;color:var(--text-2)} [data-sos-tema="modern"] .grup-bos-akis p{font-style:normal;font-weight:600;color:var(--text)} [data-sos-tema="modern"] .grup-kilit h2{font-family:var(--font-icerik);font-weight:600} [data-sos-tema="modern"] .grup-hk-ack{font-family:var(--font-icerik);font-size:15.5px;line-height:1.68;max-width:58ch} [data-sos-tema="modern"] .grup-hk-satir{font-size:13.5px} [data-sos-tema="modern"] .grup-engel-not{border-radius:10px;font-family:var(--font-icerik)} /* ---- grup menüsü ---- */ [data-sos-tema="modern"] .grup-mnu{border-radius:11px} [data-sos-tema="modern"] .grup-mnu-it{border-radius:8px} /* ---- uyarı banner'ı (D-ADMIN) — sabit turuncular token'a ---- */ [data-sos-tema="modern"] .feed-uyari-kart{ border-radius:11px;border-color:var(--warning-line);border-left-color:var(--warning); background:var(--warning-soft); } [data-sos-tema="modern"] .feed-uyari-ikon{border-radius:9px;background:var(--surface);color:var(--warning)} [data-sos-tema="modern"] .feed-uyari-bas{color:var(--warning-text)} [data-sos-tema="modern"] .feed-uyari-metin{font-family:var(--font-icerik);font-size:14.5px;line-height:1.6} /* ---- okul değerlendirme (D3) — çubuklu puan W4'ten miras ---- */ [data-sos-tema="modern"] .okul-deg-pano, [data-sos-tema="modern"] .okul-deg-kart{border-radius:12px} [data-sos-tema="modern"] .okul-deg-genel-puan{font-size:30px;font-weight:600;color:var(--warning)} [data-sos-tema="modern"] .okul-deg-kr-ad{font-size:12.5px} [data-sos-tema="modern"] .okul-deg-kr-deg, [data-sos-tema="modern"] .okul-deg-oy, [data-sos-tema="modern"] .okul-deg-puan b{font-variant-numeric:tabular-nums} [data-sos-tema="modern"] .okul-deg-ad{font-weight:600} [data-sos-tema="modern"] .okul-deg-yorum{font-family:var(--font-icerik);font-size:15px;line-height:1.65} /* =========================================================================== 10) MESAJLAR / DM (W7) Tasarımın DM imzası: **serif mesaj metni** + asimetrik balon radius (benden `12 12 4 12` · karşı `12 12 12 4`) + sakin liste paneli. ⚠️ Korunanlar (tasarımda yok): istek kutusu · arşiv · sabitleme · reaksiyon · presence/"yazıyor" · grup konuşması · denetim görünümü · okundu tikleri · gün ayraçları. =========================================================================== */ [data-sos-tema="modern"] .dm-sayfa{border-radius:12px} [data-sos-tema="modern"] .dm-liste-panel{background:var(--surface-2)} /* F4 — W7'de "marka dili" gerekçesiyle serife çevrilmişti; TASARIM mikro-uppercase şerit istiyor (yukarıdaki ortak kural uygular). Bilinçsiz sapma geri alındı. */ [data-sos-tema="modern"] .dm-yeni-grup{border-radius:9px} /* sekmeler (Gelen · İstekler · Arşiv) — hap → dikdörtgen */ [data-sos-tema="modern"] .dm-sekme{border-radius:8px;font-size:12.5px} [data-sos-tema="modern"] .dm-sekme-rozet{border-radius:6px;font-weight:600} /* konuşma satırı — aktifte yumuşak aksan zemini (tasarım) + sol aksan çizgisi (kod kazanımı) */ [data-sos-tema="modern"] .dm-satir.on{background:var(--primary-soft)} [data-sos-tema="modern"] .dm-satir-ust b{font-weight:600} [data-sos-tema="modern"] .dm-satir-onz{font-size:12px} [data-sos-tema="modern"] .dm-okunmamis{border-radius:6px;font-weight:600} [data-sos-tema="modern"] .dm-liste-bos{font-family:var(--font-icerik);font-style:italic} /* konuşma paneli */ [data-sos-tema="modern"] .dm-kon-bilgi b{font-weight:600} [data-sos-tema="modern"] .dm-bos-ikon{border-radius:16px} [data-sos-tema="modern"] .dm-bos{font-family:var(--font-icerik)} [data-sos-tema="modern"] .dm-bos b{font-family:var(--font-icerik);font-weight:600} [data-sos-tema="modern"] .dm-istek-band{font-size:12.5px} [data-sos-tema="modern"] .dm-gun-ayrac span{border-radius:7px;font-weight:600} /* ---- balonlar — tasarımın asimetrik köşeleri + SERİF metin ---- */ [data-sos-tema="modern"] .dm-balon{border-radius:12px 12px 12px 4px;padding:10px 13px} [data-sos-tema="modern"] .dm-msg.benden .dm-balon{border-radius:12px 12px 4px 12px} [data-sos-tema="modern"] .dm-msg-metin{font-family:var(--font-icerik);font-size:15px;line-height:1.6} [data-sos-tema="modern"] .dm-msg-gorsel{border-radius:9px} [data-sos-tema="modern"] .dm-msg-meta{opacity:.75} /* 🔴 gönderdiğim balonun tikleri sabit beyaz/açık-maviydi — Modern KOYU görünümde balon zemini açık pembeye döndüğü için okunmuyordu. Artık balonun kendi metin rengini izliyor. */ [data-sos-tema="modern"] .dm-msg.benden .dm-msg-meta .dm-tik{color:currentColor;opacity:.75} [data-sos-tema="modern"] .dm-msg.benden .dm-msg-meta .dm-tik.okundu{color:currentColor;opacity:1} [data-sos-tema="modern"] .dm-msg-silindi{font-family:var(--font-icerik)} [data-sos-tema="modern"] .dm-akt-btn{border-radius:8px} [data-sos-tema="modern"] .dm-msg-reply{font-family:var(--font-icerik)} /* ---- composer ---- */ [data-sos-tema="modern"] .dm-metin{ border-radius:9px;background:var(--surface);font-family:var(--font-icerik);font-size:15px;line-height:1.5; } [data-sos-tema="modern"] .dm-gonder{border-radius:9px;font-weight:600} [data-sos-tema="modern"] .dm-gorsel-cubuk img{border-radius:7px} [data-sos-tema="modern"] .dm-kilit{font-family:var(--font-icerik);font-style:italic} /* ---- grup konuşması modalları ---- */ [data-sos-tema="modern"] .dm-gk-ad, [data-sos-tema="modern"] .dm-gk-ara{border-radius:9px;background:var(--surface)} [data-sos-tema="modern"] .dm-gk-chip{border-radius:8px;padding:3px 5px 3px 9px;font-weight:600} [data-sos-tema="modern"] .dm-gk-kisi{border-radius:8px} [data-sos-tema="modern"] .dm-gk-avatar-onz{border-radius:11px} /* --------------------------------------------------------------------------- 11) KALAN EKRANLAR (W8) — bildirim · ayarlar · moderasyon · onboarding · sistem Tasarım karoları: bildirimMi · ayarMi · moderasyonMi · onboardMi · banMi ⚠️ Renk üçlüleri (uyarı/ceza/başarı/bilgi) `sosyal.css` token'larından gelir; burada YALNIZ biçim (kabuk · yarıçap · tipografi · ayraç) ezilir. --------------------------------------------------------------------------- */ /* ---- 11.1 Bildirimler — kart kabuğu kalkar, hairline liste olur (akış deseni) ---- */ [data-sos-tema="modern"] .bld-sayfa{background:none;border:0;border-radius:0;overflow:visible} [data-sos-tema="modern"] .bld-bas{padding:0 0 14px;border-bottom:1px solid var(--border)} [data-sos-tema="modern"] .bld-bas h1{font-family:var(--font-icerik);font-weight:600;font-size:24px;letter-spacing:0} [data-sos-tema="modern"] .bld-tumu-okundu, [data-sos-tema="modern"] .bld-tumu-sil{border-radius:9px} [data-sos-tema="modern"] .bld-liste .bldr{padding:14px 8px 14px 0;border-bottom:0;border-top:1px solid var(--border)} [data-sos-tema="modern"] .bld-liste .bldr:first-child{border-top:0} /* satır metni OKUNUR → serif (DM/gönderi ile aynı ayrım) */ [data-sos-tema="modern"] .bldr-mtn{font-family:var(--font-icerik);font-size:15px;line-height:1.5} [data-sos-tema="modern"] .bldr-mtn b{font-weight:600} [data-sos-tema="modern"] .bldr-zaman{font-variant-numeric:tabular-nums;font-size:11.5px} [data-sos-tema="modern"] .bldr-uyari-neden{border-radius:9px;padding:8px 11px;font-family:var(--font-icerik);font-size:13.5px} [data-sos-tema="modern"] .bldr-nokta{width:7px;height:7px} [data-sos-tema="modern"] .bld-bos{font-family:var(--font-icerik);font-style:italic} /* zil dropdown — aynı satır bileşeni, kâğıt panelde */ [data-sos-tema="modern"] .bld-pop{border-radius:12px} [data-sos-tema="modern"] .bld-pop .bldr{padding-left:15px;padding-right:15px} [data-sos-tema="modern"] .bld-pop-bas b{font-family:var(--font-icerik);font-weight:600} /* ---- 11.2 Ayarlar — tek kart kabuğu kalkar; 198px nav + dikey hairline (W2 kabuk dili) ---- */ [data-sos-tema="modern"] .ayar-duzen{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;gap:24px} [data-sos-tema="modern"] .ayar-nav{width:198px;padding:0;border-right:0} [data-sos-tema="modern"] .ayar-nav-bas{font-size:10px;letter-spacing:.14em;padding:0 10px 10px} [data-sos-tema="modern"] .ayar-nav-it{padding:9px 10px;border-radius:9px;font-size:13.5px} [data-sos-tema="modern"] .ayar-nav-it.on{background:var(--primary-soft);color:var(--primary);font-weight:700} [data-sos-tema="modern"] .ayar-nav-sayi{border-radius:7px} [data-sos-tema="modern"] .ayar-govde{padding:0} [data-sos-tema="modern"] .ayar-baslik{font-family:var(--font-icerik);font-weight:600;font-size:22px;letter-spacing:0} [data-sos-tema="modern"] .ayar-altbaslik{font-size:17px} [data-sos-tema="modern"] .ayar-govde .ayar-aciklama{font-family:var(--font-icerik);max-width:56ch;line-height:1.6} /* anahtar listesi tasarımın kutusuna girer (kabuk kalktığı için kendi çerçevesi olmalı) */ [data-sos-tema="modern"] .ayar-liste{border:1px solid var(--border);border-radius:12px;background:var(--surface); box-shadow:var(--e1);overflow:hidden} [data-sos-tema="modern"] .ayar-satir{padding:14px 16px} [data-sos-tema="modern"] .ayar-satir:first-child{border-top:0} [data-sos-tema="modern"] .ayar-ic{border-radius:9px;width:36px;height:36px} [data-sos-tema="modern"] .ayar-select{border-radius:9px} [data-sos-tema="modern"] .ayar-kaydet-serit{padding:16px 0 0} /* anahtar: tasarım ölçüleri (46×26 · 20px topuz) — hap formu KALIR, dikdörtgen dilin istisnası */ [data-sos-tema="modern"] .ayar-track{width:46px;height:26px;border:1px solid var(--border);background:var(--surface-2)} [data-sos-tema="modern"] .ayar-track::after{width:20px;height:20px;top:2px;left:2px;box-shadow:var(--e1)} [data-sos-tema="modern"] .ayar-switch input:checked + .ayar-track{border-color:var(--primary)} /* dolu track KOYU görünümde AÇIK pembeye döner → topuz koyu yüzeye geçmeli (--on-primary deseni) */ [data-sos-tema="modern"] .ayar-switch input:checked + .ayar-track::after{background:var(--on-primary)} [data-sos-tema="modern"] .ayar-switch input:checked + .ayar-track::after{transform:translateX(20px)} /* sessiz saat kutusu — tasarımın "arasında bildirim gelmez" satırı */ [data-sos-tema="modern"] .sessiz-saat{border-radius:9px;font-variant-numeric:tabular-nums;font-weight:600} [data-sos-tema="modern"] .sessiz-etiket{font-family:var(--font-icerik)} /* ---- 11.3 Moderasyon — sayaç şeridi kartsız ızgara · ihbar kartı → hairline satır ---- */ [data-sos-tema="modern"] .mod-bas h1{font-family:var(--font-icerik);font-weight:600;font-size:24px;letter-spacing:0} [data-sos-tema="modern"] .mod-bas .muted{font-family:var(--font-icerik);max-width:56ch} [data-sos-tema="modern"] .mod-sayac{gap:0;border-top:1px solid var(--border);margin-bottom:8px} [data-sos-tema="modern"] .mod-sayac-oge{background:none;border:0;border-right:1px solid var(--border); border-radius:0;padding:16px} [data-sos-tema="modern"] .mod-sayac-oge:first-child{padding-left:0} [data-sos-tema="modern"] .mod-sayac-oge:last-child{border-right:0} [data-sos-tema="modern"] .mod-sayac-oge b{font-size:23px;font-weight:600;line-height:1.1} [data-sos-tema="modern"] .mod-sayac-oge span{font-size:11px;letter-spacing:.1em} /* sekmeler: kapsül segment → alt-çizgi (feed·profil·arama·grup·DM ile aynı beşinci desen olmasın) */ [data-sos-tema="modern"] .mod-tabs{background:none;padding:0;gap:0;border-radius:0;border-bottom:1px solid var(--border)} [data-sos-tema="modern"] .mod-tab{border-radius:0;padding:9px 14px;box-shadow:none;background:none; border-bottom:2px solid transparent;margin-bottom:-1px;font-size:13px} [data-sos-tema="modern"] .mod-tab.on{background:none;box-shadow:none;color:var(--text);border-bottom-color:var(--primary)} [data-sos-tema="modern"] .mod-tab-ayrik{border-left:1px solid var(--border);margin-left:6px} [data-sos-tema="modern"] .mod-kart{background:none;border:0;border-radius:0;padding:16px 0; border-top:1px solid var(--border)} [data-sos-tema="modern"] .mod-liste{gap:0} [data-sos-tema="modern"] .mod-tip-rozet{border-radius:7px;font-size:10.5px;letter-spacing:.06em;padding:3px 9px} [data-sos-tema="modern"] .mod-sebep{font-size:12.5px;font-weight:500;color:var(--text-2)} [data-sos-tema="modern"] .mod-hedef-link{font-family:var(--font-icerik);font-size:15px} /* şikayet açıklaması = OKUNAN metin → tasarımın serif içerik kutusu */ [data-sos-tema="modern"] .mod-aciklama{font-family:var(--font-icerik);font-size:15px;line-height:1.6; padding:12px 14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border); max-width:62ch;margin:10px 0 8px} [data-sos-tema="modern"] .mod-aksiyon{padding-top:11px} [data-sos-tema="modern"] .mod-aksiyon .btn{border-radius:9px} [data-sos-tema="modern"] .mod-karar-rozet{font-size:11.5px} [data-sos-tema="modern"] .mod-bos{font-family:var(--font-icerik);font-style:italic} [data-sos-tema="modern"] .mod-neden{border-radius:9px;font-family:var(--font-icerik)} [data-sos-tema="modern"] .mod-dm-mesaj{border-radius:10px} [data-sos-tema="modern"] .mod-dm-metin{font-family:var(--font-icerik)} [data-sos-tema="modern"] .mod-yaptirim-av{border-radius:var(--r-avatar)} /* ---- 11.4 Onboarding — 520px ortalı kart ---- */ [data-sos-tema="modern"] .sos-center:has(.ob-kart){max-width:520px} [data-sos-tema="modern"] .ob-kart{padding:28px;border-radius:14px;box-shadow:var(--e2)} [data-sos-tema="modern"] .ob-bas h2{font-family:var(--font-icerik);font-weight:600;font-size:23px;letter-spacing:0} [data-sos-tema="modern"] .ob-rozet{border-radius:8px;background:var(--primary-soft);border:1px solid var(--primary-line); color:var(--primary);font-size:11.5px;font-weight:600} [data-sos-tema="modern"] .idsel{gap:10px} [data-sos-tema="modern"] .idsel .opt{border-width:1px;border-radius:11px;padding:14px;text-align:left} [data-sos-tema="modern"] .idsel .opt .ic{display:inline-grid;place-items:center;width:34px;height:34px; border-radius:10px;background:var(--surface);border:1px solid var(--border)} [data-sos-tema="modern"] .idsel .opt .t{font-size:14px;font-weight:600} [data-sos-tema="modern"] .sos-ig{border-radius:9px;background:var(--surface-2)} [data-sos-tema="modern"] .ob-gonder{border-radius:10px;padding:13px} [data-sos-tema="modern"] .sos-label{font-weight:600;font-size:12.5px} /* ---- 11.5 Sistem ekranları — ban · erişim yok · doküman hazırlanıyor (tek dil) ---- */ [data-sos-tema="modern"] .sistem-kart{padding:40px 28px;background:none;border:0;box-shadow:none} /* tasarım: kutu NÖTR kâğıt, renk yalnız ikonda (ban·erişim yok aynı kabuk) — `.sistem-ikon.tehlike` iki-sınıflı olduğu için burada da iki sınıfla ezilmeli, yoksa Klasik zemini kazanır. */ [data-sos-tema="modern"] .sistem-ikon, [data-sos-tema="modern"] .sistem-ikon.tehlike, [data-sos-tema="modern"] .sistem-ikon.notr{border-radius:20px;background:var(--surface-2);border:1px solid var(--border)} [data-sos-tema="modern"] .sistem-ikon.tehlike{color:var(--danger)} [data-sos-tema="modern"] .sistem-ikon.notr{color:var(--text-3)} [data-sos-tema="modern"] .sistem-kart h2{font-family:var(--font-icerik);font-weight:600;font-size:23px;letter-spacing:0} [data-sos-tema="modern"] .sistem-kart>p.muted{font-family:var(--font-icerik);font-size:15.5px;line-height:1.68;max-width:44ch} [data-sos-tema="modern"] .sistem-neden{border-radius:11px;background:var(--surface);max-width:44ch} [data-sos-tema="modern"] .sistem-neden small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)} [data-sos-tema="modern"] .sistem-don{border-radius:9px} [data-sos-tema="modern"] .dok-hazirlaniyor{background:none;border:0;box-shadow:none} [data-sos-tema="modern"] .dok-haz-ikon{width:72px;height:72px;border-radius:20px;background:var(--surface-2); border:1px solid var(--border);color:var(--primary)} [data-sos-tema="modern"] .dok-hazirlaniyor h1{font-family:var(--font-icerik);font-weight:600;letter-spacing:0} [data-sos-tema="modern"] .dok-hazirlaniyor p{font-family:var(--font-icerik);line-height:1.68} [data-sos-tema="modern"] .dok-haz-btn{border-radius:9px} /* ---- 11.6 Hoşgeldin-takip · engellenenler · susturulanlar · istekler ---- */ [data-sos-tema="modern"] .hosgeldin-bas h1{font-family:var(--font-icerik);font-weight:600;letter-spacing:0} [data-sos-tema="modern"] .hosgeldin-bas .muted{font-family:var(--font-icerik);line-height:1.6} [data-sos-tema="modern"] .hosgeldin-takip .card{background:none;border:0;box-shadow:none;padding:0} [data-sos-tema="modern"] .engel-liste{gap:0} [data-sos-tema="modern"] .engel-satir{border-radius:0;padding:14px 6px;border-top:1px solid var(--border)} [data-sos-tema="modern"] .engel-satir:first-child{border-top:0} [data-sos-tema="modern"] .engel-tx b{font-weight:600} [data-sos-tema="modern"] .engel-bos{font-family:var(--font-icerik);font-style:italic} /* ---- responsive (W11): tasarım kırılımları — 1160 sağ panel · 880 tek kolon + nav çekmecesi; hairline'lar kolon kaybolunca kalkar. (W11 ÖNCESİ HATA: 1040-1160 arası grid 2 kolona iniyordu ama .yan-col gizlenmiyordu → panel alt satıra düşüyordu.) ---- */ @media (max-width:1160px){ [data-sos-tema="modern"] .sos-web{grid-template-columns:196px minmax(0,1fr)} [data-sos-tema="modern"] .yan-col{display:none} [data-sos-tema="modern"] .col-main{border-right:0} } @media (max-width:880px){ [data-sos-tema="modern"] .sos-web{grid-template-columns:1fr;padding:0 16px} [data-sos-tema="modern"] .col-main{padding:18px 0 60px;border-right:0} [data-sos-tema="modern"] .sos-web .col{position:static} [data-sos-tema="modern"] .sos-web .sol-col{position:fixed;top:0;left:0;bottom:0;z-index:80;width:264px;max-width:82vw; background:var(--surface);border-right:1px solid var(--border);padding:18px 16px;min-height:0;overflow-y:auto; transform:translateX(-105%);transition:transform var(--ms) var(--ease)} html.nav-acik[data-sos-tema="modern"] .sos-web .sol-col{transform:none} [data-sos-tema="modern"] .nav-btn{display:grid} [data-sos-tema="modern"] .sos-top-ic{gap:12px;padding:0 16px} [data-sos-tema="modern"] .sos-ara{width:auto;flex:1 1 auto;min-width:0} [data-sos-tema="modern"] .sos-ara-pop{left:0;right:0;width:auto} } @media (max-width:600px){ [data-sos-tema="modern"] .sos-top-sayfa, [data-sos-tema="modern"] .sos-top-ayrac{display:none} }