/*
Anasayfa — tasarım: Pikap Web.dc.html, isHome bloğu.
Hero: 450vh'lık yapışkan sahne (plak / el / kılıf → video oynatıcı), JS home.js paintHero.
Masaüstü: 1728 x 10359 px piksel hassas kanvas, genişliğe ölçeklenir (fitStage).
Mobil + dikey tablet: .hmob ızgarası ve müşteri listesi; kanvas .hdesk gizlenir.
*/
#page-home { position: relative; width: 100%; overflow-x: clip; background: #ffffff; }
/* Görünürlük (tasarımdaki data-rsp="hmob" / "hdesk") */
@media (min-width: 1025px) { #page-home .hmob { display: none !important; } }
@media (max-width: 1024px) { #page-home .hdesk { display: none !important; } }
/* ---------- Showreel modalı ---------- */
#page-home .reel-modal-area { position: fixed; inset: 0; z-index: 400; background: #000000; display: none; opacity: 0; transition: opacity .4s ease; }
#page-home .reel-modal-area video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000000; }
#page-home .reel-modal-area .close { position: absolute; right: 32px; top: 32px; z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; transition: background-color .3s ease; }
#page-home .reel-modal-area .close:hover { background-color: rgba(255, 255, 255, 0.24); }
#page-home .reel-modal-area .x { position: relative; display: block; width: 18px; height: 18px; }
#page-home .reel-modal-area .x span { position: absolute; left: 0; top: 8px; display: block; width: 18px; height: 1.6px; background: #ffffff; transform: rotate(45deg); }
#page-home .reel-modal-area .x span + span { transform: rotate(-45deg); }
/* ---------- Hero ---------- */
#page-home .hero-area { position: relative; height: 450vh; }
#page-home .hero-area .pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#page-home .hero-area .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background: radial-gradient(120% 90% at 22% 8%, #f6f6f6 0%, #dedede 44%, #f8f8f8 100%); pointer-events: none; }
#page-home .hero-area .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 46vh; z-index: 2; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.72) 46%, #ffffff 100%); pointer-events: none; }
#page-home .hero-area .word { position: absolute; left: 50%; bottom: calc(-9vh - 20px); transform: translateX(-50%); z-index: 3; font-weight: 700; font-size: 34.9vw; line-height: .78; letter-spacing: -0.045em; white-space: nowrap; color: #000000; pointer-events: none; }
#page-home .hero-area .line { position: absolute; left: 50%; top: 103px; width: 1px; height: 0; z-index: 3; background: #000000; opacity: .5; }
#page-home .hero-area .rec { position: absolute; left: 50%; top: 46vh; width: min(62vh, 44vw); height: min(62vh, 44vw); margin-left: calc(min(62vh, 44vw) / -2); z-index: 4; will-change: transform; }
#page-home .hero-area .rec .spin { position: absolute; inset: 0; border-radius: 50%; background: url(../../img/home/hero-vinyl.webp) center / contain no-repeat; will-change: transform; }
#page-home .hero-area .rec .light { position: absolute; inset: 0; border-radius: 50%; background: url(../../img/home/hero-vinyl-light.webp) center / contain no-repeat; mix-blend-mode: soft-light; opacity: .85; pointer-events: none; }
#page-home .hero-area .hand { position: absolute; left: calc(6% + min(3.75vw, 65px)); top: calc(-7vh - 24px); width: min(38.7vw, 670px); z-index: 7; transform-origin: 20% 0; will-change: transform; pointer-events: none; }
#page-home .hero-area .hand img { display: block; width: 100%; height: auto; }
#page-home .hero-area .sleeve { position: absolute; left: 50%; top: 78vh; width: min(70vh, 49vw); height: min(70vh, 49vw); margin-left: calc(min(70vh, 49vw) / -2); z-index: 5; background: #1c1c1c; overflow: hidden; will-change: transform; }
#page-home .hero-area .sleeve .tex { position: absolute; inset: 0; opacity: .3; background: url(../../img/home/home-sleeve-tex.webp) center / cover no-repeat; }
#page-home .hero-area .sleeve .reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
#page-home .hero-area .sleeve .credits { position: absolute; left: 8%; top: 9%; font-weight: 400; font-size: clamp(9px, 0.76vw, 13px); line-height: 1.75; color: rgba(255, 255, 255, 0.5); }
#page-home .hero-area .sleeve .play { position: absolute; left: 50%; top: 50%; width: 24%; margin: -12% 0 0 -12%; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
#page-home .hero-area .sleeve .play:hover { transform: scale(1.05); }
#page-home .hero-area .sleeve .play img { display: block; width: 100%; height: auto; }
#page-home .hero-area .head { position: absolute; right: clamp(24px, 4.9vw, 85px); top: 25vh; width: min(480px, 34vw); z-index: 8; will-change: transform; }
#page-home .hero-area .head .t { margin: 0; font-weight: 400; font-size: clamp(30px, 3.01vw, 52px); line-height: 1.16; letter-spacing: -0.02em; color: #000000; }
#page-home .hero-area .head p { margin: 22px 0 0; font-weight: 400; font-size: 17px; line-height: 1.42; color: #3a3a3a; }
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
#page-home .hero-area .head { left: 6% !important; right: 6% !important; width: auto !important; top: max(17vh, 130px) !important; text-align: center; } /* en az header alt kenarı (102px) + 28px */
#page-home .hero-area .head .t { font-size: clamp(24px, 6.8vw, 34px) !important; }
#page-home .hero-area .head p { font-size: 13px !important; line-height: 1.35 !important; max-width: 250px; margin: 14px auto 0 !important; }
#page-home .hero-area .line { top: 33vh !important; }
#page-home .hero-area .rec { top: 38vh !important; width: min(80vw, 45.45vh) !important; height: min(80vw, 45.45vh) !important; margin-left: calc(min(80vw, 45.45vh) / -2) !important; }
#page-home .hero-area .sleeve { top: 57vh !important; height: min(88vw, 50vh) !important; }
#page-home .hero-area .hand { display: none !important; }
#page-home .mob-area { margin-top: calc(min(44vw, 25vh) - 50vh + 40px); }
#page-home .hero-area .word { font-size: 62vw !important; bottom: calc(18vh - 48.4vw) !important; }
}
/* ---------- Mobil kart ızgarası ---------- */
#page-home .mob-area { position: relative; z-index: 2; padding: 24px clamp(20px, 7.002%, 72px) 90px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 56px clamp(20px, 3vw, 32px); background: transparent; }
#page-home .mob-area .item { display: block; }
#page-home .mob-area .img { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: rgb(239, 239, 239); }
#page-home .mob-area .img video, #page-home .mob-area .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#page-home .mob-area .m1 .img video { transform-origin: 50% 0; transform: scale(1.13); }
#page-home .mob-area .m11 .img { background: #000000; }
#page-home .mob-area .m11 .img video { inset: auto; left: 50%; top: 0; height: 100%; width: auto; object-fit: fill; transform: translateX(-50%); }
#page-home .mob-area .img .layer-bg { inset: auto; left: 0; top: 0; height: 100%; width: auto; max-width: none; object-fit: fill; will-change: transform; }
#page-home .mob-area .img .layer-fg { inset: auto; left: 0; bottom: 0; height: 74%; width: auto; max-width: none; object-fit: fill; will-change: transform; }
#page-home .mob-area .firm { margin-top: 16px; font-weight: 700; font-size: 13px; line-height: 13px; color: #151515; }
#page-home .mob-area .item .t { margin-top: 10px; font-weight: 500; font-size: 24px; line-height: 27px; letter-spacing: -0.02em; color: #151515; text-wrap: pretty; }
#page-home .mob-area .tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 700; font-size: 12px; line-height: 14px; color: #151515; opacity: .5; }
#page-home .mstat { grid-column: 1 / -1; padding: 40px 0 20px; max-width: 620px; }
#page-home .mstat .t { font-weight: 500; font-size: 36px; line-height: 38px; letter-spacing: -0.03em; color: #151515; }
#page-home .mstat .hl { background: rgba(216, 251, 79, 0.45); padding: 0 4px; }
#page-home .mstat .row { margin-top: 28px; display: flex; align-items: baseline; gap: 12px; }
#page-home .mstat .n { font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -0.04em; color: #151515; }
#page-home .mstat .pill { flex: 0 0 auto; height: 28px; border-radius: 50px; background: rgb(190, 255, 214); padding: 0 12px; display: inline-flex; align-items: center; white-space: nowrap; font-weight: 500; font-size: 12px; color: #151515; }
#page-home .mstat .src { margin-top: 26px; font-weight: 700; font-size: 13px; line-height: 18px; color: #151515; opacity: .55; }
#page-home .mstat p { margin: 12px 0 0; font-weight: 400; font-size: 16px; line-height: 24px; color: #151515; text-wrap: pretty; }
/* ---------- Mobil müşteri listesi (koyu bölge) ---------- */
#page-home .mclients-area { position: relative; color: #ffffff; overflow: hidden; padding: clamp(80px, 9vw, 150px) 7.002% clamp(90px, 10vw, 160px); }
#page-home .mclients-area .head { font-weight: 700; font-size: 17px; line-height: 17px; color: rgba(255, 255, 255, 0.5); }
#page-home .mclients-area .list { margin-top: clamp(30px, 3.6vw, 60px); display: flex; flex-direction: column; gap: clamp(6px, 0.8vw, 14px); }
#page-home .mclients-area .list 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-home .mclients-area .list a:nth-child(1) { color: rgba(255, 255, 255, 0.30); }
#page-home .mclients-area .list a:nth-child(2) { color: rgba(255, 255, 255, 0.40); }
#page-home .mclients-area .list a:nth-child(3) { color: rgba(255, 255, 255, 0.50); }
#page-home .mclients-area .list a:nth-child(4) { color: rgba(255, 255, 255, 0.60); }
#page-home .mclients-area .list a:nth-child(5) { color: rgba(255, 255, 255, 0.70); }
#page-home .mclients-area .list a:nth-child(6) { color: rgba(255, 255, 255, 0.80); }
#page-home .mclients-area .list a:hover { color: #ffffff; }
/* ---------- Masaüstü kanvas ---------- */
#page-home .stage { position: relative; width: 100%; overflow: hidden; }
#page-home .canvas { position: relative; width: 1728px; height: 9352px; transform-origin: 0 0; background: #ffffff; }
#page-home .canvas .inner { position: absolute; left: 0; top: -1941px; width: 1728px; height: 13067px; }
/* Portföy kartları */
#page-home .card { position: absolute; display: block; width: 540px; height: 540px; background: rgb(239, 239, 239); overflow: hidden; will-change: transform; transform-origin: 50% 50%; cursor: none; }
#page-home .card video, #page-home .card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#page-home .card .layer-bg { inset: auto; left: 0; top: 0; height: 100%; width: auto; max-width: none; object-fit: fill; will-change: transform; }
#page-home .card .layer-fg { inset: auto; left: 0; bottom: 0; height: 74%; width: auto; max-width: none; object-fit: fill; will-change: transform; }
#page-home .card.c1 { left: 121px; top: 1859px; width: 743px; height: 743px; }
#page-home .card.c1 video { transform-origin: 50% 0; transform: scale(1.13); }
#page-home .card.c2 { left: 1067px; top: 2443px; }
#page-home .card.c3 { left: 324px; top: 2970px; }
#page-home .card.c4 { left: 121px; top: 3763px; }
#page-home .card.c5 { left: 864px; top: 4054px; width: 743px; height: 743px; }
#page-home .card.c6 { left: 121px; top: 4834px; }
#page-home .card.c7 { left: 121px; top: 6643px; width: 743px; height: 743px; }
#page-home .card.c8 { left: 1067px; top: 7408px; }
#page-home .card.c9 { left: 121px; top: 8021px; }
#page-home .card.c10 { left: 1067px; top: 8533px; }
#page-home .card.c11 { left: 121px; top: 9116px; width: 743px; height: 743px; background: #000000; }
#page-home .card.c11 video { inset: auto; left: 50%; top: 0; height: 100%; width: auto; object-fit: fill; transform: translateX(-50%); }
/* Kart altı yazılar (kartla birlikte hareket eder) */
#page-home .follow { position: absolute; display: block; color: #000000; }
#page-home .follow .firm { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 700; font-size: 17px; line-height: 17px; color: inherit; }
#page-home .follow .t { position: absolute; left: 0; top: 27px; width: 570px; font-weight: 500; font-size: 42px; line-height: 46px; letter-spacing: -0.02em; color: inherit; }
#page-home .follow .tags { position: absolute; left: 0; top: 151px; display: flex; gap: 24px; white-space: nowrap; font-weight: 700; font-size: 17px; line-height: 17px; color: rgba(0, 0, 0, 0.55); }
#page-home .follow.f1 { left: 121px; top: 2722px; }
#page-home .follow.f2 { left: 1067px; top: 3043px; }
#page-home .follow.f3 { left: 324px; top: 3551px; }
#page-home .follow.f4 { left: 121px; top: 4344px; }
#page-home .follow.f5 { left: 864px; top: 4876px; }
#page-home .follow.f6 { left: 121px; top: 5415px; }
#page-home .follow.f7 { left: 121px; top: 7510px; }
#page-home .follow.f8 { left: 1067px; top: 7989px; }
#page-home .follow.f9 { left: 121px; top: 8612px; }
#page-home .follow.f10 { left: 1067px; top: 9114px; }
#page-home .follow.f11 { left: 121px; top: 9949px; color: #ffffff; }
#page-home .follow.f11:hover { color: #ffffff; }
#page-home .follow.f11 .tags { color: rgba(255, 255, 255, 0.55); }
/* İstatistik */
#page-home .bar { position: absolute; width: 275px; border-radius: 10px; transform-origin: 50% 100%; transform: scaleY(0); will-change: transform; }
#page-home .bar.b1 { left: 1389px; top: 5732px; height: 611px; background: linear-gradient(180deg, rgb(190, 255, 214) 0%, rgb(255, 255, 255) 100%); }
#page-home .bar.b0 { left: 1100px; top: 5923px; height: 420px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%), url(../../img/home/home-noise-new.webp) top left / 428.4px 428.4px repeat; }
#page-home .stat-t { position: absolute; left: 140px; top: 5767px; width: 488px; font-weight: 500; font-size: 56px; line-height: 56px; letter-spacing: -0.03em; color: #000000; }
#page-home .stat-t .hl { position: relative; display: inline-block; z-index: 0; }
#page-home .stat-t .m { position: absolute; background: rgba(216, 251, 79, 0.3); box-shadow: 0 0 0 0.981px rgb(216, 251, 79); z-index: -1; pointer-events: none; }
#page-home .stat-t .m1 { left: -14px; right: -12px; top: 3px; bottom: 4px; transform: rotate(-0.6deg); }
#page-home .stat-t .m2 { left: -10px; right: -16px; top: 6px; bottom: 1px; transform: rotate(0.9deg); }
#page-home .stat-t .m3 { left: -12px; right: -14px; top: 5px; bottom: 2px; transform: rotate(0deg); }
#page-home .stat-t svg { position: absolute; right: -18px; bottom: -14px; }
#page-home .count { position: absolute; left: 867px; top: 6121px; padding-right: 24px; font-weight: 500; font-size: 213.33px; line-height: 170.67px; letter-spacing: -0.02em; white-space: nowrap; background: linear-gradient(180deg, #e0e0e0 0%, #e6e6e6 42%, rgba(255, 255, 255, 0) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
#page-home .stat-label { position: absolute; left: 1148px; top: 6087px; z-index: 3; white-space: nowrap; font-weight: 400; font-size: 17px; line-height: 17px; color: rgba(0, 0, 0, 0.6); }
#page-home .trend { position: absolute; left: 1262px; top: 6080px; width: 53.536px; height: 29px; z-index: 3; border-radius: 50px; background: rgb(13, 225, 169); display: flex; align-items: center; justify-content: center; }
#page-home .trend img { width: 21.536px; height: 13px; }
#page-home .stat-txt { position: absolute; left: 140px; top: 6064px; width: 488px; }
#page-home .stat-txt .src { font-weight: 700; font-size: 17px; line-height: 20px; color: rgba(0, 0, 0, 0.55); }
#page-home .stat-txt p { margin: 20px 0 0; font-weight: 400; font-size: 17px; line-height: 24px; color: #000000; }
#page-home .stat-txt p.sub { line-height: 20px; color: rgba(0, 0, 0, 0.5); }
#page-home .darkzone { position: absolute; left: 0; top: 9690px; width: 1728px; height: 2850px; }
/* Müşteriler */
#page-home .clients-head { position: absolute; left: 154px; top: 10318px; font-weight: 700; font-size: 17px; line-height: 17px; color: rgba(255, 255, 255, 0.5); }
#page-home .clients { position: absolute; left: 154px; top: 10402px; display: flex; flex-direction: column; align-items: flex-start; gap: 39.1667px; }
#page-home .clients a { display: block; will-change: transform; font-weight: 400; font-size: 80px; line-height: 88px; letter-spacing: -0.03em; white-space: nowrap; color: #ffffff; opacity: 1; transition: opacity .5s ease; }
#page-home .clients a:nth-child(1) { opacity: .32; }
#page-home .clients a:nth-child(2) { opacity: .42; }
#page-home .clients a:nth-child(3) { opacity: .72; }
#page-home .clients a:nth-child(4) { opacity: .78; }
#page-home .clients a:nth-child(5) { opacity: .52; }
#page-home .clients a:nth-child(7) { opacity: .62; }
#page-home .clients a:hover { opacity: 1; color: #ffffff; }
/* Kanvas kapanışı (masaüstü footer) */