/* ════════════════════════════════════════════════════════════════════ MODULOR UI — Ortak Arayüz Kuralları (Kademe 2, v1) ───────────────────────────────────────────────────────────────── AMAÇ: Odalar arası GEOMETRİ senkronunun tek kaynağı. Bu dosya oda stillerinden SONRA yüklenir ve senkron-kritik ölçüleri (üst menü sekmeleri, alt menü ikonları) sabitler. RENKLERE dokunmaz — her odanın kendi kimlik rengi (aksan) odada kalır. Yükleme: her sayfada öncesi → Kademe 2b (görsel test sonrası): odalardaki yinelenen kapi-btn / alt menü blokları silinir, renkler --oda-accent değişkenine taşınır. NOT: Elements alt menüsü (landing-footer) bilerek kapsam dışı — üst menü (kapi-btn) kuralları Elements'te de geçerlidir. ════════════════════════════════════════════════════════════════ */ /* ── ÜST MENÜ (kapi-btn) — 5 alan ortak geometri ─────────────────── */ .kapi-nav-inner{ width:100% !important; display:flex !important; } .kapi-btn{ flex:1 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:6px !important; padding:13px 6px 11px !important; background:none !important; border-top:none !important; border-left:none !important; border-right:none !important; cursor:pointer !important; font-family:'Cinzel',serif !important; font-size:11px !important; letter-spacing:.15em !important; text-transform:uppercase !important; border-bottom-width:2px !important; border-bottom-style:solid !important; transition:all .22s !important; position:relative !important; } /* renk/aksan odada kalır; sadece pasif alt çizgi şeffaflığı ortak */ .kapi-btn:not(.active){ border-bottom-color:transparent !important; } .kapi-btn-icon{ font-size:15px !important; line-height:1 !important; } /* ── ALT MENÜ İKONLARI — 32×16 (Gemoloji standardı) ──────────────── */ /* Sofa (.bnav-icon) · Harita (.nav-icon-wrap) · Zemin (.z-nb-icon) · Gemoloji (.gem-bnav-btn svg). Elements landing-footer hariç. */ .bnav-icon, .nav-icon-wrap, .z-nb-icon{ width:32px !important; height:16px !important; display:flex !important; align-items:center !important; justify-content:center !important; } .bnav-icon svg, .nav-icon-wrap svg, .z-nb-icon svg, .gem-bnav-btn svg{ width:32px !important; height:16px !important; } /* ── ALT SEKME ŞERİDİ (bsn-tab / bottom-sub-nav) — Gemoloji standardı ── */ /* Zemin (8px/28×14), Elements (13px/42×21), Gemoloji (10px/40×20) farklıydı; Gemoloji ölçüleri ortak standart. Renkler odada kalır. */ .bsn-tab{ flex:1 !important; background:none !important; border-left:none !important; border-right:none !important; border-bottom:none !important; cursor:pointer !important; font-family:'Cinzel',serif !important; font-size:10px !important; letter-spacing:.13em !important; text-transform:uppercase !important; padding:10px 4px 12px !important; border-top-width:2px !important; border-top-style:solid !important; transition:all .2s !important; white-space:nowrap !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:7px !important; } .bsn-tab:not(.active){ border-top-color:transparent !important; } .bsn-tab svg{ width:40px !important; height:20px !important; opacity:.7 !important; flex-shrink:0 !important; } .bsn-tab.active svg{ opacity:1 !important; } /* ── ODA AKSAN DEĞİŞKENLERİ (Kademe 2b — AKTİF) ──────────────────── */ /* Her oda kendi 'inde tanımlar (modulor-ui.css linkinden hemen sonra): --oda-pasif pasif sekme rengi (koyu) --oda-aksan aktif sekme + üst çizgi rengi (koyu) --oda-cizgi aktif alt çizgi rengi (koyu) --oda-pasif-acik / --oda-aksan-acik / --oda-cizgi-acik (açık tema) --oda-hover / --oda-hover-acik (opsiyonel; yoksa pasif kullanılır) Renk kuralları BURADA yaşar — odalardaki kopyalar silindi. */ .kapi-btn{ color:var(--oda-pasif, currentColor) !important; } .kapi-btn::after{ content:'' !important; position:absolute !important; top:0 !important; left:15% !important; right:15% !important; height:1px !important; background:var(--oda-aksan, currentColor) !important; transform:scaleX(0) !important; transition:transform .3s cubic-bezier(.34,1.56,.64,1) !important; opacity:.6 !important; } .kapi-btn.active{ color:var(--oda-aksan, currentColor) !important; border-bottom-color:var(--oda-cizgi, currentColor) !important; } .kapi-btn.active::after{ transform:scaleX(1) !important; } .kapi-btn:hover:not(.active){ color:var(--oda-hover, var(--oda-pasif, currentColor)) !important; } .kapi-btn-icon{ opacity:.7 !important; } .kapi-btn.active .kapi-btn-icon{ opacity:1 !important; } html.light .kapi-btn{ color:var(--oda-pasif-acik, var(--oda-pasif, currentColor)) !important; } html.light .kapi-btn.active{ color:var(--oda-aksan-acik, var(--oda-aksan, currentColor)) !important; border-bottom-color:var(--oda-cizgi-acik, var(--oda-cizgi, currentColor)) !important; } html.light .kapi-btn::after{ background:var(--oda-aksan-acik, var(--oda-aksan, currentColor)) !important; } html.light .kapi-btn:hover:not(.active){ color:var(--oda-hover-acik, var(--oda-pasif-acik, currentColor)) !important; }