/* BrySoft — sayfa bölümleri (renkler header.css içindeki değişkenlerden gelir) */

/* Hero: açık zemin üzerinde silik nokta ızgarası */
.hero-bg {
    background-image: radial-gradient(rgba(23, 71, 201, 0.10) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -12px -12px;
}
.hero-bg::after {
    content: "";
    position: absolute; inset: auto 0 0 0; height: 160px;
    background: linear-gradient(to bottom, transparent, var(--c-subtle));
    pointer-events: none;
}
.hero-bg > * { position: relative; z-index: 1; }

/* CTA bandı */
.cta-band { background: linear-gradient(135deg, #1E55DE 0%, var(--c-primary) 45%, #0D2E86 100%); }
.cta-band::before {
    content: "";
    position: absolute; right: -80px; top: -80px; width: 360px; height: 360px; border-radius: 50%;
    border: 56px solid rgba(255, 255, 255, 0.06);
}

/* SSS akordeonu */
.faq summary::-webkit-details-marker { display: none; }
.faq[open] .faq-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .product-card, .faq-chevron { transition: none !important; }
}

/* ==========================================================================
   Footer — yüzen lacivert kart
   ========================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.footer-card {
    background: #0F1B33;
    box-shadow: 0 24px 60px -30px rgba(15, 27, 51, 0.55);
}

.footer-link { color: #D5DCEA; transition: color .15s ease; }
.footer-link:hover { color: #FFFFFF; }

.footer-icon-btn {
    color: #D5DCEA;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: background-color .15s ease, color .15s ease;
}
.footer-icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }

.legal-pill { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.legal-link { color: #AEB9CF; transition: background-color .15s ease, color .15s ease; }
.legal-link:hover, .legal-link:focus-visible { background: rgba(255, 255, 255, 0.10); color: #FFFFFF; outline: none; }

.to-top { background: var(--c-primary); transition: background-color .15s ease, transform .15s ease; }
.to-top:hover { background: var(--c-primary-hover); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .footer-link, .footer-icon-btn, .legal-link, .to-top { transition: none; }
}

/* ==========================================================================
   Ürün ekran görselleri (HTML ile çizilmiş örnek arayüzler)
   ========================================================================== */
.mock-window {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 40px 80px -36px rgba(15, 27, 51, 0.35);
}
.mock-bar {
    height: 40px; padding: 0 16px;
    display: flex; align-items: center; gap: 8px;
    background: var(--c-subtle); border-bottom: 1px solid var(--c-border);
}
.mock-bar > span { width: 11px; height: 11px; border-radius: 50%; background: #F2B8B5; }
.mock-bar > span:nth-child(2) { background: #F5D9A6; }
.mock-bar > span:nth-child(3) { background: #B9E3C6; }
.mock-bar > em {
    margin-inline-start: 12px; height: 24px; padding: 0 10px; border-radius: 6px;
    display: inline-flex; align-items: center;
    font-style: normal; font-size: 11px; color: var(--c-muted);
    background: var(--c-surface); border: 1px solid var(--c-border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-window i, .mock-window em { font-style: normal; }


/* ==========================================================================
   Giriş popup'ı (sitede <dialog>, /giris/ sayfasında ortada kart)
   ========================================================================== */
/* /giris/ arka planı: siteyi andıran silik desen + renk ışıkları */
.login-stage {
    background:
        radial-gradient(700px 420px at 15% 10%, rgba(23, 71, 201, 0.14), transparent 60%),
        radial-gradient(600px 380px at 90% 90%, rgba(242, 85, 0, 0.10), transparent 60%),
        radial-gradient(rgba(23, 71, 201, 0.10) 1px, transparent 1px) 0 0 / 24px 24px,
        var(--c-subtle);
}

/* Popup kartı (her iki kullanımda ortak) */
.login-card,
.login-dialog {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 28px;
    box-shadow: 0 40px 100px -30px rgba(15, 27, 51, 0.45);
}
.login-card .login-pop,
.login-dialog .login-pop { padding: 28px; }
@media (min-width: 640px) {
    .login-card .login-pop,
    .login-dialog .login-pop { padding: 36px 40px; }
}

/* Sitedeki açılır pencere */
.login-dialog {
    width: min(960px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 0;
    margin: auto;
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--c-text);
}
.login-dialog::backdrop {
    background: rgba(11, 21, 48, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.login-dialog[open] { animation: login-in .22s cubic-bezier(.2, .8, .2, 1); }
.login-dialog[open]::backdrop { animation: login-fade .22s ease; }
@keyframes login-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes login-fade { from { opacity: 0; } }

/* Ürün kutuları */
.app-box { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.app-box-logo { background: var(--c-subtle); transition: background-color .18s ease; }
.app-box:hover, .app-box:focus-visible {
    border-color: var(--c-primary-ring);
    box-shadow: 0 20px 40px -24px rgba(23, 71, 201, 0.45);
    transform: translateY(-3px);
    outline: none;
}
.app-box:hover .app-box-logo, .app-box:focus-visible .app-box-logo { background: var(--c-primary-soft); }
.app-box:focus-visible { box-shadow: 0 0 0 3px var(--c-primary-ring); }
.app-box.is-last { border-color: var(--c-primary-ring); }

.last-used-badge { display: inline-flex; }
.last-used-badge[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .app-box, .app-box-logo { transition: none; }
    .app-box:hover { transform: none; }
    .login-dialog[open], .login-dialog[open]::backdrop { animation: none; }
}

/* ==========================================================================
   Görüşme talebi (gorusme-talebi.php) — tek kart: lacivert sol panel + takvimli form
   ========================================================================== */
.gt-card { box-shadow: 0 40px 90px -50px rgba(15, 27, 51, 0.45); }
.gt-card fieldset { min-width: 0; }
.gt-card label { position: relative; }          /* sr-only radyolar kendi kutusunda kalsın */
.gt-side {
    background:
        radial-gradient(420px 260px at 100% 0%, rgba(30, 85, 222, 0.55), transparent 70%),
        radial-gradient(300px 220px at 0% 100%, rgba(242, 85, 0, 0.18), transparent 70%),
        #0F1B33;
}
.gt-side::before {                               /* ince nokta deseni */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
}
.gt-ticket::before, .gt-ticket::after {          /* bilet çentikleri */
    content: ""; position: absolute; top: 76px; width: 18px; height: 18px; border-radius: 50%; background: #0F1B33;
}
.gt-ticket::before { left: -9px; }
.gt-ticket::after  { right: -9px; }
.gt-month[hidden] { display: none; }
.gt-month + .gt-month { margin-top: 24px; }
.gt-month[hidden] + .gt-month, .gt-month + .gt-month[hidden] { margin-top: 0; }
.peer:checked + .gt-mode .gt-mode-icon { background: var(--c-primary); color: #fff; }
.gt-done { box-shadow: 0 0 0 12px var(--c-primary-soft); animation: gt-pop .4s ease-out; }
@keyframes gt-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gt-done { animation: none; } }

/* ==========================================================================
   Blog — liste kartları ve yazı detayı
   ========================================================================== */
.blog-card { transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.blog-card:hover { box-shadow: 0 24px 50px -30px rgba(15, 27, 51, 0.35); border-color: var(--c-primary-ring); }
.blog-card:focus-within { outline: 3px solid var(--c-primary-ring); outline-offset: 2px; }
.blog-cover-fallback { background: linear-gradient(135deg, #1E55DE, #0F1B33); }

.read-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--c-accent); transform: scaleX(0); transform-origin: 0 50%; }
.toc-link.is-active { color: var(--c-primary); border-color: var(--c-primary); font-weight: 700; }
.toc-mobile[open] summary svg:last-child { transform: rotate(180deg); }
.toc-mobile summary::-webkit-details-marker { display: none; }

/* Yazı içeriği tipografisi */
.prose-bry { font-size: 18px; line-height: 1.85; color: #2B3445; }
.prose-bry > * + * { margin-top: 1.25em; }
.prose-bry h2 { margin-top: 2.2em; font-size: 28px; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; color: var(--c-text); scroll-margin-top: 120px; }
.prose-bry h3 { margin-top: 1.8em; font-size: 21px; line-height: 1.35; font-weight: 800; color: var(--c-text); scroll-margin-top: 120px; }
.prose-bry h4 { margin-top: 1.6em; font-size: 18px; font-weight: 800; color: var(--c-text); }
.prose-bry h2 + *, .prose-bry h3 + * { margin-top: .7em; }
.prose-bry a { color: var(--c-primary); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--c-primary-ring); }
.prose-bry a:hover { text-decoration-color: var(--c-primary); }
.prose-bry strong, .prose-bry b { color: var(--c-text); font-weight: 800; }
.prose-bry ul, .prose-bry ol { padding-inline-start: 1.4em; }
.prose-bry ul { list-style: none; padding-inline-start: 0; }
.prose-bry ul > li { position: relative; padding-inline-start: 1.6em; }
.prose-bry ul > li::before { content: ""; position: absolute; inset-inline-start: .3em; top: .78em; width: 8px; height: 8px; border-radius: 3px; background: var(--c-primary); }
.prose-bry ol { list-style: decimal; }
.prose-bry ol > li::marker { color: var(--c-primary); font-weight: 800; }
.prose-bry li + li { margin-top: .5em; }
.prose-bry blockquote { padding: 18px 22px; border-inline-start: 4px solid var(--c-accent); background: #FFF6F0; border-radius: 0 16px 16px 0; color: var(--c-text); font-weight: 600; }
.prose-bry code { padding: 2px 7px; border-radius: 6px; background: var(--c-primary-soft); color: var(--c-primary); font-size: .88em; font-weight: 700; }
.prose-bry pre { padding: 18px 20px; border-radius: 16px; background: #0F1B33; color: #E6EAF0; overflow-x: auto; font-size: 15px; }
.prose-bry pre code { padding: 0; background: none; color: inherit; font-weight: 400; }
.prose-bry img { border-radius: 18px; border: 1px solid var(--c-border); }
.prose-bry figcaption { margin-top: .6em; font-size: 14px; color: var(--c-muted); text-align: center; }
.prose-bry hr { border: 0; border-top: 1px solid var(--c-border); margin: 2.5em 0; }
.prose-bry table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; border: 1px solid var(--c-border); border-radius: 16px; overflow: hidden; display: block; overflow-x: auto; }
.prose-bry thead th { background: var(--c-subtle); color: var(--c-text); font-weight: 800; text-align: start; }
.prose-bry th, .prose-bry td { padding: 12px 16px; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.prose-bry tbody tr:last-child td { border-bottom: 0; }
.prose-bry td:last-child, .prose-bry th:last-child { text-align: end; }
@media (max-width: 640px) { .prose-bry { font-size: 17px; } .prose-bry h2 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .blog-card, .blog-card img { transition: none !important; } }
.prose-bry table:not(:has(thead)) tr:first-child td { background: var(--c-subtle); color: var(--c-text); font-weight: 800; }