/* ============================================================
   Public content pages — /hakkimizda, /referanslar, /gizlilik, /kvkk,
   /cerez-politikasi, /mesafeli-satis (+ incidentally /lisans, which shares
   the legal shell, and the unreached /ozellikler, which shares .prose-page).

   ONE shared design system (container/typography/breadcrumb/card/section
   primitives below) that all these pages draw from — but /hakkimizda and
   /referanslar (marketing/showcase) get a genuinely different page
   ARCHITECTURE (hero + 3-card grid + CTA band) from the legal document set
   (two-column: sticky TOC + article), per the brief. Nothing here touches
   header/footer/nav, and nothing here restyles the bare, global `.prose`
   selector — resources/views/blog/show.php also uses that selector and is
   out of scope for this pass, so all legal-document typography is scoped
   through the new `.legal-content .prose …` ancestor instead (see LEGAL
   DOCUMENT LAYOUT below).

   Token-driven throughout via var(--bg)/var(--text)/etc., same as the rest
   of the public site — EXCEPT for one deliberate override: `.prose-page`
   re-declares the real light-theme token values (copied verbatim from
   app.css's own `:root[data-theme="light"]` block) so every one of these
   pages renders in the light palette unconditionally, regardless of the
   visitor's OS color-scheme preference or the `pa_theme` cookie. Without
   this, a visitor with no light preference (or an explicit dark one) would
   see app.css's bare `:root { --bg:#0c0c0e; … }` resolve dark here — the
   exact bug already found and fixed this session for /blog (`.bl` in
   blog.css) and /iletisim (`.cx-page` in contact.css). Same recipe, applied
   to the shared `.prose-page` wrapper this time.
   ============================================================ */

.prose-page {
    --bg: #ffffff; --bg-1: #f7f7f4; --bg-2: #eeeeea;
    --surface: #ffffff; --surface-2: #f4f4f0;
    --line: color-mix(in srgb, #0c0c0e 12%, transparent);
    --line-2: color-mix(in srgb, #0c0c0e 20%, transparent);
    --text: #14140f; --text-1: #45443d; --text-2: #605f57;
    --accent: #6237e0; --accent-ink: #ffffff; --coral: #cf4a2c; --violet: #6237e0;
    --shadow-1: 0 1px 2px rgba(17,17,15,.05), 0 10px 30px -16px rgba(17,17,15,.16);
    --shadow-2: 0 30px 80px -34px rgba(17,17,15,.20), 0 8px 24px -14px rgba(17,17,15,.10);

    background: var(--bg);
    color: var(--text);

    /* Local container/spacing tokens for the primitives below — kept
       distinct from the site-wide --maxw/--gutter so this stylesheet can
       own its own scale without touching any other page. */
    --pc-maxw: 1240px;
    --pc-pad: 32px;
}
@media (max-width: 640px) {
    .prose-page { --pc-pad: 20px; }
}

.pc-container {
    max-width: var(--pc-maxw);
    margin: 0 auto;
    padding: 0 var(--pc-pad);
}
.pc-container--narrow { max-width: 780px; }

.pc-section { padding: 64px 0; }
.pc-section:first-of-type { padding-top: 0; }
@media (max-width: 640px) {
    .pc-section { padding: 44px 0; }
}

/* ---------- Shared hero treatment (both architectures use it) ---------- */
/* Bigger, more confident H1 + generous padding + a soft violet atmosphere —
   no heavy gradient, no black panel. Layered on top of the existing
   .prose-page__head border/background from app.css. */
.prose-page__head {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(640px 320px at 88% -10%, color-mix(in srgb, var(--violet) 10%, transparent), transparent 60%),
        radial-gradient(520px 280px at 4% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
        var(--bg-1);
}
.prose-page__head-inner {
    padding-top: clamp(3rem, 7vw, 4.5rem);
    padding-bottom: clamp(2.25rem, 5vw, 3.25rem);
}
.prose-page__head h1 {
    font-size: clamp(2.1rem, 5vw, 3.25rem);
    line-height: 1.08;
}
.prose-page__head .crumbs { margin-bottom: 1.25rem; }

/* ---------- Marketing hero (hakkimizda / referanslar) ---------- */
.pc-hero .prose-page__head-inner,
.pc-hero__inner {
    max-width: var(--pc-maxw);
}
.pc-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}
@media (max-width: 900px) {
    .pc-hero__inner { grid-template-columns: 1fr; }
    .pc-hero__visual { display: none; }
}
.pc-hero__lede {
    color: var(--text-1);
    max-width: 52ch;
    font-size: clamp(1.02rem, 1.6vw, 1.15rem);
    line-height: 1.7;
    margin: .25rem 0 0;
}

/* Decorative CSS/SVG composition — not a product screenshot. */
.pc-hero__visual { justify-self: end; }
.pc-hero__visual svg { display: block; filter: drop-shadow(var(--shadow-2)); }
.pc-hero__panel { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.pc-hero__bar { fill: var(--line-2); }
.pc-hero__bar--accent { fill: var(--accent); opacity: .85; }
.pc-hero__tile { fill: var(--bg-2); stroke: var(--line); stroke-width: 1; }
.pc-hero__tile--cta { fill: var(--accent); opacity: .12; stroke: var(--accent); }
.pc-hero__dot { fill: var(--coral); opacity: .8; }

/* ---------- Real-content lede band (hakkimizda) ---------- */
.pc-lede {
    color: var(--text-1);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.75;
    text-wrap: pretty;
}

/* ---------- 3-card grid (marketing primitives) ---------- */
.pc-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 900px) {
    .pc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .pc-cards { grid-template-columns: 1fr; }
}
.pc-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.8rem 1.6rem;
    box-shadow: var(--shadow-1);
    transition: transform .38s cubic-bezier(.22,1,.36,1), border-color .38s cubic-bezier(.22,1,.36,1), box-shadow .38s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce) {
    .pc-card { transition: none; }
}
.pc-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-2);
    box-shadow: var(--shadow-2);
}
.pc-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    margin-bottom: 1.1rem;
}
.pc-card__icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pc-card__title { font-size: 1.15rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
.pc-card__text { color: var(--text-2); font-size: .95rem; line-height: 1.65; margin: 0; }

/* ---------- References showcase grid (referanslar-only) ---------- */
.pc-reflist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}
@media (max-width: 900px) {
    .pc-reflist { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .pc-reflist { grid-template-columns: 1fr; }
}
.pc-refcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.5rem;
    display: flex; flex-direction: column; gap: .7rem;
    box-shadow: var(--shadow-1);
    transition: transform .38s cubic-bezier(.22,1,.36,1), border-color .38s cubic-bezier(.22,1,.36,1), box-shadow .38s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce) {
    .pc-refcard { transition: none; }
}
.pc-refcard:hover {
    transform: translateY(-3px);
    border-color: var(--line-2);
    box-shadow: var(--shadow-2);
}
.pc-refcard__tag {
    align-self: flex-start; font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: 999px; padding: .25rem .65rem;
}
.pc-refcard h2 { font-size: 1.1rem; margin: 0; letter-spacing: -.01em; }
.pc-refcard p { color: var(--text-2); font-size: .92rem; line-height: 1.55; margin: 0; flex: 1; }
.pc-refcard .btn { align-self: flex-start; margin-top: .2rem; }

/* ---------- Bottom marketing CTA band (hakkimizda / referanslar) ---------- */
.pc-cta {
    background:
        radial-gradient(760px 360px at 50% 0%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 65%),
        var(--bg-1);
    border-top: 1px solid var(--line);
    padding: clamp(3rem, 7vw, 5rem) 0;
}
.pc-cta__inner { text-align: center; max-width: 640px; }
.pc-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 .75rem; letter-spacing: -.01em; }
.pc-cta__text { color: var(--text-1); margin: 0 0 1.5rem; font-size: 1.02rem; }
.pc-cta__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.pc-cta__actions { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   LEGAL DOCUMENT LAYOUT — gizlilik / kvkk / cerez-politikasi /
   mesafeli-satis (+ lisans). Two-column desktop: sticky compact TOC left,
   content right; collapses to one column with the TOC rendered as a
   compact block above the content on tablet/mobile.

   Typography is scoped through `.legal-content .prose …` — a NEW ancestor
   wrapper — never the bare `.prose` selector itself, so resources/views/
   blog/show.php (which also uses bare .prose and is out of scope) is
   provably unaffected.
   ============================================================ */
.legal-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 780px);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
    max-width: 1040px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .legal-layout { grid-template-columns: 1fr; }
}

.legal-toc {
    position: sticky;
    top: 88px;
    align-self: start;
}
@media (max-width: 900px) {
    .legal-toc {
        position: static;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 1rem 1.1rem;
        background: var(--surface);
        margin-bottom: .5rem;
    }
}
.legal-toc__title {
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-2); margin: 0 0 .75rem;
}
.legal-toc nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .5rem;
}
@media (max-width: 900px) {
    .legal-toc nav ul {
        flex-direction: row; flex-wrap: wrap; gap: .5rem .9rem;
    }
}
.legal-toc nav a {
    color: var(--text-1); font-size: .88rem; text-decoration: none;
    border-left: 2px solid transparent; padding-left: .7rem;
    display: block;
    transition: color .18s cubic-bezier(.22,1,.36,1), border-color .18s cubic-bezier(.22,1,.36,1);
}
@media (max-width: 900px) {
    .legal-toc nav a { border-left: none; border-bottom: 2px solid var(--line-2); padding: .15rem 0; }
}
.legal-toc nav a:hover,
.legal-toc nav a:focus-visible {
    color: var(--accent); border-color: var(--accent);
}
.legal-toc nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.legal-content .prose { font-size: 1.0625rem; line-height: 1.8; }
.legal-content .prose h2 {
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    margin: 2.75rem 0 1rem;
    padding-top: .25rem;
    scroll-margin-top: 96px;
}
.legal-content .prose h2:first-child { margin-top: 0; }
.legal-content .prose h3 { font-size: 1.25rem; margin: 1.75rem 0 .6rem; }
.legal-content .prose p { margin: 0 0 1.1rem; }
.legal-content .prose ul,
.legal-content .prose ol { margin: 0 0 1.1rem; }
.legal-content .prose li { margin: .45rem 0; }

/* Definition-card wrapper around an existing <ul> (e.g. the 3 real cookies
   in cerez.php) — structural only, the real <li> text is untouched. */
.legal-content .legal-defs ul,
.legal-defs { margin: 0; }
.legal-content .legal-defs ul {
    list-style: none; padding: 0; margin: 0 0 1.1rem;
    display: grid; gap: .75rem;
}
.legal-content .legal-defs li {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .9rem 1.1rem;
    margin: 0;
}

/* The load-bearing disclaimer at the top of mesafeli-satis.php — kept
   visually prominent, deliberately NOT styled as a buy-now/purchase CTA. */
.legal-content .legal-alert {
    background: color-mix(in srgb, var(--coral) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--coral) 30%, var(--line));
    border-radius: 16px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 2rem;
}
.legal-content .legal-alert p { margin: 0; }

/* Small, non-marketing closing note — deliberately not a CTA band, legal
   pages stay informational in tone. */
.legal-note {
    color: var(--text-2);
    font-size: .92rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}
.legal-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }