/* * STORY MONOKROM — herkese açık başvuru sayfaları (kayıt · eğitim · iş başvurusu · randevu · yasal metinler). * * Bu dosya panelin story-theme.css'ine BAĞIMLI DEĞİLDİR: sayfalar ayrı bir alan adında barınabilir. * Jetonlar (--st-*) panel tema rehberiyle (docs/TEMA_REHBERI.md) ve cast/css/story-web.css ile birebir aynıdır; yazı tipleri fonts/ altındadır (Google'a istek atılmaz). * Yerleşim jetonları --sb-*. Koyu tema: (sayfa betiği: çerez story_theme / işletim sistemi); betik çalışmazsa prefers-color-scheme yedeği. * * 1) Yazı tipleri 2) Jetonlar 3) Temel 4) Üst çubuk + alt bilgi 5) Bileşenler (düğme, alan, seçici, onay kutusu, durum kutuları) * 6) Kayıt sayfası 7) Sözleşme penceresi 8) Sade form sayfaları (eğitim · iş · randevu · yasal) 9) Telefon */ /* ============================ 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-gap: 16px; --st-pad: 16px; --sb-wrap: 1120px; --sb-gut: 24px; --sb-ctl: 42px; --sb-bar: 60px; } 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 (prefers-color-scheme: dark) { /* betik çalışmazsa (data-theme hiç yazılmadıysa) işletim sistemi tercihi */ :root:not([data-theme]) { 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: 640px) { :root { --sb-gut: 16px; --sb-ctl: 46px; } } /* ============================ 3) TEMEL ============================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.sb { 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.sb, .sb input, .sb select, .sb textarea, .sb button { font-family: var(--st-font-body); } .sb h1, .sb h2, .sb h3, .sb h4 { margin: 0; color: var(--st-text); font-family: var(--st-font-head); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; text-transform: none; } .sb p { margin: 0 0 10px; } .sb strong, .sb b { font-weight: 700; } .sb a { color: var(--st-link); text-decoration: underline; text-decoration-color: var(--st-line-3); text-underline-offset: 3px; } .sb a:hover { color: var(--st-text); text-decoration-color: currentColor; } .sb img { max-width: 100%; } .sb ::selection { background: var(--st-accent); color: var(--st-accent-fg); } .sb :focus-visible { outline: 2px solid var(--st-text-2); outline-offset: 2px; } .sb-atla { position: absolute; left: 8px; top: -60px; z-index: 3000; padding: 10px 14px; border-radius: var(--st-r); background: var(--st-accent); color: var(--st-accent-fg) !important; font-weight: 700; text-decoration: none !important; } .sb-atla:focus { top: 8px; } [hidden] { display: none !important; } .sb-kap { width: 100%; max-width: var(--sb-wrap); margin: 0 auto; padding: 0 var(--sb-gut); } .sb-i { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ============================ 4) ÜST ÇUBUK + ALT BİLGİ ============================ */ /* Üst çubuk (logo + hamburger + tam ekran menü), koyu başlık bandı ve koyu alt bant ortak "Story Kabuk"tur: story-kabuk.css (cast sitesi ve proje sunumuyla AYNI dosya; panel/core/web_kabuk.php üretir). Burada yalnız gövde akışına uyum var. */ .sb-logo-d { display: none !important; } /* kart.php logo çifti (açık / koyu) */ html[data-theme="dark"] .sb-logo-l { display: none !important; } html[data-theme="dark"] .sb-logo-d { display: block !important; } .sb .sw-header, .sb .kb-bar { flex: 0 0 auto; } body.sw-menu-open .story-asistan-dugme, body.sw-menu-open .story-cerez-tercih:not(.story-cerez-tercih-satir) { display: none !important; } /* katman menü açıkken yüzen düğmeler menüyü örtmesin */ /* ============================ 5) BİLEŞENLER ============================ */ /* düğme: .sb-btn ana eylem (siyah dolgu) · .sb-hafif ikincil (çizgili) · .sb-tehlike tehlikeli · .sb-ince alan yüksekliğinde küçük */ .sb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--sb-ctl); padding: 0 20px; border: 1px solid var(--st-accent); border-radius: var(--st-r); background: var(--st-accent); color: var(--st-accent-fg); font: 700 14px/1.2 var(--st-font-body); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s; } .sb a.sb-btn, .sb a.sb-btn:hover { color: var(--st-accent-fg); text-decoration: none; } .sb-btn:hover { background: var(--st-accent-hover); border-color: var(--st-accent-hover); } .sb-btn[disabled] { opacity: .5; cursor: not-allowed; } .sb-btn.sb-hafif, .sb a.sb-btn.sb-hafif, .sb a.sb-btn.sb-hafif:hover { background: var(--st-surface); border-color: var(--st-line-3); color: var(--st-text); } .sb-btn.sb-hafif:hover, .sb a.sb-btn.sb-hafif:hover { background: var(--st-surface-3); border-color: var(--st-line-3); } .sb-btn.sb-tehlike, .sb a.sb-btn.sb-tehlike, .sb a.sb-btn.sb-tehlike:hover { background: var(--st-bad-bg); border-color: var(--st-bad); color: var(--st-bad); } .sb-btn.sb-tehlike:hover { background: var(--st-bad-bg); filter: brightness(.96); } .sb-btn.sb-ince { padding: 0 14px; font-size: 13.5px; } .sb-btn.sb-tam { display: flex; width: 100%; } .sb-btn.sb-buyuk { min-height: 48px; font-size: 15px; } /* alan */ .sb-f { margin: 0 0 16px; min-width: 0; } .sb-f > label, .sb-lbl { display: block; margin: 0 0 6px; color: var(--st-text-2); font: 700 13px/1.3 var(--st-font-body); } .sb-z { display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: var(--st-text-2); vertical-align: 3px; } .sb-yardim { display: inline-flex; align-items: center; color: var(--st-text-2); font-size: 12px; white-space: nowrap; } .sb-yardim .sb-z { margin: 0 6px 0 0; vertical-align: 0; } .sb-ipucu { margin: 6px 0 0; color: var(--st-text-2); font-size: 12.5px; line-height: 1.45; } .sb input:not([type]), .sb input[type=text], .sb input[type=email], .sb input[type=tel], .sb input[type=password], .sb input[type=url], .sb input[type=number], .sb select, .sb textarea { display: block; width: 100%; height: var(--sb-ctl); margin: 0; 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 14.5px/1.3 var(--st-font-body); box-shadow: none; -webkit-appearance: none; appearance: none; } .sb select { padding-right: 34px; text-overflow: ellipsis; 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 12px center; } .sb textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.45; } .sb input::placeholder, .sb textarea::placeholder { color: var(--st-text-3); opacity: 1; } .sb input:focus, .sb select:focus, .sb textarea:focus { outline: 0; border-color: var(--st-text); box-shadow: 0 0 0 3px var(--st-line-3); } .sb input:disabled { background: var(--st-surface-2); color: var(--st-text-3); cursor: not-allowed; } .sb input.gecerli { border-color: var(--st-ok); } .sb .bad, .sb input.bad, .sb select.bad, .sb textarea.bad { border-color: var(--st-bad) !important; box-shadow: 0 0 0 3px var(--st-bad-bg) !important; } .sb input[type=file] { height: auto; padding: 6px; font-size: 13.5px; color: var(--st-text-2); } .sb input[type=file]::file-selector-button { min-height: calc(var(--sb-ctl) - 14px); margin-right: 10px; padding: 0 12px; border: 1px solid var(--st-line-3); border-radius: 6px; background: var(--st-surface); color: var(--st-text); font: 700 13px var(--st-font-body); cursor: pointer; } .sb input[type=file]::file-selector-button:hover { background: var(--st-surface-3); } .sb-alan-hata { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: var(--st-bad); font-size: 12.5px; font-weight: 600; line-height: 1.4; } .sb-alan-hata::before { content: ""; flex: 0 0 14px; height: 14px; margin-top: 1px; background: currentColor; -webkit-mask: var(--sb-ik-uyari) center / contain no-repeat; mask: var(--sb-ik-uyari) center / contain no-repeat; } .sb-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .sb-iki.sb-iki-dar { grid-template-columns: minmax(0, 1fr) 150px; } .sb-iki:has(.st-tel) { grid-template-columns: minmax(0, 1fr); } /* R18: telefon alanı (ülke kodu + numara) yarım sütunda sıkışıyordu ("+90 · Türkiye" iki satıra bölünüyordu): telefonlu satır tek sütun */ @media (max-width: 560px) { .sb-iki, .sb-iki.sb-iki-dar { grid-template-columns: minmax(0, 1fr); } .sb-iki.sb-iki-kisa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; } } /* kısa alanlar telefonda da yan yana kalır */ .sb-iki.sb-iki-yil { grid-template-columns: 150px minmax(0, 1fr); } /* R28 (ekran denetimi): doğum yılı (4 hane) dar, şehir geniş — eğitim formunda ters orantılıydı */ @media (max-width: 560px) { .sb-iki.sb-iki-yil { grid-template-columns: 112px minmax(0, 1fr); gap: 0 10px; } } .sb .hp { position: absolute; left: -9999px; opacity: 0; } /* bot tuzağı (görünmez alan) */ /* simgeler (CSS maskesi: rengi currentColor'dan alır) */ :root { --sb-ik-uyari: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E"); --sb-ik-tik: 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%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.4 2.8 2.8L16.4 9'/%3E%3C/svg%3E"); --sb-ik-ok: 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='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); } /* segmentli seçici (cinsiyet, uyruk) */ .sb-seg { display: flex; border: 1px solid var(--st-input-line); border-radius: var(--st-r); overflow: hidden; background: var(--st-input); } .sb-seg label { position: relative; flex: 1 1 0; margin: 0; cursor: pointer; } .sb-seg input { position: absolute; opacity: 0; pointer-events: none; } .sb-seg span { display: flex; align-items: center; justify-content: center; min-height: calc(var(--sb-ctl) - 2px); padding: 0 8px; border-right: 1px solid var(--st-line-2); color: var(--st-text-2); font-size: 14px; font-weight: 600; text-align: center; } .sb-seg label:last-child span { border-right: 0; } .sb-seg label:hover span { background: var(--st-surface-3); } .sb-seg input:checked + span { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-accent-fg); } .sb-seg input:focus-visible + span { outline: 2px solid var(--st-text-2); outline-offset: -4px; } .sb-seg.bad { border-color: var(--st-bad) !important; } /* onay kutuları: .sb-onay (sözleşme penceresi açan) ve .sb-duz (düz) aynı görünür */ .sb-onaylar { display: grid; gap: 2px; margin: 4px 0 16px; padding-top: 14px; border-top: 1px solid var(--st-line); } .sb-nw { white-space: nowrap; } .sb-onay, .sb-duz, .sb .chk { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0 -8px; padding: 8px 8px; border-radius: var(--st-r); color: var(--st-text-2); font-size: 13.5px; font-weight: 400; line-height: 1.5; } .sb-onay.bad, .sb-duz.bad { background: var(--st-bad-bg); box-shadow: none !important; border-color: transparent !important; } .sb-onay .sb-oku, .sb-duz a, .sb .chk a { color: var(--st-text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--st-line-3); } .sb-kutu, .sb-duz input[type=checkbox], .sb .chk input[type=checkbox] { position: relative; flex: 0 0 22px; width: 22px; height: 22px; margin: 0; padding: 0; border: 1.5px solid var(--st-input-line); border-radius: 6px; background: var(--st-input); cursor: pointer; -webkit-appearance: none; appearance: none; } .sb-kutu:hover, .sb-duz input:hover, .sb .chk input:hover { border-color: var(--st-text-2); } .sb-kutu[aria-checked="true"], .sb-duz input:checked, .sb .chk input:checked { background: var(--st-accent); border-color: var(--st-accent); } .sb-kutu[aria-checked="true"]::after, .sb-duz input:checked::after, .sb .chk input:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--st-accent-fg); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .sb-kutu::before { content: ""; position: absolute; inset: -11px; } /* görünmez genişletilmiş dokunma alanı (44px) */ .sb-duz, .sb .chk { cursor: pointer; } .sb-duz > span, .sb-onay > span, .sb .chk > span { flex: 1 1 auto; min-width: 0; padding-top: 1px; } .sb-kutu:focus-visible, .sb-duz input:focus-visible, .sb .chk input:focus-visible { outline: 2px solid var(--st-text-2); outline-offset: 2px; } .sb .chk input[type=checkbox], .sb-duz input[type=checkbox] { display: block; } /* durum kutuları */ .sb-hata, .sb .msg.err, .sb .msg.ok, .sb-not { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--st-bad); border-radius: var(--st-r); background: var(--st-bad-bg); color: var(--st-bad); font-size: 13.5px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; } .sb-hata::before, .sb .msg.err::before, .sb .msg.ok::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: 1px; background: currentColor; -webkit-mask: var(--sb-ik-uyari) center / contain no-repeat; mask: var(--sb-ik-uyari) center / contain no-repeat; } .sb .msg { display: none; } .sb .msg.ok { border-color: var(--st-ok); background: var(--st-ok-bg); color: var(--st-ok); } .sb .msg.ok::before { -webkit-mask-image: var(--sb-ik-tik); mask-image: var(--sb-ik-tik); } .sb-not { border-color: var(--st-line-2); background: var(--st-surface-2); color: var(--st-text-2); font-weight: 400; } .sb-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); } .sb-rozet .sb-i { width: 16px; height: 16px; } .sb-rozet-b { width: 52px; height: 52px; } .sb-rozet-b .sb-i { width: 24px; height: 24px; stroke-width: 2.2; } /* kart */ .sb-kart, .sb .card { position: relative; background: var(--st-surface); border: 1px solid var(--st-line-2); border-radius: var(--st-r-lg); box-shadow: var(--st-shadow); } /* ============================ 6) KAYIT SAYFASI ============================ */ .sb-ana { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 32px; align-items: start; flex: 1 0 auto; padding-top: 24px; padding-bottom: 56px; } .sb-sol { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .sb-sag { min-width: 0; } @media (max-width: 920px) { .sb-ana { grid-template-columns: minmax(0, 1fr); max-width: 640px; gap: 20px; padding-top: 16px; padding-bottom: 40px; } .sb-sag { order: -1; } } .sb-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0e1012; border: 1px solid var(--st-line-2); border-radius: var(--st-r-lg); overflow: hidden; } .sb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .sb-bilgi { padding: 22px 24px; background: var(--st-surface); border: 1px solid var(--st-line-2); border-radius: var(--st-r-lg); } .sb-bilgi h2 { margin: 0 0 16px; font-size: 16px; } .sb-bilgi ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; } .sb-bilgi li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; color: var(--st-text-2); font-size: 14px; line-height: 1.6; } .sb-bilgi li strong { color: var(--st-text); } .sb-no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--st-accent); color: var(--st-accent-fg); font: 700 12px/1 var(--st-font-head); } @media (max-width: 640px) { .sb-bilgi { padding: 18px 16px; } } .sb-kart { padding: 26px 28px 24px; } @media (max-width: 640px) { .sb-kart { padding: 20px 16px 18px; } } .sb-kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--st-line); } .sb-kart-bas h2 { font-size: 18px; } .sb-lbl-yas { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; } .sb-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--st-r-pill); background: var(--st-surface-3); color: var(--st-text-2); font: 700 12px/1.5 var(--st-font-body); white-space: nowrap; } .sb-chip.hata { background: var(--st-bad-bg); color: var(--st-bad); } .sb-dt { display: grid; grid-template-columns: .8fr 1.3fr 1fr; gap: 8px; } .sb-dt select { min-width: 0; padding-left: 10px; padding-right: 28px; background-position: right 9px center; } .sb-tel { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 8px; } .sb-tel select { padding-left: 10px; padding-right: 26px; background-position: right 8px center; } .sb-dog { margin-top: 10px; } .sb-kod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: stretch; } .sb-kod .sb-btn { min-height: var(--sb-ctl); } .sb .sb-kod input { min-width: 0; text-align: center; letter-spacing: 6px; font-weight: 700; } .sb .sb-kod input::placeholder { letter-spacing: 6px; font-weight: 400; } @media (max-width: 520px) { .sb-kod { grid-template-columns: minmax(0, 1fr) auto; } .sb-kod > :first-child { grid-column: 1 / -1; } } .sb-durum { margin-top: 8px; color: var(--st-text-2); font-size: 12.5px; line-height: 1.5; } .sb-durum.ok { color: var(--st-ok); font-weight: 700; } .sb-durum.hata { color: var(--st-bad); } .sb-sifre { position: relative; } .sb .sb-sifre input { padding-right: 46px; } .sb-goz { position: absolute; right: 1px; top: 1px; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--sb-ctl) - 2px); height: calc(var(--sb-ctl) - 2px); padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--st-text-3); cursor: pointer; } .sb-goz:hover { background: var(--st-surface-3); color: var(--st-text); } .sb-goz .sb-i { width: 19px; height: 19px; } .sb-goz .sb-goz-gizle { display: none; } .sb-goz[aria-pressed="true"] .sb-goz-gizle { display: inline; } .sb-goz[aria-pressed="true"] .sb-goz-goster { display: none; } .sb-guc-satir { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .sb-guc { display: flex; flex: 1 1 auto; gap: 4px; } .sb-guc i { flex: 1; height: 4px; border-radius: 2px; background: var(--st-line-3); transition: background-color .2s; } .sb-guc[data-s="1"] i:nth-child(-n+1) { background: var(--st-bad); } .sb-guc[data-s="2"] i:nth-child(-n+2) { background: var(--st-warn); } .sb-guc[data-s="3"] i:nth-child(-n+3), .sb-guc[data-s="4"] i { background: var(--st-ok); } .sb-guc-ad { flex: 0 0 auto; min-width: 2.6em; color: var(--st-text-2); font-size: 12px; font-weight: 700; text-align: right; } .story-ts { margin: 0 0 14px; min-height: 65px; } .sb-hata[hidden] { display: none; } .sb-gonder { margin-top: 2px; } .sb-alt-not { margin: 14px 0 0; color: var(--st-text-2); font-size: 13px; text-align: center; } .sb-alt-not a { color: var(--st-text); font-weight: 700; } /* başarı: form kutusunun yerini alır (JS formu .sb-bitti yapar) */ .sb-bitti > :not(.sb-basari):not(.sb-akis-bas) { display: none !important; } .sb-bitti .sb-akis-bas > :not(.sb-adimlar) { display: none !important; } .sb-bitti .sb-akis-bas { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; } .sb-basari { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 8px 20px; text-align: center; } .sb-basari h3 { margin: 12px 0 0; font-size: 20px; } .sb-basari p { max-width: 34ch; margin: 0 0 14px; color: var(--st-text-2); } .sb-yonlen { width: 140px; height: 3px; margin: 2px 0 16px; border-radius: 2px; background: var(--st-line-2); overflow: hidden; } .sb-yonlen i { display: block; width: 100%; height: 100%; background: var(--st-accent); transform-origin: left; animation: sb-yonlen 1.4s linear forwards; } @keyframes sb-yonlen { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ============================ 6b) ORTAK GİRİŞ + KAYIT EKRANI ============================ */ .sb-hesap-ana { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 28px; padding-top: 28px; padding-bottom: 28px; } @media (max-width: 960px) { .sb-hesap-ana { grid-template-columns: minmax(0, 1fr); max-width: 680px; gap: 20px; padding-top: 18px; } .sb-hesap-sol { order: -1; } } .sb-hesap-sag { gap: 20px; } /* sekmeler */ .sb-hesap { padding: 0; overflow: hidden; } .sb-sekmeler { display: flex; border-bottom: 1px solid var(--st-line-2); background: var(--st-surface-2); } .sb-sekme { position: relative; flex: 0 0 auto; min-width: 140px; min-height: 56px; margin: 0 0 -1px; padding: 0 28px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--st-text-3); font: 700 14.5px/1 var(--st-font-head); cursor: pointer; transition: color .15s, border-color .15s; } .sb-sekme:hover { color: var(--st-text); } .sb-sekme[aria-selected="true"] { background: var(--st-surface); border-bottom-color: var(--st-accent); color: var(--st-text); } .sb-sekme:focus-visible { outline-offset: -4px; } .sb-panel { padding: 28px 30px 26px; } @media (max-width: 640px) { .sb-sekme { flex: 1 1 0; min-width: 0; padding: 0 8px; } .sb-panel { padding: 22px 16px 20px; } } /* form başlığı + adım göstergesi */ .sb-akis-bas { margin: 0 0 22px; } .sb-akis-bas h2 { font-size: 24px; line-height: 1.25; } .sb-akis-bas > p { max-width: 56ch; margin: 10px 0 0; color: var(--st-text-2); font-size: 14.5px; line-height: 1.55; } .sb-akis-bas .sb-yardim { margin: 16px 0 0; } @media (max-width: 640px) { .sb-akis-bas h2 { font-size: 21px; } } .sb-adimlar { display: flex; align-items: center; margin: 18px 0 0; padding: 0; list-style: none; } .sb-adim { display: flex; align-items: center; gap: 9px; color: var(--st-text-3); font: 600 13px/1.2 var(--st-font-body); white-space: nowrap; } .sb-adim + .sb-adim::before { content: ""; width: 26px; height: 1px; margin: 0 10px; background: var(--st-line-3); } .sb-adim b { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1.5px solid var(--st-line-3); border-radius: 50%; color: var(--st-text-2); font: 700 12.5px/1 var(--st-font-head); } @media (max-width: 480px) { /* R28 (ekran denetimi): İngilizce "3 Complete your profile" 390 px'te kart kenarına taşıyordu → dar ekranda bağlantı çizgisi kalkar, daire / boşluk küçülür, sığmazsa sarar */ .sb-adimlar { flex-wrap: wrap; gap: 8px 12px; } .sb-adim { gap: 6px; font-size: 12.5px; } .sb-adim b { width: 24px; height: 24px; font-size: 12px; } .sb-adim + .sb-adim::before { display: none; } } .sb-adim.aktif { color: var(--st-text); font-weight: 700; } .sb-adim.aktif b { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-accent-fg); } .sb-adim.tamam { color: var(--st-text-2); } .sb-adim.tamam b { border-color: var(--st-accent); color: var(--st-accent); font-size: 0; } .sb-adim.tamam b::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid currentColor; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); } @media (max-width: 480px) { .sb-adim { gap: 6px; font-size: 12px; } .sb-adim + .sb-adim::before { width: 10px; margin: 0 5px; } .sb-adim b { width: 24px; height: 24px; } } @media (max-width: 380px) { .sb-adim:not(.aktif) span { display: none; } } /* çok dar ekranda yalnızca etkin adımın adı görünür */ .sb-iki-sifre { align-items: start; } .sb-unuttum { margin-top: 8px; text-align: right; } .sb-unuttum a { font-weight: 700; } .sb-captcha { margin: 0 0 14px; } .sb-gonder .sb-i { width: 18px; height: 18px; } .sb-veli-not { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 4px; padding: 10px 12px; border-radius: var(--st-r); background: var(--st-info-bg); color: var(--st-info); font-size: 13px; line-height: 1.5; } .sb-veli-not[hidden] { display: none; } .sb-veli-not .sb-i { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sb-akis-not { margin: 12px 0 0; color: var(--st-text-2); font-size: 12.5px; line-height: 1.5; text-align: center; } .sb-akis .sb-basari { padding-top: 18px; } /* mobil uygulama kartı */ .sb-uyg { padding: 24px 26px 22px; } @media (max-width: 640px) { .sb-uyg { padding: 20px 16px 18px; } } .sb-uyg-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; } .sb-uyg-etiket { color: var(--st-text-2); font: 700 11.5px/1.3 var(--st-font-head); letter-spacing: .14em; text-transform: uppercase; } .sb-yakinda { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border: 1px solid var(--st-warn); border-radius: var(--st-r-pill); background: var(--st-warn-bg); color: var(--st-warn); font: 700 12px/1.2 var(--st-font-body); white-space: nowrap; } .sb-yakinda .sb-i { width: 14px; height: 14px; stroke-width: 2.1; } .sb-uyg h2 { font-size: 20px; margin-bottom: 2px; } .sb-uyg-ozet { margin: 8px 0 0; color: var(--st-text-2); font-size: 14px; line-height: 1.6; } .sb-uyg-orta { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; margin: 20px 0 18px; } @media (max-width: 420px) { .sb-uyg-orta { grid-template-columns: minmax(0, 1fr); } .sb-maket { margin: 0 auto; } } .sb-uyg-adimlar { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .sb-uyg-adimlar li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; } .sb-uyg-adimlar b { color: var(--st-text-3); font: 800 15px/1.2 var(--st-font-head); letter-spacing: .02em; } .sb-uyg-adimlar strong { display: block; color: var(--st-text); font-size: 14px; line-height: 1.3; } .sb-uyg-adimlar span { display: block; margin-top: 2px; color: var(--st-text-2); font-size: 12.5px; line-height: 1.45; } /* telefon maketi (yalnızca süs; erişilebilirlik ağacından gizli) */ .sb-maket { width: 132px; padding: 7px; border: 1px solid var(--st-line-3); border-radius: 26px; background: #15171a; } .sb-maket-ekran { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 226px; padding: 22px 11px 14px; border-radius: 20px; background: var(--st-surface); overflow: hidden; } .sb-maket-ada { position: absolute; left: 50%; top: 7px; width: 34px; height: 8px; margin-left: -17px; border-radius: 6px; background: #15171a; } .sb-maket-logo { color: var(--st-text); font: 800 15px/1 var(--st-font-head); letter-spacing: -.02em; } .sb-maket-kisi { display: flex; align-items: center; gap: 7px; margin-top: 4px; } .sb-maket-kisi > i { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--st-line-3); } .sb-maket-kisi > div { flex: 1; display: grid; gap: 5px; } .sb-maket-kisi b { display: block; height: 6px; border-radius: 3px; background: var(--st-line-2); } .sb-maket-kisi b + b { width: 60%; } .sb-maket-ilerleme { margin-top: 4px; padding: 7px 8px; border: 1px solid var(--st-line-2); border-radius: 8px; } .sb-maket-ilerleme span { display: block; margin-bottom: 5px; color: var(--st-text-2); font: 700 8.5px/1 var(--st-font-body); } .sb-maket-ilerleme div { height: 5px; border-radius: 3px; background: var(--st-line-2); } .sb-maket-ilerleme div i { display: block; width: 60%; height: 100%; border-radius: 3px; background: var(--st-accent); } .sb-maket-satir { display: block; height: 6px; border-radius: 3px; background: var(--st-line-2); } .sb-maket-satir.kisa { width: 64%; } .sb-maket-dugme { display: block; height: 22px; margin-top: auto; border-radius: 6px; background: var(--st-accent); } /* pasif mağaza düğmeleri */ .sb-magaza { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 380px) { .sb-magaza { grid-template-columns: minmax(0, 1fr); } } .sb-magaza-b { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border: 1px dashed var(--st-line-3); border-radius: var(--st-r); background: var(--st-surface-2); color: var(--st-text-3); font: 700 14px/1.2 var(--st-font-body); cursor: default; user-select: none; } .sb-magaza-b .sb-i { width: 22px; height: 22px; } .sb-magaza-b small { display: block; margin-bottom: 1px; font: 600 10.5px/1.2 var(--st-font-body); letter-spacing: .02em; } .sb-uyg-alt { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--st-line); color: var(--st-text-2); font-size: 13.5px; text-align: center; } .sb-uyg-alt a { color: var(--st-text); font-weight: 800; } /* video kartı (yalnız kayıt sekmesinde: video "kayıt nasıl yapılır" anlatır) */ .sb-video-kart { margin: 0; background: var(--st-surface); border: 1px solid var(--st-line-2); border-radius: var(--st-r-lg); overflow: hidden; } .sb-video-kart .sb-video { border: 0; border-radius: 0; border-bottom: 1px solid var(--st-line-2); } .sb-video-kart figcaption { display: grid; gap: 2px; padding: 14px 18px 16px; } .sb-video-kart figcaption strong { font: 700 14.5px/1.3 var(--st-font-head); } .sb-video-kart figcaption span { color: var(--st-text-2); font-size: 13px; } .sb-hesap-ana[data-aktif="giris"] .sb-video-kart { display: none; } @media (min-width: 961px) { .sb-hesap-sag { position: sticky; top: 20px; } } /* kayıt öncesi bilgi: tam genişlik, iki sütun */ .sb-bilgi-bolum { padding-bottom: 56px; } .sb-bilgi-bolum .sb-bilgi ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 36px; } @media (max-width: 800px) { .sb-bilgi-bolum .sb-bilgi ul { grid-template-columns: minmax(0, 1fr); } .sb-bilgi-bolum { padding-bottom: 40px; } } /* ============================ 7) SÖZLEŞME PENCERESİ ============================ */ .sb-modal { position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--st-overlay); } /* çerez bandı ve asistanın (z 2147483000) üstünde */ .sb-modal-ic { display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: min(88vh, 760px); background: var(--st-surface); border: 1px solid var(--st-line-2); border-radius: var(--st-r-lg); box-shadow: var(--st-shadow-pop); overflow: hidden; } .sb-modal-ic > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 22px; border-bottom: 1px solid var(--st-line-2); } .sb-modal-ic h3 { font-size: 16px; } .sb-x { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--st-r); background: transparent; color: var(--st-text-2); cursor: pointer; } .sb-x:hover { background: var(--st-surface-3); color: var(--st-text); } .sb-x .sb-i { width: 20px; height: 20px; } @media (max-width: 640px) { .sb-x { width: 44px; height: 44px; } } .sb-modal-ilerleme { height: 3px; background: var(--st-line); } .sb-modal-ilerleme i { display: block; width: 0; height: 100%; background: var(--st-accent); transition: width .12s linear; } .sb-modal-sar { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .sb-modal-sar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(to bottom, transparent, var(--st-surface)); pointer-events: none; transition: opacity .2s; } .sb-sonda .sb-modal-sar::after { opacity: 0; } .sb-modal-govde { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 22px 36px; color: var(--st-text-2); font-size: 14px; line-height: 1.7; outline: 0; overscroll-behavior: contain; } .sb-modal-govde:focus-visible { box-shadow: inset 0 0 0 2px var(--st-text-2); } .sb-modal-ic > footer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 22px; border-top: 1px solid var(--st-line-2); background: var(--st-surface-2); } .sb-modal-ipucu { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; color: var(--st-text-2); font-size: 12.5px; line-height: 1.4; } .sb-modal-ipucu::before { content: ""; flex: 0 0 16px; height: 16px; background: currentColor; -webkit-mask: var(--sb-ik-ok) center / contain no-repeat; mask: var(--sb-ik-ok) center / contain no-repeat; } .sb-modal-ipucu.tamam { color: var(--st-ok); font-weight: 700; } .sb-modal-ipucu.tamam::before { -webkit-mask-image: var(--sb-ik-tik); mask-image: var(--sb-ik-tik); } @media (max-width: 640px) { .sb-modal { align-items: flex-end; padding: 0; } .sb-modal-ic { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: var(--st-r-lg) var(--st-r-lg) 0 0; border-bottom: 0; } .sb-modal-ic > footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); } .sb-modal-ipucu { flex-basis: 100%; } .sb-modal-ic > footer .sb-btn { flex: 1 1 0; white-space: normal; padding: 0 10px; } .sb-modal-govde { padding: 16px 16px 32px; } } /* yasal metin gövdesi (pencere ve yasal.php sayfası ortak) */ .sb-metin h1, .sb-metin h2, .sb-metin h3, .sb-metin h4, .sb-modal-govde h1, .sb-modal-govde h2, .sb-modal-govde h3, .sb-modal-govde h4 { margin: 20px 0 8px; color: var(--st-text); font-size: 14.5px; line-height: 1.4; } .sb-metin > :first-child, .sb-modal-govde > :first-child { margin-top: 0; } .sb-metin p, .sb-modal-govde p { margin: 0 0 12px; } .sb-metin ul, .sb-metin ol, .sb-modal-govde ul, .sb-modal-govde ol { margin: 0 0 12px; padding-left: 22px; } .sb-metin li, .sb-modal-govde li { margin: 0 0 4px; } .sb-metin b, .sb-metin strong, .sb-modal-govde b, .sb-modal-govde strong { color: var(--st-text); } .sb-metin blockquote, .sb-modal-govde blockquote { margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--st-line-3); color: var(--st-text-2); } .sb-metin table, .sb-modal-govde table { width: 100%; margin: 0 0 14px; border-collapse: collapse; font-size: 13px; } .sb-metin th, .sb-metin td, .sb-modal-govde th, .sb-modal-govde td { padding: 7px 9px; border: 1px solid var(--st-line-2); text-align: left; vertical-align: top; } .sb-metin img, .sb-modal-govde img { max-width: 100%; height: auto; border-radius: var(--st-r); } .sb-metin, .sb-modal-govde { overflow-wrap: break-word; } .sb-metin table, .sb-modal-govde table { display: block; overflow-x: auto; } .sb-modal-govde a, .sb-metin a { color: var(--st-text); text-decoration: underline; } /* ============================ 8) SADE FORM SAYFALARI ============================ */ .sb-sayfa { flex: 1 0 auto; width: 100%; max-width: calc(680px + 2 * var(--sb-gut)); margin: 0 auto; padding: 24px var(--sb-gut) 48px; } .sb-sayfa.sb-dar { max-width: calc(600px + 2 * var(--sb-gut)); } .sb-sayfa.sb-genis { max-width: calc(760px + 2 * var(--sb-gut)); } .sb-geri { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0 0 6px; color: var(--st-text-2); font-size: 13.5px; font-weight: 600; text-decoration: none !important; } .sb-geri:hover { color: var(--st-text); } .sb-geri .sb-i { width: 16px; height: 16px; } @media (max-width: 640px) { .sb-geri { min-height: 44px; } .sb-rd .rd-harita { display: inline-flex; align-items: center; min-height: 44px; } } .sb .card { padding: 26px 28px 28px; } @media (max-width: 640px) { .sb .card { padding: 20px 16px 22px; } .sb-sayfa { padding-top: 12px; padding-bottom: 32px; } } .sb-sayfa-bas { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--st-line); } .sb-sayfa-bas h1 { font-size: 24px; } .sb-sayfa .lead { margin: 8px 0 0; color: var(--st-text-2); font-size: 15px; line-height: 1.55; } .sb-sayfa-bas .sb-yardim { margin: 12px 0 0; } .sb-yardim-not { margin: 6px 0 18px; color: var(--st-text-2); font-size: 13px; line-height: 1.5; } .sb-sayfa-bas .sb-chip { margin-bottom: 10px; } .sb-bolum { margin: 0 0 8px; padding: 0 0 6px; } .sb-bolum + .sb-bolum { margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--st-line); } .sb-bolum > h2 { margin: 0 0 14px; font-size: 15px; } .sb-sayfa form .sb-btn.sb-gonder { margin-top: 6px; } .sb-sayfa .msg.err, .sb-sayfa .msg.ok { margin: 14px 0 0; } /* boş / kapalı durum */ .sb-bos { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 8px 12px; text-align: center; } .sb-bos .sb-rozet { margin-bottom: 12px; } .sb-bos h1 { font-size: 20px; } .sb-bos p, .sb-sayfa .sb-bos .lead { max-width: 42ch; margin: 8px 0 14px; color: var(--st-text-2); } .sb-bos .sb-bos-ek { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } /* randevu: seçim özeti + iptal eylemleri */ .sb-secim { margin: 0 0 4px; padding: 10px 12px; border: 1px solid var(--st-line-2); border-radius: var(--st-r); background: var(--st-accent-soft); color: var(--st-text); font-size: 13.5px; font-weight: 700; } .sb-iptal-eylem { display: flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 560px) { .sb-iptal-eylem .sb-btn { flex: 1 1 100%; } } /* randevu: tarih / saat seçici (panel/assets/css/randevu-widget.css satır içi gelir ve bizden sonra yüklenir: öncelik için .sb-rd öneki) */ .sb-rd .rd-bilgi { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--st-line-2); border-radius: var(--st-r); background: var(--st-surface-2); color: var(--st-text-2); font-size: 13.5px; line-height: 1.5; } .sb-rd .rd-bilgi:empty { display: none; } .sb-rd .rd-sube-ad { color: var(--st-text); font-weight: 700; font-size: 14.5px; } .sb-rd .rd-harita { display: inline-block; margin-top: 4px; font-weight: 700; } .sb-rd .rd-gunler, .sb-rd .rd-slotlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; margin: 0 0 18px; } .sb-rd .rd-slotlar { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); } .sb-rd .rd-gun, .sb-rd .rd-slot { display: flex; align-items: center; justify-content: center; min-height: 46px; margin: 0; border: 1px solid var(--st-line-3); border-radius: var(--st-r); background: var(--st-surface); color: var(--st-text); font: 600 14px/1.2 var(--st-font-body); cursor: pointer; transition: background-color .12s, border-color .12s; } .sb-rd .rd-gun { flex-direction: column; gap: 2px; padding: 6px 4px; } .sb-rd .rd-slot { padding: 0 8px; } .sb-rd .rd-gun b { font-size: 15px; font-weight: 700; } .sb-rd .rd-gun span { color: var(--st-text-2); font-size: 11.5px; font-weight: 600; opacity: 1; } .sb-rd .rd-gun:hover, .sb-rd .rd-slot:hover { border-color: var(--st-text); background: var(--st-surface-3); } .sb-rd .rd-secili, .sb-rd .rd-secili:hover { background: var(--st-accent) !important; border-color: var(--st-accent) !important; color: var(--st-accent-fg) !important; } .sb-rd .rd-secili span { color: var(--st-accent-fg) !important; opacity: .8; } .sb-rd .rd-dolu, .sb-rd .rd-dolu:hover { background: var(--st-surface-2); border-color: var(--st-line-2); color: var(--st-text-3); opacity: 1; text-decoration: line-through; cursor: not-allowed; } .sb-rd .rd-bos { grid-column: 1 / -1; padding: 10px 12px; border: 1px dashed var(--st-line-3); border-radius: var(--st-r); color: var(--st-text-2); font-size: 13.5px; } .sb-rd .rd-gun:focus-visible, .sb-rd .rd-slot:focus-visible { outline: 2px solid var(--st-text-2); outline-offset: 2px; } /* yasal metin sayfası */ .sb-yasal .sb-metin { font-size: 14.5px; line-height: 1.75; color: var(--st-text-2); } /* ============================ 9) TELEFON ============================ */ @media (max-width: 640px) { .sb input[type=text], .sb input[type=email], .sb input[type=tel], .sb input[type=password], .sb input[type=url], .sb input[type=number], .sb select, .sb textarea { font-size: 16px; } /* iOS odakta yakınlaştırmasın */ .sb-seg span { font-size: 14.5px; } .sb-btn { font-size: 14.5px; } .sb-sayfa-bas h1 { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { .sb *, .sb *::before, .sb *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================ Yerel