/*
 * Proje detayı — metin + geniş görsel akışı (G: core, corebrand, secr, secrbrand).
 * Tasarımda bu dört sayfada tekrarlanan "etiket + başlık + paragraflar" bölümü, geniş görsel
 * kutusu ve "Daha fazla proje" düğmesi. Değerler Pikap Web.dc.html inline stillerinden birebir.
 */

/* Metin bölümü: ek_baslik_N (etiket) + ek_metin_N (1. paragraf başlık, sonrakiler açıklama) */
#page-project .story-area { position: relative; padding: clamp(80px, 9vw, 150px) 7.002% 0; }
#page-project .story-area .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(30px, 5vw, 100px); align-items: start; }
#page-project .story-area .t { font-weight: 700; font-size: 13px; line-height: 13px; color: #151515; }
#page-project .story-area h2 { margin: 18px 0 0; max-width: 620px; font-weight: 500; font-size: clamp(26px, 2.2vw, 38px); line-height: 1.15; letter-spacing: -0.02em; color: #151515; text-wrap: pretty; }
#page-project .story-area .texts { padding-top: clamp(0px, 2.4vw, 31px); max-width: 520px; display: flex; flex-direction: column; gap: 18px; }
#page-project .story-area .texts p { margin: 0; font-weight: 400; font-size: 17px; line-height: 26px; color: rgba(0,0,0,0.68); text-wrap: pretty; }

/* Geniş görsel kutusu: varsayılan boşluk metin bölümünün ardından (50–80), .lg bölüm başında (80–150) */
#page-project .shot-area { position: relative; padding: clamp(50px, 5vw, 80px) 7.002% 0; }
#page-project .shot-area.lg { padding-top: clamp(80px, 9vw, 150px); }
#page-project .shot { position: relative; width: 100%; border-radius: 6px; overflow: hidden; background: rgb(228,231,232); }
#page-project .shot > img { display: block; width: 100%; height: auto; }

/* Uzman bölümünün ardından "Daha fazla proje" geliyorsa alt boşluk düğme bölümüne geçer */
#page-project[data-case="corebrand"] .expert-area,
#page-project[data-case="secr"] .expert-area,
#page-project[data-case="secrbrand"] .expert-area { padding-bottom: 0; }

/* Görsel kapaklar: doğal yükseklik, gri zemin rgb(228,231,232) (core, corebrand, secrbrand) */
#page-project .case-head .cover .media.auto { background: rgb(228,231,232); }

/* Daha fazla proje */
#page-project .more-area { position: relative; padding: clamp(70px, 8vw, 120px) 7.002% clamp(90px, 11vw, 170px); display: flex; justify-content: center; }
#page-project .more-area a { height: 60px; border-radius: 50px; box-shadow: inset 0 0 0 1px rgb(21,21,21); padding: 0 40px; display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; font-weight: 400; font-size: 17px; line-height: 20px; white-space: nowrap; color: rgb(21,21,21); transition: background-color .45s cubic-bezier(.16,1,.3,1), color .45s cubic-bezier(.16,1,.3,1); }
#page-project .more-area a:hover { background-color: #151515; color: #ffffff; }