/* * Proje detay sayfaları — ortak stiller (F). * Kök:
* Bölümler projeler/partials/case-*.blade.php'den gelir; projeye özel * düzenler (kolaj, telefon şeridi, ikili görsel) aşağıda, anahtarına göre. * Değerler tasarımdaki (Pikap Web.dc.html, isCase bloğu) inline stillerden birebir. */ #page-project { position: relative; width: 100%; overflow-x: clip; background: #ffffff; color: #151515; padding-top: 150px; } #page-project p { text-wrap: pretty; } /* ---------- Üst alan: crumb + firma + başlık + künye + kapak + rozet ---------- */ #page-project .case-head { position: relative; padding: 0 7.002%; } #page-project .case-head .crumb { font-weight: 700; font-size: 12px; line-height: 12px; white-space: nowrap; color: #151515; } #page-project .case-head .head { margin-top: clamp(40px, 5vw, 86px); padding-bottom: clamp(30px, 3.5vw, 60px); display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; } #page-project .case-head .txt { max-width: 820px; } #page-project .case-head .firm { font-weight: 700; font-size: 13px; line-height: 13px; color: #151515; } #page-project .case-head h1 { margin: 18px 0 0; font-weight: 500; font-size: clamp(32px, 3.3vw, 56px); line-height: 1.08; letter-spacing: -0.025em; color: #151515; text-wrap: pretty; } #page-project .case-head .info { margin-top: 40px; font-weight: 500; font-size: 13px; line-height: 17px; color: #000000; } #page-project .case-head .cover { position: relative; margin-top: clamp(20px, 2.4vw, 40px); } #page-project .case-head .cover .media { aspect-ratio: 1402 / 700; } #page-project .case-head .cover .media > video, #page-project .case-head .cover .media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #page-project .case-head .cover .media.auto { aspect-ratio: auto; } #page-project .case-head .cover .media.auto > img { position: static; display: block; height: auto; } #page-project .case-head .badge { position: absolute; right: clamp(20px, 3vw, 60px); top: clamp(-115px, -8.5vw, -87px); z-index: 2; width: clamp(150px, 13vw, 198px); transition: transform .6s cubic-bezier(.16,1,.3,1); } #page-project .case-head .badge:hover { transform: scale(1.05); } #page-project .case-head .badge img { display: block; width: 100%; height: auto; will-change: transform; } /* ---------- Genel medya kutusu (video 1418/700, görsel doğal yükseklik) ---------- */ #page-project .media { position: relative; width: 100%; border-radius: 6px; overflow: hidden; background: rgb(238,238,238); } #page-project .media.video { aspect-ratio: 1418 / 700; } #page-project .media.video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #page-project .media > img { display: block; width: 100%; height: auto; } #page-project .media-area { position: relative; padding: clamp(60px, 7vw, 110px) 7.002% 0; } #page-project .media-area.lg { padding-top: clamp(70px, 8vw, 130px); } #page-project .media-area.flush { padding-top: 0; } #page-project .media-area.last { padding-bottom: clamp(90px, 11vw, 170px); } /* ---------- Neyi çözdük + Hizmet & Kapsam ---------- */ #page-project .solve-area { position: relative; padding: clamp(80px, 9vw, 150px) 7.002% 0; } #page-project .solve-area .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; align-items: stretch; } #page-project .solve-area .left { padding-right: clamp(30px, 5vw, 100px); } #page-project .solve-area .over { font-weight: 500; font-size: 17px; line-height: 20px; color: #151515; } #page-project .solve-area h2 { margin: 8px 0 0; font-weight: 500; font-size: clamp(28px, 2.4vw, 42px); line-height: 1.15; letter-spacing: -0.02em; color: #151515; } #page-project .solve-area .texts { margin-top: clamp(30px, 3vw, 48px); max-width: 740px; display: flex; flex-direction: column; gap: 26px; } #page-project .solve-area .texts p { margin: 0; font-weight: 400; font-size: 17px; line-height: 26px; color: #151515; } #page-project .solve-area .texts strong { font-weight: 500; } #page-project .solve-area .link { margin-top: clamp(30px, 3vw, 54px); 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; 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 .solve-area .link:hover { background-color: #151515; color: #ffffff; } #page-project .solve-area .right { display: grid; grid-template-columns: clamp(30px, 5.7vw, 118px) minmax(0, 1fr); } #page-project .solve-area .right .line { border-left: 1px solid rgba(21,21,21,0.12); margin-top: clamp(60px, 5.5vw, 105px); } #page-project .solve-area .right .title { font-weight: 500; font-size: 17px; line-height: 20px; color: #151515; } #page-project .solve-area .items { margin-top: clamp(60px, 5.5vw, 105px); display: flex; flex-direction: column; gap: 32px; } #page-project .solve-area .item .t { font-weight: 700; font-size: 15px; line-height: 20px; color: #151515; } #page-project .solve-area .item .d { margin: 4px 0 0; font-weight: 400; font-size: 15px; line-height: 24px; color: #151515; } /* ---------- Etki ---------- */ #page-project .impact-area { position: relative; padding: clamp(70px, 8vw, 130px) 7.002% 0; } #page-project .impact-area .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(30px, 4vw, 80px); align-items: start; } #page-project .impact-area .t { font-weight: 700; font-size: 17px; line-height: 17px; color: #151515; } #page-project .impact-area .sub { margin-top: 10px; font-weight: 400; font-size: 17px; line-height: 24px; color: rgba(0,0,0,0.55); } #page-project .impact-area .stats { display: flex; gap: clamp(30px, 5vw, 80px); flex-wrap: wrap; justify-content: flex-end; justify-self: end; } #page-project .impact-area .row { display: flex; align-items: center; gap: 14px; } #page-project .impact-area .val { font-weight: 500; font-size: clamp(30px, 2.5vw, 44px); line-height: 1; letter-spacing: -0.02em; color: #151515; } #page-project .impact-area .pill { height: 29px; border-radius: 50px; background: rgb(13,225,169); padding: 8px 16px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } #page-project .impact-area .pill img { display: block; width: 21.536px; height: 13px; filter: brightness(0) invert(1); } #page-project .impact-area .lbl { margin-top: 14px; font-weight: 400; font-size: 17px; line-height: 24px; color: rgba(0,0,0,0.68); } /* inline: ok rozeti + etiket + değer yan yana (Ege, Alvin, Tetalog) */ #page-project .impact-area.inline .stats { gap: clamp(24px, 3vw, 56px); } #page-project .impact-area.inline .stat { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); } #page-project .impact-area.inline .stats.single { flex-wrap: nowrap; } #page-project .impact-area.inline .stats.single .stat { gap: clamp(18px, 2vw, 34px); } #page-project .impact-area.inline .pill { height: 36px; padding: 0 20px; } #page-project .impact-area.inline .lbl { margin: 0; font-weight: 500; font-size: 17px; line-height: 21px; color: #151515; } #page-project .impact-area.inline .val { letter-spacing: -0.03em; white-space: nowrap; } /* big: büyük "Etki" başlığı, dikey ortalı (Alvin) */ #page-project .impact-area.big .grid { align-items: center; } #page-project .impact-area.big .t, #page-project .impact-area.wide .t { font-weight: 500; font-size: clamp(26px, 2vw, 36px); line-height: 1.1; } #page-project .impact-area.big .sub, #page-project .impact-area.wide .sub { color: #151515; } /* wide: başlık + yayılan veri satırı (Tetalog) */ #page-project .impact-area.wide { padding-top: clamp(80px, 9vw, 150px); } #page-project .impact-area.wide .grid { grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: end; } #page-project .impact-area.wide .stats { justify-content: space-between; justify-self: stretch; } /* ---------- Değer katmanı / ek metin bölümleri ---------- */ #page-project .value-area { position: relative; padding: clamp(70px, 8vw, 130px) 7.002% 0; } #page-project .value-area .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(30px, 4vw, 80px); align-items: start; } #page-project .value-area .t { font-weight: 700; font-size: 17px; line-height: 17px; color: #151515; } #page-project .value-area .lead { margin-top: 16px; max-width: 520px; font-weight: 500; font-size: clamp(22px, 1.8vw, 30px); line-height: 1.2; letter-spacing: -0.015em; color: #151515; text-wrap: pretty; } #page-project .value-area .texts { display: flex; flex-direction: column; gap: 20px; } #page-project .value-area .texts p { margin: 0; font-weight: 400; font-size: 17px; line-height: 26px; color: rgba(0,0,0,0.68); } /* ---------- Uzman değerlendirmesi ---------- */ #page-project .expert-area { position: relative; padding: clamp(80px, 9vw, 150px) 7.002% clamp(90px, 11vw, 170px); } #page-project .expert-area .box { border-top: 1px solid rgba(0,0,0,0.12); padding-top: clamp(28px, 3vw, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(30px, 5vw, 100px); align-items: start; } #page-project .expert-area .t { font-weight: 700; font-size: 13px; line-height: 13px; color: #151515; } #page-project .expert-area .people { margin-top: 24px; display: flex; flex-direction: column; } #page-project .expert-area .person { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 4px; } #page-project .expert-area .person .n { font-weight: 500; font-size: 15px; line-height: 19px; color: #151515; } #page-project .expert-area .person .r { font-weight: 400; font-size: 13px; line-height: 17px; color: rgba(0,0,0,0.5); } #page-project .expert-area .texts { grid-column: span 2; max-width: 760px; display: flex; flex-direction: column; gap: 18px; } #page-project .expert-area .texts p { margin: 0; font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 0; color: rgba(0,0,0,0.68); } #page-project .expert-area .texts p:first-child { font-size: 19px; line-height: 29px; letter-spacing: -0.01em; color: #151515; } /* quote: tek uzman — "Uzman Yorumu" düzeni */ #page-project .expert-area.quote .t { font-size: 17px; line-height: 17px; } #page-project .expert-area.quote .who { margin-top: 14px; font-weight: 400; font-size: 15px; line-height: 22px; color: rgba(0,0,0,0.6); } #page-project .expert-area.quote .texts { grid-column: auto; max-width: none; margin-top: clamp(28px, 3vw, 48px); } #page-project .expert-area.quote .texts p { font-size: clamp(20px, 1.62vw, 28px); line-height: 1.5; letter-spacing: -0.01em; color: #151515; } /* Uzman bölümü olmayan sayfalarda footer'dan önceki boşluk */ #page-project .end-space { height: clamp(90px, 11vw, 170px); } /* ---------- Kapanış paragrafı (Tracky) ---------- */ #page-project .closing-area { position: relative; padding: clamp(80px, 9vw, 150px) 7.002% clamp(60px, 7vw, 110px); } #page-project .closing-area p { margin: 0; font-weight: 400; font-size: clamp(20px, 1.62vw, 28px); line-height: 1.5; letter-spacing: -0.01em; color: #151515; } /* ---------- Kolaj: iki ekran, biri taşar (Karmod, Ege) ---------- */ #page-project .collage-area { position: relative; padding: clamp(80px, 9vw, 150px) 7.002% 0; } #page-project .collage { position: relative; width: 100%; aspect-ratio: 1879 / 932; background: rgb(238,238,238); } #page-project .collage > .a { position: absolute; left: 9.3%; top: 14.7%; width: 35.7%; bottom: 0; overflow: hidden; background: #ffffff; } #page-project .collage > .a img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } #page-project .collage > .b { position: absolute; left: 54.4%; top: -4.2%; width: 35.8%; background: #ffffff; overflow: hidden; } #page-project .collage > .b > img { display: block; width: 100%; height: auto; } #page-project .collage > .b > .vid { position: absolute; left: 0; top: 3.4%; width: 100%; aspect-ratio: 505 / 316; background: rgb(238,238,238); } #page-project .collage > .b > .vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* v2: sağ ekran sabit yükseklikte, görsel üstten kırpılır (Ege) */ #page-project .collage.v2 > .b { height: 89.7%; display: flex; flex-direction: column; } #page-project .collage.v2 > .b > .fill { position: relative; flex: 1 1 auto; min-height: 0; } #page-project .collage.v2 > .b > .fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* ---------- Telefon/ekran şeridi (Ege 3'lü, Tetalog 2'li geniş) ---------- */ #page-project .phones-area { position: relative; padding: clamp(60px, 7vw, 110px) 7.002% 0; } #page-project .phones { position: relative; width: 100%; aspect-ratio: 1859 / 917; background: rgb(238,238,238); overflow: hidden; } #page-project .phones > div { position: absolute; width: 23.8%; bottom: 0; overflow: hidden; background: #ffffff; } #page-project .phones > div:nth-child(1) { left: 7.1%; top: 28.5%; } #page-project .phones > div:nth-child(2) { left: 36.8%; top: 14.2%; } #page-project .phones > div:nth-child(3) { left: 66.4%; top: 0; } #page-project .phones > div img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } #page-project .phones.wide { aspect-ratio: 1774 / 875; } #page-project .phones.wide > div { width: 43.9%; } #page-project .phones.wide > div:nth-child(1) { left: 3.7%; top: 34.3%; } #page-project .phones.wide > div:nth-child(2) { left: 51.2%; top: 10.6%; } /* ---------- İkili ekran kompozisyonu (Alvin, Tracky) ---------- */ #page-project .duo { position: relative; width: 100%; border-radius: 6px; overflow: hidden; background: rgb(238,238,238); } #page-project .duo > img { position: absolute; height: auto; } /* Alvin */ #page-project[data-case="alvin"] .duo { aspect-ratio: 1410 / 700; background: #1c1b25; } #page-project[data-case="alvin"] .duo > img { width: 38.8%; } #page-project[data-case="alvin"] .duo > img:nth-child(1) { left: 8.5%; top: 7.1%; } #page-project[data-case="alvin"] .duo > img:nth-child(2) { left: 50.6%; bottom: 7.1%; } #page-project[data-case="alvin"] .duo.v2 { aspect-ratio: 2576 / 1272; background: rgb(239,239,239); } #page-project[data-case="alvin"] .duo.v2 > img { width: 50.8%; } #page-project[data-case="alvin"] .duo.v2 > img:nth-child(1) { left: 5%; top: 10.5%; } #page-project[data-case="alvin"] .duo.v2 > img:nth-child(2) { left: 59.4%; top: 29.4%; bottom: auto; } /* Tracky */ #page-project[data-case="tracky"] .duo { aspect-ratio: 765 / 378; background: #161616; } #page-project[data-case="tracky"] .duo > img { width: 27.6%; border-radius: clamp(10px, 1.6vw, 26px); } #page-project[data-case="tracky"] .duo > img:nth-child(1) { left: 18.6%; top: 31%; } #page-project[data-case="tracky"] .duo > img:nth-child(2) { left: 53.7%; top: 9%; } #page-project[data-case="tracky"] .duo.v2 > img:nth-child(1) { top: 21%; } #page-project[data-case="tracky"] .duo.v2 > img:nth-child(2) { top: -31%; } /* ---------- Responsive (helmet: casesplit / casephones / casecollage) ---------- */ @media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) { #page-project .solve-area .split { grid-template-columns: minmax(0, 1fr) !important; row-gap: 56px; } #page-project .solve-area .split > :first-child { padding-right: 0 !important; } #page-project .solve-area .split > .right { grid-template-columns: minmax(0, 1fr) !important; } #page-project .solve-area .split > .right > .line { display: none; } #page-project .phones { aspect-ratio: auto !important; display: flex; gap: 12px; padding: 24px 12px 0; box-sizing: border-box; overflow-x: auto !important; } #page-project .phones.wide > div { flex-basis: 88% !important; aspect-ratio: 778 / 700 !important; } #page-project .phones > div { position: relative !important; left: auto !important; top: auto !important; bottom: auto !important; flex: 0 0 62%; aspect-ratio: 442 / 760; } #page-project .collage { aspect-ratio: auto !important; display: flex; flex-direction: column; gap: 16px; padding: 24px 16px; box-sizing: border-box; } #page-project .collage > div { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; } #page-project .collage > div:first-child { aspect-ratio: 671 / 700; } #page-project .collage > div:last-child { position: relative !important; } /* tasarımda Ege'nin sağ ekranı mobilde 0 yüksekliğe düşüyor (mutlak konumlu görsel); oranı korunarak görünür bırakıldı */ #page-project .collage.v2 > .b { aspect-ratio: 671 / 700; } }