/* Public, database-backed knowledge base; shares Ordelya's violet identity. */
.guide-page { --guide-ink:#25233e; --guide-muted:#777488; --guide-line:#e8e6f0; color:var(--guide-ink); background:#fff; }
.guide-page .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.guide-search button { flex-shrink:0; white-space:nowrap; }
.guide-shell { width:min(1480px,calc(100% - 88px)); margin-inline:auto; }
.guide-eyebrow { margin:0 0 14px; color:#7564ce; font-size:12px; font-weight:750; letter-spacing:.13em; line-height:1.6; text-transform:uppercase; }
.guide-hero { padding:72px 0 54px; background:radial-gradient(ellipse at 83% 30%,#e7e2ff90,transparent 44%),#f8f7fc; border-bottom:1px solid var(--guide-line); }
.guide-hero-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr); gap:70px; align-items:center; }
.guide-hero h1 { font-size:clamp(42px,4.1vw,70px); line-height:1.06; letter-spacing:-.055em; margin:0 0 24px; font-weight:650; }
.guide-hero h1 em { color:#6954d3; font-style:normal; }
.guide-hero h1 + p { font-size:18px; line-height:1.7; max-width:650px; color:#777488; margin:0 0 28px; }
.guide-search { display:flex; align-items:center; gap:14px; padding:8px 9px 8px 20px; border:1px solid #d9d5eb; background:#fff; border-radius:13px; box-shadow:0 5px 16px #2b215308; max-width:730px; }
.guide-search>.ui-icon { width:20px; height:20px; color:#a49bbd; flex-shrink:0; }
.guide-search input { border:0; padding:10px 0; box-shadow:none; min-width:0; width:100%; color:#302747; font-size:15px; background:transparent; }
.guide-search input:focus { outline:0; box-shadow:none; }
.guide-search:focus-within { outline:2px solid #8370e4; outline-offset:3px; }
.guide-search button { padding:12px 24px; background:#6954d3; color:#fff; border:0; border-radius:8px; cursor:pointer; font-weight:600; }
.guide-search button:hover { background:#5540bb; }
.guide-search-hint { color:#706078; font-size:12px; margin:15px 0 0; }
.guide-search-hint span { margin-inline:10px; }
.guide-hero-illustration { min-height:290px; position:relative; display:grid; place-items:center; }
.guide-mini-book { width:220px; min-height:270px; border-radius:10px 25px 25px 10px; padding:27px 30px; transform:rotate(7deg); background:#fff; border:1px solid #dcd5f1; border-left:10px solid #a592e0; box-shadow:12px 17px 0 #e3daf64d,0 20px 45px #4f3e7620; }
.guide-book-icon { display:block; color:#8c70ca; margin-bottom:25px; }
.guide-book-icon .ui-icon { width:24px; height:24px; }
.guide-mini-book>small { color:#9c8bbf; font-size:8px; letter-spacing:.1em; }
.guide-mini-book>strong { display:block; font-size:26px; line-height:1.1; letter-spacing:-.04em; margin:8px 0 24px; }
.guide-mini-book>div { display:flex; gap:10px; align-items:center; margin-top:9px; }
.guide-mini-book>div span { font-size:9px; color:#a896c8; }
.guide-mini-book i { display:block; height:5px; background:#eee8f7; width:110px; border-radius:5px; }
.guide-mini-book>div:last-child i { width:65px; }
.guide-mini-sticker { position:absolute; bottom:10px; left:calc(50% - 128px); background:#f4efdf; border:1px solid #eee5cb; border-radius:8px; padding:11px 17px; font-size:12px; color:#7d7258; transform:rotate(-5deg); }
.guide-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; color:#918c9e; padding:27px 0; line-height:1.7; }
.guide-breadcrumb a { color:#73648d; text-decoration:none; }
.guide-index-content { padding-bottom:70px; }
.guide-section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin:25px 0; }
.guide-section-heading h2 { font-size:clamp(26px,2.4vw,36px); line-height:1.2; letter-spacing:-.04em; font-weight:650; margin:0 0 9px; }
.guide-section-heading p:not(.guide-eyebrow) { font-size:14px; line-height:1.65; color:var(--guide-muted); margin:0; max-width:420px; }
.guide-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.guide-category-card { position:relative; min-height:205px; padding:26px 25px; border:1px solid var(--guide-line); border-radius:15px; text-decoration:none; color:inherit; transition:background .2s,border-color .2s; }
.guide-category-card:hover { background:#faf8ff; border-color:#b9abde; }
.guide-category-icon { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:11px; background:#f2edf9; color:#8d70b6; }
.guide-category-icon .ui-icon { width:20px; height:20px; }
.guide-category-count { float:right; font-size:12px; color:#706078; margin-top:12px; }
.guide-category-card h3 { font-size:17px; font-weight:650; letter-spacing:-.02em; line-height:1.3; margin:23px 0 9px; }
.guide-category-card p { font-size:12px; line-height:1.7; color:#817a8e; margin:0; padding-right:12px; }
.guide-card-arrow { position:absolute; right:20px; bottom:18px; font-size:14px; color:#a695bd; }
.guide-results { margin-top:65px; }
.guide-result-count { color:#81778f; white-space:nowrap; border:1px solid var(--guide-line); background:#faf9fc; border-radius:20px; padding:7px 12px; font-size:12px; }
.guide-filter { display:flex; align-items:center; gap:14px; border-top:1px solid var(--guide-line); padding:20px 0; margin-bottom:10px; }
.guide-filter label,.guide-filter a { font-size:12px; color:#82758d; }
.guide-filter select { width:230px; font-size:13px; border-radius:8px; border-color:var(--guide-line); padding:10px 12px; }
.guide-filter button { padding:10px 18px; font-size:12px; }
.guide-article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.guide-article-card { display:flex; flex-direction:column; border:1px solid var(--guide-line); padding:25px; border-radius:14px; color:inherit; text-decoration:none; transition:border-color .2s,box-shadow .2s; }
.guide-article-card:hover { border-color:#b9aad7; box-shadow:0 8px 25px #41336409; }
.guide-article-card>div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; color:#706078; font-size:12px; line-height:1.5; }
.guide-article-card>div small { font-size:12px; white-space:nowrap; }
.guide-article-card h3 { margin:17px 0 11px; font-size:19px; line-height:1.4; font-weight:620; letter-spacing:-.022em; }
.guide-article-card p { margin:0 0 25px; color:#847a90; line-height:1.75; font-size:13px; }
.guide-article-card>strong { margin-top:auto; display:flex; justify-content:space-between; font-size:12px; color:#8562b1; font-weight:550; }
.guide-pagination { display:flex; justify-content:center; align-items:center; gap:25px; margin-top:35px; font-size:13px; }
.guide-pagination a { border:1px solid var(--guide-line); padding:10px 18px; border-radius:9px; color:#756484; text-decoration:none; }
.guide-pagination span { color:#92879d; }
.guide-empty { text-align:center; padding-block:90px; min-height:340px; }
.guide-empty>.ui-icon { width:34px; height:34px; color:#9e8aba; }
.guide-empty h1,.guide-empty h3 { margin-top:20px; font-size:32px; line-height:1.3; }
.guide-empty p { font-size:15px; max-width:620px; color:#8a7e96; margin:15px auto 25px; }
.guide-help { display:flex; justify-content:space-between; align-items:center; gap:35px; margin-top:65px; padding:40px; background:#f6f2fb; border-radius:18px; }
.guide-help h2 { font-size:30px; letter-spacing:-.04em; margin:0 0 12px; }
.guide-help p:not(.guide-eyebrow) { font-size:14px; color:#84758e; margin:0; }
.guide-help>a { flex-shrink:0; }
.guide-reading-top { padding:24px 0; background:#f8f6fc; border-bottom:1px solid var(--guide-line); }
.guide-reading-top>.guide-shell { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.guide-reading-top>.guide-shell>a { display:flex; align-items:center; gap:12px; color:#6e568e; text-decoration:none; font-size:16px; }
.guide-reading-top .ui-icon { width:21px; height:21px; }
.guide-search-compact { width:420px; padding:3px 4px 3px 15px; border-radius:9px; }
.guide-search-compact input { font-size:12px; padding:7px 0; }
.guide-search-compact button { background:transparent; color:#8a729f; padding:7px 12px; display:flex; }
.guide-search-compact button:hover { background:#f4eef9; }
.guide-reading-grid { display:grid; grid-template-columns:220px minmax(0,1fr) 205px; gap:38px; align-items:start; padding-bottom:90px; }
.guide-sidebar { position:sticky; top:95px; max-height:calc(100vh - 120px); overflow-y:auto; scrollbar-width:thin; padding-right:10px; }
.guide-topics>summary { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; padding:8px 0 20px; cursor:pointer; color:#71627d; }
.guide-topics nav>details { border-top:1px solid var(--guide-line); }
.guide-topics nav>details>summary { display:flex; justify-content:space-between; gap:10px; cursor:pointer; padding:14px 0; font-size:12px; font-weight:600; color:#786586; }
.guide-topics nav>details>summary small { color:#706078; font-size:12px; }
.guide-topics nav>details[open]>summary { color:#7550a1; }
.guide-topics nav>details>div { padding:0 0 10px; }
.guide-topics nav a { display:block; font-size:12px; line-height:1.6; text-decoration:none; color:#95849e; padding:8px 11px; margin:3px 0; border-radius:7px; border-left:2px solid transparent; }
.guide-topics nav a:hover { background:#faf7fd; }
.guide-topics nav a[aria-current="page"] { background:#f3edf9; color:#7954a6; border-left-color:#9874c1; font-weight:600; }
.guide-topics nav .guide-see-category { font-weight:600; font-size:12px; color:#887294; }
.guide-article { min-width:0; padding:9px 0 0; }
.guide-article>header h1 { font-size:clamp(32px,2.7vw,46px); line-height:1.16; letter-spacing:-.045em; font-weight:640; margin:0 0 22px; color:#30263b; }
.guide-article-summary { font-size:17px; color:#8a7a96; line-height:1.75; margin:0 0 24px; }
.guide-article-meta { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:#706078; }
.guide-article-meta>span+span::before,.guide-article-meta>time::before { content:'·'; margin-right:15px; }
.guide-article-tools { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:25px 0 32px; }
.guide-article-tools .primary-button,.guide-article-tools .secondary-button { font-size:12px; padding:9px 14px; }
.guide-link-button { border:0; background:none; padding:9px 4px; color:#706078; text-decoration:underline; text-underline-offset:4px; font-size:12px; cursor:pointer; }
[data-guide-announcement] { display:block; font-size:12px; color:#706078; width:100%; }
.guide-before { background:#f8f4fb; border:1px solid #efe5f5; border-radius:13px; padding:25px 28px; margin-bottom:38px; }
.guide-before h2 { font-size:18px; margin:0 0 16px; letter-spacing:-.02em; font-weight:650; }
.guide-before ul { padding-left:21px; margin:0; }
.guide-before li { font-size:13px; line-height:1.85; color:#706078; padding-left:5px; margin-bottom:7px; }
.guide-step { padding:10px 0 31px; margin:0 0 20px; border-bottom:1px solid var(--guide-line); scroll-margin-top:100px; }
.guide-step-heading { display:flex; gap:16px; align-items:flex-start; margin-bottom:17px; }
.guide-step-heading>span { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:10px; background:#f3edf8; color:#9c74b2; font-weight:650; font-size:13px; }
.guide-step h2 { font-size:22px; line-height:1.4; font-weight:630; letter-spacing:-.025em; margin:1px 0 0; }
.guide-step-copy p { font-size:15px; line-height:1.95; color:#716477; margin:0 0 18px; overflow-wrap:anywhere; }
.guide-screenshot { margin:25px 0 5px; border:1px solid #e2d5e9; border-radius:11px; overflow:hidden; background:#faf8fc; }
.guide-screenshot img { width:100%; height:auto; display:block; }
.guide-screenshot figcaption { display:flex; justify-content:space-between; gap:15px; font-size:12px; padding:11px 15px; color:#706078; }
.guide-toc { position:sticky; top:95px; max-height:calc(100vh - 125px); overflow-y:auto; scrollbar-width:thin; border-left:1px solid var(--guide-line); padding-left:22px; }
.guide-toc nav>strong { display:block; font-size:12px; letter-spacing:.1em; color:#706078; margin:9px 0 17px; }
.guide-toc nav>a { display:block; text-decoration:none; font-size:12px; line-height:1.65; color:#706078; padding:6px 0; }
.guide-toc nav>a span { color:#b4a2be; }
.guide-toc nav>a:hover,.guide-toc nav>a[aria-current] { color:#75508b; }
.guide-back-top { display:block; font-size:12px; color:#9b76ac; margin-top:20px; }
.guide-tips,.guide-faq,.guide-related,.guide-article-support { margin-top:35px; scroll-margin-top:100px; }
.guide-tips h2,.guide-faq h2,.guide-related h2,.guide-article-support h2 { font-size:23px; font-weight:630; letter-spacing:-.03em; margin:0 0 22px; }
.guide-tips>div { border-left:3px solid #c6adcf; padding:4px 0 4px 19px; margin-bottom:23px; }
.guide-tips strong { font-size:14px; font-weight:650; }
.guide-tips p,.guide-faq p,.guide-article-support p { color:#706078; font-size:14px; line-height:1.8; margin:8px 0 0; }
.guide-faq details { border-bottom:1px solid var(--guide-line); padding:17px 0; }
.guide-faq summary { cursor:pointer; font-size:14px; line-height:1.65; font-weight:600; }
.guide-article-support { padding:25px; border:1px solid var(--guide-line); border-radius:12px; background:#fbf8fd; }
.guide-article-support h2 { margin-bottom:8px; font-size:20px; }
.guide-article-support a { display:inline-block; color:#706078; font-size:12px; margin-top:15px; }
.guide-related>a { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 0; color:#876a97; text-decoration:none; border-top:1px solid var(--guide-line); font-size:14px; }
.guide-video { background:#302638; color:#fff; padding:25px; border-radius:13px; margin:30px 0; scroll-margin-top:100px; }
.guide-video .guide-eyebrow { color:#c9b0da; }
.guide-video h2 { color:#fff; font-size:24px; margin:0 0 20px; }
.guide-video>[data-guide-video] { display:grid; place-items:center; background:#44334e; min-height:210px; border-radius:8px; overflow:hidden; }
.guide-video button { border:0; background:none; color:#fff; display:grid; place-items:center; gap:15px; cursor:pointer; padding:30px; }
.guide-video button>span { display:grid; place-items:center; border-radius:50%; background:#ad83bd; width:50px; height:50px; }
.guide-video button strong { font-size:14px; }
.guide-video p:not(.guide-eyebrow) { font-size:12px; color:#c2a5d1; margin:0 0 18px; }
.guide-video>a { display:inline-block; color:#c9b0da; font-size:12px; margin-top:13px; }
.guide-video iframe { display:block; width:100%; aspect-ratio:16/9; border:0; }
#baslamadan,#ipuclari,#sorular,#rehber { scroll-margin-top:100px; }
.app-page .page-guide-link { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--brand); }
@media(min-width:1900px) { .guide-shell { width:min(1680px,calc(100% - 150px)); } .guide-reading-grid { grid-template-columns:255px minmax(0,1fr) 230px; gap:55px; } .guide-article { max-width:900px; } .guide-step-copy p { font-size:17px; } }
@media(max-width:1200px) { .guide-shell { width:calc(100% - 50px); } .guide-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .guide-reading-grid { grid-template-columns:195px minmax(0,1fr); gap:30px; } .guide-toc { display:none; } .guide-hero-grid { gap:40px; } }
@media(max-width:900px) { .guide-hero { padding:50px 0 40px; } .guide-hero-grid { grid-template-columns:1fr; } .guide-hero-illustration { display:none; } .guide-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .guide-article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .guide-section-heading { align-items:start; } .guide-section-heading>p { max-width:250px; } .guide-reading-grid { display:block; } .guide-sidebar { position:static; max-height:none; padding:0; margin-bottom:25px; } .guide-topics { border:1px solid var(--guide-line); border-radius:10px; padding:0 18px; } .guide-topics>summary { padding:16px 0; } .guide-topics nav { max-height:260px; overflow-y:auto; } .guide-article { padding-top:12px; } }
@media(max-width:600px) { .guide-shell { width:calc(100% - 36px); } .guide-hero h1 { font-size:44px; max-width:300px; } .guide-hero h1 + p { font-size:15px; } .guide-eyebrow { font-size:12px; } .guide-search { padding-left:12px; gap:10px; } .guide-search input { font-size:12px; } .guide-search button { padding:12px 16px; font-size:12px; } .guide-search-hint { font-size:12px; } .guide-search-hint span { margin:0 5px; } .guide-category-grid { gap:10px; } .guide-category-card { padding:18px 15px; min-height:204px; } .guide-category-icon { width:34px; height:34px; } .guide-category-count { font-size:9px; } .guide-category-card h3 { font-size:15px; margin-top:18px; } .guide-category-card p { font-size:12px; padding-right:0; } .guide-card-arrow { display:none; } .guide-section-heading { flex-wrap:wrap; gap:10px; margin:20px 0; } .guide-section-heading>p { max-width:none; } .guide-section-heading h2 { font-size:26px; } .guide-results { margin-top:45px; } .guide-filter { flex-wrap:wrap; gap:10px; } .guide-filter label { width:100%; } .guide-filter select { flex:1; min-width:0; width:auto; } .guide-article-grid { grid-template-columns:1fr; } .guide-help { padding:28px 24px; margin-top:45px; flex-direction:column; align-items:start; gap:25px; } .guide-reading-top { padding:18px 0; } .guide-reading-top>.guide-shell { display:grid; gap:16px; } .guide-search-compact { width:100%; max-width:none; } .guide-reading-top .guide-shell>a { font-size:14px; } .guide-breadcrumb { font-size:12px; padding:20px 0; } .guide-article>header h1 { font-size:34px; } .guide-article-summary { font-size:15px; } .guide-article-meta { gap:10px; } .guide-article-meta>time::before,.guide-article-meta>span+span::before { margin-right:8px; } .guide-before { padding:22px; } .guide-step-heading { gap:12px; } .guide-step h2 { font-size:21px; } .guide-step-copy p { font-size:15px; line-height:1.85; } .guide-article-tools { gap:8px; } .guide-article-tools .primary-button,.guide-article-tools .secondary-button { padding:9px 11px; font-size:12px; } .guide-video { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .guide-category-card,.guide-article-card { transition:none; } }
@media print { .vitrin-header,.vitrin-footer,.guide-reading-top,.guide-breadcrumb,.guide-sidebar,.guide-toc,.guide-article-tools,.guide-article-support,.guide-related,.o-help-pill,.guide-video { display:none!important; } .guide-shell { width:100%; max-width:none; } .guide-reading-grid { display:block; padding:0; } .guide-article { max-width:none; } .guide-article>header h1 { font-size:28pt; } .guide-step-copy p { font-size:11pt; color:#222; } .guide-step h2 { font-size:16pt; } .guide-step-heading { break-after:avoid; } .guide-screenshot { break-inside:avoid; } .guide-faq details>p { display:block!important; content-visibility:visible; } .guide-before { break-inside:avoid; } }