/** * assets/app-mode.css * * Android/TWA uygulama kabuğu ("App Mode"). Bu dosya sadece .app-modu * class'ı 'e eklendiğinde (bkz includes/header.php) YÜKLENİR — normal * web ziyaretçisine hiç gönderilmez (performans). Sayfa içeriği (fiyat kartı, * araçlar ızgarası vb.) aynen kalır — sadece etrafındaki çerçeve değişir. * * NOT: .app-ust / .app-alt / .app-urun-secici öğelerinin VARSAYILAN (herkes * için) gizlenmesi kasıtlı olarak style.css'te duruyor, burada DEĞİL — çünkü * bu dosya koşullu yüklendiği için, "varsayılan gizle" kuralı her zaman * yüklenen dosyada olmalı, yoksa app-mode.css yokken bu öğeler açıkta kalır. */ .app-modu .site-header .sh-top, .app-modu .site-header .main-nav .nav-links, .app-modu .rk-yol, .app-modu .site-footer, .app-modu #pf-ios-ekle { display: none !important; } /* Ana sayfadaki "Araçlar & Rehberler" ızgarası — alt navda zaten "Araçlar" sekmesi (/araclar) olduğu için app modunda tekrar oluyor. DİKKAT: /araclar sayfası da AYNI .ak-bolum sınıfını kullanıyor — sadece ana sayfadaki ".ak-anasayfa" ile işaretli olanı gizle, yoksa /araclar sayfasındaki asıl liste de kaybolur. */ .app-modu .ak-anasayfa { display: none !important; } /* Ana sayfadaki "Bugün ne yapmalıyım?" kartları — app modunda kaldırıldı. */ .app-modu .gunluk-aksiyon { display: none !important; } .app-modu .main-nav { justify-content: center; } /* .wrap'in kendi üst boşluğu app-ust'ı ekranın gerçek tepesinden ayırıp "yapışık değil, havada duruyor" gibi gösteriyordu — app modunda sıfırla, app-ust kendi iç dolgusuyla (safe-area dahil) boşluğu zaten veriyor. */ .app-modu main.wrap { padding-top: 0; } .app-modu .site-header { gap: 10px; background: var(--bg-card); margin: 0 -16px 16px; padding: 2px 16px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; } /* Ürün sekmeleri (chip şeridi) dar app genişliğinde sarıyor/kesiliyordu — app modunda bunun yerine ortalı, tek satırlık açılır seçici kullanılır. */ .app-modu .emtia-switch { display: none !important; } .app-modu .app-urun-secici { display: block; width: auto; max-width: 100%; } .app-modu .app-urun-secici select { width: auto; max-width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: var(--accent-deep, #a84d1e) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center; background-size: 13px; color: #fff; border: none; border-radius: 999px; padding: 10px 36px 10px 18px; font-size: 14px; font-weight: 700; font-family: inherit; text-align: center; text-align-last: center; } .app-urun-secici select:focus { outline: 2px solid rgba(255,255,255,.5); outline-offset: 1px; } /* Sabit üst çubuk — başlık ortada, zil sağ üstte küçük bir köşe ikonu */ .app-modu .app-ust { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: calc(14px + env(safe-area-inset-top, 0px)) 40px 12px; background: var(--bg-card); } .app-ust b { font-family: 'Fraunces', serif; font-size: 16.5px; font-weight: 600; text-align: center; } .app-ust .app-zil { position: absolute; right: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); text-decoration: none; color: var(--ink-soft); font-size: 18px; line-height: 1; } /* İçerik alt sekme çubuğuna çakışmasın */ .app-modu main.wrap { padding-bottom: 78px; } /* Sabit alt sekme çubuğu */ .app-modu .app-alt { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; background: var(--bg-card); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); } .app-alt a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--ink-muted); font-size: 10.5px; font-weight: 600; padding: 6px 2px; border-radius: 10px; } .app-alt a .app-ikon { font-size: 19px; line-height: 1; } .app-alt a.aktif { color: var(--accent); } /* AI sohbet balonu (includes/ai_asistan_widget.php) normalde sağ-alt köşede sabit — app modunda alt sekme çubuğunun üzerine biniyordu. İkisini çakışmasın diye çubuğun boyu kadar yukarı taşı. */ .app-modu #ai-fab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; } .app-modu #ai-panel { bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; } /* Gerçek telefonda app-modu her zaman dar bir ekranda görünür, bu yüzden üstteki -16px kenar-taşırma her zaman .wrap'in dar (16px) dolgusunu iptal eder ve başlık tam genişlik kaplar. Ama geniş bir pencerede (masaüstü tarayıcıda test edilirse) .wrap dolgusu daha büyük olduğu için üst çubuk pencereye yayılırken dropdown küçük kalıp ortada yüzüyor, "iki ayrı parça" gibi görünüyordu. 480px üstünde başlık bloğunu telefon genişliğiyle sınırlayıp ortala — pencere ne kadar geniş olursa olsun hep aynı (doğru) telefon görünümü çıksın. */ @media (min-width: 481px) { .app-modu .app-ust, .app-modu .site-header { max-width: 460px; margin: 0 auto 16px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .app-modu .app-ust { margin-bottom: 0; border-bottom: 1px solid var(--line); } }