/* ========================================================= 📱 Oyun içi telefon — iPhone 17 tarzı gövde ========================================================= ⚠️ DEĞİŞMEZ KISIT: ekran içerik kutusu **284 × 584 px**. Telefon uygulamalarının (`backend/phoneapp/*`) ekranları bu ölçüye göre yazıldı. Aritmetik: dış ölçü 300 × 600 − border 8px × 2 = 284 × 584 (global `* { box-sizing: border-box }` — bkz. main.css) Bu yüzden **genişlik/yükseklik ve border kalınlığı JS'te kalıyor** (`app.js::_build` ve `setExpanded`); burada yalnızca *görünüm* tanımlı. Büyütmede `h = min(960, 94vh)` ve `w = h / 2`, yani **1:2 oranı** korunmalı; burada width/height yazmıyoruz ki o hesap bozulmasın. Geometri JS'te durduğu için bu dosya yüklenmezse telefon çirkin görünür ama **ölçüsü bozulmaz** — kasıtlı bir güvenlik payı. ========================================================= */ /* ── Gövde: titanyum kasa ────────────────────────────────── */ /* * Gövde **iki kez** basılıyor ve ikisi de bu tek katman listesinden * (`--chassis`) besleniyor: * * 1. `.iphone-frame`'in kendi `background`'ı — 8 px'lik border halkasında * görünür. Yedek katman: `mask-composite` desteklenmeyen tarayıcıda * telefon yine metal görünsün diye duruyor. * 2. `.iphone-bezel` — ekranın **üstünde** duran, ortası maskeyle delinmiş * overlay. Asıl görünen gövde bu (aşağıda). * * ⚠️ Katmanlar `border-box` başlangıç kutusuyla basılmalı. Kısayoldaki * `border-box` hem `background-origin`'i hem `background-clip`'i ayarlar, * böylece degrade halkayı boyar. `background-clip: padding-box` TEK BAŞINA * yazılırsa degrade border alanına hiç ulaşmaz ve saydam border sayfanın * arkasını gösterir. * * Katmanlar üstten alta: tuş kabartmaları → anten kesintileri → üst/alt ışık * → speküler parlama → ana titanyum. * Ölçüler yüzde: telefon 300×600'den 480×960'a büyürken orantı korunsun. */ #phone-modal .iphone-frame { position: relative; --chassis: /* Sağ kenar: güç tuşu */ linear-gradient(to right, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.32) 22%, rgba(90, 96, 108, 0.55) 48%, rgba(7, 9, 13, 0.82) 72%, rgba(255, 255, 255, 0.12) 100%) right 0 top 29% / 2.8% 12% no-repeat border-box, /* Sol kenar: aksiyon tuşu */ linear-gradient(to left, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.28) 25%, rgba(75, 81, 92, 0.52) 48%, rgba(8, 10, 14, 0.82) 74%, rgba(255, 255, 255, 0.10) 100%) left 0 top 18% / 2.8% 5.5% no-repeat border-box, /* Sol kenar: ses + */ linear-gradient(to left, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.30) 24%, rgba(79, 85, 96, 0.54) 48%, rgba(8, 10, 14, 0.84) 74%, rgba(255, 255, 255, 0.10) 100%) left 0 top 27% / 2.8% 8.5% no-repeat border-box, /* Sol kenar: ses − */ linear-gradient(to left, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.30) 24%, rgba(79, 85, 96, 0.54) 48%, rgba(8, 10, 14, 0.84) 74%, rgba(255, 255, 255, 0.10) 100%) left 0 top 38% / 2.8% 8.5% no-repeat border-box, /* Anten ek yeri — sol üst */ linear-gradient(to bottom, transparent 0 46%, rgba(13, 15, 20, 0.95) 46% 54%, transparent 54% 100%) left 0 top 8% / 2.8% 4% no-repeat border-box, /* Anten ek yeri — sağ alt */ linear-gradient(to bottom, transparent 0 46%, rgba(13, 15, 20, 0.95) 46% 54%, transparent 54% 100%) right 0 bottom 8% / 2.8% 4% no-repeat border-box, /* Üst kenar: soğuk ve parlak ışık */ linear-gradient(to bottom, rgba(238, 241, 247, 0.34) 0%, rgba(181, 188, 199, 0.16) 28%, rgba(86, 92, 104, 0.04) 68%, transparent 100%) top / 100% 8% no-repeat border-box, /* Alt kenar: koyu metal gölgesi */ linear-gradient(to top, rgba(0, 0, 0, 0.48) 0%, rgba(17, 20, 27, 0.30) 38%, rgba(92, 98, 108, 0.06) 72%, transparent 100%) bottom / 100% 10% no-repeat border-box, /* Sol üstten speküler parlama */ linear-gradient(112deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 13%, transparent 30%, transparent 72%, rgba(255, 255, 255, 0.045) 88%, rgba(255, 255, 255, 0.13) 100%) border-box, /* Ana titanyum gövde */ linear-gradient(145deg, #858b95 0%, #515762 8%, #292e37 23%, #171b22 47%, #232832 68%, #575e69 88%, #242932 100%) border-box; /* İç taban ekranın arkasında kalır — bu yüzden `--chassis`'e değil, yalnızca frame'in kendi background'ına giriyor. */ background: var(--chassis), linear-gradient(#0e1423, #0e1423) padding-box; border-color: transparent; /* kalınlık JS'te — yalnız rengi devralıyoruz */ border-radius: 50px; /* ⚠️ Dış gölge px olmak zorunda: `box-shadow` **yüzde kabul etmez**, bir tanesi yüzde olursa tüm bildirim düşer. */ box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 8px 22px rgba(0, 0, 0, 0.35); cursor: grab; } #phone-modal .iphone-frame:active { cursor: grabbing; } /* ── Kasa halkası: ekranın ÜSTÜNDE duran overlay ──────────── */ /* * Sorun: gövdenin tamamı 8 px'lik border halkasına sıkışıyordu (ekran padding * kutusunun tamamını kaplıyor, yani gövde boyası ancak orada görünebiliyor). * Tuşlar, anten kesintileri ve kamera pahı o şeritte okunmuyordu; parlak bir * duvar kağıdı yüklenince gövde tümüyle kayboluyor gibi duruyordu. Üstelik * telefon 300×600'den 480×960'a büyürken border 8 px **sabit** kaldığı için * halkanın oransal kalınlığı %2.7'den %1.7'ye düşüyordu. * * Çözüm: gövdeyi ekranın altından alıp **üstüne** koymak ve ortasını maskeyle * delmek. Halka artık hem border alanını hem ekranın kenarını kaplıyor. * * ⚠️ Üç şey birbirine bağlı: * • `inset: -8px` frame'in border kalınlığını **tekrar ediyor** (kalınlık * `app.js::_build`'de). Biri değişirse diğeri de değişmeli, yoksa halka * ya kasadan taşar ya da metal bir şerit açıkta kalır. * • `overflow` frame'de **visible** olmak zorunda (yine `_build`), yoksa * negatif `inset` kırpılır ve overlay hiç görünmez. Ekranın kendi * `overflow: hidden`'ı içeriği kırpmaya devam ediyor. * • `pointer-events: none` — halka ekranın kenarını örtüyor; olmasaydı o * şeritteki dokunuşları yerdi. Sürükleme de bu sayede frame'e ulaşıyor. * * Kalınlık **yüzde**: yüzdeli padding kuşatan bloğun *genişliğine* göre * hesaplandığı için dört kenarda da eşit ve telefon büyürken orantı sabit. * `border` px olurdu ve büyütmede yine incelirdi. * * ⚠️ Delik `mask-composite` ile açılıyor; desteklenmezse maske hiç uygulanmaz * ve overlay **tüm ekranı** örter. Bu yüzden varsayılan `display: none` ve * açılışı `@supports`'un içinde. Stil dosyası hiç yüklenmezse de zararsız: * boyasız, şeffaf, boş bir div kalır. */ #phone-modal .iphone-bezel { display: none; } @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { #phone-modal .iphone-bezel { display: block; position: absolute; inset: -8px; /* = frame border kalınlığı */ z-index: 2990; /* ekran 10, çentik/home 3000 */ pointer-events: none; border-radius: 50px; /* frame ile aynı dış kavis */ padding: var(--bezel-oran, 3.2%); /* halkanın ekrana binen payı */ background: var(--chassis); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } } /* ── Ekran ───────────────────────────────────────────────── */ /* * Dış kavis 50, border 8 → iç kavis **42** olmalı. Ayrışırsa köşelerde * ya metal bir tırnak ya da siyah bir boşluk kalır. * * ⚠️ `position` ve `z-index` burada da yazılı olmak zorunda. `_build` ikisini * inline yazıyor ama 14 uygulama ekranı `style.cssText = "..."` ile kuruyor * ve **cssText ataması inline stillerin tamamını siler**. Yalnızca inline'a * güvenilseydi o uygulamalarda ekran `static`e düşerdi; o zaman aşağıdaki * cam yansıması (`::before`, `inset: 0`) ekrana değil frame'e göre yerleşir. */ #phone-modal #phone-screen { position: relative; z-index: 10; border-radius: 42px; overflow: hidden; background-color: #0e1423; /* Cam hissi — duvar kağıdı inline `background-image` ile üstüne biner. */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), inset 0 0 24px rgba(0, 0, 0, 0.18); } /* Üst köşeden gelen ince cam yansıması. Tıklamayı yemesin diye `pointer-events: none`; uygulama içeriği z-index 10'da, bu 2999'da. */ #phone-modal #phone-screen::before { content: ""; position: absolute; inset: 0; z-index: 2999; pointer-events: none; border-radius: inherit; opacity: 0.55; background: linear-gradient( 115deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 12%, transparent 30% ); } /* ── Dynamic Island ──────────────────────────────────────── */ /* * Eski çentik 150 × 25 px sabitti ve ekranın üst kenarına yapışıktı; telefon * büyütülünce (480 × 960'a kadar) orantısı bozuluyordu. Yüzde ölçü her iki * boyda da doğru duruyor: 284'ün %30'u ≈ 85 px, 584'ün %4.6'sı ≈ 27 px. * * ⚠️ Genişlik büyürse uygulamaların durum çubuğunu örter — 150 px'ten * küçültmek kasıtlı, büyütme. */ #phone-modal .iphone-notch { top: 1.2%; left: 50%; transform: translateX(-50%); width: 30%; height: 4.6%; border-radius: 999px; background: linear-gradient(180deg, #050609 0%, #020305 55%, #090b10 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.055), 0 2px 8px rgba(0, 0, 0, 0.38); } #phone-modal .iphone-notch::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 45%); } /* ── Home indicator ──────────────────────────────────────── */ /* * Fiziksel tuş değil, iPhone'un alt çubuğu. Tıklanabilirliği koruyor * (`renderHome` ona bağlı) — görünümü çubuk, işlevi düğme. * * ⚠️ `z-index` şart. Çubuk DOM'da ekrandan **sonra** geliyor ama ekranın * `z-index: 10`'u bir yığılma bağlamı açıyor; `auto` bırakılırsa çubuk * ekranın **altında** kalır ve hiç görünmez. Çentik de aynı sebeple 3000'de. */ #phone-modal #phone-home, #phone-modal .iphone-home-btn { position: absolute; z-index: 3000; left: 50%; bottom: 1.35%; transform: translateX(-50%); width: 34%; height: 0.55%; min-height: 3px; max-height: 5px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 5px rgba(255, 255, 255, 0.10); cursor: pointer; } #phone-modal #phone-home::before, #phone-modal #phone-home::after { display: none; } #phone-modal #phone-home:hover { background: #ffffff; box-shadow: 0 0 7px rgba(167, 139, 250, 0.28); }