/* Standalone BAYAR77 stylesheet. No build tools required. */
:root { --background: #f8faff; --foreground: #1f2937; --card: #fff; --primary: #2563eb; --secondary: #eef2ff; --muted: #f1f5f9; --muted-foreground: #64748b; --border: #e2e8f0; --radius: 1rem; }
.dark { --background: #111827; --foreground: #f8fafc; --card: #1e293b; --primary: #60a5fa; --secondary: #1e293b; --muted: #1e293b; --muted-foreground: #cbd5e1; --border: #334155; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; color: #1f2937; font: 1rem/1.7 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: linear-gradient(135deg, #eff6ff 0%, #fff 45%, #faf5ff 100%); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.025em; }
::selection { background: #ddd6fe; color: #312e81; }
:focus-visible { outline: 3px solid #6366f1; outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: -8rem; z-index: 30; background: #fff; padding: .65rem 1rem; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.site-header { border-bottom: 1px solid #e2e8f099; background: #ffffffde; }
.header-inner { max-width: 1120px; margin: auto; min-height: 76px; padding: .75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; font-size: 1.15rem; font-weight: 650; letter-spacing: -.035em; white-space: nowrap; }
.brand b { color: #2563eb; font-weight: inherit; }
.brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 39px; color: #fff; border-radius: 11px; background: linear-gradient(120deg, #2563eb, #9333ea); box-shadow: 0 4px 12px #4f46e51a; }
.header-inner nav { display: flex; gap: 1.8rem; align-items: center; font-size: .875rem; font-weight: 550; }
.header-inner nav a:hover { color: #2563eb; }
.header-inner nav .nav-cta { display: inline-flex; gap: .4rem; align-items: center; padding: .6rem .9rem; border: 1px solid #c7d2fe; border-radius: .5rem; color: #3730a3; background: #eef2ff; }
.home-hero { padding: 3rem 1.5rem 2.6rem; max-width: 850px; margin: auto; text-align: center; }
.hero-icon { width: 63px; height: 63px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(130deg, #2563eb, #9333ea); color: #fff; margin: 0 auto 1rem; box-shadow: 0 7px 20px #6366f12b; }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: #5962ae; line-height: 1.5; margin-bottom: .7rem; }
.home-hero h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 750; letter-spacing: -.04em; }
.hero-subtitle { color: #4b5563; font-size: 1.125rem; margin-top: .6rem; }
.hero-description { margin: .7rem auto 1.8rem; max-width: 590px; color: #64748b; font-size: .95rem; }
.panel { background: #fff; border: 1px solid #e5eaf3; border-radius: 16px; box-shadow: 0 8px 28px #1e3a8a06; }
.checker { max-width: 720px; margin: auto; text-align: left; padding: 1.7rem; box-shadow: 0 13px 35px #1e3a8a0c; }
.checker-heading { display: flex; gap: .8rem; align-items: center; margin-bottom: 1.15rem; }
.checker-heading h2 { font-size: 1.1rem; font-weight: 700; }
.checker-heading p { font-size: .875rem; color: #64748b; margin-top: .2rem; }
.icon-tile { width: 44px; height: 44px; border-radius: 12px; display: flex; justify-content: center; align-items: center; }
.icon-tile svg { width: 23px; height: 23px; }
.blue { background: #eff6ff; color: #2563eb; }.purple { background: #f5f3ff; color: #7c3aed; }.teal { background: #ecfeff; color: #0891b2; }
.checker label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .45rem; }
.checker-controls { display: flex; gap: .65rem; }
.checker-controls input { height: 49px; border-color: #dbe3f0; font-size: .9rem; background: #fafcff; padding: 0 .85rem; border-radius: .625rem; }
.gradient-button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; color: #fff; background: linear-gradient(110deg, #2563eb, #9333ea); border-radius: .625rem; padding: .85rem 1.1rem; font-weight: 650; font-size: .9rem; min-height: 49px; border: none; cursor: pointer; }
.gradient-button:hover { background: linear-gradient(110deg, #1d4ed8, #7e22ce); box-shadow: 0 4px 16px #4f46e52a; }
.checker-help { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: #64748b; margin-top: .75rem; }
.service-note { font-size: .8rem; padding-top: .9rem; margin-top: .9rem; border-top: 1px solid #f1f5f9; color: #64748b; line-height: 1.65; }
.service-note a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.link-result { padding: 1rem; margin-top: 1rem; border: 1px solid; border-radius: .7rem; display: flex; gap: .65rem; align-items: flex-start; }
.link-result svg { margin-top: .15rem; }.link-result h3 { font-size: .95rem; }.link-result p { font-size: .875rem; margin: .4rem 0; }
.success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }.error { color: #991b1b; background: #fff7f7; border-color: #fecaca; }
.hero-notes { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 1.15rem; font-size: .8rem; color: #64748b; }
.hero-notes span { display: flex; align-items: center; gap: .4rem; }
.content-wrap, .article-wrap { max-width: 1072px; padding: 0 1.5rem; margin: auto; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.feature-card { display: block; background: #fff; border: 1px solid #e5eaf3; padding: 1.5rem; border-radius: 16px; box-shadow: 0 5px 17px #1e3a8a04; transition: border-color .15s, transform .15s; }
.feature-card:hover, .related-card:hover { border-color: #a5b4fc; transform: translateY(-2px); }
.feature-card h2 { font-size: 1.15rem; margin: 1rem 0 .6rem; }.feature-card p { color: #64748b; font-size: .95rem; margin-bottom: 1.2rem; }
.text-link { color: #2563eb; font-size: .875rem; font-weight: 650; display: inline-flex; align-items: center; gap: .5rem; }.text-link:hover { color: #7c3aed; }
.how-section { margin: 4.5rem 0; }.section-heading { text-align: center; margin-bottom: 1.8rem; }.section-heading h2 { font-size: 1.85rem; }.section-heading > p:last-child:not(.eyebrow) { color: #64748b; margin-top: .65rem; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
.steps-grid li { border-top: 2px solid #e0e7ff; padding: 1.2rem .3rem 0; }.steps-grid li > span { color: #818cf8; font-weight: 700; font-size: 1.4rem; }.steps-grid h3 { margin: .5rem 0; font-size: 1rem; }.steps-grid p { font-size: .9rem; color: #64748b; }
.editorial-split { display: grid; grid-template-columns: 1.15fr 1fr; padding: 2rem; gap: 2rem; align-items: center; }.editorial-split h2 { font-size: 1.65rem; margin-bottom: 1rem; }.editorial-split p:not(.eyebrow) { font-size: .95rem; color: #64748b; margin-bottom: 1rem; }.editorial-split img { border-radius: 12px; }
.device-section { margin: 4rem 0; }.device-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.device-card { display: flex; gap: 1rem; align-items: center; background: #fff; border: 1px solid #e0e7ff; border-radius: 14px; padding: 1.4rem; }.device-card > svg { color: #6366f1; }.device-card h3 { font-size: 1.05rem; }.device-card p { color: #64748b; font-size: .875rem; margin-top: .3rem; }.device-card > svg:last-child { margin-left: auto; }
.faq-section { padding: 2rem; }.faq-section h2 { font-size: 1.7rem; margin-bottom: .8rem; }.faq-section > .text-link { margin-top: 1.2rem; }
.faq-list [data-slot='accordion-item'] { border-color: #e8edf5; }.faq-list [data-slot='accordion-trigger'] { font-size: 1rem; font-weight: 600; padding: 1.1rem 0; line-height: 1.5; gap: 1rem; }.faq-list [data-slot='accordion-trigger-icon'] { margin-top: .2rem; }.faq-list [data-slot='accordion-content'] { font-size: .95rem; color: #64748b; padding: 0 1.5rem .3rem 0; }
.bottom-cta { margin: 3rem 0 2rem; padding: 1.9rem 2rem; background: linear-gradient(110deg, #2563eb, #7c3aed); color: #fff; border-radius: 16px; display: flex; align-items: center; gap: 1.3rem; }.bottom-cta h2 { font-size: 1.4rem; }.bottom-cta p { color: #e0e7ff; margin-top: .3rem; font-size: .9rem; }.cta-light { display: flex; align-items: center; gap: .6rem; background: #fff; color: #4f46e5; border-radius: .625rem; margin-left: auto; white-space: nowrap; padding: .7rem 1rem; font-size: .875rem; font-weight: 650; }
.all-guides { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.25rem; font-size: .8rem; color: #64748b; padding-bottom: 3rem; }.all-guides a:hover { color: #2563eb; }
.site-footer { background: #111827; color: #fff; margin-top: 1rem; }.footer-inner { max-width: 1120px; padding: 3rem 1.5rem 1.5rem; margin: auto; }.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr .9fr; gap: 2.7rem; }.footer-grid h2 { font-size: .95rem; font-weight: 600; margin-bottom: 1.1rem; letter-spacing: 0; }.footer-grid > div > a:not(.brand) { display: block; color: #aeb9cd; font-size: .875rem; margin: .5rem 0; }.footer-grid a:hover { color: #fff; }.footer-brand p { color: #aeb9cd; font-size: .875rem; line-height: 1.75; margin: 1rem 0 1.2rem; max-width: 260px; }.footer-brand img { object-fit: contain; object-position: left; }.footer-bottom { border-top: 1px solid #ffffff16; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; color: #aeb9cd; margin-top: 2.5rem; padding-top: 1.3rem; font-size: .8rem; }.footer-bottom p:nth-child(2) { margin-left: auto; }.footer-bottom a { display: inline-flex; align-items: center; gap: .2rem; }
.breadcrumbs { font-size: .875rem; display: flex; gap: .7rem; color: #64748b; padding-top: 1.8rem; }.breadcrumbs a { color: #2563eb; }.article-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; padding: 2rem 0 2.5rem; }.article-hero h1 { font-size: clamp(2rem, 4vw, 2.7rem); }.article-lead { margin-top: 1rem; color: #64748b; font-size: 1.05rem; }.article-meta { margin-top: 1.2rem; font-size: .8rem; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; color: #64748b; }.article-meta > span + span:before { content: '·'; margin-right: 1.2rem; }.article-hero img { border-radius: 16px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: start; gap: 1.5rem; }.article-content { padding: 2rem; overflow-wrap: anywhere; }.article-content section + section { margin-top: 2.2rem; border-top: 1px solid #edf0f7; padding-top: 1.8rem; }.article-content h2 { font-size: 1.4rem; margin-bottom: 1rem; }.article-content p { color: #4b5563; margin: .8rem 0; }.article-content ul { margin: 1rem 0; padding-left: 1.3rem; color: #4b5563; list-style: disc; }.article-content li { padding-left: .3rem; margin: .5rem 0; }.article-content .text-link { margin-top: .4rem; }.article-notice { padding: 1rem 1.2rem; border-left: 3px solid #818cf8; background: #eef2ff; color: #3730a3; font-size: .875rem; border-radius: 6px; margin-bottom: 1.8rem; }.back-link { padding-top: 1.5rem; margin-top: 1.8rem !important; border-top: 1px solid #edf0f7; width: 100%; }
.article-sidebar { position: sticky; top: 1.5rem; }.toc { padding: 1.3rem; }.toc nav a { display: block; font-size: .875rem; color: #64748b; padding: .45rem 0; }.toc nav a:hover { color: #2563eb; }.sidebar-note { margin-top: 1.2rem; padding: 1.3rem; background: #eef2ff; border-radius: 12px; }.sidebar-note h2 { font-size: 1rem; line-height: 1.5; color: #3730a3; }.sidebar-note p { font-size: .875rem; color: #64748b; margin: .6rem 0; }.related-section { margin: 3rem 0 4rem; }.related-section h2 { font-size: 1.7rem; margin-bottom: 1.2rem; }.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.related-card { background: #fff; border: 1px solid #e5eaf3; border-radius: 14px; padding: 1.25rem; transition: border-color .15s, transform .15s; }.related-card > span { font-size: .75rem; color: #64748b; }.related-card h3 { font-size: 1.05rem; margin: .5rem 0 1rem; }.related-card svg { color: #6366f1; }.not-found { max-width: 650px; margin: 6rem auto; padding: 1.5rem; }.not-found h1 { font-size: 2.3rem; }.not-found > p:not(.eyebrow) { margin: 1rem 0 1.5rem; color: #64748b; }
@media (max-width: 900px) { .header-inner nav { gap: 1rem; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }.steps-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem; }.editorial-split { grid-template-columns: 1fr; }.editorial-split img { max-height: 300px; width: 100%; object-fit: cover; }.article-layout { grid-template-columns: 1fr; }.article-sidebar { display: none; }.article-hero { gap: 1.5rem; }.article-hero img { align-self: center; }.feature-card { padding: 1.2rem; } }
@media (max-width: 640px) { .header-inner { padding: .8rem 1rem; gap: .7rem; flex-wrap: wrap; justify-content: center; }.brand { font-size: 1.05rem; }.header-inner nav { width: 100%; justify-content: center; gap: 1rem; font-size: .875rem; }.header-inner nav .nav-cta { padding: .3rem .5rem; }.home-hero { padding: 2rem 1rem; }.hero-description { font-size: 1rem; }.checker { padding: 1.2rem; }.checker-controls { flex-direction: column; }.checker-controls input { font-size: 1rem; }.checker-controls button { width: 100%; }.checker-heading h2 { font-size: 1rem; }.hero-notes { gap: .5rem 1rem; }.content-wrap, .article-wrap { padding: 0 1rem; }.feature-grid { grid-template-columns: 1fr; gap: .8rem; }.feature-card { padding: 1.3rem; }.feature-card p { margin-bottom: .8rem; }.how-section { margin: 3rem 0; }.section-heading h2 { font-size: 1.5rem; }.steps-grid { gap: 1rem; }.steps-grid p { font-size: .95rem; }.editorial-split { padding: 1.3rem; gap: .8rem; }.editorial-split h2 { font-size: 1.5rem; }.device-section { margin: 3rem 0; }.device-grid { grid-template-columns: 1fr; }.faq-section { padding: 1.3rem; }.faq-section h2 { font-size: 1.5rem; }.bottom-cta { flex-wrap: wrap; padding: 1.5rem; gap: .8rem; }.bottom-cta > svg { display: none; }.cta-light { margin: .4rem 0 0; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1rem; }.footer-brand { grid-column: 1 / -1; }.footer-brand p { max-width: 360px; }.footer-bottom { display: block; }.footer-bottom p, .footer-bottom a { margin: .5rem 0; }.article-hero { grid-template-columns: 1fr; padding: 1.5rem 0; gap: 1.3rem; }.article-hero img { width: 100%; }.article-content { padding: 1.3rem; }.article-content h2 { font-size: 1.3rem; }.article-lead { font-size: 1rem; }.related-grid { grid-template-columns: 1fr; }.related-card { display: grid; grid-template-columns: 1fr auto; }.related-card span { grid-column: 1 / -1; }.related-card h3 { margin-bottom: .3rem; }.related-card svg { margin-top: .5rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *:before, *:after { animation: none !important; transition: none !important; } }

.checker-controls input { flex: 1; min-width: 0; width: 100%; border: 1px solid #dbe3f0; }
.checker-controls button { flex-shrink: 0; white-space: nowrap; }
.faq-item { border-bottom: 1px solid #e8edf5; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { display: flex; justify-content: space-between; align-items: start; gap: 1rem; list-style: none; cursor: pointer; padding: 1.1rem 0; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { margin-top: .2rem; transition: transform .15s; }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-answer { padding: 0 1.5rem .75rem 0; color: #64748b; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .faq-item summary svg { transition: none; } }