/* ===================================================== SERTİFİKALAR ======
   /sertifikalar — proof, set like an archive. A graphite opening where the
   three real certificates fan out like papers on a desk; an ivory register of
   the documents (paper, standard, meaning, the printed record); and a closing
   that turns proof into action: ask for copies, verify with the issuer.
   Every value is read from content/site.json → certifications.

     cert-hero     title, fanned papers, holder / issuer / scope   dark
     certs         three documents, full-size viewer               light
     cert-contact  copies via WhatsApp, verification               light
   ========================================================================== */

.cert-eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: clamp(1.4rem, 2.2vw, 2.2rem); color: var(--on-dark-muted); font-size: .72rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
.cert-eyebrow span { color: var(--gold-lit); }
.cert-eyebrow--light { gap: .75rem; margin-bottom: clamp(1rem, 1.6vw, 1.4rem); color: var(--muted); }
.cert-eyebrow--light::before { content: ''; width: 1.6rem; height: 1px; background: var(--gold-ink); }

/* ------------------------------------------------------------ opening */
.cert-hero { padding-block: clamp(1.6rem, 3vw, 3rem) clamp(3.5rem, 6vw, 6.5rem); overflow: hidden; }
.cert-hero__inner { margin-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); grid-template-areas: "crumbs crumbs" "copy stack" "facts facts"; gap: 0 clamp(2rem, 5vw, 6rem); align-items: center; }
.cert-crumbs { grid-area: crumbs; }
.cert-crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin-bottom: clamp(2.2rem, 4.4vw, 4.4rem); color: var(--on-dark-muted); font-size: .8125rem; }
.cert-crumbs li + li::before { content: '/'; margin-right: .6rem; color: var(--on-dark-line-strong); }
.cert-crumbs a { display: inline-block; padding-block: .2rem; }
.cert-crumbs a:hover, .cert-crumbs [aria-current] { color: var(--on-dark-ink); }
.cert-hero__copy { grid-area: copy; }
.cert-hero__title { font-size: clamp(2.8rem, 5vw, 6.2rem); font-weight: 500; line-height: 1.04; letter-spacing: -.055em; }
.cert-hero__title span { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: -.02em; color: var(--gold-lit); }
.cert-hero__lede { max-width: 32rem; margin-top: clamp(1.5rem, 2.4vw, 2.3rem); color: var(--on-dark-body); font-size: clamp(.95rem, 1.08vw, 1.08rem); line-height: 1.8; }
.cert-hero__more { display: inline-flex; align-items: center; gap: 1.6rem; min-height: 2.75rem; margin-top: 1.4rem; border-bottom: 1px solid var(--on-dark-line-strong); color: var(--on-dark-ink); font-size: .84rem; transition: border-color 200ms ease; }
.cert-hero__more svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--gold-lit); stroke-width: 1.4; transform: rotate(90deg); transition: transform 250ms var(--motion); }
.cert-hero__more:hover { border-color: var(--gold-lit); }
.cert-hero__more:hover svg { transform: rotate(90deg) translate(2px, -2px); }

/* The desk: three papers fanned from one point. They gather into a single
   pile until the section is in view (motion.js), then open. */
.cert-stack { grid-area: stack; position: relative; aspect-ratio: 1.18; min-height: 0; }
.cert-stack__paper { --spread: calc(var(--i) - 1.5); position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 480 / 678; box-shadow: 0 1.6rem 3.2rem -1rem rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .06); transform: translate(-50%, -50%) translateX(calc(var(--spread) * 46%)) translateY(calc(var(--spread) * var(--spread) * 4%)) rotate(calc(var(--spread) * 6deg)); transition: transform 1300ms var(--ease-editorial) calc(var(--i) * 90ms + 200ms); }
.cert-stack__paper:nth-child(2), .cert-stack__paper:nth-child(3) { z-index: 2; }
.cert-stack__paper img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cert-stack.reveal { opacity: 1; transform: none; }
.cert-stack.reveal:not(.is-in) .cert-stack__paper { transform: translate(-50%, -46%) rotate(calc(var(--spread) * 1.5deg)); }

.cert-facts { grid-area: facts; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); margin-top: clamp(3rem, 5vw, 5.5rem); border-top: 1px solid var(--on-dark-line); }
.cert-facts div { padding: clamp(1.2rem, 2vw, 1.8rem) clamp(1rem, 2.4vw, 2.4rem) 0; }
.cert-facts div:first-child { padding-left: 0; }
.cert-facts div + div { border-left: 1px solid var(--on-dark-line); }
.cert-facts dt { color: var(--gold-lit); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cert-facts dd { margin-top: .6rem; color: var(--on-dark-ink); font-size: clamp(.92rem, 1.1vw, 1.1rem); line-height: 1.5; letter-spacing: -.01em; }

/* ---------------------------------------------------------- documents */
.certs { background: var(--surface-light); padding-block: clamp(4.5rem, 7.5vw, 8.5rem) clamp(3.5rem, 5.5vw, 6rem); }
.certs__inner { margin-inline: var(--gutter); }
.certs__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 1.4rem clamp(2rem, 6vw, 7rem); padding-bottom: clamp(2.6rem, 4.4vw, 4.6rem); }
.certs__title { font-size: clamp(2.4rem, 4.4vw, 5rem); font-weight: 500; line-height: 1.06; letter-spacing: -.05em; }
.certs__title span { color: var(--muted); }
.certs__note { max-width: 27rem; color: var(--muted); font-size: clamp(.9rem, 1vw, .98rem); line-height: 1.75; }

.certs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 2.4vw, 3rem); }
@media (max-width: 79.99em) { .certs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; } }
.cert { display: flex; flex-direction: column; min-width: 0; }
.cert__paper { position: relative; display: block; background: #fff; box-shadow: 0 1px 0 rgb(43 46 44 / .06), 0 1.4rem 2.6rem -1.6rem rgb(43 46 44 / .45); transition: transform 450ms var(--motion), box-shadow 450ms var(--motion); }
.cert__paper picture, .cert__paper img { display: block; width: 100%; }
.cert__paper img { aspect-ratio: 480 / 678; object-fit: cover; }
.cert__zoom { position: absolute; right: .9rem; bottom: .9rem; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem .5rem .65rem; border-radius: 999px; background: rgb(var(--surface-dark-rgb) / .86); color: var(--on-dark-ink); font-size: .74rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 250ms ease, color 250ms ease; }
.cert__zoom svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cert__paper:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgb(43 46 44 / .06), 0 2.2rem 3.4rem -1.8rem rgb(43 46 44 / .55); }
.cert__paper:hover .cert__zoom { background: var(--gold-lit); color: var(--on-gold); }
.cert__paper:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 6px; }

.cert__body { padding-top: clamp(1.4rem, 2.2vw, 2rem); }
.cert__system { color: var(--gold-ink); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.cert__code { margin-top: .5rem; font-size: clamp(1.9rem, 2.8vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.cert__code span { color: var(--muted); font-weight: 400; }
.cert__meaning { margin-top: 1rem; color: var(--muted); font-size: clamp(.88rem, .95vw, .95rem); line-height: 1.7; }
.cert__data { margin-top: 1.3rem; border-top: 1px solid var(--line); }
.cert__data div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .7rem; border-bottom: 1px solid var(--line); }
.cert__data dt { color: var(--muted); font-size: .78rem; }
.cert__data dd { font-size: .9rem; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------------------------------------------------- verify + contact */
.cert-contact { background: var(--surface-light); padding-block: 0 clamp(4.5rem, 7.5vw, 8.5rem); }
.cert-contact__inner { margin-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2.5rem, 6vw, 7rem); align-items: center; padding-top: clamp(3.5rem, 5.5vw, 6rem); border-top: 1px solid var(--line); }
.cert-contact__title { font-size: clamp(2.4rem, 4.4vw, 5rem); font-weight: 500; line-height: 1.04; letter-spacing: -.05em; }
.cert-contact__title span { color: var(--muted); }
.cert-contact__lede { max-width: 30rem; margin-top: 1.2rem; color: var(--muted); font-size: .98rem; line-height: 1.75; }
.cert-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1.8rem; }
.cert-contact__wa { color: var(--on-gold); gap: .75rem; }
.cert-contact__wa .wa-icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transform: none; }
.cert-contact__wa:hover .wa-icon { transform: none; }
.cert-contact__phone { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--field-line); text-underline-offset: .3em; }
.cert-contact__phone:hover { color: var(--gold-ink); }

.cert-verify { padding: clamp(1.6rem, 2.6vw, 2.4rem); border: 1px solid var(--line); border-top: 2px solid var(--gold); background: rgb(255 255 255 / .45); }
.cert-verify__icon { width: 2.6rem; height: 2.6rem; fill: none; stroke: var(--gold-ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.cert-verify__title { margin-top: 1rem; font-size: clamp(1.25rem, 1.6vw, 1.6rem); font-weight: 500; letter-spacing: -.03em; }
.cert-verify p { margin-top: .6rem; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.cert-verify .cert-verify__issuer { margin-top: 1rem; color: var(--ink); font-size: .9rem; font-weight: 600; line-height: 1.5; }
.cert-verify__issuer span { color: var(--muted); font-size: .76rem; font-weight: 400; }
.cert-verify__link { display: inline-flex; align-items: center; gap: .8rem; min-height: 2.75rem; margin-top: .6rem; border-bottom: 1px solid var(--field-line); font-size: .86rem; font-weight: 600; transition: color 200ms ease, border-color 200ms ease; }
.cert-verify__link svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cert-verify__link:hover { color: var(--gold-ink); border-color: var(--gold-deep); }

/* -------------------------------------------------------------- viewer */
.cert-viewer { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--on-dark-ink); }
/* ::backdrop does not reliably see custom properties: the graphite is literal. */
.cert-viewer::backdrop { background: rgb(36 38 37 / .96); }
.cert-viewer[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.cert-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem var(--gutter); }
.cert-viewer__title { min-width: 0; font-size: .9rem; font-weight: 500; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cert-viewer__controls { display: flex; align-items: center; gap: .5rem; flex: none; }
.cert-viewer__count { min-width: 3rem; color: var(--on-dark-body); font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums; }
.cert-viewer__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgb(246 244 238 / .3); border-radius: 50%; background: transparent; color: var(--on-dark-ink); cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.cert-viewer__btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cert-viewer__btn:hover { background: var(--gold-lit); border-color: var(--gold-lit); color: var(--on-gold); }
.cert-viewer__btn:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 3px; }
.cert-viewer__close { margin-left: .5rem; }
.cert-viewer__stage { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 0; padding: 0 var(--gutter) 1.2rem; overflow: auto; }
.cert-viewer__img { max-width: 100%; max-height: calc(100dvh - 6rem); width: auto; height: auto; object-fit: contain; background: #fff; box-shadow: 0 2rem 4rem -1rem rgb(0 0 0 / .6); }
.has-cert-viewer { overflow: hidden; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 63.99em) {
  .cert-hero__inner { grid-template-columns: 1fr; grid-template-areas: "crumbs" "copy" "stack" "facts"; }
  .cert-stack { width: min(100%, 36rem); justify-self: center; margin-top: 2.5rem; }
  .cert-facts { grid-template-columns: 1fr 1fr; }
  .cert-facts div:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--on-dark-line); margin-top: 1.2rem; }
  .certs__head, .cert-contact__inner { grid-template-columns: 1fr; }
}
@media (max-width: 47.99em) {
  .cert-hero { padding-block: 1.4rem 3.2rem; }
  .cert-crumbs ol { margin-bottom: 2rem; }
  .cert-hero__title { font-size: clamp(2.5rem, 10.6vw, 3.6rem); }
  .cert-stack { margin-top: 1.6rem; }
  .cert-facts { grid-template-columns: 1fr; margin-top: 2.6rem; }
  .cert-facts div, .cert-facts div + div, .cert-facts div:nth-child(3) { padding: 1.1rem 0; border-left: 0; border-top: 0; border-bottom: 1px solid var(--on-dark-line); margin-top: 0; }
  .certs { padding-block: 3.8rem 3rem; }
  /* paper beside its record */
  .certs__list { grid-template-columns: 1fr; gap: 0; }
  .cert { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 1.1rem; align-items: start; padding-block: 1.6rem; border-top: 1px solid var(--line); }
  .cert__body { display: contents; }
  .cert__paper { grid-column: 1; grid-row: 1 / span 3; }
  .cert__system, .cert__code, .cert__meaning { grid-column: 2; }
  .cert__meaning { margin-top: .7rem; }
  .cert__zoom { right: .4rem; bottom: .4rem; padding: .35rem; }
  .cert__zoom span { display: none; }
  .cert__code { font-size: 1.7rem; }
  .cert__meaning { font-size: .85rem; }
  .cert__data { grid-column: 1 / -1; }
  .cert__data div { padding-block: .6rem; }
  .cert-contact { padding-bottom: 3.8rem; }
  .cert-contact__inner { padding-top: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cert-stack__paper, .cert__paper, .cert__zoom, .cert-hero__more svg, .cert-viewer__btn { transition: none; }
  .cert__paper:hover { transform: none; }
}