/* === SECTION 1 · HERO === KUTU · scope: .hm-hero */ .hm-hero{padding:0 !important;min-height:0} /* Kutu = rail'in birebir kardeşi: AYNI radius, border, zemin, cam. GÖLGE YOK. İÇERİK dışında hiçbir görsel değer farklı değil — tek yüzey dili. */ /* TABAN · ÇERÇEVE — rail ile aynı --edge çizgisinde cam panel. */ .hm-hero .kutu{position:relative;overflow:hidden;isolation:isolate; margin:calc(var(--rail-h) + var(--bo-6)) var(--edge) 0; height:calc(100svh - var(--rail-h) - var(--bo-6) - var(--bo-5));min-height:520px; display:flex;align-items:flex-end; /* yazı SOL ALTA */ border-radius:var(--rail-r)} /* ── STİL · TAM GENİŞLİK ──────────────────────────────────────────── Kap kalkar: yuvarlaklık, kenar ve cam yüzey sıfırlanır; şerit ekranın tepesinden başlar, rail üstünde yüzer. .t52-cam işaretlemede kalır ama görsel etkisi burada nötrlenir → tek dosya, iki stil. Yükseklik 100svh: mobil tarayıcı çubuğu açılıp kapanınca zıplamaz. */ html:not([data-stil-kap="cerceve"]) .hm-hero .kutu{ margin:0;height:100svh;min-height:560px;border-radius:0; background:none;border-color:transparent; -webkit-backdrop-filter:none;backdrop-filter:none} html:not([data-stil-kap="cerceve"]) .hm-hero .kutu::after{display:none} /* ZEMİN DERİNLİĞİ — özellikle light modda düz beyaz sıradan duruyordu. İki geniş radyal gradyan: sağ üstte çelik mavisi, sol altta gümüş. Çok düşük opaklık. */ .hm-hero .kutu::before{content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none;z-index:0; background: radial-gradient(1100px circle at 76% 14%, color-mix(in srgb,var(--aksan-2) 42%,transparent), transparent 64%), radial-gradient(820px circle at 8% 92%, color-mix(in srgb,var(--gold) 26%,transparent), transparent 58%), linear-gradient(158deg, rgba(255,255,255,.55) 0%, transparent 46%)} html.dark .hm-hero .kutu::before{ background: radial-gradient(1100px circle at 76% 14%, color-mix(in srgb,var(--aksan-2) 22%,transparent), transparent 64%), radial-gradient(820px circle at 8% 92%, color-mix(in srgb,var(--gold) 10%,transparent), transparent 58%)} /* portre: sağa yaslı, kutunun TABANINA sıfır, oran korunur */ .hm-hero .ph{position:absolute;right:0;bottom:0;height:86%;width:auto;max-width:34%; object-fit:contain;object-position:right bottom;z-index:0;pointer-events:none; will-change:transform;transform-origin:center bottom} /* kutu içi padding = rail içi padding (24px) → logo ile başlık aynı dikey çizgide */ /* HİZA · rail logosu --edge(56) + --bo-5(24) + saydam kenarlık(1px, yer kaplar) = 81px çizgisinde. Hero'nun kendi kabı kalktığı için bu pay elle eklenir → logo ve başlık aynı dikey çizgide. */ .hm-hero .wrap{position:relative;z-index:2;width:100%;padding:0 var(--bo-5) var(--bo-7); display:flex;align-items:flex-end;justify-content:space-between;gap:var(--bo-6)} /* Tam genişlikte kap yok → rail logosunun 81px çizgisini tutturmak için --edge(56) + --bo-5(24) payı verilir; kalan 1px'i saydam kenarlık tamamlar. */ html:not([data-stil-kap="cerceve"]) .hm-hero .wrap{padding:0 calc(var(--edge) + var(--bo-5)) var(--bo-7)} .hm-hero .txt{max-width:min(62%,900px);flex:1 1 auto;min-width:0} /* sol alt blok — hareketsiz, normal akışta */ .hm-hero h1{font-size:var(--bas-xl);line-height:1.06;letter-spacing:-.028em;text-wrap:balance;font-weight:var(--bas-w); margin:var(--bo-3) 0 var(--bo-4);color:var(--fg)} /* AKAN GRADYAN METİN — italik yok, iki kelime de aynı renk akışında. Gümüş ↔ çelik mavisi arasında yavaşça kayar. background-clip:text ile, layout'a dokunmaz. */ /* .akan gradyanı _common.blade.php'de — burada tekrarlanmaz */ /* Tavan 6,3cqw: sağda sohbet paneli açılıp hero daralınca «güzelleştiriyoruz.» tek kelime olarak sütuna (hero'nun %56'sı) sığsın — ölçüldü, yazı ≈ 7,2 × punto. */ @media(min-width:901px){ .hm-hero h1{font-size:calc(var(--bas-xl) * 1.15); font-size:min(calc(var(--bas-xl) * 1.15), 6.3cqw)} } .hm-hero p{font-size:var(--yazi-l);color:var(--muted);max-width:44ch;margin:0 0 var(--bo-5)} .hm-hero .cta-row{display:grid;grid-template-columns:repeat(2,1fr);width:fit-content;gap:var(--bo-3)} /* HEALTH TÜRKİYE · rozet şeridinin altında, yanında «Sağlık Turizmi Yetkili Klinik» yazısı; yalnız masaüstünde. 10.10: 72 → 52px küçültüldü. Hover'da hafif büyür (rozetlerle aynı dil, yerleşime dokunmaz). */ /* 22.10 · Health Türkiye artık rozet şeridinin bir öğesi (kurum isteği: «logoları ayırmamış olursun, texti de beraberinde»): logo + «Sağlık Turizmi Yetkili Klinik» yan yana; koyu temada kendi koyu dosyası (ters çevirme filtresi uygulanmaz). */ .hm-hero .rozet .rz-ht{gap:10px} .hm-hero .rozet .rz-ht .ht-logo{display:block;line-height:0} .hm-hero .rozet .rz-ht .ht-yazi{font-size:10.5px;line-height:1.3;max-width:96px;white-space:normal;font-weight:500; color:var(--muted);padding:0;border:0} html.dark .hm-hero .rozet .rz-ht img{filter:none} .hm-hero .ht-satir{display:flex;align-items:center;gap:16px;margin:var(--bo-4) 0 0; width:fit-content;padding:5px 20px 5px 14px;border-radius:14px; background:transparent;border:1px solid var(--line)} .hm-hero .ht-yazi{font-size:8px;white-space:nowrap;font-weight:500;line-height:1.35;color:var(--muted); padding-left:16px;border-left:1px solid color-mix(in srgb, currentColor 30%, transparent)} .hm-hero .ht-logo{display:inline-block;line-height:0;flex:none} .hm-hero .ht-logo img{display:block;height:26px;width:auto; transition:transform .28s cubic-bezier(.2,.7,.2,1);transform-origin:0 50%} .hm-hero .ht-logo:hover img{transform:scale(1.08)} .hm-hero .ht-logo:focus-visible{outline:2px solid var(--aksan-2);outline-offset:4px;border-radius:6px} /* iki dosya: açıkta orijinal gri yazı, koyuda yazı açık gri (#d4d6da); kırmızılar aynı. Filtreyle ters çevirmek kırmızıyı bozuyordu, bu yüzden ayrı dosya. Beyaz zemin kaldırıldı, kalpteki beyaz yıldız korundu. */ .hm-hero .ht-logo .ht-koyu{display:none} html.dark .hm-hero .ht-logo .ht-acik{display:none} html.dark .hm-hero .ht-logo .ht-koyu{display:block} /* → artık site geneli --altbaslik-px (app.blade.php) bunu karşılıyor; ayrı kural kaldırıldı */ @media(max-width:900px){ .hm-hero .txt > .ht-satir{order:4;align-self:center;max-width:100%;margin:var(--bo-3) 0 0; gap:12px;padding:5px 20px 5px 14px} .hm-hero .ht-logo img{height:20px} .hm-hero .ht-yazi{font-size:8px;white-space:normal;text-align:left;padding-left:12px} } /* ── İSİM FİLİGRANI ───────────────────────────────────────────────── Kaynak (v4) içi boş KONTUR kullanıyordu. Burada DOLGULU + BULANIK'a çevrildi: kontur keskin kenarlıdır, göz onu bir «yazı» olarak okumaya çalışır ve dikkat çeker. Bulanık dolgu ise yazıdan çok bir DOKU/gölge gibi okunur — arkada kalır, öne çıkmaz. Opaklık %6 → %4.5. Konum: %13 → %5 (yukarı) → %12. Kontur bulanık dolguya çevrildikten sonra yazıya yakın durması sorun olmuyor; %5 fazla yukarıda kalıyordu. */ /* cqw: punto EKRANA değil hero'nun kendi genişliğine bağlı — sağda sohbet paneli açılıp sayfa daralınca yazı yine sığar. vw satırı eski tarayıcı yedeği. */ .hm-hero{container-type:inline-size} .hm-hero .isim{position:absolute;z-index:0;pointer-events:none;user-select:none; top:12%;left:0;right:0;width:auto;text-align:center; font-size:min(12.4vw, 228px);font-size:min(12.4cqw, 228px);font-weight:800; letter-spacing:-.055em;line-height:.85;white-space:nowrap; color:rgba(255,255,255,.045); filter:blur(8px); will-change:transform} html:not(.dark) .hm-hero .isim{color:rgba(0,0,0,.05)} /* MOBİL · kutu sütuna dönüyor (yazı üstte, portre altta) ve yazının üstünde hiç boşluk kalmıyor — filigran doğrudan H1'in arkasına düşüyordu, başlık okunmuyordu. Burada PORTRENİN arkasına indirilir: orada metin yok. Portre DOM'da sonra geldiği için filigranın üstüne boyanır, örter. Blur küçük ekranda orantılı olarak azaltılır — sabit 8px orada lekeye döner. */ /* 820 → 900 (18.09.2026): dar-ekran kırılma noktası site genelinde TEK (900). 821–900 bandında (iPad Pro 11 dikey = 834px) üst çubuk mobil, hero masaüstü düzenindeydi: portre %34 genişlikte küçücük, üstte ~600px boşluk. */ @media(max-width:900px){ .hm-hero .isim{top:auto;bottom:14%;left:0;right:0;width:auto;text-align:center; white-space:normal;font-size:22vw;font-size:22cqw;line-height:.86;filter:blur(6px)} } @media(max-width:420px){ .hm-hero .isim{bottom:16%;font-size:22vw;font-size:22cqw;filter:blur(5px)} } /* ── ROZET ŞERİDİ · sol alt, CTA'ların altında ── Tek renkli: --fg üzerinden currentColor, düşük opaklık. Hover'da yalnız opaklık artar — ölçü sabit. Logolar oranı korunarak 20px yüksekliğe oturur. */ /* ═══ ROZET KAPSÜLÜ ═══════════════════════════════════════════════════ Referanstaki düzen: iki ucu tam yuvarlatılmış TEK açık kapsül, içinde ince dikey ayraçlarla bölünmüş rozetler. KAPSÜL HER İKİ TEMADA DA AÇIK. Bu bir tutarsızlık değil, zorunluluk: rozetlerin mürekkebi koyu (ISAPS, ASPS ve TPRECD'nin yazıları siyah/mor). Koyu bir kapsülde bu üçü okunmaz hâle gelirdi. Referans da açık kapsül gösteriyor. Koyu temada kapsül bir tık kısılıyor ki sayfada parlamasın. */ /* ÜST BOŞLUK · İPUCUNA GÖRE ÖLÇÜLDÜ (02.09.2026). İpucu şeridin ÜSTÜNE açılıyor (bottom:100% + 10px). Boşluk 32px'ti, ipucu ise 35px + 10px açıklık = 45px yer istiyordu: kutu «Randevu Talebi» düğmesinin üstüne 13px biniyordu (ölçüldü). 56px = 35 (tek satırlık ipucu) + 10 (açıklık) + 11 (nefes payı). ⚠️ İpucu metni uzayıp iki satıra çıkarsa bu sayı YETMEZ. Onun için yukarıdaki max-width genişletildi; ikisi birlikte çalışıyor, biri değişirse öteki gözden geçirilmeli. */ .hm-hero .rozet-kapsul{margin:56px 0 0; max-width:100%; background:transparent; border:0; overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none} .hm-hero .rozet-kapsul::-webkit-scrollbar{display:none} /* Sol dolgu 0: plaka yokken şeridin ilk rozeti başlık ve butonlarla AYNI dikey çizgiden başlamalı; 20px'lik iç pay onu sağa kaydırıyordu. */ .hm-hero .rozet{list-style:none;margin:0;padding:8px 20px 8px 0; display:flex;align-items:center;gap:0;width:max-content;min-width:100%} .hm-hero .rozet li{position:relative;display:flex;align-items:center;justify-content:center; padding:0 clamp(10px,1.1vw,18px);flex:none} .hm-hero .rozet li:first-child{padding-left:0} /* AYRAÇ · referanstaki ince dikey çizgi. li'ler arasında, uçlarda değil. */ /* Ayraç artık plakanın değil ZEMİNİN üstünde — temaya göre renk alır. */ /* AYRAÇ · ARTIK TAM BOY DEĞİL (02.09.2026 · «her ikonun üstünde düz çizgi var»). Ayraç li'nin border-left'iydi, yani şeridin tepesinden dibine kadar iniyordu. Rozet boyları eşitken bu görünmüyordu; boylar kendi oranlarına geçince (35–48px) kısa rozetlerde ayraç yukarı ve aşağı taşmaya başladı ve gözde «ikonun üstünde çizgi» olarak okundu. Çizgi artık ortalanmış, sabit boylu bir öğe: en uzun rozetten kısa olduğu için hiçbir rozetin üstüne çıkmıyor. */ .hm-hero .rozet li + li{position:relative} .hm-hero .rozet li + li::before{content:"";position:absolute; left:0;top:50%;transform:translateY(-50%); width:1px;height:22px;background:var(--line)} /* TEK YÜKSEKLİK · göreli boyutlar görselin içine gömülü (ortak 240px bant), o yüzden burada rozet başına ayrı ölçü YOK. Bir rozet büyük/küçük duruyorsa düzeltme yeri CSS değil, kaynak kırpımıdır. 38px NEDEN? Şerit hero'nun sol metin sütununda duruyor (max 56%, 1440'ta ~716px). 42px'te içerik 815px çıkıyordu ve kapsül MASAÜSTÜNDE de kayıyordu — kaydırma çubuğu gizli olduğu için ziyaretçi kalan rozetleri hiç görmezdi. 38px + daralan iç boşluklarla içerik ~690px: 1440'ta yedi rozet tek bakışta, kaydırmasız. Kaydırma yalnız dar ekranda devreye giriyor (asıl istenen o). */ /* BANT · şeridin tek referans yüksekliği. Rozetlerin boyu bu bandın kendi oranıyla çarpımından geliyor (--o, işaretlemede yazılı). Eskiden HEPSİNE aynı yükseklik veriliyordu; nihai şeritte boylar eşit olmadığı için WhatClinic'in dikey kalkanı ASPS'nin yatay kilidinin yanında devleşiyordu. Artık kaynak şeritteki oran korunuyor. 44 → 48px: yoğun metinli rozetler (TPRECD, ASPS) 44'te okunmuyordu. */ /* Bant 48 → 42px. Ölçüldü: altı rozet 48px bantta 770px yer kaplıyor, kapsül 716px — 54px taşıyor ve TPRECD kesiliyordu. 42px'te sığıyor. (Rozet sayısı 7'den 6'ya indi ama boylar oranlandığı için toplam genişlik yine de arttı; sayı azaldı diye yer açıldığını varsaymak yanlış olurdu, ölçüldü.) */ .hm-hero .rozet{--rozet-bant:clamp(42px, 3.7vw, 52px)} .hm-hero .rozet img{display:block;width:auto;max-width:none; height:calc(var(--rozet-bant) * var(--o, 1)); /* 03.09.2026 · «filter» geçişten çıkarıldı: filtre artık hover'da değişmiyor (yukarıdaki gri tonlama notu), duran bir özelliği animasyon listesinde tutmak her karede boşuna iş çıkarıyordu. */ transition:opacity .22s ease, transform .28s cubic-bezier(.2,.7,.2,1); transform-origin:50% 50%} /* 22.10 · 1.18 büyüyünce geniş rozet (ISAPS ~185px) her yana ~17px taşıyor, ayraç ise 10–18px uzakta: rozet çizginin üstüne biniyordu. 1.06 → en geniş rozette yana ~6px, en dar iç boşluk 10px: hiçbir genişlikte ayraca değmez. */ .hm-hero .rozet li:hover img{transform:scale(1.06)} .hm-hero .rozet li:first-child img{transform-origin:50% 50%} /* ═══ ROZET RENGİNİN GEÇMİŞİ · ÜÇ AŞAMA ═══════════════════════════════ ⚠️ Aşağıdaki 31.08 ve 02.09 notları ARTIK YÜRÜRLÜKTE DEĞİL; geçmiş kaydı olarak duruyorlar. Yürürlükteki kural bu bloğun ALTINDA («GRAYSCALE KALDIRILDI · 03.09.2026»). Sırayla okunmalı. ── 1. AŞAMA · 31.08.2026 23:18 — YÜRÜRLÜKTE DEĞİL ────────────────── «Dinlenmede tek renk, imleç üstünde renkli.» Gerekçe: yedi kurumun yedi marka rengi hero'nun altında gökkuşağı yapıyordu. Rozetler grayscale(1) opacity(.55) ile basılıyor, hover'da 0,32 sn'de renk açılıyordu. ── 2. AŞAMA · 02.09.2026 — YÜRÜRLÜKTE DEĞİL ──────────────────────── «Ne darkta ne lightta düzgün gözükmüyorlar, okunaklılık çok az.» Üç sebep bulundu; opaklık ve zemin O GÜN düzeltildi (aşağıda 2 ve 3), ama gri tonlama BIRAKILDI — asıl kusur oydu, 03.09'da kalktı. 1) OPAKLIK. Rozetler %55'te basılıyordu. «Tek renk» kararı bir DOYGUNLUK kararıydı, bir SOLDURMA kararı değil — ikisi karıştırılmış. Tam opak yapıldı: opacity kalktı, grayscale o gün kaldı. 2) ZEMİN. Kesimler kaynak şeridin açık gri kapsül zeminini taşıyordu; ekranda rozetin çevresinde kutu olarak görünüyordu (açık temada açık, koyu temada koyu dikdörtgen). Zemin artık gerçekten saydam: kapsül rengi ölçülüp (#f2f2f2) ön çarpım geri alınarak ayrıldı. 3) ÇÖZÜNÜRLÜK. 120px'e dışa aktarılmıştı, ekranda 48px basılıyor. Artık 200px — palet sıkıştırmasıyla toplam 38 KB (öncesi 68 KB). */ /* Hover'da artık renk «açılmıyor», çünkü renk zaten açık. Üstüne gelmenin karşılığı ipucu balonu (aşağıda) ve bağlantılı rozetteki opaklık yükselmesi. Ölçü, kenar, konum sabit — layout zıplamıyor. */ /* ═══ İPUCU ═══════════════════════════════════════════════════════════ Fade ile açılır, fade ile kapanır; kayma/zıplama yok. Konumu JS yazar. */ .hm-hero .rozet-ipucu{position:absolute;z-index:3; left:0;bottom:calc(100% + 10px); transform:translateX(-50%); /* Altı ipucundan beşi tek satıra sığıyor; yalnız TPRECD («Türk Plastik ve Estetik Cerrahi Derneği») ikiye düşüp kutuyu 35 → 69px'e çıkarıyordu. Önce 260 → 330px denendi, YETMEDİ (ölçüldü: yine 69px). Metni kısaltmak düzeni içeriğe tercih etmek olurdu; onun yerine GENİŞ EKRANDA sarma tamamen kapatıldı (aşağıdaki 900px kuralı). Burada dar ekranın kuralı duruyor: orada sarsın, çünkü tek satır ekrandan taşardı. */ max-width:88vw;white-space:normal; padding:8px 12px;border-radius:10px; background:var(--surface);border:1px solid var(--line); color:var(--fg);font-size:12.5px;line-height:1.35;text-align:center; pointer-events:none; opacity:0;visibility:hidden; transition:opacity .22s ease, visibility 0s linear .22s} /* GENİŞ EKRAN · ipucu tek satır. Kutu yüksekliği böylece HER rozette 35px; yukarıdaki 56px'lik boşluk hesabı bu sabite dayanıyor. Konumu betik yazıyor ve şeridin içine kelepçeliyor, taşma olmuyor. */ @media(min-width:900px){ .hm-hero .rozet-ipucu{white-space:nowrap;max-width:none} } .hm-hero .rozet-ipucu.acik{opacity:1;visibility:visible; transition:opacity .22s ease .10s, visibility 0s} @media(prefers-reduced-motion:reduce){ .hm-hero .rozet-ipucu{transition:none} .hm-hero .rozet img{transition:none} } /* ═══ KOYU TEMA · AKILLI TERS ÇEVİRME ═══════════════════════════════ Plaka kalkınca (31.08.2026 22:00) koyu temada üç rozet okunmaz oldu: ISAPS'ın gri yazısı, ASPS'ın siyah alt satırı ve TPRECD'nin mor metni neredeyse zeminle aynı tona düşüyordu. ÜÇ SEÇENEK DENENDİ VE KOYU ZEMİNDE YAN YANA BAKILDI A · dokunma → üç rozet okunmuyor. Elendi. B · rozet başına «koyu» dosya üret → okunuyor ama WhatClinic kalkanının içi ve EPCD'nin siyah göbeği soluyor; ayrıca 7 dosya daha (+66 KB). C · invert(1) + hue-rotate(180deg) → koyu mürekkep açılıyor, açık yüzeyler koyulaşıp zemine karışıyor, RENKLER yerinde kalıyor (Google'ın dört rengi, WhatClinic'in altın kalkanı, EPCD'nin altın halkası). C seçildi: en okunaklısı ve tek satır — ek dosya, ek istek yok. Not: bu bir marka rengi müdahalesi. Alternatifi rozetin hiç okunmaması olduğu için kabul edildi; AÇIK temada filtre YOK, orijinaller aynen basılır. */ /* Koyu temada invert: koyu mürekkep açığa döner, SAYDAM yer saydam kalır (invert alfaya dokunmaz) — kutu oluşmaz. Burada da opaklık yok. */ html.dark .hm-hero .rozet img{filter:invert(1) hue-rotate(180deg)} /* Bağlantılı rozet: hover'da yalnız opaklık. Ölçü, kenar, konum sabit. */ .hm-hero .rozet a{display:flex;align-items:center;opacity:.92; transition:opacity .22s ease} .hm-hero .rozet a:hover{opacity:1} .hm-hero .rozet a:focus-visible{outline:2px solid var(--aksan-2);outline-offset:4px;border-radius:6px} /* Bağlantısı olmayan rozet imleci değiştirmez — tıklanabilir sanılmasın. */ .hm-hero .rozet > li > img{cursor:default} /* ── KAYDIRMA İŞARETİ ────────────────────────────────────────────── Şerit her genişlikte sığmaz; sığmadığı yerde kaydırma çubuğu GİZLİ olduğu için ziyaretçi kalan rozetleri hiç görmez (ölçüldü: 1366px'te yedincinin yarısı dışarıda kalıyordu ve hiçbir işaret yoktu). Maske/solma kullanılmadı — kapsülün yuvarlak ucunu da silerdi. Onun yerine sağ uca kapsül renginde küçük bir ok konuyor; yalnız GERÇEKTEN kayabiliyorsa ve sona gelinmemişse görünür. Sınıfı JS koyar (aşağıda). */ .hm-hero .rozet-sar{position:relative;max-width:100%} .hm-hero .rozet-ok{position:absolute;top:0;bottom:0;right:1px;width:42px; display:none;align-items:center;justify-content:flex-end; padding-right:12px;pointer-events:none; background:linear-gradient(90deg, transparent 0%, var(--bg) 62%); color:var(--muted);font-size:13px} .hm-hero .rozet-sar.kayar .rozet-ok{display:flex} .hm-hero .rozet-sar.sonda .rozet-ok{display:none} /* 22.10 · GENİŞ EKRAN · KÜÇÜLME YOK, GEREKİRSE İKİ SATIR (kurum isteği: «yükseklikler anormal»). Eskiden yedi rozet tek satıra sığsın diye hepsi orantılı küçülüyordu: 1440'ta (sohbet paneli açıkken sütun ~584px) rozetler 20–27px'e iniyordu. Artık her rozet kendi boyunda (--o: yazılı logolar ~0,6, yuvarlak rozetler ~0,95 — görsel ağırlık dengesi) durur; sığmayan alt satıra geçer. Ayraç her öğenin solunda; satır başındaki ayraç ul'un eksi sol payıyla kapsülün dışına itilip kırpılır (her satırda). Kapsülün 8px sol iç payı (eksi kenarla dengeli) ilk rozetin ortadan büyümesine yer açar. Büyüme ORTADAN: önceden kenar 0 50% idi, rozet yalnız sağa büyüyüp sağdaki ayraca yaklaşıyordu. */ @media(min-width:901px){ .hm-hero .rozet-kapsul{overflow:hidden;padding-left:8px;margin-left:-8px;container-type:inline-size} .hm-hero .rozet{--rz-p:12px;--rozet-bant:clamp(44px,3.4vw,54px);display:flex;flex-wrap:nowrap; width:auto;min-width:0;padding:8px 0;margin-left:calc(-1 * var(--rz-p) - 1px)} .hm-hero .rozet li, .hm-hero .rozet li:first-child{flex:none;padding:0 var(--rz-p)} .hm-hero .rozet li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:1px;height:22px;background:var(--line)} .hm-hero .rozet img{max-width:none;height:calc(var(--rozet-bant) * var(--o, 1));width:auto} .hm-hero .rozet li img, .hm-hero .rozet li:first-child img{transform-origin:50% 50%} .hm-hero .rozet-ok{display:none !important} } /* 22.10 · şeritte sekiz öğe (yedi rozet + Health Türkiye, yazısıyla). Tek satıra sığmıyorsa (şerit ~1060px'ten dar) WhatClinic'ten sonraki görünmez öğe satırı kırar: 4 + 4. Daha da darsa öğeler kendiliğinden alt satıra akar (kesilmez); her satır başındaki ayraç ul'un eksi sol payıyla kırpılır. Ölçüt pencere değil ŞERİDİN kendi eni. */ .hm-hero .rozet .rz-kir{display:none} @media(min-width:901px){ @container (max-width:1060px){ .hm-hero .rozet{flex-wrap:wrap;row-gap:14px} .hm-hero .rozet .rz-kir{display:block;flex:0 0 100%;height:0;padding:0} .hm-hero .rozet .rz-kir::before{display:none} } @container (max-width:520px){ .hm-hero .rozet{--rozet-bant:40px;--rz-p:10px} } } @media(max-width:900px){ .hm-hero .rozet{padding:8px var(--bo-4) 8px 0} .hm-hero .rozet li{padding:0 9px} /* Dar ekranda ipucu sarıyor (tek satır ekrandan taşardı) ve kutu 35 → 69px'e çıkıyor. 56px'lik pay orada YETMİYOR — ölçüldü, altı ipucunun dördü «Randevu Talebi» satırına biniyordu. 90px = 69 (iki satırlık ipucu) + 10 (açıklık) + 11 (nefes payı). */ .hm-hero .rozet-kapsul{margin-top:90px} .hm-hero .rozet{gap:var(--bo-5);justify-content:center;margin-top:var(--bo-5)} /* 06.10.2026 · düğmeler ile logolar arası 90+24+8 ≈ 122px boşluk vardı (90px kayan şeritteki iki satırlık ipucuna ayrılmıştı). Izgarada ipucu dokununca logonun üstünde kısa süre belirir; payı tutmaya gerek yok → ~32px. */ .hm-hero .rozet-kapsul{overflow:visible;margin-top:var(--bo-5)} .hm-hero .rozet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0; gap:var(--bo-5) var(--bo-4);width:auto;min-width:0;padding:8px 0} .hm-hero .rozet li, .hm-hero .rozet li:first-child{padding:0;min-width:0;justify-content:center} .hm-hero .rozet li + li::before{display:none} .hm-hero .rozet img{max-width:100%;height:auto; max-height:calc(var(--rozet-bant) * var(--o, 1))} .hm-hero .rozet li:first-child img{transform-origin:50% 50%} .hm-hero .rozet-ok{display:none !important} } /* BUTONLAR — GÖLGESİZ. Hover'da yalnız zemin ve çizgi RENGİ değişir; border her durumda 1px var → genişlik sabit, zıplama imkânsız. */ .hm-hero .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--bo-2); height:var(--btn-l);padding:0 var(--bo-6);box-sizing:border-box; font-size:15px;font-weight:600;letter-spacing:.02em; border-radius:999px;text-decoration:none;border:1px solid transparent; transition:background-color .22s ease,border-color .22s ease,color .22s ease} .hm-hero .btn.primary{background-color:var(--randevu);color:var(--randevu-fg);border-color:transparent} .hm-hero .btn.primary:hover{background-color:var(--randevu-hover)} .hm-hero .btn.ghost{background-color:transparent;color:var(--fg);border-color:var(--line)} .hm-hero .btn.ghost:hover{background-color:var(--gold-soft);border-color:var(--line-strong)} .hm-hero .btn:focus-visible{outline:2px solid var(--aksan-2);outline-offset:2px} @media(min-width:901px){ .hm-hero .btn{height:42px;padding:0 18px;font-size:12px} } /* MOBİL: kutu içinde dikey akış — yazı ÜSTTE, portre ALTTA tabana sıfır */ /* dar ekran · tam genişlik ekleri */ @media(max-width:900px){ html:not([data-stil-kap="cerceve"]) .hm-hero .kutu{margin:0;height:100svh} html:not([data-stil-kap="cerceve"]) .hm-hero .wrap{padding:0 calc(var(--edge) + var(--bo-4))} /* ⚠️ ÜST DOLGU · ÖLÇÜLDÜ VE DÜZELTİLDİ (18.09.2026). Tam genişlik stilde kutu ekranın tepesinden başlıyor ve üstünde 14 + 64 = 78px'lik sabit çubuk duruyor; dolgu 32px olunca künye satırı ve başlığın ilk satırı çubuğun ALTINDA kalıyordu (390 ve 768'de ekran görüntüsüyle yakalandı, 3 Eylül tabanında da aynıydı). Dolgu artık çubuğun payını içeriyor: üst pay + çubuk + nefes. Çerçeveli stilde kutu zaten çubuğun altından başladığı için orada eski değer (--bo-6) yeterli — aşağıda ayrıca. */ .hm-hero .kutu{margin:calc(var(--rail-h) + var(--bo-5)) var(--edge) 0; height:calc(100svh - var(--rail-h) - var(--bo-5) - var(--bo-4));min-height:560px; flex-direction:column;align-items:stretch;justify-content:flex-start;padding-top:var(--bo-6)} html:not([data-stil-kap="cerceve"]) .hm-hero .kutu{ padding-top:calc(var(--rail-ust) + var(--rail-h) + var(--bo-5))} .hm-hero .wrap{padding-bottom:0} /* img markup'ta wrap'TEN ÖNCE → order ile sırayı çevir; margin-top:auto portreyi tabana yapıştırır */ .hm-hero .wrap{order:1;flex:none;padding:0 var(--bo-4)} .hm-hero .ph{order:2;position:relative;right:auto;bottom:auto;height:auto;width:auto; max-height:42%;max-width:62%;margin:auto auto 0;display:block;object-position:center bottom} .hm-hero .txt{max-width:100%;text-align:center} .hm-hero h1{margin:var(--bo-3) 0 var(--bo-4);text-wrap:balance} .hm-hero p{margin-left:auto;margin-right:auto;max-width:32ch;margin-bottom:var(--bo-5);font-size:15px} .hm-hero .cta-row{justify-content:center} .hm-hero .cta-row{flex-wrap:nowrap;gap:var(--bo-2);max-width:420px;margin-left:auto;margin-right:auto} .hm-hero .cta-row .btn{flex:1 1 0;min-width:0;height:46px;padding:0 var(--bo-3);font-size:12px;white-space:nowrap} } @media(prefers-reduced-motion:reduce){ .hm-hero .ph{transform:none !important} } @media(max-width:900px){ /* en-az 560 kilidi kalkar · tam genişlik stilindeki kural daha özgül olduğu için o da anılır */ .hm-hero .kutu, html:not([data-stil-kap="cerceve"]) .hm-hero .kutu{min-height:0} .hm-hero .ph{flex:1 1 0;min-height:0;max-height:none;height:auto;width:100%;max-width:100%; margin:var(--bo-3) 0 0;object-fit:contain;object-position:center bottom} .hm-hero{--hero-yan:var(--bo-4)} html:not([data-stil-kap="cerceve"]) .hm-hero{--hero-yan:calc(var(--edge) + var(--bo-4))} .hm-hero .kutu, html:not([data-stil-kap="cerceve"]) .hm-hero .kutu{padding-inline:var(--hero-yan);padding-bottom:var(--bo-4)} .hm-hero .wrap, .hm-hero .txt{display:contents} .hm-hero .txt > *{order:1;position:relative;z-index:2} .hm-hero .txt.reveal{opacity:1;transform:none} .hm-hero .ph{order:2;width:calc(100% + 2 * var(--hero-yan));max-width:none;margin-inline:calc(-1 * var(--hero-yan))} .hm-hero .txt > .rozet-sar{order:3;margin-top:var(--bo-4)} .hm-hero .ph{-webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 100%); mask-image:linear-gradient(to bottom,#000 68%,transparent 100%)} .hm-hero .rozet-kapsul{margin-top:0} } @media(max-width:900px) and (max-height:820px){ html:not([data-stil-kap="cerceve"]) .hm-hero .kutu{padding-top:calc(var(--rail-ust) + var(--rail-h) + var(--bo-3))} .hm-hero h1{margin:var(--bo-2) 0 var(--bo-3);font-size:clamp(26px, 7.4vw, 34px)} .hm-hero p{font-size:14px;line-height:1.5;margin-bottom:var(--bo-4)} .hm-hero .rozet-kapsul{margin-top:var(--bo-3)} .hm-hero .rozet{gap:var(--bo-3) var(--bo-4);padding:4px 0} .hm-hero .rozet img{max-height:calc(var(--rozet-bant) * var(--o, 1) * .8)} } @media(max-width:900px) and (max-height:680px){ .hm-hero .eyebrow{font-size:10px} .hm-hero h1{font-size:clamp(24px, 6.8vw, 30px)} .hm-hero p{font-size:13px;margin-bottom:var(--bo-3)} .hm-hero .cta-row .btn{height:42px} .hm-hero .rozet{gap:var(--bo-2) var(--bo-4)} .hm-hero .rozet img{max-height:calc(var(--rozet-bant) * var(--o, 1) * .66)} } /* 22.10 · TELEFON / TABLET (kurum isteği): · üst bölümdeki «Randevu Talebi» ve WhatsApp düğmeleri kalkar (WhatsApp sol kenardaki sabit sekmede, randevu menüde) · slogan küçülür · logolar: genişler (yazılı logolar + Health Türkiye) satırda 3, küçük rozetler satırda 4; önce genişler */ @media(max-width:900px){ .hm-hero .cta-row{display:none} .hm-hero h1{font-size:clamp(26px, 7.4vw, 36px)} .hm-hero .rozet{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 0;padding:8px 0} .hm-hero .rozet li, .hm-hero .rozet li:first-child{order:3;flex:0 0 25%;padding:0 6px;box-sizing:border-box;justify-content:center} .hm-hero .rozet li.rz-genis{order:1;flex:0 0 33.333%} .hm-hero .rozet .rz-kir{display:block;order:2;flex:0 0 100%;height:0;padding:0} /* küçükler kendi satırında */ .hm-hero .rozet li.rz-genis img{width:100%;max-width:118px;height:auto;max-height:none} .hm-hero .rozet li.rz-kucuk img{width:auto;height:44px;max-height:none} .hm-hero .rozet .rz-ht{flex-direction:column;gap:6px} .hm-hero .rozet .rz-ht img{width:auto;height:30px;max-width:none} .hm-hero .rozet .rz-ht .ht-yazi{max-width:none;text-align:center;font-size:10px} }