/* akillisletme_web_new'deki Projeler bolumunun (ProjectsSection + ProjectCard)
   tasarimi, aynen. Kaynak: src/styles/globals.css. Yalniz /{tr,en}/projects
   listesinde yuklenir (body.ap). Tema data-theme yerine sistem tercihiyle. */
body.ap{
  --color-bg:#ffffff;--color-bg-alt:#f6f7f9;--color-surface:#ffffff;--color-card-bg:#ffffff;
  --color-text:#0e1726;--color-text-muted:#5f6b7a;--color-text-faint:#8b95a3;
  --color-primary:#0f766e;--color-border:#e8ebef;--color-border-strong:#d5dae1;
  --shadow-md:0 1px 2px rgba(14,23,38,.04),0 8px 24px rgba(14,23,38,.06);
  --status-published:#0f9d58;--status-published-bg:rgba(15,157,88,.09);
  --status-staging:#b45309;--status-staging-bg:rgba(217,119,6,.10);
  --status-indev:#5f6b7a;--status-indev-bg:rgba(95,107,122,.10);
  --text-lg:1.125rem;--text-3xl:clamp(2rem,3.6vw,2.75rem);
  --radius-lg:1.25rem;--radius-pill:999px;--ease:cubic-bezier(.22,1,.36,1);
  --bg:var(--color-bg);--fg:var(--color-text);--mu:var(--color-text-muted);--bd:var(--color-border);
  background:var(--color-bg);color:var(--color-text);
  font-family:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
body.ap::before{display:none}
@media(prefers-color-scheme:dark){body.ap{
  --color-bg:#0a0d12;--color-bg-alt:#10141b;--color-surface:#121720;--color-card-bg:#121720;
  --color-text:#eef1f5;--color-text-muted:#9aa4b2;--color-text-faint:#6d7786;
  --color-primary:#2dd4bf;--color-border:rgba(255,255,255,.08);--color-border-strong:rgba(255,255,255,.14);
  --shadow-md:0 8px 24px rgba(0,0,0,.35);
  --status-published:#4ade80;--status-published-bg:rgba(74,222,128,.10);
  --status-staging:#fbbf24;--status-staging-bg:rgba(251,191,36,.10);
  --status-indev:#9aa4b2;--status-indev-bg:rgba(154,164,178,.12);
}}
.wrap--wide{max-width:1200px;padding:0 24px}
@media(max-width:640px){.wrap--wide{padding:0 16px}}
.projects-section{padding:clamp(1.5rem,4vw,3rem) 0 clamp(3rem,8vw,6rem)}
.projects-section h1,.projects-section h3,.projects-section p{margin:0}
.app-card a{text-decoration:none}
.app-card[hidden]{display:none}
.section-head {
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.section-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}

.section-head--split > div:first-child {
  max-width: 36rem;
}

.section-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-primary);
  margin-bottom: 0.9rem;
}

.section-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--color-text);
}

.section-lead {
  margin-top: 1rem;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ============================================
   Projects
   ============================================ */
.filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
}

.filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.25rem;
  padding: 0 0.95rem;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.filter__btn:hover {
  color: var(--color-text);
}

.filter__btn[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

.filter__count {
  font-size: 0.75rem;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
}

.app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s var(--ease);
}

.app-card--link:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.app-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.app-card__icon {
  transition: transform 0.35s var(--ease);
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--color-border);
}

/* Magaza ikonu olmayan projeler: aksan tonunda sade kare. */
.app-card__icon--glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  box-shadow: none;
}

.app-card[data-accent="blue"]   { --accent: #2563eb; }
.app-card[data-accent="purple"] { --accent: #7c3aed; }
.app-card[data-accent="pink"]   { --accent: #db2777; }
.app-card[data-accent="green"]  { --accent: #059669; }
.app-card[data-accent="cyan"]   { --accent: #0891b2; }
@media(prefers-color-scheme:dark){body.ap .app-card[data-accent="blue"]{--accent: #7ba2ff;}}
@media(prefers-color-scheme:dark){body.ap .app-card[data-accent="purple"]{--accent: #a98bff;}}
@media(prefers-color-scheme:dark){body.ap .app-card[data-accent="pink"]{--accent: #f27aa8;}}
@media(prefers-color-scheme:dark){body.ap .app-card[data-accent="green"]{--accent: #3ecf94;}}
@media(prefers-color-scheme:dark){body.ap .app-card[data-accent="cyan"]{--accent: #3ec2da;}}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status--published { color: var(--status-published); background: var(--status-published-bg); }
.status--staging   { color: var(--status-staging);   background: var(--status-staging-bg); }
.status--indev     { color: var(--status-indev);     background: var(--status-indev-bg); }

.app-card__title {
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-text);
}

.app-card__link {
  color: inherit;
}

.app-card__link:hover {
  color: inherit;
}

/* Stretched link: tum kart tiklanabilir, DOM'da tek baglanti. */
.app-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.app-card__link:focus-visible {
  outline: none;
}

.app-card__link:focus-visible::after {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.app-card__category {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--color-text-faint);
}

.app-card__desc {
  margin-top: 0.85rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.4rem;
}

.app-card__externals {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.35rem;
}

.app-card__ext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.app-card__ext:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  background: var(--color-bg-alt);
}

@media (max-width: 640px) {
  .app-card {
    padding: 1.25rem;
  }

  .app-card__top {
    margin-bottom: 1rem;
  }

  .app-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .app-card__desc {
    -webkit-line-clamp: 2;
  }

  .app-card__footer {
    padding-top: 1rem;
  }
}

.app-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text);
}

.app-card__more svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s var(--ease);
}

.app-card:hover .app-card__icon {
  transform: rotate(-6deg) scale(1.05);
}

.app-card--link:hover .app-card__more svg {
  transform: translateX(3px);