/* MODERA 9 — yalnızca krem tema + ana ekran telefonun tamamına oturur. */
#moderaThemePicker,.moderaThemePicker{display:none!important}

/* Telefon (≤700px): ana ekran çerçevesi ekran boyunu doldurur, düğmeler boşluğu eşit paylaşır ve ortada durur.
   --cream-fit-h henüz ölçülmemişken (sayfa ayrıştırılırken) yedek değer gövde iç boşluklarını (güvenli alanlar) da düşer;
   böylece ilk yerleşim sayfa yüklendikten sonraki yerleşimle aynıdır ve ekran %90 ölçekle açılıp %100'e sıçramaz.
   Küçük telefonda içerik sığmazsa çerçeve uzar ve mevcut ölçekleme (modera-home-layout.js) küçültür. */
@media (max-width:700px){
 html body #mainApp#mainApp.app:has(#home.active){
  display:flex!important;flex-direction:column!important;
  min-height:var(--cream-fit-h,calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px))!important;box-sizing:border-box!important;
 }
 html body #mainApp#mainApp.app:has(#home.active)>header.top{flex:0 0 auto!important}
 html body #mainApp#mainApp #home#home.screen.active{
  display:flex!important;flex-direction:column!important;flex:1 1 auto!important;
  min-height:0!important;height:auto!important;justify-content:center!important;align-items:stretch!important;
 }
 html body #mainApp#mainApp #home#home .mr-home{flex:1 1 auto!important;justify-content:center!important;min-height:0!important}
 html body #mainApp#mainApp #home#home .mr-featured{display:flex!important;flex:1 1 auto!important;max-height:104px!important}
 html body #mainApp#mainApp #home#home .mr-featured>.mr-tool{aspect-ratio:auto!important;height:auto!important;align-self:stretch!important}
 html body #mainApp#mainApp #home#home .mr-tools{flex:5 1 auto!important;grid-template-rows:repeat(5,minmax(58px,1fr))!important;grid-auto-rows:minmax(58px,1fr)!important;align-content:stretch!important}
 html body #mainApp#mainApp #home#home .mr-tools>.mr-tool{aspect-ratio:auto!important;height:auto!important;align-self:stretch!important}
 html body #mainApp#mainApp #home#home .moderaVersion{flex:0 0 auto!important;margin:8px 0 0!important;text-align:center}
}

/* Dar ekranda (≈360px) ikonların çevresinden referans resmin ince çizgileri görünüyordu:
   svg kutusu çizim oranına eşitlenir, taşan kısım kalmaz. */
html body #mainApp #home .mr-tool-icon>.mr-ico{height:auto!important;max-height:100%!important}

/* "KESİM OPTİMİZASYONU" ve "PROJELERİM" etiketleri kutunun kenarına değmesin (360–430px telefonlar). */
@container modera (max-width:430px){
 html body #mainApp #home [data-mr-target="cut"] .mr-tool-icon{width:6.2cqw!important;flex-basis:6.2cqw!important}
 html body #mainApp #home [data-mr-target="projects"] .mr-tool-icon{width:7.2cqw!important;flex-basis:7.2cqw!important}
}