/* Styles for the inner pages (tentang, karya, desain-ai, kontak).
   Builds on style.css; the home page does not load this file. */

.menu a[aria-current="page"] { color: var(--accent); }

/* Page hero */
.page-hero { min-height: 85svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 10rem var(--gutter) clamp(3rem, 8vw, 6rem); }
.page-hero .display { max-width: 13ch; }
.page-hero .body { margin-top: 2.5rem; }

/* Generic block */
.block { padding: clamp(5rem, 11vw, 9rem) var(--gutter); }
.block .title.xl { margin-bottom: clamp(2.5rem, 6vw, 5rem); }

.text-link { display: inline-block; margin-top: 2rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--accent); padding-bottom: .25rem; transition: color .3s; }
.text-link:hover { color: var(--accent); }
.text-link.inline { margin-top: 0; }

/* Tentang: values */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.values li { background: var(--bg); padding: 2rem 1.5rem; display: grid; gap: .75rem; align-content: start; min-height: 16rem; }
.values span { font-size: .75rem; color: var(--accent); letter-spacing: .12em; }
.values h3 { font: 300 1.6rem var(--display); text-transform: uppercase; }
.values p { color: var(--muted); font-size: .92rem; }

/* Tentang: team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.team .ph { aspect-ratio: 3 / 4; filter: grayscale(1); transition: filter .5s; }
.team figure:hover .ph { filter: none; }
.team figcaption { padding-top: 1rem; }
.team h3 { font: 300 1.3rem var(--display); text-transform: uppercase; }
.team p { font-size: .8rem; color: var(--muted); }

/* Tentang: services, kept minor */
.services-mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; text-align: center; }
.chips-row { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.chips-row li { font-size: .78rem; letter-spacing: .06em; padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }

/* Karya: filters + 3 column grid */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: .5rem 1.1rem; border-radius: 999px; font: 400 .75rem var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: all .3s; }
.chip:hover { color: var(--ink); border-color: var(--muted); }
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.works-head .filters + .count { margin-left: auto; }
.block.statement { margin: 0; }

/* Desain & AI */
.issues { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); }
.issues li { display: grid; grid-template-columns: 3rem 1fr; gap: .25rem 1rem; padding: 1.75rem 0; border-top: 1px solid var(--line); }
.issues span { grid-row: span 2; font-size: .75rem; color: var(--accent); letter-spacing: .12em; padding-top: .4rem; }
.issues h3 { font: 300 1.35rem/1.25 var(--display); text-transform: uppercase; }
.issues p { color: var(--muted); font-size: .95rem; }

.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.roles > div { background: var(--bg); padding: clamp(2rem, 4vw, 3rem); }
.roles h3 { font: 200 clamp(2rem, 4vw, 3rem) var(--display); text-transform: uppercase; margin-bottom: 1.5rem; }
.roles ul { list-style: none; display: grid; gap: .9rem; }
.roles li { padding-left: 1.5rem; position: relative; color: var(--muted); }
.roles li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.roles .human h3 em { color: var(--accent); }

.principles { list-style: none; display: grid; gap: 0; }
.principles li { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: 2rem; padding: 1.75rem 0; border-top: 1px solid var(--line); align-items: center; }
.principles li:last-child { border-bottom: 1px solid var(--line); }
.principles h3 { font: 200 clamp(1.8rem, 3.5vw, 2.8rem) var(--display); text-transform: uppercase; }
.principles p { color: var(--muted); }

/* FAQ */
.faq { border-top: 1px solid var(--line); max-width: 60rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 2rem; padding: 1.5rem 0; font: 300 clamp(1.15rem, 2vw, 1.45rem) var(--display); text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 1.5rem; max-width: 46rem; }

/* Kontak */
.contact-page { padding-top: 0; }
.contact-page .contact-grid { margin-bottom: clamp(4rem, 9vw, 7rem); }
.form-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 6rem); }
.form-wrap .title { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
.form .full { grid-column: 1 / -1; }
.form label { display: grid; gap: .5rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.form input, .form select, .form textarea { font: 300 1.05rem var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: .6rem 0; border-radius: 0; transition: border-color .3s; }
.form select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--muted) 50%) right .4rem center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--muted) 50%) right 0 center / 6px 6px no-repeat; }
.form select option { background: var(--bg-2); color: var(--ink); }
.form textarea { resize: vertical; min-height: 7rem; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form button { justify-self: start; cursor: pointer; color: var(--ink); }
.form-note { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); min-height: 1.2em; }

/* Next page link */
.next { padding: clamp(5rem, 12vw, 9rem) var(--gutter); text-align: center; display: grid; gap: 1.5rem; justify-items: center; }
.next-link { font: 200 clamp(3rem, 10vw, 9rem)/1 var(--display); text-transform: uppercase; transition: color .3s; }
.next-link:hover { color: var(--accent); }

/* Responsive */
@media (max-width: 1100px) {
  .values, .team { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .values, .issues, .roles, .form-wrap, .form { grid-template-columns: 1fr; }
  .values li { min-height: 0; }
  .team { gap: 1.5rem 1rem; }
  .principles li { grid-template-columns: 1fr; gap: .5rem; }
  .works-head { flex-wrap: wrap; gap: 1rem; }
}

/* Pinned card grids: borders live on the cards, so a card that has not arrived leaves no trace */
.values.pin-cards, .roles.pin-cards { background: transparent; border: 0; gap: 0; }
.values.pin-cards li, .roles.pin-cards > div { outline: 1px solid var(--line); outline-offset: -1px; }