/* Approved Plex heading treatment. Complete local IBM fonts include Latin and Turkish. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./assets/ibm-plex-sans-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./assets/ibm-plex-sans-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./assets/ibm-plex-sans-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* Space Age logos, Inter body copy and the approved Inter hero remain unchanged. */
h2,
h3 {
  font-family: "IBM Plex Sans", Inter, Arial, sans-serif;
  font-synthesis: none;
}
.section-heading h2,
.package-heading h2,
.solutions-intro h2,
.closing-section h2 {
  font-size: 42px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.section-heading > div,
.package-heading > div,
.closing-section h2 { min-width: 0; }
.section-description { max-width: 38ch; }
.package-card h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.project-caption h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.solution h3,
.empty-state h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.detail-info h2,
.comparison-header h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* Every package has the same square image stage and the same internal spacing. */
.package-card .package-photo {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 24px;
  margin-bottom: 20px;
  align-self: stretch;
  flex-shrink: 0;
}
.package-card .package-photo img {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: contain;
  mix-blend-mode: normal;
}

/* Equal reference frames, with the subject kept in view for each source photograph. */
.project-card .project-picture { aspect-ratio: 3 / 2; }
.project-card[data-project-id="entek-suloglu-suloglu-20mw-sanayi-ges"] .project-picture img {
  object-position: 50% 70%;
}
.project-card[data-project-id="kardemir-haddehane-aliaga-1-88mw-sanayi-ges"] .project-picture img {
  object-position: 50% 50%;
}
.project-card[data-project-id="kardemir-celikhane-aliaga-2-75mw-sanayi-ges"] .project-picture img {
  object-position: 50% 85%;
}
.project-card[data-project-id="adana-karatas-adliye-binasi-120kw-ges"] .project-picture img {
  object-position: 50% 100%;
}

/* Selected product labels remain available at tablet and phone widths. */
.tray-item { flex: 1; width: auto; max-width: 220px; }
.tray-item > span {
  display: -webkit-box;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.tray-remove { flex-shrink: 0; }
.package-compare,
.package-details,
.tray-actions .button { min-height: 44px; }
.package-details { min-width: 44px; }

@media (max-width: 760px) {
  .section-heading h2,
  .package-heading h2,
  .solutions-intro h2,
  .closing-section h2 {
    font-size: 30px;
    line-height: 1.2;
    max-width: none;
  }
  .package-card h3 { font-size: 22px; }
  .project-caption h3 { font-size: 21px; }
  .solution h3,
  .empty-state h3 { font-size: 18px; }
  .detail-info h2,
  .comparison-header h2 { font-size: 26px; }
  .compare-icon { width: 44px; height: 44px; }
  .compare-icon > svg { width: 17px; height: 17px; }
  .product-brand { max-width: calc(100% - 65px); }
  .package-compare { min-height: 44px; height: auto; padding-block: 10px; }

  .compare-tray-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .tray-selected {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
    width: 100%;
    flex: none;
  }
  .tray-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 3px 4px;
    width: 100%;
    max-width: none;
    padding: 0;
    border: 0;
  }
  .tray-item > img { grid-column: 1; grid-row: 1; width: 38px; height: 38px; }
  .tray-item > span {
    grid-column: 1 / -1;
    grid-row: 2;
    display: -webkit-box;
    font-size: 12px;
    line-height: 1.4;
    min-height: 17px;
  }
  .tray-remove {
    grid-column: 2;
    grid-row: 1;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
  }
  .tray-remove svg { width: 16px; height: 16px; }
  .tray-actions { width: 100%; gap: 14px; justify-content: space-between; }
  .tray-clear {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
    font-size: 12px;
  }
  .tray-actions .button { flex: 1; min-height: 44px; font-size: 12px; padding: 12px; }
  .tray-actions .button > span { font-size: 11px; }
}