/* ========================================================================== SODOO uygulama kılavuzları ve modül sayfaları — görünüm -------------------------------------------------------------------------- FİKİR: her uygulama kendi rengini giyer. Palet uydurulmadı. SODOO'nun kendi 40 uygulama rengi zaten var ve sayfalar onu `` ile taşıyor; burada o TEK değişkenden üç ton türetiliyor: --accent doygun — kiremit, başlık işareti, etkin ray öğesi --wash %8 — sayfanın atmosferi: başlık bandı, kutular --tint %18 — kenarlar, çipler, tablo başlığı Böylece Muhasebe sayfası petrol yeşiline, CRM pembeye, Üretim turuncuya çalar; ama üçü de aynı tipografi, aynı ızgara, aynı hiyerarşidir. Renk bezeme değil KİMLİK: okuyucu hangi uygulamanın kılavuzunda olduğunu sayfanın yarısını okumadan bilir. ÜÇ BÖLGE AYRI OKUNUR. Sol ray ve sağdaki "bu sayfada" ZEMİN üzerinde durur; içerik ise beyaz bir SAYFA olarak onun üstünde yüzer. Önceki sürümde üçü de aynı zeminde duruyordu ve göz nerede okuyacağını her seferinde yeniden arıyordu. Karanlık tema yok (2026-09-13 kullanıcı kararı). ========================================================================== */ :root { --accent: #dd4814; --accent-dim: #b8380f; --ground: #eef1f5; --sheet-radius: 16px; --tone-note: #1d4ed8; --tone-note-wash: #eff6ff; --tone-tip: #047857; --tone-tip-wash: #ecfdf5; --tone-warn: #b45309; --tone-warn-wash: #fffbeb; --tone-stop: #b91c1c; --tone-stop-wash: #fef2f2; } body:not(.g-handbook) { /* Kılavuz bir KİTAP değil, bir BAŞVURU metnidir: okunmaz, taranır. El kitabının serif gövdesi orada doğru, burada ağır kalıyordu -- bu yüzden el kitabı bu kuralın DIŞINDA: aynı sistemin iki kaydı. */ font-family: var(--sans); font-size: 15.5px; line-height: 1.65; } body { background: var(--ground); } /* Vurgudan türeyen tonlar. `color-mix` desteklenmezse yedek olarak nötr yüzeyler devreye girer -- sayfa renksiz kalır ama hiçbir zaman okunmaz olmaz. */ body { --wash: #f6f7f9; --tint: #e3e7ec; } @supports (background: color-mix(in srgb, red 10%, white)) { body { --wash: color-mix(in srgb, var(--accent) 8%, #ffffff); --tint: color-mix(in srgb, var(--accent) 18%, #ffffff); --accent-ink: color-mix(in srgb, var(--accent) 78%, #1a1f26); } } /* -------------------------------------------------------------------------- Üç bölge -------------------------------------------------------------------------- */ .shell { gap: 0; padding: 0 24px 72px; /* El kitabı 1560 pikselde duruyor ve bu bir KİTAP için doğru: metin sütunu zaten dar, fazlası boşluk olurdu. Kılavuz öyle değil -- içinde tablolar, kart ızgaraları ve ekran görüntüleri var ve bunların hepsi genişlikten YARARLANIR. 2560 piksellik bir ekranda sayfanın üçte biri boş duruyordu. */ /* 2560 piksellik bir ekranda kabuğu sonuna kadar açmak, metin sütununu da onunla birlikte açmaz -- satır uzunluğunun bir üst sınırı var. O yüzden kabuk toplanıyor: sayfa kenarında makul bir boşluk kalıyor ve beyaz kart, içindeki metne göre BOŞ görünmüyor. */ max-width: 1620px; } /* Sağdaki "bu sayfada" sütunu daraldı: içinde yalnız başlık adları var, 216 piksel onlara fazla geliyordu ve orta sütundan çalıyordu. */ :root { --rail-w: 268px; --toc-w: 186px; } /* Sol ray: zeminin üstünde. ------------------------------------------------------------------------- AYIRICI ÇİZGİ YOK ve bu bilinçli. Ray da sağdaki "bu sayfada" da YAPIŞKAN ve boyları İÇERİKLERİ kadar; kenarlarına çizgi koyunca çizgi içerik bitince ortada kesiliyor ve yanında anlamsız bir boşluk bırakıyordu. Sütunları zaten ortadaki beyaz kartın kendi kenarı ayırıyor. */ .scale { padding-top: 22px; } .scale__part { padding-left: 22px; padding-right: 16px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0; color: var(--ink-faint); } .scale__list { padding-left: 10px; } .scale__link { grid-template-columns: 1fr; gap: 0; padding: 6px 14px 6px 12px; margin: 1px 8px 1px 0; border-radius: 8px; font-size: 0.875rem; color: var(--ink-soft); } /* Ray numaralandırması kaldırıldı: kılavuzlar bir SIRA değil, bir katalogdur. Numara (ya da nokta) burada bilgi taşımıyordu, yalnız satır başına gürültü ekliyordu. */ .scale__num, .scale__num--dot { display: none; } /* ...ve numarayla birlikte CETVEL de gider. ------------------------------------------------------------------------- El kitabının sol omurgası bir ölçüm cetvelidir: 43 pikselde dikey bir çizgi, her bölümün hizasında 7 piksellik bir çentik. Orada bilgi taşıyor, çünkü çentik bölüm NUMARASININ yanında duruyor ve okuyucuya kitabın neresinde olduğunu söylüyor. Kılavuzlarda numara yok, dolayısıyla çentiğin hizalayacağı bir şey de yok: geriye başlıkların altında asılı kalmış kesik kesik çizgiler kalıyordu. */ .scale__list { background-image: none; } .scale__link::before { content: none; } .scale__link:hover { background: var(--wash); color: var(--ink); } .scale__item--current .scale__link { background: var(--tint); color: var(--accent-ink, var(--ink)); font-weight: 600; } /* Okunan bölümün işaretçisi: solda kısa bir renk çubuğu. */ .scale__item--current { position: relative; } .scale__item--current::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--accent); } /* Orta sütun: zeminin üstünde yüzen beyaz sayfa. */ .shell > main { margin: 22px 26px 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--sheet-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -18px rgba(16, 24, 40, 0.18); overflow: hidden; } /* Ölçü YALNIZ DÜZYAZIYA uygulanır. -------------------------------------------------------------------------- Önceki sürümde sayfanın her doğrudan çocuğu 76 karaktere kısıtlanıyordu ve bu iki ayrı kusur üretiyordu: satırlar 130 karakterden 76'ya indi (doğru), ama TABLOLAR, kart ızgaraları ve ekran görüntüleri de aynı dar sütuna sıkıştı (yanlış). Bir tablonun dar kalması için hiçbir sebep yok; okuma konforu satırın uzunluğundan gelir, kutunun genişliğinden değil. O yüzden: paragraf, liste ve başlık ölçüye uyar; yapısal bloklar sayfanın tamamını kullanır. */ .shell > main > *:not(.guide-head):not(.pager) { margin-left: 36px; margin-right: 36px; } .shell > main > .content-section, .shell > main > section { max-width: none; margin-left: 0; margin-right: 0; padding: 0 36px; } main p, main > ul, main > ol, main section > ul, main section > ol, main .content-section > ul, main .content-section > ol, main blockquote, main h2, main h3, main h4, main h5, .info-box, .learning-box, .checklist-box, .scenario-box, .ui-guide, .faq-item { /* Düzyazı ölçüsü. 86ch, 1286 piksellik bir sayfanın içinde 595 piksel ediyordu -- kartın yarısından fazlası boş kalıyordu ve okuyucu haklı olarak "alan var ama metin sıkışmış" diyordu. 95 karakter, 15,5 pikselde ve 1.65 satır aralığında hâlâ rahat okunur; üst sınır satırın kendisi, kutunun genişliği değil. */ /* Ölçü `ch` DEĞİL `rem`. `ch` yazı tipine bağlı: Plex yüklüyken 100ch 775 piksel, yedek yazı tipiyle 930 piksel ediyor -- yani aynı kural iki farklı sayfa üretiyor ve ölçtüğün sayı yayımlanan sayı olmuyor. 48rem = 768 piksel, Plex'te yaklaşık 99 karakter. */ max-width: 48rem; } /* Bunlar ölçüye UYMAZ: genişlik onlar için okunabilirlik demek. */ main table, .table-container, .data-table-wrap, .feature-grid, .feature-cards, .concept-grid, .module-cards, .app-grid, .kpi-grid, .config-grid, .comparison-grid, .metric-grid, .card-grid, .process-flow, .lifecycle-stage, .timeline, figure.screenshot, .screenshot, .diagram, .chat-example, main pre, .doc-shot-pending { max-width: none; } /* Sağ sütun: zeminin üstünde, soldan ince bir çizgiyle ayrılmış. */ .toc { /* Yatay boşluk 42 pikseldi ve sütun 186 piksele indiğinde metne 144 piksel kalıyordu -- sütunun dörtte biri boşluktu. */ padding: 30px 12px 64px 14px; font-size: 0.8rem; } .toc__label { padding-left: 12px; color: var(--ink-faint); font-weight: 600; } .toc ul { border-left: 2px solid var(--rule-soft); } .toc li a { color: var(--ink-soft); } .toc li a.is-current { color: var(--accent-ink, var(--accent)); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); } @media (max-width: 1280px) { .shell > main { margin: 16px 0 0; border-radius: 12px; } .toc { padding-left: 10px; } } @media (max-width: 960px) { .shell { padding: 0 14px 56px; } .scale { padding-top: 14px; } .shell > main > *:not(.guide-head):not(.pager), .shell > main > section, .shell > main > .content-section { margin-left: 0; margin-right: 0; padding-left: 20px; padding-right: 20px; } } /* -------------------------------------------------------------------------- Sayfa başlığı — uygulamanın kimliği -------------------------------------------------------------------------- */ .guide-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: center; margin: 0 0 30px; padding: 30px 40px 28px; background: linear-gradient(180deg, var(--wash) 0%, var(--paper) 100%); border-bottom: 1px solid var(--rule); /* Sayfanın üstünde uygulamanın rengi: ince, ama tartışmasız. */ border-top: 4px solid var(--accent); margin-top: -1px; } .guide-head__icon { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; font-size: 1.9rem; color: #fff; background: linear-gradient(140deg, var(--accent) 0%, var(--accent-dim) 100%); box-shadow: 0 10px 24px -12px var(--accent); } .guide-head h1 { margin: 0; font-size: 1.85rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); } .guide-head__sum { margin: 7px 0 0; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); max-width: 44rem; } @media (max-width: 560px) { .guide-head { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 22px 20px 20px; } .guide-head__icon { width: 52px; height: 52px; border-radius: 14px; font-size: 1.3rem; } .guide-head h1 { font-size: 1.4rem; } } /* -------------------------------------------------------------------------- Başlıklar — gövdeden AYRIŞIRLAR -------------------------------------------------------------------------- Önceki sürümde h2 ile gövde arasında yalnız kalınlık farkı vardı ve tarayan göz bölüm sınırını bulamıyordu. Üç sinyal birden: boyut sıçraması, üstte uygulamanın renginde kısa bir işaret, altta ince bir çizgi. -------------------------------------------------------------------------- */ main section { scroll-margin-top: calc(var(--top-h) + 20px); } main h2, .section-title { position: relative; margin: 52px 0 18px; padding-top: 16px; padding-bottom: 0; border-bottom: 0; font-size: 1.52rem; font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); } main h2::before, .section-title::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 4px; border-radius: 2px; background: var(--accent); } main section:first-of-type h2:first-child { margin-top: 8px; } main h3, .subsection-title { margin: 34px 0 10px; font-size: 1.14rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); } main h4 { margin: 24px 0 7px; font-size: 1rem; font-weight: 650; color: var(--ink); } main h5 { margin: 20px 0 6px; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); } main h2 i, main h3 i, main h4 i, main h5 i { margin-right: 9px; color: var(--accent); } main p { margin: 0 0 14px; } main a { color: var(--accent-ink, var(--accent)); text-decoration-color: var(--tint); } main a:hover { text-decoration-color: var(--accent); } /* Kartın TAMAMI bir bağlantı olduğunda, içindeki her satırın altını çizmek kartı bir bağlantı yığınına çeviriyor. Tıklanabilirliği kartın kendisi (kenar, gölge, imleç) anlatır; metin sakin kalır. */ a.app-card, a.feature-card, a.module-card, a.doc-card, a.usecase-card { display: block; text-decoration: none; color: inherit; } a.app-card:hover .app-name, a.feature-card:hover .feature-title, a.module-card:hover .module-card-title, a.doc-card:hover .card-title { color: var(--accent-ink, var(--accent)); } /* -------------------------------------------------------------------------- Arayüz göndermeleri — ekranda GÖRÜLEN bir şeyi işaret ederler -------------------------------------------------------------------------- */ .field-ref, .btn-ref, .menu-path, .tab-ref, .screen-ref, .command-ref, .shortcut-key, .kbd { display: inline-block; font-family: var(--sans); font-size: 0.85em; font-weight: 500; line-height: 1.5; white-space: nowrap; border-radius: 6px; padding: 1px 8px; vertical-align: baseline; } .field-ref { background: var(--surround); border: 1px solid var(--rule); color: var(--ink); } .btn-ref { background: linear-gradient(140deg, var(--accent) 0%, var(--accent-dim) 100%); color: #fff; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); } .btn-ref.secondary { background: var(--paper); color: var(--ink); border-color: var(--rule); box-shadow: none; } .menu-path, .tab-ref, .screen-ref { background: var(--wash); border: 1px solid var(--tint); color: var(--accent-ink, var(--ink)); } .command-ref, .shortcut-key, .kbd { font-family: var(--mono); background: var(--surround); border: 1px solid var(--rule); border-bottom-width: 2px; color: var(--ink); } @media (max-width: 700px) { .field-ref, .btn-ref, .menu-path, .tab-ref, .screen-ref, .command-ref, .shortcut-key, .kbd { white-space: normal; overflow-wrap: anywhere; } } /* -------------------------------------------------------------------------- Kutular — dört anlam, dört pastel -------------------------------------------------------------------------- */ .info-box, .learning-box, .checklist-box, .scenario-box { position: relative; margin: 26px 0; padding: 16px 20px 16px 20px; border: 1px solid var(--tint); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--wash); } .info-box > :first-child, .learning-box > :first-child, .scenario-box > :first-child, .checklist-box > :first-child { margin-top: 0; } .info-box > :last-child, .learning-box > :last-child, .scenario-box > :last-child, .checklist-box > :last-child { margin-bottom: 0; } .info-box.note, .info-box.info { background: var(--tone-note-wash); border-color: #dbeafe; border-left-color: var(--tone-note); } .info-box.tip, .info-box.success { background: var(--tone-tip-wash); border-color: #d1fae5; border-left-color: var(--tone-tip); } .info-box.important, .info-box.warning { background: var(--tone-warn-wash); border-color: #fde68a; border-left-color: var(--tone-warn); } .info-box.danger, .info-box.stop { background: var(--tone-stop-wash); border-color: #fecaca; border-left-color: var(--tone-stop); } .info-box-title, .scenario-header { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; font-size: 0.95rem; font-weight: 650; color: var(--ink); } /* İkon bir çip içinde: metnin yanındaki serbest ikon, kutunun anlamını taşımak için fazla sessiz kalıyordu. */ .info-box-title i, .scenario-header i, .learning-box > h4 i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 0.82rem; color: #fff; background: var(--accent); } .info-box.note .info-box-title i, .info-box.info .info-box-title i { background: var(--tone-note); } .info-box.tip .info-box-title i, .info-box.success .info-box-title i { background: var(--tone-tip); } .info-box.important .info-box-title i, .info-box.warning .info-box-title i { background: var(--tone-warn); } .info-box.danger .info-box-title i, .info-box.stop .info-box-title i { background: var(--tone-stop); } .info-box-content, .scenario-content { font-size: 0.97rem; line-height: 1.65; color: var(--ink-soft); } /* -------------------------------------------------------------------------- Kart ızgaraları -------------------------------------------------------------------------- */ .feature-grid, .feature-cards, .concept-grid, .module-cards, .app-grid, .kpi-grid, .config-grid, .comparison-grid, .metric-grid, .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr)); gap: 16px; margin: 26px 0; } .feature-card, .feature-box, .feature-item, .concept-card, .module-card, .app-card, .kpi-card, .stat-card, .metric-card, .doc-card, .usecase-card, .comparison-card, .practice-card, .provider-card, .tool-card, .config-item { min-width: 0; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .feature-card:hover, .concept-card:hover, .module-card:hover, .app-card:hover, .doc-card:hover, .usecase-card:hover { border-color: var(--tint); box-shadow: 0 8px 22px -16px rgba(16, 24, 40, 0.5); } .kpi-card, .stat-card, .metric-card { background: var(--wash); border-color: var(--tint); } .feature-card h4, .feature-box h4, .concept-card h4, .module-card h4, .usecase-card h4, .practice-card h4, .comparison-card h4 { margin: 0 0 7px; font-size: 1.02rem; font-weight: 650; } .feature-card p, .feature-box p, .concept-card p, .module-card p, .usecase-card p, .practice-card p, .comparison-card p, .feature-desc, .card-description, .config-item-desc, .app-desc, .module-card-desc, .step-desc, .stage-desc { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--ink-soft); } .feature-icon, .card-icon, .app-icon, .kpi-icon, .module-card-icon, .provider-icon, .lifecycle-icon, .concept-card .icon, .action-category-icon, .widget-icon, .tree-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 13px; font-size: 1.15rem; color: #fff; background: linear-gradient(140deg, var(--accent) 0%, var(--accent-dim) 100%); box-shadow: 0 8px 18px -12px var(--accent); } /* Kutunun içinde GERÇEK bir uygulama ikonu varsa, altına vurgu gradyanı koymak iki rengi çarpıştırır: Odoo'nun kendi ikonları zaten renkli. O durumda kutu nötr bir çerçeveye çekilir ve ikon kendi rengiyle konuşur. */ .app-icon:has(img), .feature-icon:has(img), .card-icon:has(img), .module-card-icon:has(img) { padding: 7px; background: var(--wash); border: 1px solid var(--tint); box-shadow: none; } .app-icon img, .feature-icon img, .card-icon img, .module-card-icon img { width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; background: none; box-shadow: none; } .feature-title, .card-title, .app-name, .module-card-title, .config-item-title, .kpi-name, .kpi-title, .stage-title, .step-title { display: block; margin-bottom: 4px; font-size: 1.02rem; font-weight: 650; line-height: 1.35; } .app-module, .module-card-version, .kpi-desc, .kpi-description, .kpi-label, .stat-label, .metric-label, .provider-speed { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); } .kpi-value, .stat-value, .stat-number, .metric-value, .widget-value { display: block; font-size: 1.6rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; color: var(--accent-ink, var(--accent)); font-variant-numeric: tabular-nums; } .kpi-formula { margin-top: 7px; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); } /* -------------------------------------------------------------------------- Rozetler -------------------------------------------------------------------------- */ .badge, .status-badge, .feature-tag, .version-badge, .app-badge { display: inline-block; padding: 2px 10px; border: 1px solid var(--tint); border-radius: 999px; background: var(--wash); font-size: 0.76rem; font-weight: 600; line-height: 1.6; color: var(--accent-ink, var(--ink-soft)); white-space: nowrap; } .badge-ce, .badge-green, .badge.success { background: var(--tone-tip-wash); border-color: #d1fae5; color: var(--tone-tip); } .badge-orange, .badge.warning { background: var(--tone-warn-wash); border-color: #fde68a; color: var(--tone-warn); } .badge-enterprise, .badge.danger { background: var(--tone-stop-wash); border-color: #fecaca; color: var(--tone-stop); } /* -------------------------------------------------------------------------- Süreç akışı — "şu olur, sonra şu". Burada numara BİLGİDİR: içerik gerçekten bir sıra. -------------------------------------------------------------------------- */ .process-flow, .lifecycle-stage, .action-categories, .timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 26px 0; padding: 16px; border-radius: 14px; background: var(--wash); border: 1px solid var(--tint); } .process-step, .lifecycle-step, .collab-stage { display: inline-flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 15px 8px 9px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); font-size: 0.9rem; font-weight: 500; line-height: 1.4; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } .step-number, .step-num, .process-step-number, .number, .day-number { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; background: linear-gradient(140deg, var(--accent) 0%, var(--accent-dim) 100%); color: #fff; font-size: 0.78rem; font-weight: 650; font-variant-numeric: tabular-nums; } .process-arrow, .step-arrow, .lifecycle-arrow, .separator { color: var(--accent); font-size: 0.8rem; opacity: 0.7; } /* -------------------------------------------------------------------------- Numaralı arayüz adımları -------------------------------------------------------------------------- */ .ui-steps, .step-list, .action-list { margin: 20px 0; padding-left: 1.4em; } .ui-steps > li, .step-list > li { margin: 9px 0; padding-left: 5px; line-height: 1.65; } .ui-steps > li::marker, .step-list > li::marker { color: var(--accent); font-weight: 650; } .ui-guide { margin: 26px 0; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } .ui-guide-header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-weight: 650; } .ui-guide-header i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 0.82rem; color: #fff; background: var(--accent); } /* -------------------------------------------------------------------------- Sık sorulanlar -------------------------------------------------------------------------- */ .faq-section { margin: 30px 0; } .faq-item { margin: 9px 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); overflow: hidden; } .faq-item[open] { border-color: var(--tint); background: var(--wash); } .faq-item > summary, .faq-question { display: flex; align-items: baseline; gap: 10px; padding: 13px 18px; cursor: pointer; font-size: 0.98rem; font-weight: 600; line-height: 1.45; list-style: none; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::before { content: "+"; display: inline-block; width: 1.1em; color: var(--accent); font-weight: 650; } .faq-item[open] > summary::before { content: "\2212"; } .faq-item > summary:hover { background: var(--wash); } .faq-answer { padding: 0 18px 15px 40px; font-size: 0.96rem; line-height: 1.68; color: var(--ink-soft); } /* -------------------------------------------------------------------------- Tablolar -------------------------------------------------------------------------- */ .table-container, .data-table-wrap { margin: 26px 0; overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; } main table, .data-table { width: 100%; margin: 26px 0; border-collapse: collapse; font-size: 0.93rem; line-height: 1.5; } .table-container table, .data-table-wrap table { margin: 0; } main th, main td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--rule-soft); vertical-align: top; } main thead th { background: var(--wash); border-bottom: 1px solid var(--tint); font-weight: 650; color: var(--ink); white-space: nowrap; } main tbody tr:last-child td { border-bottom: 0; } main tbody tr:hover { background: var(--wash); } /* -------------------------------------------------------------------------- Sohbet örneği — Cowork'ün anlatım biçimi -------------------------------------------------------------------------- */ .chat-example { margin: 26px 0; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surround); } .chat-msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; margin: 11px 0; } .chat-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rail-soft); color: var(--rail-ink); font-size: 0.8rem; font-weight: 650; } .chat-msg.ai .chat-avatar { background: linear-gradient(140deg, var(--accent) 0%, var(--accent-dim) 100%); color: #fff; } .chat-bubble { min-width: 0; padding: 11px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); font-size: 0.95rem; line-height: 1.6; } .chat-msg.ai .chat-bubble { background: var(--wash); border-color: var(--tint); } .chat-label { display: block; margin-bottom: 3px; font-size: 0.78rem; font-weight: 650; color: var(--ink-faint); } /* -------------------------------------------------------------------------- Kod -------------------------------------------------------------------------- */ main code, .code-block { font-family: var(--mono); /* Göreli boyut, küçük bir kapsayıcının içinde okunamaz hâle geliyordu: 0.875rem'lik bir kutunun içinde 0.9em = 12,6 piksel. Taban mutlak, tavan göreli -- yani normal metinde bağlamıyla birlikte küçülür ama asla okunmaz olmaz. */ font-size: max(13.5px, 0.9em); } main :not(pre) > code { padding: 1px 6px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surround); overflow-wrap: anywhere; } main pre, .code-block { margin: 22px 0; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surround); overflow-x: auto; line-height: 1.55; } /* -------------------------------------------------------------------------- Görseller — HEPSİ AYNI ŞEY DEĞİL -------------------------------------------------------------------------- Üç ayrı tür, üç ayrı muamele: ekran görüntüsü ürünün kendisi — çerçeveli, gölgeli, altyazılı diyagram bir fikir — çerçevesiz, pastel zemin üstünde yer tutucu bir İŞ KAYDI — hangi ekranın beklendiğini yazar Hepsini aynı çerçeveye koymak, okuyucuya "buna bakmalı mıyım" sorusunu her seferinde yeniden sordurur. -------------------------------------------------------------------------- */ figure.screenshot, .screenshot { margin: 28px 0; } main img { max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05), 0 18px 40px -26px rgba(16, 24, 40, 0.45); } /* Diyagram ve şema: ürünün fotoğrafı değil, bir düşünce. */ .diagram, .flow-diagram, figure.diagram { margin: 28px 0; padding: 22px; border: 1px solid var(--tint); border-radius: 14px; background: var(--wash); text-align: center; } .diagram img, .flow-diagram img, figure.diagram img { border: 0; box-shadow: none; background: transparent; } .screenshot-caption, figcaption { margin-top: 10px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-faint); } /* Yer tutucu OKUYUCUYA GÖSTERİLMEZ (2026-09-14 kullanıcı kararı: "geliştirme ile ilgili şeylerin kullanıcılara gözükmesinin bir önemi yok"). "Bu ekran görüntüsü yenileniyor" bizim iş kaydımız, okuyucunun bilgisi değil; okuyucu için bir vaat edip boş çıkan bir kutu. Ama markup SİLİNMEZ, gizlenir: `data-shot` adı boru hattının tek eşleme kaynağı -- `adopt_shots.py` kareyi oraya koyuyor ve `audit_docs.py` kaç ekranın beklediğini oradan sayıyor. Silseydik iş listesi de silinirdi. */ .doc-shot-pending { display: none; margin: 28px 0; padding: 28px 24px; border: 1px dashed var(--tint); border-radius: 14px; background: var(--wash); color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; text-align: center; } .doc-shot-pending * { max-width: 100%; } .doc-shot-pending__mark { display: block; margin-bottom: 8px; font-size: 1.5rem; line-height: 1; opacity: 0.7; } .doc-shot-pending__name { display: block; margin-bottom: 6px; font-size: 0.95rem; font-weight: 650; color: var(--ink); } /* -------------------------------------------------------------------------- Listeler ve alıntılar -------------------------------------------------------------------------- */ main ul, main ol { padding-left: 1.3em; } main li { margin: 6px 0; } .feature-list { margin: 20px 0; list-style: none; padding-left: 0; } .feature-list li { position: relative; margin: 8px 0; padding-left: 26px; line-height: 1.65; } .feature-list li::before { content: ""; position: absolute; left: 6px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .check-yes, .check-icon { color: var(--tone-tip); } .check-no { color: var(--tone-stop); } main blockquote { margin: 26px 0; padding: 14px 20px; border: 0; border-left: 4px solid var(--tint); border-radius: 0 12px 12px 0; background: var(--wash); color: var(--ink-soft); font-style: normal; } /* -------------------------------------------------------------------------- Dil seçici ve kabuk düğmeleri -------------------------------------------------------------------------- */ .lang-switcher { display: inline-flex; gap: 2px; margin-left: 6px; } .lang-btn { padding: 2px 9px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 7px; font-size: 0.78rem; font-weight: 600; text-decoration: none; color: var(--rail-ink); } .lang-btn:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; } .lang-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* -------------------------------------------------------------------------- Sayfa altı gezinme -------------------------------------------------------------------------- */ .pager { margin: 48px 40px 34px; padding-top: 24px; border-top: 1px solid var(--rule); } .pager__link:hover { border-color: var(--tint); background: var(--wash); } @media (max-width: 960px) { .pager { margin-left: 20px; margin-right: 20px; } } /* -------------------------------------------------------------------------- Baskı -------------------------------------------------------------------------- */ @media print { .shell > main { margin: 0; border: 0; box-shadow: none; } .guide-head__icon { box-shadow: none; } .doc-shot-pending { display: none; } } /* ========================================================================== EL KİTABI — aynı sistem, kitap kaydı -------------------------------------------------------------------------- El kitabı kılavuzlarla aynı simgeleri, aynı pastelleri ve aynı vurgu mekaniğini kullanır; ayrıldığı tek yer GÖVDE TİPOGRAFİSİ: orada metin okunmak için var, taranmak için değil, o yüzden serif kalıyor. Vurgusu SODOO'nun petrol yeşili -- üst bantla aynı renk. ========================================================================== */ .g-handbook .sheet__head { margin: 0 0 34px; padding: 30px 40px 26px; background: linear-gradient(180deg, var(--wash) 0%, var(--paper) 100%); border-top: 4px solid var(--accent); border-bottom: 1px solid var(--rule); margin-top: -1px; } .g-handbook .sheet__part { margin: 0 0 8px; font-family: var(--sans); font-size: 0.8rem; font-weight: 650; color: var(--accent-ink, var(--accent)); } .g-handbook .sheet__title { font-size: 2.1rem; letter-spacing: -0.025em; } .g-handbook .sheet__standfirst { max-width: 44rem; color: var(--ink-soft); } .g-handbook .sheet__meta { margin-top: 14px; font-family: var(--sans); font-size: 0.85rem; color: var(--ink-faint); } /* Bölüm başlıkları: kılavuzlarla aynı üç sinyal. */ .g-handbook main h2 { position: relative; padding-top: 16px; border-bottom: 0; font-family: var(--sans); } .g-handbook main h2::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 4px; border-radius: 2px; background: var(--accent); } .g-handbook main h3 { font-family: var(--sans); } /* Not kutuları: dört anlam, dört pastel -- kılavuzlardaki bilgi kutularının kardeşi. Öncesinde yalnız ince bir sol çizgi vardı ve dört tür birbirine benziyordu. */ .g-handbook .note { margin: 26px 0; padding: 16px 20px; border: 1px solid var(--tint); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--wash); } .g-handbook .note__label { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: 0.86rem; font-weight: 650; letter-spacing: 0; color: var(--accent-ink, var(--accent)); } .g-handbook .note--tip { background: var(--tone-tip-wash); border-color: #d1fae5; border-left-color: var(--tone-tip); } .g-handbook .note--tip .note__label { color: var(--tone-tip); } .g-handbook .note--caution { background: var(--tone-warn-wash); border-color: #fde68a; border-left-color: var(--tone-warn); } .g-handbook .note--caution .note__label { color: var(--tone-warn); } .g-handbook .note--stop { background: var(--tone-stop-wash); border-color: #fecaca; border-left-color: var(--tone-stop); } .g-handbook .note--stop .note__label { color: var(--tone-stop); } /* Ders bloğu: kitabın en karakteristik öğesi. Bir olay, bir ölçüm, bir sonuç anlatıyor; kartın kendisi de onu öyle sunmalı. */ .g-handbook .lesson { margin: 30px 0; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } .g-handbook .lesson__head { display: flex; align-items: baseline; gap: 12px; padding: 13px 20px; background: var(--wash); border-bottom: 1px solid var(--tint); } .g-handbook .lesson__kind { flex: 0 0 auto; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--sans); font-size: 0.8rem; font-weight: 650; letter-spacing: 0.01em; } .g-handbook .lesson__title { font-family: var(--sans); font-size: 1rem; font-weight: 650; line-height: 1.35; color: var(--ink); } .g-handbook .lesson__body { padding: 16px 20px; } .g-handbook .lesson__body > :first-child { margin-top: 0; } .g-handbook .lesson__body > :last-child { margin-bottom: 0; } /* Adımlar ve vaka blokları */ .g-handbook .steps { margin: 26px 0; padding-left: 1.4em; } .g-handbook .steps > li { margin: 10px 0; } .g-handbook .steps > li::marker { color: var(--accent); font-family: var(--sans); font-weight: 650; } .g-handbook .case { margin: 28px 0; padding: 18px 22px; border: 1px solid var(--tint); border-radius: 14px; background: var(--wash); } .g-handbook .case dt { font-family: var(--sans); font-weight: 650; color: var(--accent-ink, var(--ink)); } .g-handbook .case dd { margin: 4px 0 14px; } /* İçindekiler sayfası: kitabın kapağından sonraki ilk izlenim. */ .g-handbook .contents__part { color: var(--accent-ink, var(--accent)); border-bottom-color: var(--tint); } .g-handbook .contents__list a { border-radius: 10px; padding-left: 12px; padding-right: 12px; } .g-handbook .contents__list a:hover { background: var(--wash); } .g-handbook .contents__num { color: var(--accent); font-weight: 650; } .g-handbook .contents__name { font-family: var(--sans); } /* -------------------------------------------------------------------------- Değer şeridi — kılavuzun başında "bu size ne kazandırır" Üç kart, pastel zemin, üstte vurgu çizgisi. Modül sayfalarındaki şeridin aynısı; kurulu olmayan bir özelliği anlatan sayfada kartlar sınırı söyler. -------------------------------------------------------------------------- */ .guide-value { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: none; margin-top: 6px; margin-bottom: 30px; padding: 0; list-style: none; } .guide-value li { margin: 0; padding: 18px 18px 16px; border: 1px solid var(--tint); border-top: 4px solid var(--accent); border-radius: 14px; background: var(--wash); } .guide-value b { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: 1.02rem; font-weight: 650; line-height: 1.3; color: var(--accent-ink, var(--ink)); } .guide-value span { display: block; font-size: 0.94rem; line-height: 1.5; color: var(--ink-soft); } @media (max-width: 860px) { .guide-value { grid-template-columns: minmax(0, 1fr); } }