Görünüm, Şablonlar ve Özel CSS — RUTHH COD Form & Upsells

Form Builder → Form Designer (/app/form-builder) ekranında mağaza ön yüzündeki COD tetikleyici butonunu ve sipariş formunu; renkler, tipografi, metin yönü (AUTO, LTR, RTL), buton ikonları, animasyonlar ve özel CSS ile marka kimliğinize uygun hale getirmek.

• Form Builder → Form Designer (/app/form-builder) ekranının açık olması.

1. Form Designer (/app/form-builder) içinde Appearance & Templates (Form Designer görünüm ayarları) bölümünü açın.
2. Hazır görsel şablonlardan birini seçin veya renk/tipografi değerlerini tek tek özelleştirin:
   • Arka plan, kart yüzeyi, kenarlık ve birincil metin renkleri.
   • Yazı tipi boyutu, köşe yuvarlaklığı (border-radius) ve giriş alanı yoğunluğu.
3. Sağ taraftaki canlı önizleme alanında yaptığınız değişiklikleri masaüstü ve mobil görünümlerde anında inceleyin.

1. Text Direction (preferences.direction) ayarını bulun.
2. Desteklenen üç değerden birini seçin:
   • AUTO: Mağaza ön yüzünün aktif belge yönüne otomatik uyum sağlar.
   • LTR: Soldan sağa yerleşimi zorunlu kılar (Türkçe ve İngilizce mağazalar için standart).
   • RTL: Sağdan sola yerleşimi zorunlu kılar (Arapça ve İbranice gibi RTL mağazalar için; rtl bayrağıyla senkronize çalışır).

1. Submit Button / Buy Button Appearance kartını (ButtonAppearance) seçin.
2. Buton metnini (dinamik toplam tutar değişkenleri dahil), arka plan rengini, yazı rengini ve köşe yuvarlaklığını düzenleyin.
3. İsteğe bağlı olarak şu görsel zenginleştirmeleri seçin:
   • Button Icon (buttonIcon): Küratörlü vektör ikon kütüphanesinden bir ikon seçin.
   • Icon Position (iconPosition): İkonu metnin soluna (varsayılan) veya sağına (after) yerleştirin.
   • Icon Motion (iconMotion): İkonu sabit (still) bırakın veya hareket efekti ekleyin.
   • Button Animation (animation): Sunucu (button-style.ts) ve tarayıcı (cod-button-style.js) tarafından birebir doğrulanan 19 ortak animasyon efektinden birini seçin.

1. Form Designer içindeki Custom CSS panelini açın.
2. Form sınıflarını hedefleyen özel CSS kurallarınızı yazın.
3. SaveBar üzerinden Save butonuna tıklayın. Sunucu, özel CSS kodunu zararlı ifadelerden arındırarak cod_form.v2_snapshot içine kaydeder.

• Buton animasyonu mağazada oynamıyor: İşletim sisteminizde veya tarayıcınızda Hareketi Azalt (prefers-reduced-motion: reduce) erişilebilirlik ayarının açık olup olmadığını kontrol edin. Mağaza stil dosyası bu tercihe saygı duyar ve sürekli animasyonları durdurur.
• Eski genel etiket/ikon ayarları (hideLabels / showIcons): Genel preferences.hideLabels ve preferences.showIcons anahtarları kaldırılmış olup, yerini her alanın kendi içindeki hideLabel ve showIcon seçeneklerine bırakmıştır.

• Form Alanları, Doğrulama ve Kademeli İl/İlçe Seçimi
• Teşekkür Sayfası ve Genel Ayarlar
• Görünürlük ve Gösterim Kuralları