/* * STORY MONOKROM — herkese açık web yüzü (temel katman). * * Bu dosya panelin story-theme.css'ine BAĞIMLI DEĞİLDİR: cast sitesi / proje sunumu ayrı bir alan adında barınabilir. * Jetonlar (--st-*) panel tema rehberiyle (docs/TEMA_REHBERI.md) birebir aynıdır; yazı tipleri ../fonts altındadır (Google'a istek atılmaz). * * 1) Yazı tipleri 2) Jetonlar (açık + koyu) 3) Temel tipografi 4) Düğme / form / kart / etiket * 5) Üst çubuk + menü 6) Alt bilgi 7) Üçüncü taraf eklentilerin giydirilmesi (fancybox, owl) 8) Sayfalama, bildirim, boş durum * * Koyu tema: (sunucu: story_theme çerezi; istemci: prefers-color-scheme). Renk için yalnız var(--st-…) kullanın. */ /* ============================ 1) YAZI TİPLERİ ============================ */ @font-face { font-family: "Arimo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/arimo-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Arimo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/arimo-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Arimo"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/arimo-latin-ext-wght-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Arimo"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/arimo-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Arimo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/arimo-simgeler.woff2") format("woff2"); unicode-range: U+03A3, U+2190, U+2192, U+2194, U+21BB, U+2264-2265, U+22EE, U+25B2, U+25B6, U+25BC, U+25C0, U+25CF, U+2605, U+2630, U+2713-2716; } /* R13: Arimo'da olmayan ok / onay / simge glifleri (← → ↔ ✓ ✕ ▲ ▼ ★ ● ☰ ⋮ …) tek bir kendi dosyamızdan gelir; işletim sistemi yedek fontuna düşmez */ /* ============================ 2) JETONLAR ============================ */ :root { --st-bg: #f4f5f7; --st-surface: #ffffff; --st-surface-2: #f8f9fa; --st-surface-3: #eef0f3; --st-line: #eceef1; --st-line-2: #e1e4e8; --st-line-3: #cdd2d8; --st-text: #15171a; --st-text-2: #454b53; --st-text-3: #79808a; --st-link: #15171a; --st-input: #ffffff; --st-input-line: #d3d8de; --st-accent: #15171a; --st-accent-fg: #ffffff; --st-accent-soft: #eceef1; --st-accent-hover: #34383d; --st-ok: #187a41; --st-ok-bg: #e5f4ea; --st-warn: #8f5f00; --st-warn-bg: #fcf0d3; --st-bad: #b3261e; --st-bad-bg: #fcebe9; --st-info: #1d5ea8; --st-info-bg: #e7f0fa; --st-shadow: none; --st-shadow-pop: 0 14px 34px -14px rgba(15, 18, 22, .32); --st-overlay: rgba(15, 18, 22, .52); --st-r: 8px; --st-r-lg: 12px; --st-r-pill: 999px; --st-font-head: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif; --st-font-body: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif; --st-fs: 14.5px; --st-lh: 1.55; --st-ctl-h: 40px; --st-gap: 16px; --st-pad: 16px; --sw-header-h: 60px; --sw-wrap: 1200px; --sw-gutter: 20px; } html[data-theme="dark"] { color-scheme: dark; --st-bg: #0e1012; --st-surface: #16181b; --st-surface-2: #1b1e22; --st-surface-3: #23262b; --st-line: #24282d; --st-line-2: #2e3238; --st-line-3: #434952; --st-text: #ececed; --st-text-2: #b6bbc2; --st-text-3: #858c95; --st-link: #e4e6e8; --st-input: #121417; --st-input-line: #383d44; --st-accent: #f1f2f3; --st-accent-fg: #101214; --st-accent-soft: #272a2f; --st-accent-hover: #d7dade; --st-ok: #5fd39a; --st-ok-bg: #14271e; --st-warn: #e2b04a; --st-warn-bg: #2a2210; --st-bad: #ff8a80; --st-bad-bg: #2c1614; --st-info: #7bb8f0; --st-info-bg: #142231; --st-shadow: none; --st-shadow-pop: 0 14px 34px -12px rgba(0, 0, 0, .7); --st-overlay: rgba(0, 0, 0, .72); } @media (max-width: 600px) { :root { --sw-gutter: 16px; } } /* ============================ 3) TEMEL TİPOGRAFİ ============================ */ html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sw-header-h) + 16px); } body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--st-bg); color: var(--st-text); font: 400 var(--st-fs)/var(--st-lh) var(--st-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body, input, select, textarea, button { font-family: var(--st-font-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--st-font-head); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--st-text); text-transform: none; margin: 0; } h1 { font-size: 24px; padding: 0; border: 0; } h2 { font-size: 19px; } h3 { font-size: 16px; } h4 { font-size: 14.5px; } p { margin: 0 0 10px; } strong, b, th { font-weight: 700; } a { color: var(--st-link); text-decoration: none; } a:hover, a:focus { color: var(--st-text); text-decoration: underline; } img { max-width: 100%; } ::selection { background: var(--st-accent); color: var(--st-accent-fg); } :focus-visible { outline: 2px solid var(--st-text-2); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; } .sw-wrap { max-width: var(--sw-wrap); margin: 0 auto; padding: 0 var(--sw-gutter); box-sizing: border-box; } .sw-main { display: block; flex: 1 0 auto; width: 100%; padding: 24px 0 40px; } .sw-header, .sw-footer { flex: 0 0 auto; } .sw-i { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; } .sw-i-fill { fill: currentColor; stroke: none; } .left { float: left; } .right { float: right; } .clearfix::after { content: ""; display: table; clear: both; } .error_status, .error { color: var(--st-bad); } /* ============================ 4) DÜĞME · FORM · KART · ETİKET ============================ */ .sw-btn, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px; margin: 0; border: 1px solid var(--st-line-3); border-radius: var(--st-r); background: var(--st-surface); color: var(--st-text); font: 600 13.5px/1.2 var(--st-font-body); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; text-shadow: none; transition: background-color .15s, border-color .15s, color .15s; -webkit-appearance: none; appearance: none; } .sw-btn:hover, .sw-btn:focus, .btn:hover, .btn:focus { background: var(--st-surface-3); color: var(--st-text); border-color: var(--st-line-3); text-decoration: none; } .sw-btn-ana { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-accent-fg); } .sw-btn-ana:hover, .sw-btn-ana:focus { background: var(--st-accent-hover); border-color: var(--st-accent-hover); color: var(--st-accent-fg); } .sw-btn-ghost { background: transparent; border-color: transparent; color: var(--st-text-2); } .sw-btn-ghost:hover { background: var(--st-surface-3); border-color: transparent; } .sw-btn-s { min-height: 32px; padding: 0 12px; font-size: 12.5px; } .sw-btn-b { min-height: 44px; padding: 0 22px; font-size: 14px; } .sw-btn-full { display: flex; width: 100%; } .sw-btn[disabled], .btn[disabled] { opacity: .5; cursor: not-allowed; } .sw-btn .fa, .sw-btn .sw-i { font-size: 14px; } .sw-in, .sw-sel, .sw-ta { display: block; width: 100%; box-sizing: border-box; height: var(--st-ctl-h); padding: 0 12px; border: 1px solid var(--st-input-line); border-radius: var(--st-r); background: var(--st-input); color: var(--st-text); font: 400 14px/1.3 var(--st-font-body); box-shadow: none; margin: 0; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; } .sw-in::placeholder, .sw-ta::placeholder { color: var(--st-text-3); opacity: 1; } .sw-sel { padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2379808a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; text-overflow: ellipsis; } .sw-ta { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; } .sw-in:focus, .sw-sel:focus, .sw-ta:focus { outline: 0; border-color: var(--st-text-3); box-shadow: 0 0 0 3px var(--st-accent-soft); } .sw-lbl { display: block; margin: 0 0 4px; color: var(--st-text-3); font: 700 11.5px/1.2 var(--st-font-body); } .sw-check { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0; font-weight: 400; color: var(--st-text); cursor: pointer; } .sw-check input[type="checkbox"], .sw-check input[type="radio"], .sunum-sec, #sunum_hepsi { width: 18px; height: 18px; margin: 0; accent-color: var(--st-accent); cursor: pointer; flex: 0 0 auto; } .sw-card { background: var(--st-surface); border: 1px solid var(--st-line-2); border-radius: var(--st-r-lg); box-shadow: var(--st-shadow); } .sw-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--st-r-pill); background: var(--st-surface-3); color: var(--st-text-2); font: 700 11.5px/1.5 var(--st-font-body); white-space: nowrap; } .sw-chip-ok { background: var(--st-ok-bg); color: var(--st-ok); } .sw-chip-warn { background: var(--st-warn-bg); color: var(--st-warn); } .sw-chip-bad { background: var(--st-bad-bg); color: var(--st-bad); } .sw-chip-info { background: var(--st-info-bg); color: var(--st-info); } .sw-rozet { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--st-accent); color: var(--st-accent-fg); } .sw-rozet .sw-i { width: 16px; height: 16px; } .sw-rozet-b { width: 48px; height: 48px; } .sw-rozet-b .sw-i { width: 22px; height: 22px; } .sw-bos { max-width: 480px; margin: 40px auto; padding: 36px 24px; text-align: center; } .sw-bos .sw-rozet { margin-bottom: 14px; } .sw-bos h1, .sw-bos h2 { font-size: 18px; margin: 0 0 6px; } .sw-bos p { margin: 0 auto 16px; max-width: 380px; color: var(--st-text-2); } .sw-bos-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .sw-bos-ic { margin: 0; padding: 22px 16px; text-align: center; color: var(--st-text-3); border: 1px dashed var(--st-line-3); border-radius: var(--st-r-lg); } /* R30: üst çubuk · katman menü · alt bant story-kabuk.css'e (ortak, Enfold ile birebir) taşındı; bu dosyadaki eski kurallar kaldırıldı */ /* ============================ 7) ÜÇÜNCÜ TARAF EKLENTİLER ============================ */ /* fancyBox 2 */ .fancybox-overlay { background: var(--st-overlay) !important; } .fancybox-skin { background: var(--st-surface) !important; color: var(--st-text) !important; border: 1px solid var(--st-line-2); border-radius: var(--st-r-lg) !important; box-shadow: var(--st-shadow-pop) !important; } .fancybox-opened .fancybox-skin { box-shadow: var(--st-shadow-pop) !important; } .fancybox-error { color: var(--st-text-2); font: 14px/1.5 var(--st-font-body); } .fancybox-close { top: -14px; right: -14px; width: 32px; height: 32px; border-radius: 50%; background: var(--st-accent) !important; color: var(--st-accent-fg); border: 2px solid var(--st-surface); } .fancybox-close::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center/20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center/20px no-repeat; } .fancybox-close:hover { background: var(--st-accent-hover) !important; } .fancybox-prev span, .fancybox-next span { width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: var(--st-accent) !important; color: var(--st-accent-fg); opacity: .92; } .fancybox-prev span::before, .fancybox-next span::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: center/20px no-repeat; mask: center/20px no-repeat; } .fancybox-prev span::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E"); } .fancybox-next span::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); } .fancybox-nav span { visibility: visible; } .fancybox-title, .fancybox-title-inside-wrap { font: 600 13px/1.4 var(--st-font-body); color: var(--st-text-2); } #fancybox-loading div { background-color: transparent; } #fancybox-buttons { top: 14px !important; } #fancybox-buttons ul { width: -moz-fit-content !important; width: fit-content !important; margin: 0 auto !important; height: 36px !important; display: flex !important; border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 999px !important; background: #15171a !important; filter: none !important; box-shadow: none !important; overflow: hidden; } #fancybox-buttons ul li { float: none !important; } #fancybox-buttons a { width: 30px !important; height: 36px !important; margin: 0 4px; background-position-y: 3px; } #fancybox-buttons a.btnNext { border-right: 0 !important; } #fancybox-buttons a.btnPlay, #fancybox-buttons a.btnPlayOn, #fancybox-buttons a.btnToggle, #fancybox-buttons a.btnToggleOn, #fancybox-buttons a.btnClose { display: none !important; } #fancybox-thumbs ul li a { border-color: transparent !important; background: #15171a !important; border-radius: 4px; } #fancybox-thumbs ul li.active { border-color: #fff !important; border-radius: 4px; } #fancybox-thumbs.bottom { bottom: 14px !important; } #fancybox-thumbs ul { overflow: hidden; width: 9999px; } /* Owl Carousel 2 */ /* ============================ 8) SAYFALAMA · BİLDİRİM ============================ */ .sw-toast { position: fixed; left: 50%; bottom: 22px; z-index: 2147482000; display: none; align-items: flex-start; gap: 10px; max-width: min(460px, calc(100vw - 32px)); padding: 12px 16px; transform: translateX(-50%); border: 1px solid var(--st-line-3); border-radius: var(--st-r-lg); background: var(--st-accent); color: var(--st-accent-fg); box-shadow: var(--st-shadow-pop); font: 600 13.5px/1.4 var(--st-font-body); } .sw-toast.on { display: flex; } .sw-toast .sw-i { margin-top: 1px; } /* dokunmatik / dar ekran: dokunma hedefleri en az 44px */ @media (pointer: coarse), (max-width: 767px) { .sw-btn, .btn { min-height: 44px; } .sw-btn-s { min-height: 40px; } .sw-ikon-btn { width: 44px; height: 44px; } .sw-logo { min-height: 44px; } .sw-footer .story-cerez-tercih-satir { min-height: 40px; display: inline-flex; align-items: center; } .fancybox-close { width: 40px; height: 40px; top: -16px; right: -10px; } .fancybox-close::before { background-size: 22px; } } body.sw-menu-open .story-asistan-dugme, body.sw-menu-open .story-cerez-tercih:not(.story-cerez-tercih-satir) { display: none !important; } @media (max-width: 600px) { body.sw-filtre-acik .story-asistan-dugme { display: none !important; } } /* süzme paneli açıkken sağ alttaki asistan düğmesi Ara düğmesini örtmesin */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ============================================================================================ * CAST SİTESİ — sayfalar * ========================================================================================== */ /* sayfa başlığı: canlı WordPress temasındaki gibi büyük harf, ince + vurgulu (kalın) son sözcük */ .sw-ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 4px 0 20px; } .sw-ph h1 { margin: 0; font: 300 clamp(22px, 3.2vw, 32px)/1.15 var(--st-font-head); letter-spacing: .045em; text-transform: uppercase; } .sw-ph h1 b { font-weight: 700; } .sw-ph-sag { display: flex; align-items: center; gap: 14px; } .sw-ph-sub { color: var(--st-text-3); font-size: 13.5px; font-weight: 600; } /* R30: cast listesi / profil / sayfalama / owl görünümü canlı siteyle birebir olacak şekilde css/story-eski.css'e taşındı (bu dosyadaki modern kartlar, süzme paneli ve profil düzeni kaldırıldı) */ /* ---- kılavuz ---- */ .sw-doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; } .sw-doc-toc { position: sticky; top: calc(var(--sw-header-h) + 16px); padding: 14px 8px 10px; } .sw-doc-toc h2 { margin: 0 0 6px; padding: 0 10px; color: var(--st-text-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0; } .sw-doc-toc a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--st-text-2); font-weight: 600; font-size: 13.5px; line-height: 1.35; text-decoration: none; } .sw-doc-toc a:hover { background: var(--st-surface-3); color: var(--st-text); } .sw-doc-toc a.on { background: var(--st-accent-soft); color: var(--st-text); } .sw-doc-body { min-width: 0; max-width: 820px; } .sw-doc-acts { display: flex; flex-wrap: wrap; gap: 8px; } section.bolum { margin: 0 0 14px; padding: 22px 26px; } section.bolum h2 { margin: 0 0 12px; font-size: 18px; } section.bolum p { font-size: 15px; line-height: 1.7; color: var(--st-text-2); } section.bolum p:last-child { margin-bottom: 0; } section.bolum ul { margin: 0 0 4px; padding-left: 20px; color: var(--st-text-2); font-size: 15px; line-height: 1.65; } section.bolum li { margin: 4px 0; padding-left: 2px; } section.bolum li::marker { color: var(--st-text-3); } @media (max-width: 960px) { .sw-doc { grid-template-columns: minmax(0, 1fr); gap: 14px; } .sw-doc-toc { position: static; padding: 4px 0; } .sw-doc-toc h2 { padding: 10px 14px 4px; } .sw-doc-toc nav { display: flex; gap: 6px; overflow-x: auto; padding: 4px 10px 10px; -webkit-overflow-scrolling: touch; } .sw-doc-toc a { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--st-line-2); border-radius: var(--st-r-pill); white-space: nowrap; } section.bolum { padding: 18px 18px; } } /* ---- hata sayfası ---- */ .sw-hata { padding-top: 24px; } .sw-hata .sw-bos { margin-top: 28px; } /* ---- çerez tercihi bağlantısı (alt bilgi) ---- */ .sw-cerez-slot { display: inline-flex; } /* sağ alttaki Cast Asistanı düğmesi sayfa sonundaki bağlantıları örtmesin */ /* R13: yerel