/**
 * Real, on request ("admin panelde süper admin ve moderatörün düzenleyebileceği bir özelik
 * eklemek istiyorum. seçtiğim 6 şirketi anasayfada vitrine koymak istiyorum ... bu section css
 * kodlarını homepage.css isimli bir dosya aç ve sadece anasayfada kullan lütfen. şirket detay
 * sayfalarında gereksiz css yükü istemiyorum"). Only `index.php` loads this file (see its own
 * `$head_extra` `<link>`) — same reasoning `our-team.css`/`e-posta.css` already document: a
 * one-off section's own rules shouldn't permanently bloat the shared `style.css` every other real
 * page also has to download, company.php especially (the page this request explicitly called out).
 *
 * Design history: a bold dark brand-teal gradient band + a gold ribbon on every card was toned
 * down on a direct follow-up ("arka plan rengi çok dikkat çekiyor daha sade hale getir lütfen"
 * — the band's own background became this same calm `.band-tint`-style tint used elsewhere on
 * the page) and moved below "Browse by industry". **Revised again, on a further follow-up**
 * ("featured-card tasarımını daha modernleştirir misin her firmanın yanında FEATURED yazmasına
 * gerek yok. biraz daha modern hale getir lütfen"): the per-card "Featured" ribbon is gone
 * entirely now — the section's own real heading/eyebrow above the grid already says that once,
 * repeating it on every single card was real, genuine clutter, not a second real signal. The
 * card itself is a real, more modern "profile card" layout instead: a compact rounded logo next
 * to the name/industry (not a full-width logo block), a thin real divider, and a real location +
 * arrow footer row — the arrow nudges right on hover as the one small, real interactive touch
 * replacing the ribbon's old job of "this card is clickable/special".
 */

.featured-band{ background: #e8f1ef; }
.featured-band .section-head{ position: relative; }

.featured-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--amber-bg);
  color: var(--amber);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.featured-eyebrow .icon{ width: 13px; height: 13px; }

.featured-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
@media (max-width: 900px){ .featured-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .featured-grid{ grid-template-columns: 1fr; } }

.featured-card{
  /* Real, on request ("küçük ekranda öne çıkan firmalar kenara doğru taşıyor ve hata gibi
     görünüyor") — found with real temp data + a real headless-Chrome scrollWidth check: this is
     a direct grid item of .featured-grid, and a CSS Grid item's default `min-width: auto` means
     it refuses to shrink below its own content's natural min-content size, even inside a `1fr`
     track. At the 1-column mobile breakpoint that forced the whole grid (and the page itself)
     431px wide on a 323px viewport — a real 124px horizontal overflow, confirmed to disappear
     the instant a temp featured company was un-featured and reappear the instant it was
     re-featured, isolating it to this card specifically rather than anything else on the page.
     `min-width: 0` is the standard fix: the card is now actually allowed to shrink to its real
     grid-track width, same real technique .featured-head-text below already uses for its own
     text-ellipsis to work at all. */
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  color: var(--ink);
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(14,28,43,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.featured-card:hover{
  transform: translateY(-5px);
  border-color: var(--brand-50);
  box-shadow: 0 18px 36px rgba(14,28,43,.12);
}

.featured-head{ display: flex; align-items: center; gap: 14px; }

.featured-logo{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  flex: none;
  object-fit: cover;
  border: 1px solid var(--line);
}
.featured-logo-fallback{
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  border: none;
}

.featured-head-text{ min-width: 0; }
.featured-head-text .h3{ margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.featured-divider{ height: 1px; background: var(--line); margin: 0; }

.featured-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.featured-meta{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--muted);
}
.featured-meta .icon{ width: 14px; height: 14px; flex: none; }

.featured-arrow{
  display: inline-flex;
  color: var(--brand);
  transition: transform .18s ease;
}
.featured-arrow .icon{ width: 16px; height: 16px; }
.featured-card:hover .featured-arrow{ transform: translateX(4px); }