/* ==========================================================================
   pages.css - page compositions: home (hero, quick-request form, trust strip, services, steps). Later phases append their pages here.
   ========================================================================== */

/* ================================ HOME ================================ */

/* ---- hero (Figma 4:69): navy, copy left, white quick-request card right ---- */
.hero {
  background: var(--bg-navy);
  color: var(--text-on-navy);
  padding-block: var(--space-10) var(--space-12);
}
.hero__grid { display: grid; gap: var(--space-10); align-items: center; }
.hero__copy { display: grid; gap: var(--space-6); justify-items: start; min-width: 0; }
.hero__title { font-size: var(--fs-hero); line-height: 0.98; color: var(--color-white); text-wrap: pretty; }
.hero__title-accent { color: var(--accent); white-space: nowrap; }
.hero__intro { max-width: 35rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-on-navy-muted); }
.hero__actions { display: grid; gap: var(--space-3); width: 100%; }
@media (min-width: 560px) {
  .hero__actions { display: flex; flex-wrap: wrap; width: auto; gap: 0.875rem; }
}
@media (min-width: 768px) {
  .hero { padding-block: var(--space-16) var(--space-20); }
  .hero__copy { gap: 1.75rem; }
}
/* tablet: keep the designed three-line rhythm "Yolda kaldıysanız / ortalama 30 dakikada / yanınızdayız." instead of a long first line */
@media (min-width: 600px) and (max-width: 1023.98px) { .hero__title { max-width: 9.4em; } }
/* small phones (360): one step smaller keeps the designed three lines "Yolda kaldıysanız / ortalama 30 dakikada / yanınızdayız." */
@media (max-width: 379.98px) { .hero__title { font-size: 2.25rem; } }
/* 1024-1279: the two hero buttons stay on one row */
@media (min-width: 1024px) and (max-width: 1279.98px) { .hero__actions { gap: var(--space-3); } .hero__actions .btn { padding-inline: 1.375rem; } }
@media (min-width: 1024px) {
  .hero { padding-block: 6rem; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) clamp(23.75rem, 34vw, 28.75rem); gap: clamp(2.5rem, 4vw, 4.5rem); }
  .hero__title { font-size: clamp(3.75rem, 5.9vw, 4.75rem); line-height: 0.98; }
}

/* ---- quick-request card (Figma 4:98) ---- */
.quick-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-card-hero);
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}
.quick-form__title { font-size: var(--fs-form-title); line-height: 1.2; }
.quick-form__intro { font-size: var(--fs-body); line-height: 1.45; color: var(--text-muted); }
.quick-form__fields { display: grid; gap: var(--space-4); }
.quick-form__consents { display: grid; gap: var(--space-4); }
.quick-form__note { font-size: var(--fs-note); line-height: 1.45; color: var(--text-muted); }
.quick-form__note,
.quick-form .checkbox { font-size: var(--fs-micro); }
.quick-form__note { font-size: 0.75rem; }
@media (min-width: 768px) { .quick-form { padding: var(--space-8); } }
/* tablet: the two short fields pair up so the card does not grow tall */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .quick-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-form__fields .field--wide { grid-column: 1 / -1; }
}
.quick-form [data-geo-status] { font-size: var(--fs-label); line-height: 1.35; color: var(--text-muted); }
.quick-form [data-geo-status][data-state="error"] { color: var(--color-danger); }

/* ---- trust strip (Figma 4:146) ---- */
.trust { padding-block: var(--space-10); background: var(--bg); }
.trust__grid { display: grid; gap: var(--space-6); }
@media (min-width: 600px) { .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); } }
@media (min-width: 1180px) { .trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); } .trust { padding-block: 3.5rem; } }

/* ---- services (Figma 4:182) ---- */
.services__grid { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 600px) { .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-6); margin-top: var(--space-12); } }
@media (min-width: 1280px) { .services__grid { row-gap: var(--space-12); } }

/* ---- how it works (Figma 4:266) ---- */
.steps__grid { display: grid; gap: var(--space-10); margin-top: var(--space-8); }
@media (min-width: 768px) { .steps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); } }

/* the call band sits on a white strip under the steps */
.call-band { padding-bottom: var(--section-pad); }

/* ================================ 404 ================================ */
.not-found { padding-block: var(--space-16); text-align: center; }
.not-found__inner { display: grid; gap: var(--space-5); justify-items: center; max-width: 44rem; margin-inline: auto; }
.not-found__code { font-family: var(--font-display); font-size: clamp(5rem, 4rem + 8vw, 9rem); font-weight: 800; line-height: 1; color: var(--accent); }
.not-found__title { font-size: var(--fs-h2); }
.not-found__text { color: var(--text-muted); font-size: var(--fs-intro); }
.not-found__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* no JavaScript: the form cannot post, so the card tells people to call instead of pretending to work */
.quick-form__nojs { display: none; }
.no-js .quick-form__nojs { display: block; }

/* ================================ dev component sheet (/_ui) ================================ */
.sg-ratio-382-220 { aspect-ratio: 382 / 220; }
.sg-ratio-16-9 { aspect-ratio: 16 / 9; }
.sg-ratio-1-1 { aspect-ratio: 1 / 1; }
.sg-ratio-4-3 { aspect-ratio: 4 / 3; }
.sg-stack { display: grid; gap: var(--space-12); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sg-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.sg-form { display: grid; gap: var(--space-4); max-width: 28rem; }

/* ==========================================================================
   Phase 2 pages
   ========================================================================== */

/* ================================ SERVICES LIST ================================ */
.services--list .services__grid { margin-top: 0; }

/* ================================ SERVICE ================================ */
/* hero (Figma 9:276): copy left, image frame right */
.service-hero { background: var(--bg-navy); color: var(--text-on-navy); padding-block: var(--space-10) var(--space-12); }
.service-hero__grid { display: grid; gap: var(--space-10); align-items: center; }
.service-hero__copy { display: grid; gap: 1.375rem; justify-items: start; min-width: 0; }
.service-hero__title { font-size: var(--fs-service-title); line-height: 1; color: var(--color-white); }
.service-hero__intro { max-width: 33.75rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-on-navy-muted); }
.service-hero .hero__actions { padding-top: 0.5rem; }
.service-hero__frame { aspect-ratio: 16 / 10; border-radius: var(--radius-3xl); --ph-bar: 8px; }
@media (min-width: 600px) and (max-width: 1023.98px) { .service-hero__frame { aspect-ratio: 2 / 1; } } /* tablet: a lower frame keeps the intro and the first block close together */
@media (min-width: 768px) {
  .service-hero { padding-block: var(--space-16) var(--space-20); }
  .service-hero__frame { border-radius: var(--radius-4xl); --ph-bar: 10px; }
}
@media (min-width: 1024px) {
  .service-hero { padding-block: 5rem; }
  .service-hero__grid { grid-template-columns: minmax(0, 1fr) clamp(23rem, 36.1vw, 32.5rem); gap: clamp(2.5rem, 4.4vw, 4rem); }
  .service-hero__frame { aspect-ratio: 520 / 460; --ph-bar: 12px; }
}
.service-body { padding-block: var(--space-12); }
.service-main { display: grid; gap: var(--space-12); min-width: 0; }
@media (min-width: 768px) { .service-main { gap: 4rem; } .service-body { padding-block: 4rem; } }
@media (min-width: 1024px) { .service-body { padding-block: 5.5rem; } }
/* tablet: the three sidebar cards sit in two columns (the list spans both rows) instead of one long stack */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .service-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .service-aside > :first-child { grid-row: span 2; }
}

/* 1024-1279: the two service hero buttons stay on one row (the copy column is narrow) */
@media (min-width: 1024px) and (max-width: 1279.98px) { .service-hero .hero__actions { gap: var(--space-3); } .service-hero .hero__actions .btn { padding-inline: 1.25rem; } }

/* ================================ BLOG LIST ================================ */
.blog-list { padding-block: var(--space-8) var(--space-12); }
.blog-list > .container { display: grid; gap: var(--space-8); }
.blog-toolbar { display: grid; gap: var(--space-4); }
/* phones and tablets: one horizontally scrollable row of chips with a fade at the edge */
.chip-row { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, var(--color-white) calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, var(--color-white) calc(100% - 2rem), transparent); }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row__list { display: flex; gap: 0.625rem; width: max-content; padding-right: 2rem; }
@media (min-width: 1024px) {
  .blog-list { padding-block: 3.5rem; }
  .blog-list > .container { gap: 3rem; }
  .blog-toolbar { grid-template-columns: minmax(0, 1fr) 20rem; align-items: center; gap: var(--space-6); }
  .chip-row { margin-inline: 0; padding-inline: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .chip-row__list { flex-wrap: wrap; width: auto; padding-right: 0; }
}
.blog-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); margin-top: calc(var(--space-4) * -1); }
.blog-summary__clear { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; }
.post-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.post-grid .post-card { min-width: 0; }
/* related posts: one column on phones, two on tablets (the third card is hidden there: a 2 + 1 split leaves an orphan and three narrow
   columns squeeze the titles to four lines), three from 1024 */
@media (min-width: 640px) and (max-width: 1023.98px) { .post-grid--compact > :nth-child(n + 3) { display: none; } .post-grid--compact .post-card__title { font-size: 1.5rem; } }

/* ================================ POST ================================ */
.post-head { background: var(--bg-soft); padding-block: var(--space-8) var(--space-10); }
.post-head__inner { display: grid; gap: 1.25rem; justify-items: start; }
.post-head__chip { text-decoration: none; transition: background-color var(--dur-fast) ease; }
.post-head__title { font-size: var(--fs-post-title); line-height: 1.03; max-width: 56.25rem; text-wrap: balance; }
@media (min-width: 1024px) { .post-head__title { text-wrap: pretty; } } /* desktop keeps Figma's line breaks */
.post-head__lead { max-width: 51rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-muted); }
.post-head__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); width: 100%; padding-top: 0.5rem; }
@media (min-width: 768px) { .post-head { padding-block: 4rem; } }
.post-cover { padding-top: var(--space-6); }
.post-cover__frame { aspect-ratio: 16 / 10; border-radius: var(--radius-3xl); --ph-bar: 8px; }
@media (min-width: 768px) { .post-cover { padding-top: 3rem; } .post-cover__frame { aspect-ratio: 1200 / 520; border-radius: var(--radius-4xl); --ph-bar: 13px; } }
.post-body { padding-block: var(--space-10) var(--space-12); }
@media (min-width: 1024px) { .post-body { padding-block: 4rem; } }
.post-article { min-width: 0; }
/* the table of contents is a sidebar card on desktop and a collapsible box above the article below 1024 */
.post-aside .toc,
.legal__aside .toc { display: none; }
@media (min-width: 1024px) {
  .post-aside .toc,
  .legal__aside .toc { display: grid; }
  .toc--inline { display: none; }
}
/* tablet: the sidebar cards sit in two columns */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .post-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .post-aside > .side-card:last-child { grid-column: 1 / -1; }
}
.similar { padding-block: 3.5rem; }
@media (min-width: 1024px) { .similar { padding-block: 5rem; } }
.similar__title { font-size: var(--fs-block-title); line-height: 1.2; margin-bottom: var(--space-8); }

/* ================================ ABOUT ================================ */
.about-story__grid { display: grid; gap: var(--space-10); align-items: center; }
.about-story__frame { aspect-ratio: 540 / 500; border-radius: var(--radius-4xl); --ph-bar: 13px; }
.about-story__copy { display: grid; gap: 1.25rem; min-width: 0; }
.about-story__title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.05; }
.prose--about { font-size: var(--fs-intro); line-height: 1.7; }
.prose--about > * + * { margin-top: 1.25rem; }
.prose--about p strong { font-weight: 600; color: var(--text); }
.about-story__copy .stat-tiles { margin-top: 0.5rem; }
@media (max-width: 599.98px) { .about-story__frame { aspect-ratio: 4 / 3; } }
@media (min-width: 600px) and (max-width: 1023.98px) { .about-story__frame { aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) { .about-story__grid { grid-template-columns: minmax(0, 540fr) minmax(0, 588fr); gap: clamp(3rem, 5vw, 4.5rem); } }
.values__grid,
.fleet__grid { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 600px) { .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 768px) { .fleet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-12); } }
@media (min-width: 1024px) {
  .values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
  .fleet__grid { gap: var(--space-6); }
}
.documents { padding-block: var(--space-12); background: var(--bg-soft); }
@media (min-width: 1024px) { .documents { padding-block: 4rem; } }
.documents__inner { display: grid; gap: var(--space-6); align-items: center; }
.documents__title { font-size: clamp(1.875rem, 1.6rem + 1.1vw, 2.125rem); line-height: 1.2; }
.documents__text { margin-top: 0.5rem; max-width: 30rem; font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted); }
.documents__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.documents__grid .doc-tile { min-width: 0; }
@media (min-width: 1024px) {
  .documents__inner { grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--space-6); }
  .documents__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
}
/* phones: icon above the label, so "Kalite yönetim belgesi" gets the full tile width (beside the icon it wrapped to three lines) */
@media (max-width: 479.98px) { .doc-tile { flex-direction: column; align-items: flex-start; padding: 1rem; gap: 0.75rem; } .doc-tile__icon { width: 2.5rem; height: 2.5rem; } }
.documents + .call-band { padding-top: var(--space-10); }

/* ================================ CONTACT ================================ */
.channels { padding-top: var(--space-8); }
.channels__grid { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .channels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* four across: the e-mail card (third) is 20 % wider so the domain part of the address fits on the line after the @ */
@media (min-width: 1280px) { .channels__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-6); } }
@media (min-width: 1024px) { .channels { padding-top: 3.5rem; } }
.contact-main { padding-block: var(--space-10) var(--space-16); }
.contact-main__grid { display: grid; gap: var(--space-8); align-items: start; }
.contact-side { display: grid; gap: var(--space-6); min-width: 0; }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .contact-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .contact-side .map-card { min-height: 15rem; }
  .contact-side .hours-card { align-content: start; }
}
@media (min-width: 1024px) {
  .contact-main { padding-block: 4rem 6rem; }
  .contact-main__grid { grid-template-columns: minmax(0, 708fr) minmax(0, 460fr); gap: var(--space-8); }
}

/* ================================ FAQ / REGIONS / LEGAL ================================ */
.faq-page__inner > .accordion { max-width: 54rem; } /* left-aligned with the hero text, not a centred island */
.regions__inner > .prose,
.regions__list-wrap { max-width: 44rem; }
.faq-page { padding-bottom: var(--space-12); }
.regions__inner { display: grid; gap: var(--space-10); }
.regions__list-title { font-size: 1.75rem; margin-bottom: var(--space-4); }
.legal__article { min-width: 0; }
.prose--legal { max-width: 42rem; font-size: 1.0625rem; line-height: 1.75; }
.legal { padding-block: var(--space-10) var(--space-16); }
@media (min-width: 1024px) { .legal { padding-block: 4rem 6rem; } }

/* ---- 404 additions ---- */
.not-found__links { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.not-found__links-title { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.not-found__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

/* ---- regions: the About stat tiles as a row between the prose and the call band ---- */
.regions { padding-bottom: var(--space-8); }
.regions-stats { padding-bottom: var(--space-12); }
@media (min-width: 768px) {
  .stat-tiles--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .regions-stats { padding-bottom: var(--space-16); }
}