/* Projeler (projeler/index) — tasarım: <sc-if isProjects>. Zemin rengi projects.js (paintProjTheme) tarafından yazılır. */

#page-projects { position: relative; }

/* ---------- Liste ---------- */
#page-projects .list-area { position: relative; padding: 150px 7.002% 0; }

#page-projects [data-pjintro] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
#page-projects [data-pjintro].is-in { opacity: 1; transform: none; }

#page-projects .crumb { transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); font-weight: 700; font-size: 12px; line-height: 12px; white-space: nowrap; color: #151515; }
#page-projects .crumb a { color: inherit; }

#page-projects .title { margin: 28px 0 0; max-width: 1180px; font-weight: 500; font-size: clamp(34px, 3.3vw, 58px); line-height: 1.08; letter-spacing: -0.02em; color: #151515; text-wrap: pretty; transition-delay: .1s; }

#page-projects .texts { margin: 32px 0 0; max-width: 620px; font-weight: 400; font-size: 16px; line-height: 24px; color: rgba(0,0,0,0.62); text-wrap: pretty; transition-delay: .2s; }

#page-projects .cards { margin-top: clamp(60px, 7vw, 116px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 3.6vw, 64px) clamp(24px, 2.8vw, 48px); }

#page-projects .card { display: block; opacity: 0; transform: translateY(46px); transition: opacity .8s cubic-bezier(.16,1,.3,1) 0s, transform .8s cubic-bezier(.16,1,.3,1) 0s; color: #151515; }
#page-projects .card:nth-child(even) { transition-delay: .14s, .14s; }
#page-projects .card.is-in { opacity: 1; transform: none; }
#page-projects a.card.is-in:hover { opacity: .96; }

#page-projects .card .img { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: rgb(239,239,239); }
#page-projects .card .img > img,
#page-projects .card .img > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }

#page-projects .card .head { margin-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#page-projects .card .firm { font-weight: 700; font-size: 12px; line-height: 12px; white-space: nowrap; color: #151515; }
#page-projects .card .soon { height: 20px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(21,21,21,0.25); padding: 0 9px; display: inline-flex; align-items: center; font-weight: 700; font-size: 11px; line-height: 11px; letter-spacing: 0.04em; white-space: nowrap; color: rgba(21,21,21,0.65); }
#page-projects .card .t { margin: 12px 0 0; max-width: 460px; font-weight: 500; font-size: clamp(20px, 1.62vw, 28px); line-height: 1.12; letter-spacing: -0.01em; color: #151515; text-wrap: pretty; }
#page-projects .card .tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
#page-projects .card .tags span { padding: 6px 12px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); font-weight: 500; font-size: 12px; line-height: 12px; white-space: nowrap; color: rgba(0,0,0,0.62); }

#page-projects .spacer { height: clamp(90px, 11vw, 180px); }

/* ---------- Müşteriler (koyu bölge) ---------- */
#page-projects .clients-area { position: relative; color: #ffffff; overflow: hidden; padding: clamp(80px, 9vw, 150px) 7.002% clamp(90px, 10vw, 160px); }
#page-projects .clients-area .label { font-weight: 700; font-size: 17px; line-height: 17px; color: rgba(255,255,255,0.5); }
#page-projects .clients-area .names { margin-top: clamp(30px, 3.6vw, 60px); display: flex; flex-direction: column; gap: clamp(6px, 0.8vw, 14px); }
#page-projects .clients-area .names a { align-self: flex-start; will-change: transform; font-weight: 400; font-size: clamp(32px, 4.6vw, 80px); line-height: 1.04; letter-spacing: -0.02em; white-space: nowrap; color: rgba(255,255,255,0.90); transition: color .35s ease; }
#page-projects .clients-area .names a:nth-child(1) { color: rgba(255,255,255,0.30); }
#page-projects .clients-area .names a:nth-child(2) { color: rgba(255,255,255,0.40); }
#page-projects .clients-area .names a:nth-child(3) { color: rgba(255,255,255,0.50); }
#page-projects .clients-area .names a:nth-child(4) { color: rgba(255,255,255,0.60); }
#page-projects .clients-area .names a:nth-child(5) { color: rgba(255,255,255,0.70); }
#page-projects .clients-area .names a:nth-child(6) { color: rgba(255,255,255,0.80); }
#page-projects .clients-area .names a:hover { color: #ffffff; }

/* ---------- Responsive (helmet: [data-rsp="projlist"]) ---------- */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
    #page-projects .cards { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
}