/* EFBA Pharma (JP) - "Seiji" skeleton: hero, page head, sections, form placement. Loaded LAST. LIGHT THEME ONLY. */
main { max-width: var(--max); margin: 0 auto; }

/* ---- vertical headings (short titles only, <= 10 characters) ---- */
.is-vertical { writing-mode: vertical-rl; text-orientation: mixed; }
.jp-panel {
    position: relative; overflow: hidden; min-height: 0;
    background: #b6cec2 url("/assets/img/jp/crackle-hero.svg") center / cover no-repeat;
}

/* ---- home hero: [panel | vertical h1] row, text below; 3 columns from 1100px ---- */
.jp-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) 104px; grid-template-rows: 280px auto;
    grid-template-areas: "panel title" "text text";
    border-bottom: 1px solid var(--line);
}
.jp-hero .jp-panel { grid-area: panel; }
.jp-hero h1 {
    grid-area: title; justify-self: end; align-self: start;
    padding: 24px 10px 0 0; font-size: 28px; line-height: 1.4; letter-spacing: .08em;
}
.jp-hero h1 span { display: block; }
.jp-hero-text { grid-area: text; display: flex; flex-direction: column; gap: 18px; padding: 24px var(--gutter) 32px; }
.jp-hero-text .lede { margin: 0; font-size: 15px; line-height: 1.9; }
.btn-row { display: flex; flex-direction: column; gap: 10px; }
.hero-note { margin: 0; font-size: 13px; line-height: 1.8; color: var(--mute); }
@media (min-width: 768px) {
    .jp-hero { grid-template-columns: minmax(0, 1fr) 120px; grid-template-rows: 340px auto; }
    .jp-hero h1 { padding: 28px 14px 0 0; font-size: 36px; }
    .jp-hero-text { padding: 32px var(--gutter) 40px; max-width: 720px; }
    .jp-hero-text .lede { font-size: 16px; }
    .btn-row { flex-direction: row; flex-wrap: wrap; gap: 12px; }
}
@media (min-width: 1100px) {
    .jp-hero {
        grid-template-columns: 400px minmax(0, 1fr) 184px; grid-template-rows: none; min-height: 520px;
        grid-template-areas: "text panel title";
    }
    .jp-hero-text { max-width: none; justify-content: flex-end; gap: 22px; padding: 64px 44px 48px var(--gutter); }
    .jp-hero h1 { padding: 56px var(--gutter) 40px 0; font-size: 44px; }
}

/* ---- inner page head ---- */
.jp-pagehead {
    display: grid; grid-template-columns: minmax(0, 1fr) 104px; grid-template-rows: 220px auto auto;
    grid-template-areas: "panel title" "crumb crumb" "lede lede";
    border-bottom: 1px solid var(--line);
}
.jp-pagehead .jp-panel { grid-area: panel; }
.jp-pagehead h1 {
    grid-area: title; justify-self: end; align-self: start;
    padding: 22px 10px 0 0; font-size: 28px; line-height: 1.4; letter-spacing: .08em;
}
.jp-pagehead .breadcrumb { grid-area: crumb; padding: 14px var(--gutter) 0; }
.jp-pagehead .lede { grid-area: lede; margin: 0; padding: 4px var(--gutter) 28px; font-size: 15px; line-height: 1.9; }
@media (min-width: 768px) {
    .jp-pagehead { grid-template-columns: minmax(0, 1fr) 120px; grid-template-rows: 260px auto auto; }
    .jp-pagehead h1 { padding: 26px 14px 0 0; font-size: 32px; }
    .jp-pagehead .lede { max-width: 720px; padding-bottom: 36px; font-size: 16px; }
}
@media (min-width: 1100px) {
    .jp-pagehead {
        grid-template-columns: 400px minmax(0, 1fr) 148px; grid-template-rows: auto 1fr; min-height: 300px;
        grid-template-areas: "crumb panel title" "lede panel title";
    }
    .jp-pagehead .breadcrumb { padding: 28px 44px 0 var(--gutter); }
    .jp-pagehead .lede { align-self: end; padding: 16px 44px 40px var(--gutter); font-size: 16px; max-width: none; }
    .jp-pagehead h1 { padding: 44px var(--gutter) 36px 0; font-size: 36px; }
}

/* horizontal variant: long titles (blog posts, legal pages) under a crackle band */
.jp-pagehead--h { display: block; min-height: 0; }
.jp-pagehead--h::before {
    content: ""; display: block; height: 48px;
    background: #b6cec2 url("/assets/img/jp/crackle-band.svg") center / cover no-repeat;
}
.jp-pagehead--h .jp-panel { display: none; }
.jp-pagehead--h .breadcrumb { padding: 16px var(--gutter) 0; }
.jp-pagehead--h h1 {
    max-width: 920px; padding: 8px var(--gutter) 0; font-size: 24px; line-height: 1.55; letter-spacing: .04em;
    writing-mode: horizontal-tb;
}
.jp-pagehead--h .doc-date, .jp-pagehead--h .post-meta { margin: 12px 0 0; padding: 0 var(--gutter) 28px; font-size: 14px; color: var(--mute); }
.jp-pagehead--h .lede { padding-top: 12px; }
@media (min-width: 768px) {
    .jp-pagehead--h::before { height: 60px; }
    .jp-pagehead--h h1 { font-size: 30px; }
}
@media (min-width: 1100px) {
    .jp-pagehead--h::before { height: 72px; }
    .jp-pagehead--h .breadcrumb { padding: 22px var(--gutter) 0; }
    .jp-pagehead--h h1 { padding-top: 10px; font-size: 34px; }
    .jp-pagehead--h .doc-date, .jp-pagehead--h .post-meta { padding-bottom: 36px; }
}

/* ---- section: heading above body; vertical heading column on the right from 1100px ---- */
.sec {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body";
    padding: 32px var(--gutter); border-bottom: 1px solid var(--line); scroll-margin-top: var(--head-h);
}
.sec-body { grid-area: body; min-width: 0; }
.sec-h {
    grid-area: head; margin-bottom: 16px; padding-left: 12px; border-left: 3px solid var(--acc);
    font-size: 21px; line-height: 1.5; letter-spacing: .06em;
}
.sec-h.is-vertical { writing-mode: horizontal-tb; }
.sec-h small { display: block; font: 500 13px/1.6 var(--f-body); letter-spacing: .06em; color: var(--mute); }
@media (min-width: 768px) {
    .sec { padding: 44px var(--gutter); }
    .sec-h { font-size: 24px; margin-bottom: 20px; }
}
@media (min-width: 1100px) {
    .sec { grid-template-columns: minmax(0, 1fr) 150px; grid-template-areas: "body head"; padding: 0; }
    .sec-body { padding: 56px 44px 56px var(--gutter); }
    .sec-h { margin: 0; }
    .sec-h.is-vertical {
        writing-mode: vertical-rl; justify-self: end; align-self: start;
        margin-right: var(--gutter); padding: 56px 14px 40px 0; border-left: 0; border-right: 3px solid var(--acc);
        font-size: 28px; line-height: 1.4; letter-spacing: .12em;
    }
    .sec-h.is-vertical small { margin: 0 14px 0 0; font-size: 14px; line-height: 1.4; }
    .sec--h { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body"; padding: 56px var(--gutter); }
    .sec--h .sec-body { padding: 0; }
    .sec--h .sec-h { margin-bottom: 24px; padding-left: 14px; font-size: 26px; }
}
.sec-body > p:last-child { margin-bottom: 0; }
.sec-body .prose p { max-width: 46em; }

/* ---- page body (pages without sec grids) ---- */
.page-body { padding: 32px var(--gutter) 64px; }
@media (min-width: 768px) { .page-body { padding: 44px var(--gutter) 80px; } }
@media (min-width: 1100px) { .page-body { padding: 56px var(--gutter) 88px; } }

/* ---- contact form placement (form markup + forms.css: form agent) ---- */
.form-wrap { display: grid; gap: 28px; max-width: 760px; }
.form-placeholder { margin: 0; color: var(--mute); }
.sec-intro { max-width: 46em; margin-bottom: 28px; }
/* İpucu metni girişin altına: yan yana alanlarda giriş kutuları aynı hizada kalır */
.form-field > .form-hint { order: 3; margin: 0; }
.form-field > .field-error { order: 4; }
@media (min-width: 1100px) {
    /* Form solda (okuma genişliği), APPI bilgi kutusu sağda sabit sütun */
    .form-wrap { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 64px; align-items: start; }
    .form-wrap > .jp-form { grid-column: 1; grid-row: 1; }
    .form-wrap > .form-privacy { grid-column: 2; grid-row: 1; margin: 0; position: sticky; top: calc(var(--head-h) + 24px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.facts + .prose, .facts + p { margin-top: 20px; }
.jp-pagehead--h h1 { justify-self: auto; align-self: auto; }

/* ---- Yazı sayfası: geniş ekranda 目次 sağda sabit sütun (okuma sütunu solda, boşluk dengeli) ---- */
@media (min-width: 1100px) {
    .post { max-width: none; display: grid; grid-template-columns: minmax(0, 720px) 260px; gap: 64px; align-items: start; }
    .post > .post-body { grid-column: 1; grid-row: 1; }
    .post > .post-toc { grid-column: 2; grid-row: 1; margin: 0; position: sticky; top: calc(var(--head-h) + 24px); max-height: calc(100vh - var(--head-h) - 48px); overflow-y: auto; }
    main > .blog-cta { max-width: 720px; }
}

/* ---- 404 ---- */
.notfound-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.notfound-links a { color: var(--acc); }

/* form bilgi kutusu başlığı /contact/ sayfasında h2 (başlık sırası) */
.form-privacy h2 { margin: 0 0 0.6rem; font-size: 1rem; color: #1d211f; }