/* ═══════════════════════════════════════════════════════════════════════ HAYAT MAKKAH · ALT BİLGİ (footer) — "KANAL" kurgusu ======================================================================= Sahibi: footer parçası. Her seçici `ft` ön ekiyle başlar. Seçilen alternatif: A4 · Kanal (23 Ağu 2026, Beyefendi). DÖRT BANT 1 mega marka — kurumsal kelime logosu, tek satır, şeridi tam doldurur 2 iletişim · bağlantı ızgarası · Mekke saati 3 ortak rafı — altı kurum, büyük ölçüde 4 yasal şerit + telif, altında sorumluluk notu ZEMİN sitenin token'larıdır (--z1/--mrk…): alt bilgi tema anahtarını izler, kendi rengini uydurmaz. TİPOGRAFİ tek: Manrope. `.srf` (Instrument Serif) KULLANILMAZ. MARKA YAZISI dizilmez, BASILIR: hero'daki kurumsal kelime logosunun tek satır kesimi maske olarak kullanılır. Genişlik %100, yükseklik aspect-ratio'dan gelir; ölçüm betiği gerekmez, üç dilde de şeride tam oturur. ═════════════════════════════════════════════════════════════════════ */ .ft{ --ft-logo-h:clamp(2.4rem,3.6vw,3.15rem); /* ortak logolarının taban ölçüsü */ background:var(--z1);color:var(--mrk); border-block-start:1px solid var(--cizgi); view-timeline-name:--ft-gorunum;view-timeline-axis:block; } /* ── BANT 1 · mega marka ──────────────────────────────────────────────── Marka yazısı METİN DEĞİL, kurumsal kelime logosunun kendisidir — hero'daki ile aynı varlık, yalnız TEK SATIR kesimi (yan yana). Dile göre dosya değişir; maske olduğu için rengi currentColor'dan alır ve tema anahtarını izler. ÖLÇÜ: genişlik %100, yükseklik aspect-ratio'dan türer. Böylece yazı şeridin iç genişliğine HER ekranda ve HER dilde tam oturur — ölçüm betiği gerekmez. Oranlar dosyalardan alındı (hero ile aynı değerler): EN 10.71 · TR 9.36 · AR 4.25. Genişlik sabitlenip yükseklik serbest bırakıldığı için Arapça devleşmez, İngilizce basıklaşmaz. */ .ft-b1{padding-block:clamp(3.4rem,6vw,5.4rem) clamp(1.6rem,2.6vw,2.2rem)} .ft-mega{ --ft-logo:url(../logo/marka-yazi-tek-en.svg);--ft-oran:10.71; display:block;margin:0;inline-size:100%;aspect-ratio:var(--ft-oran); background:currentColor;color:var(--mrk); -webkit-mask:var(--ft-logo) no-repeat center/contain; mask:var(--ft-logo) no-repeat center/contain; } html[lang="tr"] .ft-mega{--ft-logo:url(../logo/marka-yazi-tek-tr.svg);--ft-oran:9.36} html[lang="ar"] .ft-mega{--ft-logo:url(../logo/marka-yazi-tek-ar.svg);--ft-oran:4.25} @supports (animation-timeline:view()){ .ft-mega{animation:ft-yerine linear both;animation-timeline:--ft-gorunum; animation-range:entry 8% entry 72%} } @keyframes ft-yerine{from{opacity:0;transform:translateY(.08em)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.ft-mega{animation:none;opacity:1;transform:none}} /* ── BANT 2 · iletişim · bağlantılar · saat ─────────────────────────── */ .ft-b2{display:grid;gap:clamp(1.8rem,3.4vw,2.8rem);padding-block:clamp(2rem,3.6vw,3rem); border-block-start:1px solid var(--cizgi2);grid-template-columns:minmax(0,1fr)} @media(min-width:60rem){ .ft-b2{grid-template-columns:minmax(15rem,.95fr) minmax(0,2.2fr) minmax(11.5rem,.75fr)} } .ft-et{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--mrk3);margin-block-end:.9rem} html[lang="ar"] .ft-et{letter-spacing:0;text-transform:none} .ft-tel{display:block;font-size:clamp(1.45rem,2.5vw,1.95rem);font-weight:800;letter-spacing:-.03em; font-variant-numeric:tabular-nums;font-feature-settings:"tnum";unicode-bidi:isolate; min-block-size:2.75rem;transition:color var(--mikro) var(--egri)} .ft-tel:hover{color:var(--toprak-mtn)} .ft-tel bdi{unicode-bidi:isolate} .ft-ktk-l{display:grid;gap:.65rem;margin-block:.9rem 1.3rem;color:var(--mrk2);font-size:.92rem} .ft-ktk-l p{margin:0;display:flex;gap:.6rem;align-items:flex-start} .ft-ktk-l svg{flex:none;margin-block-start:.15rem;color:var(--mrk3)} .ft-ktk-l a{transition:color var(--mikro) var(--egri)} .ft-ktk-l a:hover{color:var(--mrk)} .ft-sos-sar{display:flex;gap:.45rem} .ft-sos{inline-size:2.75rem;block-size:2.75rem;display:grid;place-items:center;border-radius:50%; border:1px solid var(--cizgi);color:var(--mrk2); transition:background var(--mikro) var(--egri),color var(--mikro) var(--egri)} .ft-sos:hover{background:var(--mrk);color:var(--z1)} /* bağlantılar: dar ekranda akordeon, geniş ekranda üç sütun.
semantiktir ve betiksiz de açılıp kapanır; betik yalnız geniş ekranda hepsini açık tutar. */ .ft-ag{display:grid;gap:.2rem} @media(min-width:44rem){.ft-ag{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.7rem 1.4rem}} .ft-sut{border-block-end:1px solid var(--cizgi2)} .ft-sut summary{list-style:none;cursor:pointer;padding-block:.95rem;display:flex; align-items:center;justify-content:space-between;gap:1rem;min-block-size:2.75rem; font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mrk3); transition:color var(--mikro) var(--egri)} html[lang="ar"] .ft-sut summary{letter-spacing:0;text-transform:none} .ft-sut summary::-webkit-details-marker{display:none} .ft-sut summary:hover{color:var(--mrk)} .ft-sut summary svg{transform:rotate(180deg);transition:transform var(--gecis) var(--egri);color:var(--mrk3)} .ft-sut[open] summary svg{transform:none} .ft-sut ul{margin:0;padding:0 0 1rem;list-style:none;display:grid;gap:.55rem} .ft-sut a{color:var(--mrk2);font-size:.9rem;transition:color var(--mikro) var(--egri)} .ft-sut a:hover{color:var(--mrk)} @media(min-width:44rem){ .ft-sut{border-block-end:0} .ft-sut summary{pointer-events:none;padding-block:0 .85rem;min-block-size:0} .ft-sut summary svg{display:none} .ft-sut ul{padding-block-end:0} } /* saat sütunu */ .ft-saat{border-inline-start:1px solid var(--cizgi2);padding-inline-start:clamp(1rem,2vw,1.6rem)} @media(max-width:59.99rem){ .ft-saat{border-inline-start:0;padding-inline-start:0; border-block-start:1px solid var(--cizgi2);padding-block-start:1.4rem} } .ft-saat-d{display:block;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.04em; line-height:1;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";unicode-bidi:isolate} .ft-saat p{margin:.5rem 0 0;color:var(--mrk2);font-size:.85rem} .ft-ust-dgm{margin-block-start:1.4rem;display:inline-flex;align-items:center;gap:.6rem; border:1px solid var(--cizgi);background:transparent;color:inherit;border-radius:2rem; padding:.7rem 1.15rem;font-size:.82rem;font-weight:600;cursor:pointer;min-block-size:2.75rem; transition:background var(--mikro) var(--egri),color var(--mikro) var(--egri)} .ft-ust-dgm:hover{background:var(--mrk);color:var(--z1)} /* ── BANT 3 · ortak rafı ──────────────────────────────────────────────── Logolar alfa siluetidir; mask-image ile basılır, rengini currentColor'dan alır — açık/koyu tema için ayrı dosya gerekmez. --k OPTİK katsayıdır: kutu yüksekliği eşitlenince logolar eşit GÖRÜNMÜYOR; baskın mürekkep bandı %12 ile %62 arasında değişiyor (ölçüldü). Katsayı bu bandı ortak hizaya çeker. */ .ft-b3{padding-block:clamp(1.9rem,3.4vw,2.8rem);border-block-start:1px solid var(--cizgi2); display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,3.6vw,3.2rem)} /* Dar ekranda serbest sarma 2/3/1 gibi düzensiz satırlar üretiyordu; ızgara üç eşit satır verir ve logolar ortak bir sol kenardan başlar. */ @media(max-width:43.99rem){ .ft-b3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); justify-items:start;align-items:center;gap:clamp(1.6rem,6vw,2.2rem)} } .ft-logo{--h:var(--ft-logo-h);display:block; block-size:calc(var(--h) * var(--k));inline-size:calc(var(--h) * var(--k) * var(--o)); background:currentColor;color:var(--mrk2); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:contain;mask-size:contain; -webkit-mask-position:center;mask-position:center; transition:color var(--mikro) var(--egri)} .ft-logo:hover{color:var(--mrk)} /* ── BANT 4 · yasal ─────────────────────────────────────────────────── */ .ft-b4{padding-block:1.4rem;border-block-start:1px solid var(--cizgi); display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:baseline;justify-content:space-between} .ft-b4 nav{display:flex;flex-wrap:wrap;gap:.45rem 1.3rem} .ft-b4 a{color:var(--mrk2);font-size:.8rem;transition:color var(--mikro) var(--egri)} .ft-b4 a:hover{color:var(--mrk)} .ft-telif{color:var(--mrk3);font-size:.8rem;margin:0; font-variant-numeric:tabular-nums;unicode-bidi:isolate} .ft-not{color:var(--mrk3);font-size:.75rem;line-height:1.6;margin:0; padding-block:.2rem 2.4rem;max-inline-size:80ch} /* Çerez tercihleri — yasal şeritteki bağlantılarla aynı görünür; sayfa değil panel açar, bu yüzden