/* ========================================================================= DORUK İŞİTME — Design System v2 (ReSound-inspired: airy, editorial, premium) White-dominant · big thin humanist headlines · single premium-blue accent ========================================================================= */ :root{ /* Premium blue accent (from logo) */ --brand: #0b6ea8; --brand-600: #0f7cbd; --brand-700: #0a597f; --cyan: #17b4d6; /* Dark surfaces */ --navy: #0a2a3d; --navy-900: #06202f; --ink: #142833; /* headings */ --body: #51626b; /* body text */ --muted: #515e67; /* WCAG AA: >=4.5:1 en acik tema zemininde de */ /* Light surfaces */ --white: #e6ebf2; /* yüzeyler: mavi tonlu açık gri (beyaz değil) */ --page: #d6dde7; /* zemin: bir ton koyu gri — kartlar hala yükselir */ --wash: #dde3ec; /* --gri-50 HİÇ TANIMLI DEĞİLDİ — 30 Ağu 2026'da bulundu. Altı yerde kullanılıyordu (cihaz tipi kutusu, kart fotoğrafı, kapanış paneli, tablo başlığı, geniş fotoğraf) ve hiçbirinde bir şey yapmıyordu. Cihaz tipi kartlarındaki ürün görselleri bu yüzden zeminsiz, düz duruyordu — Doruk "küçük küçük duruyor, belirgin değil" dedi. --wash'ın beyaza %55 açılmış hâli; her temada kendi ailesinden. */ --gri-50: #ecf0f5; --wash-2: #cfd7e3; --line: #bcc6d5; --line-soft: #c9d1de; --on-dark: #eef5f8; --on-dark-2: #a9c2ce; --danger: #c0392b; /* Radii — editorial, restrained */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* Shadows — very soft */ --sh-xs: 0 1px 2px rgba(10,42,61,.05); --sh-sm: 0 2px 10px rgba(10,42,61,.06); --sh-md: 0 14px 40px -18px rgba(10,42,61,.20); --sh-lg: 0 30px 70px -30px rgba(10,42,61,.34); --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Bricolage Grotesque", "Bricolage Yedek", "Plus Jakarta Sans", system-ui, sans-serif; --container: 1240px; --gutter: clamp(20px, 5vw, 48px); --ease: cubic-bezier(.22, 1, .36, 1); /* Bölüm etiketleri için koyulaştırılmış marka rengi. --brand (#0B6EA8) açık gri zeminde 4.03:1 veriyordu, gereken 4.5. Kitle 60+; burada kontrast kozmetik değil işlevsel. */ --eyebrow: #0A5C8C; /* Punto ölçeği (16 Ağu 2026) — denetim 42 ayrı değer saydı, ben 39 ölçtüm. Sekiz basamağa bağlandı. Basamaklar denetimin önerdiğinden farklı: onun ölçeği uçlarda çok kabaydı, .66rem etiketi .82rem'e çıkıyordu (+2.7px) ve 1.8rem başlık 1.6rem'e düşüyordu (-3.4px). Bu ölçekte hiçbir değer 1px'den fazla kaymıyor. 1rem = 17px olduğu için --fs-base gövde metninin alt sınırıdır, altına inen her basamak etiket/rozet içindir. */ --fs-2xs: 0.72rem; --fs-xs: 0.82rem; --fs-sm: 0.92rem; --fs-base: 1rem; --fs-md: 1.12rem; --fs-lg: 1.26rem; --fs-xl: 1.5rem; --fs-2xl: 1.75rem; } *, *::before, *::after{ box-sizing: border-box; } *{ margin: 0; } html{ font-size: 106.25%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* 1rem = 17px: yaşlı kullanıcılar için büyük metin */ @media (prefers-reduced-motion: reduce) { html{ scroll-behavior: auto; } } body{ font-family: var(--font); color: var(--body); background: var(--page); line-height: 1.7; font-size: var(--fs-base); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* overflow-x: hidden KALDIRILDI — 20 Ağustos 2026. Bu kural taşmayı önlemiyordu, KIRPIYORDU: telefonda ekran dışına taşan içerik görünmez oluyor ve test ederken fark edilmiyordu. Kuralı geçici kapatıp 44 sayfanın hepsini 360px'te taradım, üç gerçek taşma çıktı ve kaynağında düzeltildi (uzun düğme etiketi, çerez düğmeleri, ızgara öğesinin min-width:auto değeri). Yeniden tarandı: 44/44 temiz. Kural geri konursa gelecekteki taşmalar yine görünmez olur. */ } img, svg, picture, iframe{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } button{ font: inherit; cursor: pointer; } ul{ list-style: none; padding: 0; } h1, h2, h3, h4{ font-family: var(--font); color: var(--ink); line-height: 1.08; letter-spacing: -0.015em; font-weight: 300; /* thin, airy headlines */ } .hukuk__h{ font-size: var(--fs-md); font-weight: 600; } h3, h4{ font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } strong, b{ font-weight: 700; color: var(--ink); } /* ---------- Layout ---------- */ .container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .eyebrow{ display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--fs-sm); letter-spacing: .18em; text-transform: uppercase; color: var(--eyebrow); } .eyebrow::before{ content: ""; width: 28px; height: 2px; background: var(--brand); } .eyebrow--center::before{ display: none; } .section-head{ max-width: 720px; } .section-head--center{ margin-inline: auto; text-align: center; } .section-title{ font-size: clamp(1.9rem, 4vw, 3rem); margin-top: 18px; margin-bottom: 18px; font-weight: 300; } .section-lead{ font-size: var(--fs-md); color: var(--body); line-height: 1.75; } .grad-text{ color: var(--brand); font-weight: 400; } /* ---------- Buttons ---------- */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 30px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-base); letter-spacing: .01em; border: 1.5px solid transparent; white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); min-height: 54px; } .btn svg{ width: 20px; height: 20px; flex: none; } /* Odak halkası çift katmanlı — 20 Ağustos 2026. Tek renk üç zeminde birden çalışmıyor, ölçüldü: cyan beyaz kart 2.46 sayfa 1.80 lacivert 6.05 brand-700 beyaz kart 7.64 sayfa 5.59 lacivert 1.95 Yani cyan yalnız koyu zeminde, brand-700 yalnız açık zeminde geçiyor. Düğmeler her iki zeminde de var (beyaz kartta ve lacivert CTA şeridinde), o yüzden ikisi birlikte: koyu iç halka açık zeminde görünür, cyan dış parıltı koyu zeminde görünür. WCAG 1.4.11 için gereken 3:1 her durumda sağlanıyor. .btn'in taban gölgesi yok, box-shadow'u eziyor olmuyoruz. */ .btn:focus-visible{ outline: 3px solid var(--brand-700); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(23, 180, 214, .55); } .btn:active{ transform: translateY(1px); } .btn--primary{ background: var(--brand); color: #fff; } .btn--primary:hover{ background: var(--brand-700); } .btn--accent{ background: var(--brand); color: #fff; } .btn--accent:hover{ background: var(--brand-700); } .btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover{ border-color: var(--ink); background: var(--wash); } .btn--light{ background: #fff; color: var(--brand); } .btn--light:hover{ background: var(--on-dark); } .btn--sm{ padding: 11px 20px; min-height: 46px; font-size: var(--fs-sm); } .btn--block{ width: 100%; } .btn__arrow::after{ content: "→"; font-weight: 400; } /* on dark backgrounds */ .on-dark .btn--ghost, .cta .btn--ghost{ color: #fff; border-color: rgba(255,255,255,.4); } .on-dark .btn--ghost:hover, .cta .btn--ghost:hover{ background: rgba(255,255,255,.12); border-color: #fff; } /* ========================================================================= TOP BAR ========================================================================= */ /* 26 Ağu 2026: --fs-sm (15,64px) idi. Şerit sayfanın İLK okunan yeri ve içinde çalışma saati, ücretsiz test gibi gerçek bilgi var; 60+ hedef kitlede 17px altına inmeme kuralı burada da geçerli (kurallar.md §3). */ .topbar{ background: var(--navy-900); color: var(--on-dark-2); font-size: var(--fs-base); } .topbar__inner{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 9px; } .topbar__item{ display: inline-flex; align-items: center; gap: 8px; } .topbar__item svg{ width: 15px; height: 15px; color: var(--cyan); flex: none; } .topbar b{ color: #fff; font-weight: 700; } .topbar__right{ display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; } .topbar a{ color: var(--on-dark-2); transition: color .2s; } .topbar a:hover{ color: #fff; } @media (max-width: 720px) { .topbar__inner{ justify-content: center; } .topbar__right{ display: none; } } /* ========================================================================= HEADER / NAV ========================================================================= */ .header{ position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line-soft); transition: box-shadow .3s var(--ease); } .header--scrolled{ box-shadow: var(--sh-sm); } .nav{ display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 98px; } /* asla daralmasın: metin menünün altına taşıyordu. z-index + beyaz zemin: menü beklenmedik bir yazı tipiyle taşarsa bile logonun ve düğmenin üzerine binemez, arkasına geçer. */ /* Marka plakasi: zemin, logonun KENDI radial degradesi (SVG'deki cx60% cy30% r73% ve ayni duraklar). Boylece rozetin dairesi plakaya tamamen gomuluyor; geriye yalniz kelime isareti ve yay kaliyor. */ .brand{ display: flex; align-items: center; gap: 14px; flex: none; position: relative; z-index: 2; background: radial-gradient(73% 73% at 60% 30%, #064B5F 17%, #0A465A 33%, #094457 50%, #094456 67%, #094253 100%); padding: 8px 20px 8px 10px; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 12px -6px rgba(5,40,51,.45); transition: box-shadow .2s ease; } .brand:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 16px -7px rgba(5,40,51,.55); } .brand:focus-visible{ outline: 3px solid var(--brand); outline-offset: 3px; } .nav__cta{ position: relative; z-index: 2; background: #fff; } .brand img{ width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 4px 16px -4px rgba(10,42,61,.28); } .brand__text{ font-weight: 700; color: #fff; line-height: 1; font-size: var(--fs-md); letter-spacing: -.005em; border-left: 1px solid rgba(255,255,255,.16); padding-left: 14px; } .brand__text small{ display: block; font-size: var(--fs-sm); letter-spacing: .12em; color: #7FD0EE; font-weight: 700; margin-top: 4px; } @media (max-width: 480px) { .brand img.brand__logo{ width: auto; height: 44px; } .brand__text{ font-size: var(--fs-base); padding-left: 12px; } } /* 4 Eyl 2026 — Doruk: "bu menü kısmı çok uzun ve sıkışık." Ölçtüm, haklıydı: 1400px'te menüye 786px kalıyor, on başlık ise 803px yer istiyordu. Bu yüzden ara 0'a, yatay dolgu 3px'e indirilmişti — başlıklar birbirine yapışıyordu. Doğru çözüm boşluğu kısmak değil, BAŞLIK SAYISINI azaltmak. Yedi başlık kaldı; İşitme Testi ve SGK zaten birer hizmet, Hizmetler listesine girdi; Hakkımızda ve Kurumsal tek "Kurumsal" başlığında birleşti. Ölçülen: 7 başlık 748px, 38px payla sığıyor. Punto ve dikey dolguya dokunulmadı (60+ kitle). */ .nav__links{ display: flex; align-items: center; justify-content: center; gap: 12px; flex: 1 1 auto; min-width: 0; } .nav__links a{ padding: 12px 10px; font-weight: 600; font-size: var(--fs-base); color: var(--body); white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s; } .nav__links a:hover{ color: var(--ink); } .nav__links a.is-active{ color: var(--brand); } /* 24 Ağu 2026 denetimi (WCAG 1.3.1/1.4.1): aktif sayfa yalnız renkle anlatılıyordu. Renk körlüğünde ve yüksek kontrast modunda kayboluyor. Görsel işareti aria-current'a bağladım: işaretleme ile görüntü birbirinden ayrı düşemez. */ .nav__links a[aria-current]{ font-weight: 700; position: relative; } .nav__links a[aria-current]::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 2px; background: currentColor; } .drawer__panel a.dlink[aria-current]{ font-weight: 700; box-shadow: inset 3px 0 0 currentColor; padding-left: 13px; } .nav__cta{ display: flex; align-items: center; gap: 12px; } .nav__toggle{ display: none; width: 48px; height: 48px; border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm); align-items: center; justify-content: center; color: var(--ink); } .nav__toggle svg{ width: 24px; height: 24px; } /* Mobile drawer */ .drawer{ position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; } .drawer__scrim{ position: absolute; inset: 0; background: rgba(10,42,61,.55); opacity: 0; transition: opacity .3s var(--ease); } .drawer__panel{ position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: #fff; padding: 22px; box-shadow: var(--sh-lg); transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; gap: 4px; overflow-y: auto; } .drawer.is-open{ visibility: visible; pointer-events: auto; } .drawer.is-open .drawer__scrim{ opacity: 1; } .drawer.is-open .drawer__panel{ transform: none; } .drawer__head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .drawer__close{ width: 46px; height: 46px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; display: grid; place-items: center; } .drawer__close svg{ width: 22px; height: 22px; } .drawer__panel a.dlink{ padding: 14px 12px; font-weight: 600; font-size: var(--fs-base); color: var(--ink); border-bottom: 1px solid var(--line-soft); } .drawer__panel a.dlink:hover, .drawer__panel a.dlink.is-active{ color: var(--brand); } .drawer__panel .btn{ margin-top: 12px; } /* ========================================================================= HERO (full-bleed media + overlay, ReSound-style) ========================================================================= */ .hero{ position: relative; } .hero__media{ position: relative; min-height: clamp(480px, 74vh, 760px); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(120% 120% at 78% 15%, #12547d 0%, var(--navy) 45%, var(--navy-900) 100%); overflow: hidden; isolation: isolate; } /* Background video (autoplay/muted/loop). Drop assets/img/hero.mp4 to activate. */ .hero__video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; } .hero__media::before{ content: ""; position: absolute; right: -8%; top: -20%; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; border-radius: 50%; background: conic-gradient(from 140deg, var(--cyan), var(--brand-600), #1b6ca0, var(--cyan)); filter: blur(72px); opacity: .45; z-index: -2; } .hero__media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,32,47,.85) 0%, rgba(6,32,47,.55) 48%, rgba(6,32,47,.15) 100%); z-index: -1; } @keyframes drift { to{ transform: translate3d(-40px, 30px, 0) scale(1.12); } } .hero__inner{ padding-block: clamp(56px, 9vw, 120px); max-width: 760px; position: relative; } .hero__inner .eyebrow{ color: var(--cyan); } .hero__inner .eyebrow::before{ background: var(--cyan); } .hero__title{ color: #fff; font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 300; line-height: 1.06; letter-spacing: -0.02em; } .hero__title .grad-text{ color: var(--cyan); font-weight: 400; } .hero__lead{ color: var(--on-dark); font-size: clamp(1.1rem, 1.6vw, 1.32rem); margin-top: 26px; max-width: 46ch; font-weight: 400; } .hero__actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } /* Hero eyebrow: sektör ve konum bilgisini taşıyor. H1 şiirsel kaldığı için "ne yapıyoruz + neredeyiz" sorusunu bu satır cevaplıyor; okunur olmalı. */ .eyebrow--hero{ font-size: var(--fs-sm); letter-spacing: .12em; } @media (max-width: 560px) { .eyebrow--hero{ font-size: var(--fs-sm); letter-spacing: .08em; } } /* Mobilde güven rozetleri katlama sınırına düşüyordu: 2x2 ızgara ve daha dar boşlukla yukarı çekildi. */ .hero__trust{ display: flex; flex-wrap: wrap; gap: 22px 30px; margin-top: 38px; } .hero__trust span{ display: inline-flex; align-items: center; gap: 9px; color: var(--on-dark); font-weight: 600; font-size: var(--fs-base); } .hero__trust svg{ width: 18px; height: 18px; color: var(--cyan); flex: none; } @media (max-width: 560px) { .hero__trust{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 24px; } .hero__trust span{ font-size: var(--fs-sm); gap: 7px; } .hero__trust svg{ width: 16px; height: 16px; } } /* Awards / trust strip under hero */ .awards{ background: var(--white); border-bottom: 1px solid var(--line-soft); } .awards__inner{ display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 60px); padding-block: 26px; flex-wrap: wrap; } .awards__logos{ display: flex; align-items: center; gap: clamp(22px, 4vw, 44px); flex-wrap: wrap; justify-content: center; } .awards__logos span{ font-weight: 800; font-size: var(--fs-lg); color: var(--muted); letter-spacing: -.01em; transition: color .2s; } /* ========================================================================= CARDS / GRID ========================================================================= */ .grid{ display: grid; gap: 26px; } .grid--2{ grid-template-columns: repeat(2, 1fr); } .grid--3{ grid-template-columns: repeat(3, 1fr); } .grid--4{ grid-template-columns: repeat(4, 1fr); } .card{ background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 34px 30px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); position: relative; } .card:hover{ border-color: var(--brand); box-shadow: var(--sh-md); transform: translateY(-4px); } .card__ic{ width: 54px; height: 54px; border-radius: var(--r-sm); display: grid; place-items: center; margin-bottom: 22px; background: var(--wash); color: var(--brand); } .card__ic svg{ width: 28px; height: 28px; } .card h3{ font-size: var(--fs-lg); margin-bottom: 12px; color: var(--ink); } .card p{ color: var(--body); font-size: var(--fs-base); } .card__link{ display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--brand); font-weight: 700; font-size: var(--fs-base); } .card__link::after{ content: "→"; transition: transform .25s var(--ease); } .card:hover .card__link::after{ transform: translateX(5px); } .card__link svg{ display: none; } /* Split / media-text */ .split{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .split__media{ border-radius: var(--r-lg); min-height: 440px; background: linear-gradient(150deg, #12547d, var(--navy)); position: relative; overflow: hidden; box-shadow: var(--sh-md); display: grid; place-items: center; } .check-list{ display: grid; gap: 18px; margin-top: 28px; } .check-list li{ display: flex; gap: 15px; align-items: flex-start; } .check-list .ci{ flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; margin-top: 3px; } .check-list .ci svg{ width: 15px; height: 15px; color: #fff; } .check-list b{ display: block; font-size: var(--fs-base); color: var(--ink); } .check-list p{ color: var(--body); font-size: var(--fs-base); margin-top: 2px; } /* ========================================================================= FULL-BLEED MEDIA BAND (text over image) ========================================================================= */ .band{ position: relative; overflow: hidden; isolation: isolate; color: #fff; } .brandcard__tag{ color: var(--brand); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; } .brand-plate{ height: 92px; border-radius: var(--r-sm); background: var(--wash); border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 22px; position: relative; overflow: hidden; } .brand-plate::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand-accent, var(--brand)); } .brand-widex{ --brand-accent: #58595B; } /* gri tonlar */ .brand-resound{ --brand-accent: #AA1835; } /* ReSound kırmızısı */ .brand-rexton{ --brand-accent: #111111; } /* siyah (sarı ile birlikte) */ .brand-signia{ --brand-accent: #FF0400; } /* kırmızı + beyaz */ .card__meta{ display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; } .card__meta span{ font-size: var(--fs-sm); font-weight: 700; color: var(--body); background: var(--wash); border: 1px solid var(--line); padding: 5px 11px; border-radius: var(--r-pill); } /* ========================================================================= BRAND / DEVICE PAGES ========================================================================= */ .brand-hero{ display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,64px); align-items: center; } .brand-hero__plate{ border-radius: var(--r-lg); min-height: 320px; background: linear-gradient(150deg, #12547d, var(--navy)); display: grid; place-items: center; position: relative; overflow: hidden; box-shadow: var(--sh-md); } .brand-hero__plate::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 30% 20%, var(--brand-accent, var(--brand)), transparent 62%); opacity: .45; } .tech-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .tech-chips span{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 700; color: var(--body); } .devicecard{ display: flex; flex-direction: column; } /* Ürün kartları artık gerçek kullanıyor; eski dekoratif SVG arka planları kaldırıldı. */ .device-photo{ height: 190px; border-radius: var(--r-sm); display: grid; place-items: center; margin-bottom: 22px; position: relative; overflow: hidden; border: 1px solid var(--line); background-color: var(--wash); background-repeat: no-repeat; background-position: center; background-size: contain; } .device-photo::after{ content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; filter: blur(42px); background: var(--brand-accent, var(--brand)); opacity: .1; z-index: 0; } .device-photo svg{ display: none; } .device-photo img{ position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 16px; } .devicecard h3{ font-size: var(--fs-lg); margin-bottom: 4px; } .devicecard .brandcard__tag{ margin-bottom: 12px; } /* ========================================================================= LOCATIONS ========================================================================= */ .loc-tabs{ display: inline-flex; gap: 4px; padding: 5px; background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-pill); } .loc-tab{ padding: 13px 26px; border-radius: var(--r-pill); border: none; background: transparent; font-weight: 700; color: var(--body); font-size: var(--fs-base); transition: all .2s var(--ease); } .loc-tab.is-active{ background: var(--brand); color: #fff; } .loc-panel{ display: none; } /* Eskiden `fadeUp` kullanıyordu; o animasyon opacity:0'dan başlıyor ve arka plan sekmesinde/donmuş animasyon saatinde %0'da takılı kalınca şube listesi tamamen görünmez oluyordu (denetim araçları da bu yüzden 46 kontrast ihlali raporluyordu). Artık yalnızca kayma animasyonu var: animasyon hiç çalışmasa bile panel görünür. Depodaki `reveal` güvenlik ağıyla aynı ilke — görünürlük animasyona emanet edilmez. */ .loc-panel.is-active{ display: block; animation: kayYukari .5s var(--ease); } @keyframes kayYukari { from{ transform: translateY(12px); } to{ transform: none; } } @media (prefers-reduced-motion: reduce) { .loc-panel.is-active{ animation: none; } } @keyframes fadeUp { from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } } .loccard{ background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); display: flex; flex-direction: column; gap: 12px; } .loccard:hover{ border-color: var(--brand); box-shadow: var(--sh-md); transform: translateY(-3px); } .loccard__top{ display: flex; align-items: center; gap: 13px; } .loccard__pin{ width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--wash); display: grid; place-items: center; flex: none; } .loccard__pin svg{ width: 22px; height: 22px; color: var(--brand); } .loccard .loccard__h{ font-size: var(--fs-md); color: var(--ink); } /* --muted (#515e67) yeni opaklıkta 4.1:1'e düşüyordu; #3d464d ile 5.9:1. */ .loccard__city{ font-size: var(--fs-xs); color: #3d464d; font-weight: 600; } /* --brand bu kartta 4.0:1 veriyordu, yani fotoğraf hiç olmasa da AA'yı geçmiyordu. --brand-700 ile 4.7:1. */ .loccard__tel{ display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--brand-700); font-size: var(--fs-base); /* 26 Ağu 2026: 29px yüksekliğindeydi. Bu, sitedeki en önemli dokunma hedefi — 60+ ziyaretçi için numaraya basmak asıl dönüşüm. Kural 44px (kurallar.md §3). Dolgu ile büyütüldü, yazı boyutu değişmedi. */ min-height: 44px; padding-block: 6px; } .loccard__tel svg{ width: 16px; height: 16px; flex: none; } .loccard__tel:hover{ color: var(--brand-700); } .loccard__actions{ display: flex; gap: 10px; margin-top: auto; padding-top: 6px; } .loccard__actions a{ flex: 1; } .map-embed{ border: 0; width: 100%; height: 360px; border-radius: var(--r-md); box-shadow: var(--sh-sm); } /* ========================================================================= CTA BAND ========================================================================= */ .cta{ border-radius: var(--r-lg); background: var(--navy); color: #fff; padding: clamp(30px,4vw,52px); text-align: center; position: relative; overflow: hidden; } .cta::before{ content: ""; position: absolute; right: -6%; top: -50%; width: 40%; height: 200%; background: radial-gradient(circle, rgba(23,180,214,.25), transparent 70%); } .cta::after{ content: ""; position: absolute; left: -6%; bottom: -60%; width: 34%; height: 200%; background: radial-gradient(circle, rgba(11,110,168,.35), transparent 70%); } .cta h2{ color: #fff; font-size: clamp(1.5rem,2.6vw,2.2rem); position: relative; font-weight: 700; text-transform: none; letter-spacing: normal; } .cta p{ color: var(--on-dark); max-width: 600px; margin: 18px auto 0; position: relative; font-size: var(--fs-md); } .cta__actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; position: relative; } /* ========================================================================= FOOTER ========================================================================= */ .footer{ background: var(--navy-900); color: var(--on-dark-2); padding-top: clamp(60px,7vw,90px); } /* 27 Ağu 2026 — Doruk: "burayı bir derle topla, dağınık durmasın." Ölçtüğümde sebebi netti: Hizmetler sütununda 11, Kurumsal'da 9, İletişim'de 2 bağlantı vardı. Hizmetler diğerlerinin iki katı boyundaydı, İletişim'in altında yarım ekran boşluk kalıyordu. Bağlantı SİLİNMEDİ. "Hizmetler" (ne yapıyoruz) ile "Rehber" (ne öğrenirsiniz) ayrıldı, iki hukuki metin telif şeridine indi: 7 / 6 / 5 / 2. Beş sütun oldu, o yüzden marka bloğu daraldı ve boşluk 44'ten 34'e indi. */ .footer__grid{ display: grid; grid-template-columns: 1.45fr .95fr .95fr .95fr 1.05fr; gap: 34px; padding-bottom: 52px; } .footer__brand{ display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .footer__brand img{ width: 62px; height: 62px; } .footer__brand b{ color: #fff; font-size: var(--fs-lg); font-weight: 800; } .footer__brand small{ display: block; font-size: var(--fs-sm); letter-spacing: .105em; color: var(--cyan); font-weight: 700; } .footer p{ font-size: var(--fs-base); line-height: 1.75; } .footer .footer__h{ color: #fff; font-size: var(--fs-base); margin-bottom: 20px; font-weight: 700; } .footer__links{ display: grid; gap: 12px; } .footer__links a{ color: var(--on-dark-2); font-size: var(--fs-base); transition: color .2s; } .footer__links a:hover{ color: var(--cyan); } .footer__contact{ display: grid; gap: 15px; } .footer__contact a{ display: flex; gap: 12px; align-items: flex-start; color: var(--on-dark-2); font-size: var(--fs-base); } .footer__contact svg{ width: 20px; height: 20px; color: var(--cyan); flex: none; margin-top: 2px; } .footer__social{ display: flex; gap: 10px; margin-top: 22px; } .footer__social a{ width: 42px; height: 42px; border-radius: var(--r-sm); background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .25s, transform .25s; } .footer__social a:hover{ background: var(--brand); transform: translateY(-3px); } .footer__social svg{ width: 20px; height: 20px; color: #fff; } .footer__bar{ border-top: 1px solid rgba(255,255,255,.1); padding-block: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--fs-sm); } /* Floating WhatsApp */ .wa-float{ position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 12px 28px -8px rgba(37,211,102,.6); transition: transform .25s var(--ease); } .wa-float:hover{ transform: scale(1.08); } /* 24 Ağu 2026 (WCAG 1.4.11): beyaz ikon #25d366 üstünde 1,98:1 idi, metin dışı eşik 3:1. Yeşili koruyup ikonu koyulaştırdım — 6,91:1. Aynı desen .btn--wa'da zaten kullanılıyordu, artık tutarlı. */ .wa-float svg{ width: 30px; height: 30px; color: #06351a; } /* ========================================================================= PAGE HEADER (inner pages) ========================================================================= */ .pagehead{ position: relative; padding-block: clamp(52px,7vw,96px); background: var(--wash); border-bottom: 1px solid var(--line-soft); overflow: hidden; } .pagehead__bg{ display: none; } .pagehead h1{ font-size: clamp(2.3rem,5vw,3.8rem); font-weight: 300; } .pagehead p{ color: var(--body); font-size: var(--fs-md); margin-top: 18px; max-width: 62ch; } /* ---- Klavye: ana içeriğe atlama ------------------------------------- Görünmez durur, TAB ile odaklanınca belirir. Ekran okuyucu ve klavye kullanıcısı üst menüyü her sayfada tekrar geçmek zorunda kalmasın. */ .skip-link{ position: absolute; left: 12px; top: -60px; z-index: 200; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; background: var(--navy); color: #fff; border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 700; text-decoration: none; transition: top .15s ease; } .skip-link:focus{ top: 0; } .skip-link:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; } /* Google profil bağlantısı henüz yok; bağ yerine pasif metin */ .card__link.is-pasif{ color: var(--muted); cursor: default; } .card__link.is-pasif svg{ display: none; } .breadcrumb{ display: flex; gap: 8px; align-items: center; color: var(--ink); font-size: var(--fs-base); margin-bottom: 20px; } /* metin ici baglanti: renk tek basina yeterli degil (WCAG 1.4.1) */ p > a:not([class]), li > a:not([class]), .form-note a, td > a:not([class]){ text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* Dokunma alanı 44px'e çıkarıldı; negatif kenar boşluğu yerleşimi aynı bırakıyor, yani görsel olarak hiçbir şey büyümüyor. */ .breadcrumb a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; } .breadcrumb a:hover{ color: var(--brand); } .breadcrumb svg{ width: 14px; height: 14px; } /* ========================================================================= FORMS ========================================================================= */ .field{ display: grid; gap: 8px; margin-bottom: 20px; } .field label{ font-weight: 700; font-size: var(--fs-base); color: var(--ink); } .field input, .field select, .field textarea{ font: inherit; font-size: var(--fs-base); padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; width: 100%; } .field textarea{ min-height: 130px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(11,110,168,.12); } .field .hint{ font-size: var(--fs-sm); color: var(--muted); } .form-note{ font-size: var(--fs-base); color: var(--muted); margin-top: 6px; } .info-tile{ display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .25s, box-shadow .25s; } .info-tile:hover{ border-color: var(--brand); box-shadow: var(--sh-sm); } .info-tile .ic{ width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--wash); display: grid; place-items: center; flex: none; } .info-tile .ic svg{ width: 24px; height: 24px; color: var(--brand); } .info-tile b{ color: var(--ink); display: block; margin-bottom: 3px; } .info-tile a, .info-tile span{ color: var(--body); font-size: var(--fs-base); } /* FAQ */ .faq{ border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; overflow: hidden; } .faq + .faq{ margin-top: 14px; } .faq__q svg{ width: 22px; height: 22px; color: var(--brand); flex: none; transition: transform .3s var(--ease); } .faq.is-open .faq__q svg{ transform: rotate(45deg); } /* visibility ŞART: yalnız max-height:0 ile kapatınca panel içindeki bağlantılara Tab ile odaklanılabiliyor ve ekran okuyucu görünmeyen metni okuyor (16 Ağu 2026 denetimi). visibility gecikmeli kapanır ki açılış-kapanış geçişi görünsün. */ .faq__a{ max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .35s var(--ease), visibility 0s linear .35s; } .faq.is-open .faq__a{ visibility: visible; transition: max-height .35s var(--ease), visibility 0s; } /* SSS cevabına yan boşluk — 30 Ağu 2026, Doruk bildirdi: "cevaplar sıkışık sıkışık, sağ ve soldan pay bırak". Sebep: bu kural `.faq__a-inner` sarmalayıcısını hedefliyordu ama o sarmalayıcı HTML'de HİÇ YOK (92 SSS'nin hiçbirinde; ölçtüm). Yani dolgu kuralı yıllardır hiç uygulanmıyordu ve metin panelin kenarına yapışıyordu. Artık gerçek işaretlemeyi hedefliyor. Dolgu 24px: sorunun (.faq__q) yan dolgusuyla aynı, böylece soru ve cevap aynı hizada başlıyor. Yükseklik JS'te scrollHeight ile ölçüldüğü için (main.js:290) açılma animasyonu kendiliğinden uyuyor. */ .faq__a > *{ margin: 0; padding-inline: 24px; color: var(--body); line-height: 1.75; } .faq__a > * + *{ margin-top: 12px; } .faq__a > *:last-child{ padding-bottom: 22px; } @media (max-width: 560px){ .faq__a > *{ padding-inline: 18px; } }/* ========================================================================= KNOWLEDGE BASE ========================================================================= */ /* ========================================================================= HERO LEGACY NEUTRALISERS (old markup that may remain) ========================================================================= */ /* ========================================================================= DYNAMIC & PLAYFUL LAYER ========================================================================= */ :root{ --coral: #ff7a66; --coral-bg: rgba(255,122,102,.12); --mint: #16c79a; --mint-bg: rgba(22,199,154,.14); --violet:#7c6cff; --violet-bg: rgba(124,108,255,.13); --amber: #ffab2e; --amber-bg: rgba(255,171,46,.15); } /* Floating color blobs */ .blob{ position: absolute; border-radius: 50%; filter: blur(56px); opacity: .5; pointer-events: none; z-index: 0; will-change: transform; } .blob--blue{ background: var(--brand); } .blob--coral{ background: var(--coral); } .blob--mint{ background: var(--mint); } .blob--violet{ background: var(--violet); } .blob--b{ width: 240px; height: 240px; } .blob--c{ width: 180px; height: 180px; } @keyframes floaty { 0%, 100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(34px,-30px) scale(1.12); } } @keyframes floaty2 { 0%, 100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-30px,26px) scale(1.15); } } .section, .pagehead, .band{ position: relative; } .section > .container, .pagehead > .container, .band > .container{ position: relative; z-index: 1; } .has-blobs{ overflow: hidden; } /* Playful multi-color card icons (cycle within grids) */ .grid .card:nth-child(4n+1) .card__ic{ background: rgba(11,110,168,.10); color: var(--brand); } .grid .card:nth-child(4n+2) .card__ic{ background: var(--coral-bg); color: var(--coral); } .grid .card:nth-child(4n+3) .card__ic{ background: var(--mint-bg); color: var(--mint); } .grid .card:nth-child(4n+4) .card__ic{ background: var(--violet-bg); color: var(--violet); } .card__ic{ transition: transform .35s var(--ease); } /* Button hover bounce */ .btn--primary:hover, .btn--accent:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(11,110,168,.55); } .btn{ transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); } /* Animated sound-wave (equalizer) motif */ .eq{ display: inline-flex; align-items: flex-end; gap: 5px; height: 42px; } .eq span{ width: 6px; border-radius: 6px; background: linear-gradient(180deg, var(--cyan), var(--brand)); } .eq span:nth-child(2){ animation-delay:.15s } .eq span:nth-child(3){ animation-delay:.3s } .eq span:nth-child(4){ animation-delay:.45s } .eq span:nth-child(5){ animation-delay:.2s } .eq span:nth-child(6){ animation-delay:.35s } .eq span:nth-child(7){ animation-delay:.1s } @keyframes eqbar { 0%, 100%{ height: 22%; } 50%{ height: 100%; } } @keyframes marquee { to{ transform: translateX(-50%); } } /* ========================================================================= REVEAL ========================================================================= */ /* İÇERİK HER ZAMAN GÖRÜNÜR OLMALI. .reveal varsayılan olarak görünürdür; gizli başlangıç durumu YALNIZCA reveal betiği 'e .js-reveal-ready eklediğinde uygulanır. Böylece JS yüklenmezse/çalışmazsa veya observer tetiklenmezse içerik yine görünür. */ .reveal{ opacity: 1; transform: none; } .js-reveal-ready .reveal{ opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js-reveal-ready .reveal.is-in{ opacity: 1; transform: none; } .js-reveal-ready .reveal[data-d="1"]{ transition-delay: .08s; } .js-reveal-ready .reveal[data-d="2"]{ transition-delay: .16s; } .js-reveal-ready .reveal[data-d="3"]{ transition-delay: .24s; } .js-reveal-ready .reveal[data-d="4"]{ transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .js-reveal-ready .reveal, .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; } .hero__media::before, .blob, .eq span{ animation: none !important; } } /* ========================================================================= RESPONSIVE ========================================================================= */ /* 9 menü öğesi + logo + "Randevu Al" düğmesi. .container 1240px ile sınırlı olduğu için geniş ekranda bile fazladan yer YOK: bu yüzden başlıktaki telefon düğmesi masaüstünde gizlenir (numara zaten üst şeritte ve mobil menüde var) ve menü bağlantıları dar aralıkla dizilir. 1300px altında tamamen hamburger menüye döner. */ .nav__cta .btn--phone{ display: none; } /* 29 Ağustos 2026 — TELEFON DÜĞMESİ MOBİLDE AÇILDI. Yukarıdaki kuralın niyeti "masaüstünde gizle"ydi (numara üst şeritte ve mobil menüde var diye) ama kuralın breakpoint'i yoktu: düğme HER ölçüde gizliydi. Oysa üst şeritteki numara mobilde görünmüyor. Ölçüldü (reklam başlamadan önce, ana sayfa, çerez bandı açık): 360x640 · 375x667 · 375x812 — ÜÇÜNDE DE ilk ekranda TEK BİR arama yolu yok. Ne tel: bağlantısı, ne WhatsApp. Görünen tek eylem "Randevu Al" ve o da başka bir sayfaya gidiyor. Telefonla dönüşen bir işte, 60+ kitlede, yarın reklam parası harcanırken kabul edilebilir değil. 560 px altında yer ölçüldü: numaralı düğme ~146 px, boşta 86 px var. Yani telefon ve "Randevu Al" birlikte sığmıyor. Telefon seçildi; randevu hero düğmesinde, çekmece menüsünde ve her sayfanın iletişim bölümünde duruyor, telefon ise hiçbir yerde görünmüyordu. */ @media (max-width: 1399px){ .nav__cta .btn--phone{ display: inline-flex; } } @media (max-width: 560px){ .nav__cta .btn--primary{ display: none; } } /* Başlık şeridi, bağlantılara yer açmak için sayfa gövdesinden daha dar bir yan boşluk kullanır (48px yerine 28px). */ .header .nav{ max-width: none; padding-inline: clamp(10px, 1.2vw, 18px); } .topbar .container{ max-width: none; padding-inline: clamp(12px, 1.4vw, 22px); } /* 3 Eyl 2026 — "Yardım" üst menüye alındı, karşılığında "Ana Sayfa" çıkarıldı: başlıktaki logo zaten ana sayfaya gidiyordu, o bağlantı tekrardı. Öğe sayısı 9'da kaldığı için eşik ve punto değişmedi; ölçtüm, 1366px dizüstünde şerit taşmıyor. "Ana Sayfa" çekmece menüde ve alt bilgide duruyor. */ @media (max-width: 1399px) { .nav__links{ display: none; } .nav__toggle{ display: grid; } .header .nav{ max-width: none; padding-inline: clamp(10px, 1.2vw, 18px); } .topbar .container{ max-width: none; padding-inline: clamp(12px, 1.4vw, 22px); } } /* Dar ekran: .brand'in flex:none olması (masaüstündeki taşmayı önlemek için gerekli) telefonda logo+isim+düğme+hamburger'ı kapsayıcıdan taşırıyordu ve body{overflow-x:hidden} bunu gizliyordu. Bu boyutta yazı markası gizlenir — logo zaten markayı taşıyor, isim mobil menünün başlığında görünüyor. */ @media (max-width: 560px) { .brand__text{ display: none; } .brand{ padding: 8px 12px; border-radius: 14px; } .brand img.brand__logo{ width: auto; height: 44px; } .nav{ min-height: 74px; gap: 10px; } .nav__cta{ gap: 8px; } } @media (max-width: 980px) { .grid--4{ grid-template-columns: repeat(2, 1fr); } .footer__grid{ grid-template-columns: 1fr 1fr; gap: 34px 28px; } .brand-hero{ grid-template-columns: 1fr; } } @media (max-width: 860px) { .split{ grid-template-columns: 1fr; } .grid--3{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { /* mobilde de 17px altına inme — yaşlı kullanıcılar için okunabilirlik */ .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; } .footer__grid{ grid-template-columns: 1fr; } .footer__bar{ flex-direction: column; } .cta__actions{ flex-direction: column; } .cta__actions .btn{ width: 100%; } } /* ========================================================================= WIDEX-STYLE LAYER — bold UPPERCASE headlines, centered hero, clean ========================================================================= */ .hero__title, .section-title, .pagehead h1, .band h2{ font-weight: 700; text-transform: uppercase; letter-spacing: 0; line-height: 1.1; } .hero__title{ letter-spacing: -.01em; line-height: 1.06; } /* ── Hero başlığı mobilde: payı büyüt, kaymayı kaynağında kes ──────── 27 Ağustos 2026. Ana sayfada CLS 0,158 ölçüldü ve iki kaymanın ikisi de yazı tipi indiğinde oluyordu. Ölçünce sebebi çıktı: başlık BIÇAK SIRTINDA duruyordu. 390px ekranda kutu 350px. 2,3rem (39,1px), büyük harf: "HAYATIN SESLERİNİ" Bricolage 349,4px → 0,6px payla sığıyor "YENİDEN KEŞFEDİN" Bricolage 354,4px → SIĞMIYOR Üç satırlık görünüm bu kazadan çıkıyordu. Yedek fontta ikisi de sığmayınca dört satır oluyor, Bricolage gelince üçe iniyor ve altındaki her şey zıplıyordu (166 → 124px). Önce yedek fontu Bricolage'ın ölçüsüne getirmeyi denedim (yazi-tipleri.css'teki size-adjust). Yetmedi ve yetmemesi doğru: 0,6px'lik bir paya üçüncü ondalıkla nişan almak mühendislik değil, şans. Tarayıcı sürümü ya da yazı tipi ipuçlandırması değişince yine kayardı. Başlıkta zaten bir
var: tasarım İKİ satır istiyor. Boy 2,12rem yapılınca üç adayın üçü de iki satıra oturuyor, en dar payı 18px: Bricolage 326px · system-ui 327px · Jakarta 332px (kutu 350px) Kayma ortadan kalkıyor, başlık hâlâ 36px — mobilde iri. Yan kazanç: hero 41px kısalıyor. */ @media (max-width: 430px){ /* Sabit boy yerine ekranla ölçeklenen boy: kutu genişliğiyle birlikte küçülünce satır sayısı her genişlikte aynı kalıyor. Sabit 2,12rem denendi ve 390/430'da oturdu ama 320/360'ta başlık dört satıra çıkıyordu — kutu daralırken boy sabit kalıyordu. 9,2vw oranı üç adayın üçünde de aynı sonucu veriyor. */ .hero__title{ font-size: clamp(1.62rem, 9.2vw, 2.12rem); } } /* Centered hero (Widex composition) */ .hero__inner{ max-width: 920px; margin-inline: auto; text-align: center; } .hero__lead{ margin-inline: auto; } .hero__actions, .hero__trust{ justify-content: center; } .hero__inner .eyebrow{ justify-content: center; } /* Widex-style buttons: crisp rectangles */ .btn{ border-radius: 4px; letter-spacing: .01em; } .btn--ghost{ border-width: 1.6px; } /* Calmer & cleaner: strip playful clutter, single blue accent */ .blob{ display: none !important; } .grid .card .card__ic{ background: rgba(11,110,168,.10) !important; color: var(--brand) !important; } .card:hover .card__ic{ transform: translateY(-3px) scale(1.04) !important; } .card:hover{ transform: translateY(-5px) !important; } /* ========================================================================= REAL BRAND PHOTOS (user-curated, assets/img/brands/) ========================================================================= */ /* Homepage hero — lifestyle photo behind the headline ── 27 Ağu 2026: FOTOĞRAF KALDIRILDI ───────────────────────────────── Bu kural slayt eklenmeden önce yazılmıştı ve slayt gelince kimse geri almamış. `.hero__slayt` (z-index -3) bu arka planı TAMAMEN örtüyor: widex-woman.webp her ana sayfa ziyaretinde 81 KB iniyordu ve tek bir pikseli görünmüyordu. Ölçüm: dosya ağdan engellenip iki ekran görüntüsü karşılaştırıldı, fark RMS 0,00 — yani birebir aynı. Tahmin değil. `background-color` KALIYOR: slayt inmeden önceki ilk karede ve bir kare hiç inmezse arkada lacivert duruyor, beyaz parlama olmuyor. */ .hero__media{ background-size: cover; background-position: center; background-color: var(--navy); } .hero__media::after{ background: linear-gradient(180deg, rgba(6,32,47,.66), rgba(6,32,47,.82)) !important; } .hero__media::before{ opacity: .18; } /* Brand-page hero plates — lifestyle photo + dark overlay for the wordmark */ .brand-hero__plate{ background-size: cover !important; background-position: center !important; } .brand-hero__plate::before{ background: linear-gradient(160deg, rgba(6,32,47,.28), rgba(6,32,47,.72)) !important; opacity: 1 !important; } .brand-widex .brand-hero__plate{ background-image: url('../img/urunler/widex-cic_wood.webp'); } .brand-resound .brand-hero__plate{ background-image: url('../img/urunler/resound-one_life.webp'); } .brand-rexton .brand-hero__plate{ background-image: url('../img/urunler/rexton-reach_inear.webp'); } .brand-signia .brand-hero__plate{ background-image: url('../img/urunler/signia-woman.webp'); } /* ========================================================================= ÜRÜN KATALOĞU — gerçek ürün fotoğrafları (images/urunler//) Kartlar artık kullanıyor; eski dekoratif SVG arka planları kapatıldı. ========================================================================= */ .devicecard .device-photo{ background-image: none; background-color: #fff; } /* Marka ürün yelpazesi banner'ı */ .range-banner{ background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(18px,3vw,32px); } .range-banner img{ width: 100%; height: auto; object-fit: contain; max-height: 340px; margin-inline: auto; } .range-banner figcaption{ text-align: center; color: var(--body); margin-top: 16px; font-size: var(--fs-base); } /* Görsel henüz eklenmemişse (ör. ekip.jpg) alt metin koyu zeminde okunur kalsın, kırık görsel ikonu yerine düzgün bir yer tutucu görünsün. */ .split__media img{ color: var(--on-dark-2); font-size: var(--fs-base); text-align: center; padding: 24px; } /* Resmî marka logoları (images/logolar/) — hepsi açık zeminde okunur. Rexton'un sarı wordmark'ı beyazda kaybolduğu için siyah zeminli RX ikonu kullanılır. */ .brand-plate{ background: var(--white); } .brand-logo{ max-height: 44px; max-width: 84%; width: auto; object-fit: contain; } /* Dört marka plakası aynı yükseklikte; logolar tek tip 58px yüksekliğe hizalı */ .brand-plate{ height: 118px; } .brand-plate .brand-logo{ height: 58px; max-height: 58px; width: auto; max-width: 78%; object-fit: contain; } /* Logolar OPTİK ağırlığa göre hizalanıyor, salt yüksekliğe göre değil — 30 Ağu 2026, Doruk bildirdi: "Signia logosu diğerlerine göre çok küçük kalmış". Sebep ölçüldü: dördü de 58px yüksekliğe hizalıydı ama en-boy oranları çok farklı. 58px'te kapladıkları alan: ReSound 9880 · Widex 6728 · Rexton 3364 · Signia 2968 Yani Signia, ReSound'un üçte biri kadar yer kaplıyordu. Tam alan eşitlemesi Signia'yı 106px'e çıkarırdı ve 118px'lik plakadan taşardı; bu yüzden ortada duruldu — Signia'nın alanı ikiye katlanıyor, plaka içinde kalıyor. */ .brand-plate.brand-widex .brand-logo{ height: 64px; max-height: 64px; } .brand-plate.brand-rexton .brand-logo{ height: 76px; max-height: 76px; } .brand-plate.brand-signia .brand-logo{ height: 78px; max-height: 78px; } /* Footer — Yetkili Bayii logo şeridi */ .footer-brands{ border-top: 1px solid rgba(255,255,255,.1); padding-top: 30px; margin-top: 34px; } .footer-brands__label{ display: block; font-size: var(--fs-sm); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); font-weight: 700; margin-bottom: 18px; } .footer-brands__row{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .footer-brands__row a{ display: grid; place-items: center; background: var(--white); border-radius: var(--r-sm); padding: 12px 18px; min-height: 66px; min-width: 132px; flex: 0 1 auto; transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .footer-brands__row a:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px -10px rgba(0,0,0,.45); } .footer-brands__row img{ max-height: 34px; max-width: 118px; width: auto; object-fit: contain; } .footer-brands__row a.is-tall img{ max-height: 50px; } .footer-brands__row a.is-square img{ max-height: 44px; } @media (max-width: 560px) { .footer-brands__row{ display: grid; grid-template-columns: 1fr 1fr; } .footer-brands__row a{ min-width: 0; } } /* KURUMSAL KÜNYE — 31 Ağu 2026 Doruk alt bilgi için "biraz daha kurumsal gözükmesini sağla" dedi. İki sorun vardı. Birincisi: yetkili bayii logolarının sağındaki yarım satır bomboştu, bilerek yapılmış görünmüyordu. İkincisi: telif şeridinin sonunda "Ankara & İstanbul · 14 Şube · SGK Anlaşmalı · 2 Yıl Garanti" diye noktalarla birbirine eklenmiş bir cümle vardı; dört ayrı kurumsal olgu, hiçbiri etiketli değil, hepsi tek satırda. Aynı dört olgu artık etiketli bir künyeye (dl) geçti ve o boşluğu dolduruyor. Bilgi aynı bilgi — tümü doğrulanmış: kuruluş 2010, 14 şube, SGK anlaşması, 2 yıl garanti (kurallar.md md.27). Değişen tek şey sunum: noktalı bir cümle yerine "ne / değeri" çiftleri. dl seçildi çünkü bu gerçekten terim-tanım listesi; ekran okuyucu "Kuruluş: 2010" diye eşleştirerek okuyor, düz metinde okuyamıyordu. Tüzel unvan, vergi dairesi/no ve MERSİS numarası BİLEREK YOK: Brand Brain'de doğrulanmamışlar ve şirket bilgisi uydurulmaz. Doruk verirse buraya beşinci/altıncı çift olarak girer; istek tools/senden-bekleyenler.md'ye yazıldı. */ .footer-brands__ust{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,auto); gap: clamp(26px,4vw,60px); align-items: start; } .kunye{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 38px; margin: 0; } .kunye dt{ font-size: var(--fs-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); font-weight: 700; margin-bottom: 5px; } .kunye dd{ margin: 0; color: #fff; font-weight: 600; font-size: var(--fs-base); line-height: 1.4; } /* Künye altta kalınca logo sırasıyla arasına nefes girsin. */ @media (max-width: 1040px){ .footer-brands__ust{ grid-template-columns: 1fr; gap: 30px; } .kunye{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px 26px; } } @media (max-width: 760px){ .kunye{ grid-template-columns: 1fr 1fr; } } /* Künyenin son satırı telif şeridinin çizgisine değiyordu (ölçüldü: 1280px'te 4px kalıyordu). Şeridin kendi 24px'i logo sırası için yeterliydi, iki satırlık künye için değil. */ .footer-brands__ust{ padding-bottom: 14px; } /* Hukuki bağlantılar sabit WhatsApp düğmesinin altına giriyordu. Düğme viewport'un sağ alt köşesinde (58px + 22px kenar) duruyor ve telif şeridi sayfanın EN ALTI — yani geniş ekranda çakışma kaçınılmaz. Ölçtüğümde 1280px'te "Çerez tercihiniz" bağlantısının sağ ucu düğmenin altında kalıyordu; tıklanabilir ama parmakla ıskalanır, kitle 60+. Şeride düğme genişliği kadar sağ boşluk verildi. 700px altında düğme zaten gizli (.eylem-cubuk-var), o yüzden yalnız üstünde. */ @media (min-width: 701px){ .footer__bar{ padding-right: 88px; } } /* Yapışkan başlığın (sticky header, ~89px) ALTINDA dursun; aksi hâlde başlığın arkasına girip görünmez oluyor. */ .btn:disabled, .btn[disabled]{ background: var(--wash-2); color: var(--muted); border-color: var(--line); cursor: not-allowed; box-shadow: none; } /* Sonuç kartı — JS .show sınıfını ekler */ .result{ display: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px,3vw,34px); margin-top: 14px; box-shadow: var(--sh-sm); } .result.show{ display: block; } .btn--wa{ background: #25d366; color: #06351a; border: 1px solid #1fb857; } /* ========================================================================= KÜRESEL STANDARTLAR — bayrak güven şeridi (ana sayfa, hero'nun altı) Koyu yuvarlak şerit; .stats / .cta ile aynı yüzey dilini kullanır. Emoji yerine satır içi SVG: Windows'ta bayrak emojileri bayrak olarak görünmüyor (ülke kodu harflerine düşüyor). ========================================================================= */ /* ZORLA SERBEST BIRAKMA — main.js güvenlik ağı bunu ekler. transition:none, ÇALIŞAN geçişleri iptal eder ve değeri ANINDA uygular. Yalnızca sınıfı kaldırmak yetmiyordu: animasyon saati donmuş bir sekmede (arka plan sekmesi / bazı gömülü görüntüleyiciler) yeni bir geçiş başlıyor ve o da 0'da donarak opacity:0 olarak hesaplanıyordu. */ html.reveal-released .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; } .topbar__inner--ticker .topbar__right{ flex: none; white-space: nowrap; } .topbar__inner--ticker .topbar__item{ white-space: nowrap; } .ticker{ flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent); } .ticker__track{ display: flex; width: max-content; will-change: transform; animation: ticker-scroll 34s linear infinite; animation-play-state: paused; } .ticker.in-view .ticker__track{ animation-play-state: running; } @keyframes ticker-scroll { from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } } .ticker:hover .ticker__track{ animation-play-state: paused; } .ticker__group{ display: inline-flex; align-items: center; white-space: nowrap; padding-block: 9px; } .tk{ display: inline-flex; align-items: center; } .tk b{ color: #fff; font-weight: 700; margin: 0 4px; } .tk::after{ content: "•"; color: var(--cyan); margin: 0 20px; } @media (max-width: 720px) { .topbar__inner--ticker{ justify-content: stretch; } .ticker{ width: 100%; } } @media (prefers-reduced-motion: reduce) { .ticker__track{ animation: none; } .ticker__group[aria-hidden]{ display: none; } }/* ========================================================================= YENİ MARKA İŞARETİ (başlık logosu) ========================================================================= */ /* ========================================================================= SGK BANDI — asimetrik vurgu (ana sayfa) ========================================================================= */ /* ========================================================================= MARKA KARTLARI — hizalama + stok rozeti ========================================================================= */ .brandcard{ display: flex; flex-direction: column; } .brandcard .card__meta{ margin-top: auto; padding-top: 16px; } .brandcard .card__link{ margin-top: 14px; } .stock-chip{ display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 800; letter-spacing: .02em; color: #0d6b43; background: #e7f6ee; border: 1px solid #bfe6d0; padding: 5px 11px; border-radius: var(--r-pill); text-transform: uppercase; } .stock-chip:not(.stock-chip--sayi)::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1a9e6f; } /* Rexton: siyah + sarı iki tonlu alt çizgi */ .brand-plate.brand-rexton::after{ background: linear-gradient(90deg, #111 55%, #F8E600 55%); } /* ========================================================================= EKİP — 4 odyolog kartı ========================================================================= */ .team-card{ text-align: center; } .team-card__photo{ height: 240px; border-radius: var(--r-md); overflow: hidden; margin-bottom: 18px; background: linear-gradient(160deg, #12547d, var(--navy)); display: grid; place-items: center; } .team-card__photo img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; color: var(--on-dark-2); font-size: var(--fs-sm); text-align: center; padding: 16px; } .team-card h3{ font-size: var(--fs-md); } .team-card p{ font-size: var(--fs-base); } @media (max-width: 980px) { .team-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .team-grid{ grid-template-columns: 1fr; } .team-card__photo{ height: 280px; } } /* ========================================================================= İŞİTME TESTİ — dikkat çeken nabızlı düğme ========================================================================= */ .pulse-btn{ position: relative; font-size: var(--fs-md); padding: 19px 40px; animation: btn-bob 2.6s ease-in-out infinite; } .pulse-btn::before{ content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--brand); opacity: 0; pointer-events: none; } @keyframes btn-bob { 0%, 100%{ transform: translateY(0); } 12%{ transform: translateY(-7px); } 24%{ transform: translateY(0); } } @keyframes btn-pulse { 0%{ transform: scale(1); opacity: .7; } 70%{ transform: scale(1.22); opacity: 0; } 100%{ opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pulse-btn{ animation: none; } .pulse-btn::before{ animation: none; } } /* ========================================================================= SON REVİZYON PAKETİ: slim sayfa başlığı, hizmet foto, vitrin, IG alev, rehber yardımcısı, sayfa içi çapa boşlukları ========================================================================= */ .pagehead--slim{ padding-block: clamp(26px, 4vw, 46px); } .pagehead--slim h1{ font-size: clamp(1.9rem, 3.6vw, 2.7rem); } .svc-photo{ height: 210px; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 18px; } .svc-photo img{ width: 100%; height: 100%; object-fit: cover; } .showcase-card{ display: flex; flex-direction: column; } .showcase-card h3{ font-size: var(--fs-base); } .showcase-card .card__link{ margin-top: auto; padding-top: 12px; } .showcase-card:hover{ transform: translateY(-4px); } @keyframes ig-shift { 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } } /* Sayfa içi çapalar yapışkan başlığın altına gelmesin */ #yardimci, #isitme-testi, #randevu{ scroll-margin-top: 96px; } /* ========================================================================= CİLA TURU: renkli sosyal ikonlar, kalın istatistikler, akış okları, ana sayfada sıkı bölüm ritmi ========================================================================= */ /* 1) Sosyal ikonlar — orijinal marka renkleri (daha sıcak) */ .topbar__social a{ width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; transition: transform .2s var(--ease); } .topbar__social a:hover{ transform: translateY(-2px); color: #fff; } .topbar__social svg{ width: 15px; height: 15px; } .topbar__social a, .footer__social a{ color: #fff; } .topbar__social a[aria-label="Instagram"], .footer__social a[aria-label="Instagram"]{ background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .topbar__social a[aria-label="Facebook"], .footer__social a[aria-label="Facebook"]{ background: #1877F2; } /* 24 Ağu 2026 (WCAG 1.4.11): beyaz ikon #25D366 üstünde 1,98:1 idi. .wa-float ile aynı çözüm — yeşil kalıyor, ikon koyulaşıyor: 6,91:1 */ .topbar__social a[aria-label="WhatsApp"], .footer__social a[aria-label="WhatsApp"]{ background: #25D366; color: #06351a; } .topbar__social a[aria-label="WhatsApp"] svg, .footer__social a[aria-label="WhatsApp"] svg{ color: #06351a; } .footer__social a[aria-label]:hover{ transform: translateY(-3px) scale(1.05); } @keyframes flow-bob { 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } } /* 2+7) Ana sayfada bölüm boşluklarını sıkılaştır */ .home .section{ padding-block: clamp(42px, 6vw, 84px); } .home .section--tight{ padding-block: clamp(28px, 4vw, 56px); } @keyframes see-nudge { 0%, 100%{ transform: translateX(0); } 50%{ transform: translateX(6px); } } /* ========================================================================= SON DÜZELTMELER: gerçek logo (balonsuz), çağrı odaklı iletişim, çerçeveli uydu harita, değer kartları, büyük ürün fotoları ========================================================================= */ /* 1) Logo: doğrudan, geniş, balonsuz */ .brand img.brand__logo{ width: auto; height: 54px; border-radius: 0; box-shadow: none; } @media (max-width: 560px) { .brand img.brand__logo{ width: auto; height: 46px; } } /* 2) Ürün fotoları daha büyük ve ferah */ .device-photo{ height: 230px; } .device-photo img{ padding: 22px; } .showcase-card .device-photo{ height: 240px; } /* 8) Çağrı odaklı iletişim düğmeleri */ .call-cta{ display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .call-cta__btn{ font-size: clamp(1.15rem, 2vw, 1.45rem); padding: 22px 44px; min-height: 68px; } .call-cta .btn--wa{ font-weight: 800; } /* 4) Çerçeveli harita + rozet */ .map-frame{ position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); border: 3px solid var(--navy); } .map-frame .map-embed{ display: block; border-radius: 0; box-shadow: none; } .map-frame__badge{ position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: #fff; font-weight: 800; font-size: var(--fs-sm); padding: 10px 16px; border-radius: var(--r-pill); box-shadow: var(--sh-md); } .map-frame__badge svg{ width: 16px; height: 16px; color: var(--cyan); } /* 5) Değer kartları: foto + renkli ikonlar */ .values-grid .card{ display: flex; flex-direction: column; } .values-grid .card__ic{ margin-top: -46px; position: relative; z-index: 2; border: 4px solid #fff; box-shadow: var(--sh-sm); } .values-grid .card:nth-child(1) .card__ic{ background: #e8f1fb; color: var(--brand); } .values-grid .card:nth-child(2) .card__ic{ background: #e7f6ee; color: #1a9e6f; } .values-grid .card:nth-child(3) .card__ic{ background: #fdeef0; color: #d9534f; } /* ========================================================================= ERİŞİLEBİLİRLİK — hareket azaltma (vertigo, işitme kliniği hastalarında yaygın) Tüm animasyon ve geçişleri tek karelik yapar. Dosyanın SONUNDA kalmalı. ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================= SON İSTEKLER: büyük logo, marka renkli yazılar, ortalı kartlar, bölümleri birbirine dikişleyen iplik ========================================================================= */ /* 1) Logo büyük ve net görünsün */ /* logo boyutu tek yerde: satır ~1082 */ /* 4) Güven şeridindeki marka adları kendi renklerinde */ .awards__logos span{ transition: none; } .awards__logos span:nth-child(1){ color: #AA1835; } /* ReSound */ .awards__logos span:nth-child(2){ color: #2e3033; font-weight: 900; } /* Widex — belirgin koyu */ .awards__logos span:nth-child(3){ color: #111; border-bottom: 3px solid #F8E600; padding-bottom: 2px; } /* Rexton */ .awards__logos span:nth-child(4){ color: #FF0400; } /* Signia */ .awards__logos span:hover{ color: inherit; opacity: .8; } .brandcard .check-list{ text-align: left; } /* ========================================================================= SAYFA RENK KİMLİKLERİ — her sayfa kendi ana tonuyla (harita=toprak vb.) Navy taban ve marka logoları sabit kalır; vurgu ve zemin tonu değişir. ========================================================================= */ /* Seçili anket şıkkının zemini. Markanın %14'ü sayfa kâğıdına karışmış hâli; her tema kendi tonunu aşağıda ezer. Dördünde de brand-700 yazı zeminde en az 5,6:1, kenarlık en az 3,7:1 — ikisi de AA üstü. */ :root{ --secim: #eaf2fb; } /* Çizgi rengi de temayla dönmeli. Dört tema kurulurken `--line` ve `--line-soft` ezilmemişti; sonuç, krem/leylak/nane zeminlerde SOĞUK MAVİ-GRİ (#bcc6d5) çerçevelerdi — kart, düğme ve çerez bandı dahil 118 kullanım yerinin hepsinde. Aşağıdaki tonlar her temanın kendi renk ailesinden, ama zemine göre kontrastları varsayılan temayla BİREBİR aynı tutuldu (line 1,72 · soft 1,54) — yani görünürlük değişmedi, yalnız renk sıcaklığı yerine oturdu. */ .theme-earth{ --secim:#e1d5c5; --white:#efe9dd; --brand:#8a5a33; --brand-600:#9c6a3f; --brand-700:#6d4527; --cyan:#d9a441; --page:#eae2d5; --wash:#ece4d7; --wash-2:#e2d7c6; --line:#c3b0a1; --line-soft:#cbbbae; --gri-50:#f5f0e9;} .theme-amber{ --secim:#e2d5be; --white:#f0e9da; --brand:#8a5a14; --brand-600:#c28626; --brand-700:#684410; --cyan:#e0b04b; --page:#ece5d5; --wash:#f0e8d8; --line:#c0b29d; --line-soft:#c9bcaa; --gri-50:#f7f2ea;} .theme-plum{ --secim:#ddd0da; --white:#ede6ec; --brand:#7c4a6b; --brand-600:#8d5779; --brand-700:#5f3752; --cyan:#c98bb0; --page:#e9e2e8; --wash:#ede4ea; --line:#c9aabe; --line-soft:#d0b5c7; --gri-50:#f5f0f3;} .theme-mint{ --secim:#c7ded4; --white:#e5eee9; --brand:#0f7a53; --brand-600:#17a06e; --brand-700:#0a5c3e; --cyan:#37c08e; --page:#e0eae5; --wash:#e3efe8; --line:#98bdb0; --line-soft:#a7c7bb; --gri-50:#f0f6f2;} /* MARKA SAYFALARI — her marka kendi rengiyle açılıyor. Doruk'un isteği: "cihaz sayfalarımızda direkt o markanın renklerini kullansan". Renkler uydurulmadı; depodaki KENDİ logo dosyalarımızdan örneklendi: ReSound #aa1835 · Signia #ff0400 · Rexton #f8e600 · Widex #0d0d0d (Widex logosu siyah-beyaz, o yüzden teması nötr grafit.) NASIL TÜRETİLDİ — göze göre seçilmedi, ölçüldü. Varsayılan temanın her değişkeninin bağıl parlaklığı çıkarıldı, sonra her marka için renk ve doygunluk markanınki olacak şekilde AYNI parlaklığı tutturan açıklık ikili aramayla bulundu. Sonuç: kontrast oranları varsayılanla birebir aynı, yani erişilebilirlik hedefi (0 ihlal) rengi değiştirmekle bozulamaz. Örnek: beyaz yazı --brand üzerinde her temada 5,51:1, --brand-700 açık yüzeyde 6,38:1. Rexton'ın sarısı --cyan'a KONMADI, denendi ve geri alındı. Ölçüm şunu gösterdi: --cyan başlıktaki kendi logomuzun "CİHAZLARI" yazısını da boyuyor (6,80:1 -> 12,99:1, yani kontrast iyileşiyor ama renk yanlış). Kendi markamızın kelime işaretini başka bir üreticinin rengine çevirmek doğru değil. Sarı, ait olduğu yere — Rexton'ın siyah marka bandına — aşağıda ayrıca konuyor. */ .theme-resound{ --secim:#f7eff1; --white:#f0e9eb; --brand:#c92153; --brand-600:#dd2e62; --brand-700:#a11a43; --cyan:#e48ba6; --page:#e6d9dd; --wash:#ebe0e3; --wash-2:#e1d3d7; --line:#d6bfc6; --line-soft:#ddccd1; --gri-50:#f5eef0;} .theme-signia{ --secim:#f6f0ef; --white:#f0e9e8; --brand:#cb2519; --brand-600:#e32b1e; --brand-700:#a31e14; --cyan:#e68d87; --page:#e6dad9; --wash:#ebe0df; --wash-2:#e1d3d2; --line:#d6c0bf; --line-soft:#ddcdcc; --gri-50:#f4eeee;} .theme-rexton{ --secim:#f3f1e9; --white:#ecebe3; --brand:#7a681d; --brand-600:#8a7520; --brand-700:#615317; --cyan:#c6a110; --page:#e0dcd0; --wash:#e5e3d7; --wash-2:#dad6c8; --line:#cbc5ae; --line-soft:#d5d1c0; --gri-50:#f1f0e9;} .theme-widex{ --secim:#eef2f6; --white:#e7ebef; --brand:#5f6a75; --brand-600:#6c7884; --brand-700:#4c545d; --cyan:#9aa7b3; --page:#d6dde4; --wash:#dde3e9; --wash-2:#cfd7df; --line:#bac7d3; --line-soft:#c8d2db; --gri-50:#ecf0f4;} /* Rexton'ın gerçek sarısı bandın içinde; kural aşağıda, beyaz-etiket bloğunun yanında duruyor (aynı özgüllükte iki kuralı ayrı yerlerde tutmak sırayla kaybettiriyordu — bir kez oldu). */ /* ========================================================================= ÜRÜN FOTO HİZALAMASI — tüm cihaz kartlarında tek tip, kırpılmasız görünüm (yüksek özgüllük: eski önbellek/kural çakışmalarına karşı kesin davranış) ========================================================================= */ .devicecard .device-photo{ height: 260px; background: #fff; } .devicecard .device-photo, .showcase-card .device-photo{ display: flex; align-items: center; justify-content: center; } .devicecard .device-photo img, .showcase-card .device-photo img{ width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; object-position: center; padding: 14px; } /* ========================================================================= GRİ YÜZEY SİSTEMİ — beyaz yerine maviyle uyumlu soğuk gri. İstisna: ürün fotoğrafı kutuları ve marka logo plakaları SAF BEYAZ kalır (görsellerin kendi zemini beyaz; gri kutuda beyaz dikdörtgen görünürdü). ========================================================================= */ /* .brand bu listeden cikarildi: marka plakasi artik logonun kendi tonunda. */ .header, .nav__cta, .nav__toggle, .drawer__panel{ background: var(--white); } .opt label, .field input, .field select, .field textarea, .info-tile, .tech-chips span, .loccard, .card, .footer-brands__row a{ background: var(--white); } .field input, .field select, .field textarea{ background: #edf1f7; } .device-photo, .devicecard .device-photo, .showcase-card .device-photo, .brand-plate, .range-banner, .device-swatch img{ background: #ffffff; } .brand-plate.brand-rexton{ background: #ffffff; } /* ========================================================================= MARKA KARTLARI — sade slogan + tek cümle, ortalanmış ========================================================================= */ .brandcard{ text-align: center; align-items: center; } .brandcard .card__meta{ justify-content: center; } .brandcard .card__link{ align-self: center; } .brand-desc{ color: var(--body); max-width: 44ch; margin: 0 auto; } .brandcard .brand-plate{ width: 100%; } /* ========================================================================= MARKA SAYFASI TANITIM BÖLÜMÜ (brand-hero) — sakin başlık, dengeli hizalama ========================================================================= */ .brand-hero .section-title{ text-transform: none; font-weight: 700; font-size: clamp(1.7rem, 2.9vw, 2.5rem); letter-spacing: -.01em; line-height: 1.2; } .brand-hero__plate{ min-height: 340px; } .brand-hero__plate::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,27,42,.05), rgba(13,27,42,.42)); z-index: 1; } /* ========================================================================= ŞUBE KARTLARI — adres kalktı; tüm içerik ortalanır ========================================================================= */ .loccard{ text-align: center; align-items: center; } .loccard__top{ flex-direction: column; text-align: center; gap: 10px; } .loccard__actions{ justify-content: center; width: 100%; } .loccard__actions .btn{ flex: 1; justify-content: center; } /* "14 Aktif Şube" vurgu rozeti */ .count-pill{ display: inline-flex; align-items: center; gap: 7px; background: var(--brand); color: #fff; font-weight: 800; letter-spacing: .08em; padding: 5px 14px; border-radius: var(--r-pill); box-shadow: 0 5px 16px rgba(0,0,0,.16); } .count-pill::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.28); } /* İstanbul paneli: 3 + 2 dizilim — alttaki iki kart üsttekilerle çapraz (ortalanmış) */ .loc-panel[data-loc-panel="istanbul"] .grid--3{ display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; } .loc-panel[data-loc-panel="istanbul"] .grid--3 > *{ width: calc((100% - 52px) / 3); } @media (max-width: 900px) { .loc-panel[data-loc-panel="istanbul"] .grid--3 > *{ width: calc((100% - 26px) / 2); } } @media (max-width: 560px) { .loc-panel[data-loc-panel="istanbul"] .grid--3 > *{ width: 100%; } } /* Üst bar dengesi: kayan yazı yumuşak biter, sağ küme eşit aralıklarla ayrılır */ .topbar__inner--ticker{ gap: 28px; } .topbar__inner--ticker .ticker{ -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 46px), transparent); } .topbar__right{ gap: 0; } .topbar__right .topbar__item{ padding-right: 16px; } .topbar__social{ display: inline-flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.16); } /* Ana sayfa şehir kartları (marka kartı düzeninde) */ .citycard{ text-decoration: none; } .citycard__plate{ display: flex; align-items: center; justify-content: center; gap: 12px; height: 118px; } .citycard__plate svg{ width: 30px; height: 30px; color: var(--brand); } .citycard__plate strong{ font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--navy); font-weight: 700; } .citycard .card__meta span{ display: inline-flex; align-items: center; } /* Ürün fotoğrafları: görselin kendi beyaz zemini kutu beyazıyla kaynaşır */ .device-photo img{ mix-blend-mode: multiply; } /* Sayfa başı rozeti başlığa yapışmasın */ .pagehead .eyebrow{ margin-bottom: 16px; } .count-pill{ margin-right: 10px; } .footer__hours{ display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--on-dark-2); font-size: var(--fs-sm); } /* "Tüm şubelerimiz SGK anlaşmalıdır" bildirimi */ /* Seçici p.sgk-note (0,1,1) — düz .sgk-note (0,1,0) idi ve 429. satırdaki .pagehead p onu eziyordu: şube sayfalarında not yeşil değil gri çıkıyordu. 14 kullanımın hepsi

, o yüzden etiket seçicisi güvenli. */ p.sgk-note{ display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 10px 18px; border-radius: var(--r-pill); background: rgba(22,163,74,.12); border: 1px solid rgba(22,163,74,.35); color: #0b5f2c; font-weight: 700; /* 24 Ağu 2026: #15803d 4,39:1 idi, eşik 4,5. Şimdi 6,84:1 */ font-size: var(--fs-base); } .sgk-note svg{ width: 18px; height: 18px; flex: none; } @keyframes eqwave { from{ transform: scaleY(.18); } to{ transform: scaleY(1); } } /* Şehir kartı: gerçek şube fotoğrafı + okunur şehir adı */ .citycard__plate--photo{ position: relative; height: 190px; background-size: cover; overflow: hidden; } .citycard__plate--photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,25,42,.14), rgba(10,25,42,.5)); } .citycard__plate--photo strong{ position: relative; z-index: 2; color: #fff; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; text-shadow: 0 2px 16px rgba(0,0,0,.55); } .citycard:hover .citycard__plate--photo{ filter: brightness(1.06); transition: filter .3s; } /* SGK güven şeridi — beyaz zemin zorunlu (SGK logosu koyu zeminde okunmaz) */ .sgk-serit{ background: #fff; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: clamp(26px, 4vw, 40px) 0; text-align: center; } .sgk-serit__logolar{ display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 44px); flex-wrap: wrap; } .sgk-serit__logolar img{ height: 44px; width: auto; object-fit: contain; } .sgk-serit__sgk{ height: 58px !important; } .sgk-serit__rx{ height: 52px !important; } .sgk-serit__logolar .logo--signia{ height: 54px; } .sgk-serit__logolar .logo--widex{ height: 40px; } /* Bu iki logo eskiden alt metnine göre boyutlanıyordu (img[alt*="Signia"]). Alt metni düzeltilirse logo boyutu sessizce bozulurdu — görünüm erişilebilirlik metnine bağlı olmamalı. 20 Ağu 2026: kendi sınıflarına taşındı. */ .sgk-serit__ayrac{ width: 1px; height: 42px; background: var(--line); flex: none; } .sgk-serit__satir{ margin-top: 20px; font-size: var(--fs-base); font-weight: 600; color: var(--ink); } /* SGK logo çipi: logo yalnız açık zeminde okunur — beyaz plaka */ .sgk-chip{ display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; padding: 8px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.12); } .sgk-chip img{ display: block; height: 46px; width: auto; } @media (max-width: 640px) { .sgk-serit__logolar{ gap: 18px; } .sgk-serit__logolar img{ height: 30px; } .sgk-serit__sgk{ height: 34px !important; } .sgk-serit__rx{ height: 38px !important; } .sgk-serit__logolar .logo--signia{ height: 38px; } .sgk-serit__logolar .logo--widex{ height: 28px; } .sgk-serit__ayrac{ display: none; } .sgk-serit__satir{ font-size: var(--fs-base); } } /* Instagram kartları: üstüne gelince bozuk açılan pencere yok; tıklayınca gönderi açılır */ /* Kalıcı SGK rozeti — her sayfada sol altta, hep göz önünde */ .sgk-float-yuva{ position: fixed; left: 18px; bottom: 18px; z-index: 90; transition: bottom .3s; } .sgk-float{ position: static; display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: var(--r-pill); background-color: #0a5f2c; background-image: linear-gradient(120deg, #12813C, #0a5f2c); color: #fff; font-weight: 700; font-size: var(--fs-base); box-shadow: 0 12px 30px rgba(13,122,56,.4); text-decoration: none; } .sgk-float svg{ width: 19px; height: 19px; flex: none; } .sgk-float:hover{ box-shadow: 0 14px 30px rgba(13,122,56,.45); } .sgk-float{ transition: opacity .3s, transform .3s, visibility .3s; } .sgk-float.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); } /* Gerçek şube fotoğrafları */ .sube-fotolar{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; } .sube-foto{ margin: 0; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--white); } .sube-foto img{ width: 100%; height: 175px; object-fit: cover; display: block; } .sube-foto figcaption{ padding: 9px 12px; font-weight: 700; font-size: var(--fs-sm); color: var(--ink); text-align: center; } /* sağdaki stand kadraj dışı */ /* SGK tutar tablosu */ .sgk-tablo{ width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .sgk-tablo th, .sgk-tablo td{ padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); } .sgk-tablo th{ font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .sgk-tablo td b{ color: var(--brand); font-size: var(--fs-md); } .sgk-tablo tr:last-child td{ border-bottom: none; } /* Şube kartı arka planı: şubenin fotoğrafı hafifçe görünür */ /* Şube kartında fotoğraf (13 Ağu 2026) Önce fotoğraf kartın arka planındaydı ve üzerinde .88-.94 beyaz katman vardı: karenin ancak %6-12'si görünüyordu, yani fotoğraf orada olduğu hâlde yok gibiydi. Şimdi kartın üstünde gerçek bir bant; metin altta beyaz zeminde, kontrast tam. */ /* Şube kartı fotoğrafı (16 Ağu 2026) — Doruk: "fotoğraflar çok premium durmuyor, hafif transparan arka plana koymak daha iyi." Fotoğraf artık üstte bant değil; kartın arkasında soluk bir doku. Metin doğrudan fotoğrafın üzerine gelmiyor: üstüne kartın kendi zemininden bir örtü konuyor, böylece kontrast AA'da kalıyor. */ .loccard--foto{ position: relative; overflow: hidden; isolation: isolate; } /* Fotoğraf %13'ten %30'a çıkarıldı (24 Ağu 2026). Doruk iki kez "arka planlar çok silik" dedi; haklıydı — kare hem %13 opaklıkta hem de üstündeki beyaz perdenin altındaydı, yani iki kat bastırılmıştı. Opaklığın tavanını kontrast belirledi. En kötü durum: siyah bir fotoğraf pikselinin kartın üst kısmına (perdenin en zayıf olduğu yer, %55) denk gelmesi. O noktada %30 opaklıkta zemin (199,203,209) oluyor; metinler bu zemine göre seçildi. %38'e çıkarılsaydı telefon 4.3:1'e düşüp AA'yı kaybederdi. */ .loccard__foto{ position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .30; filter: saturate(.82); } .loccard--foto::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.55), var(--white) 78%); } .loccard--foto:hover{ box-shadow: var(--sh-md); } /* Hover'da opaklık artırılmıyor: %38 telefonu 4.3:1'e düşürüyordu. Geri bildirimi kartın gölgesi veriyor. */ @media (prefers-reduced-motion: no-preference){ .loccard__foto{ transition: opacity .25s var(--ease); } } /* Üst bar telefon numarası: kalın ve beyaz, net okunur */ .topbar__right .topbar__item{ font-weight: 700; color: #fff; font-size: var(--fs-base); } @media (max-width: 900px) { .sube-fotolar{ grid-template-columns: 1fr 1fr; } } /* ── Fotoğraf büyütme katmanı — dış kütüphane yok ── */ .foto-kat{ position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(6, 24, 34, .93); padding: 24px; opacity: 0; transition: opacity .22s var(--ease); } .foto-kat.is-acik{ opacity: 1; } .foto-kat img{ max-width: 100%; max-height: calc(100vh - 150px); border-radius: var(--r-sm); display: block; } .foto-kat__yazi{ position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: #fff; font-size: var(--fs-base); padding: 0 70px; } .foto-kat button{ position: absolute; min-width: 52px; min-height: 52px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255, 255, 255, .14); color: #fff; font-size: var(--fs-xl); line-height: 1; display: grid; place-items: center; } .foto-kat button:hover{ background: rgba(255, 255, 255, .26); } .foto-kat button:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; } .foto-kat__kapat{ top: 20px; right: 20px; } .foto-kat__onceki{ left: 16px; top: 50%; transform: translateY(-50%); } .foto-kat__sonraki{ right: 16px; top: 50%; transform: translateY(-50%); } @media (prefers-reduced-motion: reduce) { .foto-kat{ transition: none; } } @media (max-width: 640px) { .sgk-float-yuva{ left: 10px; bottom: 10px; } .sgk-float{ font-size: var(--fs-sm); padding: 9px 13px; } /* Şerit 296 px sabit genişlikteydi; WhatsApp düğmesi sağdan ~80 px yer kapladığı için 385 px altındaki ekranlarda üst üste biniyorlardı. Artık kalan genişliğe göre daralıyor. */ .sgk-float-yuva{ max-width: calc(100vw - 108px); } .sgk-float{ width: 100%; justify-content: center; } } /* Ses dalgası konsepti — bölüm ayraçları (statik dalga formu) */ .wave-sep{ display: flex; justify-content: center; padding: clamp(8px,1.5vw,18px) 0; } .wave-sep svg{ width: min(520px, 74%); height: 52px; fill: var(--brand); opacity: .3; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } /* Marka kartı açıklamaları: kalın ve koyu, rahat okunur */ /* Yazı tipi ağırlığı budandı (19 Ağu 2026), tarayıcıyla sayarak: Bricolage 700 -> 8 başlıkta, 800 -> yalnız 2 öğede. Jakarta 500 -> 1 yerde. Az kullanılan ikisi atıldı, kullananları komşu ağırlığa yaslandı. Dört dosya, 151 KB: her ziyaretçi bunu iki öğe için ödüyordu. */ .brandcard p, .brand-desc{ font-weight: 400; color: var(--body); } /* Üst barda WhatsApp'ın yanında küçük bayraklar (Küresel Standartlar) */ .topbar__flags{ display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.16); } .topbar__flags svg{ height: 13px; width: auto; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); } @media (max-width: 1100px) { .topbar__flags{ display: none; } } @keyframes label-bounce { 0%, 100%{ transform: translateY(0); } 12%{ transform: translateY(-6px); } 24%{ transform: translateY(0); } 32%{ transform: translateY(-3px); } 42%, 100%{ transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { } /* Başlıklarda karakterli display yazı tipi (Bricolage Grotesque) */ h1, h2, h3, h4, .hero__title, .section-title, .pagehead h1, .band h2, .stat b, .brand-slogan, .brand__text b, .footer__brand b{ font-family: var(--font-display); } /* ========================================================================= ALT DAVET ŞERİDİ — içeriği kapatmayan, alttan gelen davet (tam ekran pop-up YOK: yaşlı kitleyi kaçırır + Google mobil pop-up cezası) 25 sn sonra VEYA sayfanın %50'si kaydırılınca açılır; kapatılırsa 7 gün gelmez. ========================================================================= */ #dv-serit{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; background: var(--navy-900); color: #fff; border-top: 3px solid var(--brand); box-shadow: 0 -4px 24px rgba(0,0,0,.18); transform: translateY(110%); transition: transform .35s var(--ease); } #dv-serit.acik{ transform: translateY(0); } #dv-serit .ic{ max-width: 1180px; margin: 0 auto; padding: 14px 64px 14px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } #dv-serit .metin{ flex: 1 1 340px; min-width: 240px; } #dv-serit .baslik{ font-size: var(--fs-base); font-weight: 700; line-height: 1.35; margin: 0; color: #fff; } #dv-serit .alt{ font-size: var(--fs-sm); opacity: .85; margin: 3px 0 0; } #dv-serit .aksiyon{ display: flex; gap: 10px; flex-wrap: wrap; } #dv-serit a.btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 10px; font-size: var(--fs-base); font-weight: 700; text-decoration: none; white-space: nowrap; transition: filter .15s var(--ease); } #dv-serit a.btn:hover{ filter: brightness(1.12); } #dv-serit a.btn:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; } #dv-serit .b1{ background: var(--brand); color: #fff; } #dv-serit .b2{ background: #25D366; color: #0b3d20; } #dv-serit .kapat{ position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: var(--fs-2xl); line-height: 1; cursor: pointer; } #dv-serit .kapat:hover{ background: rgba(255,255,255,.14); } #dv-serit .kapat:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; } body.dv-serit-acik{ padding-bottom: calc(var(--serit-h, 104px) + 10px); } /* şerit açıkken mevcut sabit düğmeler üstüne binmesin */ body.dv-serit-acik .wa-float{ bottom: calc(var(--serit-h, 104px) + 22px); } body.dv-serit-acik .sgk-float-yuva{ bottom: calc(var(--serit-h, 104px) + 18px); } @media (max-width: 640px) { #dv-serit .ic{ padding: 14px 56px 14px 16px; gap: 12px; } #dv-serit .baslik{ font-size: var(--fs-base); } #dv-serit .alt{ display: none; } #dv-serit .aksiyon{ width: 100%; } #dv-serit a.btn{ flex: 1; padding: 0 12px; } } @media (prefers-reduced-motion: reduce) { #dv-serit{ transition: none; } } /* Şube sayfası: diğer şubeler bağlantı listesi */ .sube-linkler{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; } .sube-linkler a{ display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--line); font-weight: 700; font-size: var(--fs-base); color: var(--ink); transition: border-color .2s, transform .2s; } .sube-linkler a:hover{ border-color: var(--brand); color: var(--brand); transform: translateY(-2px); } /* ========================================================================= RENK ŞERİTLERİ — veri kaynağı: /assets/data/renkler.json (tek kaynak). Hex kodları üreticinin resmi kodları değildir; görsel temsil içindir. ========================================================================= */ .renkler{ margin-top: 14px; } .renk-sayi{ display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); margin-bottom: 9px; text-transform: none; letter-spacing: 0; } .renk-liste{ display: flex; gap: 9px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .renk-liste li{ position: relative; display: block; line-height: 0; } .renk-nokta{ display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 1px 3px rgba(10,25,42,.18); transition: transform .18s var(--ease); } .renk-nokta[data-acik]{ border: 1px solid #DDD; } .renk-liste li:hover .renk-nokta, .renk-liste li:focus-within .renk-nokta{ transform: scale(1.18); } /* Renk adı balonu — saf CSS, kütüphane yok */ .renk-liste li::after{ content: attr(data-ad); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--navy-900); color: #fff; font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; white-space: nowrap; padding: 7px 11px; border-radius: 8px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), transform .18s var(--ease); z-index: 5; box-shadow: 0 6px 18px rgba(10,25,42,.28); } .renk-liste li::before{ content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--navy-900); opacity: 0; visibility: hidden; transition: opacity .18s var(--ease); z-index: 5; } .renk-liste li:hover::after, .renk-liste li:hover::before, .renk-liste li:focus-within::after, .renk-liste li:focus-within::before{ opacity: 1; visibility: visible; } .renk-liste li:hover::after, .renk-liste li:focus-within::after{ transform: translateX(-50%) translateY(0); } .renk-not{ display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 10px; text-transform: none; letter-spacing: 0; line-height: 1.5; } @media (max-width: 640px) { .renk-nokta{ width: 24px; height: 24px; } .renk-liste li::after{ font-size: var(--fs-xs); } } /* ========================================================================= SGK KATKI HESAPLAYICI — saf JS, kütüphane yok. Tutarlar sgk.html tablosuyla aynı kaynaktan (Ocak 2026 SUT); ikisini birlikte güncelleyin. ========================================================================= */ .sgk-hesap .hesap-grup{ border: 0; padding: 0; margin: 0 0 18px; } .sgk-hesap legend{ font-weight: 700; color: var(--ink); font-size: var(--fs-base); margin-bottom: 10px; padding: 0; } .hesap-secenekler{ display: flex; flex-wrap: wrap; gap: 10px; } .hesap-secenekler label{ display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); cursor: pointer; font-size: var(--fs-base); font-weight: 600; color: var(--body); transition: border-color .2s var(--ease), color .2s var(--ease); } .hesap-secenekler input{ width: 20px; height: 20px; accent-color: var(--brand); flex: none; } .hesap-secenekler label:hover{ border-color: var(--brand); } .hesap-secenekler label:has(input:checked){ border-color: var(--brand); color: var(--ink); background: rgba(11,110,168,.06); } .hesap-secenekler label:focus-within{ outline: 3px solid var(--brand); outline-offset: 2px; } .hesap-sonuc{ display: block; margin-top: 22px; padding: 22px 24px; border-radius: var(--r-md); background: linear-gradient(140deg, var(--navy), var(--navy-900)); color: #fff; } .hesap-etiket{ display: block; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: #A9E6F7; } .hesap-tutar{ display: block; font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 3rem); font-weight: 800; line-height: 1.1; margin: 6px 0 10px; background: linear-gradient(120deg, #7EE7FF 10%, #fff 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hesap-detay{ display: block; font-size: var(--fs-sm); color: rgba(255,255,255,.82); line-height: 1.5; } .hesap-detay + .hesap-detay{ margin-top: 6px; } @media (max-width: 560px) { .hesap-secenekler label{ width: 100%; } } /* Şube arama kutusu + dB skalası */ .sube-ara{ max-width: 620px; margin: 0 auto 30px; text-align: center; } .sube-ara label{ display: block; font-weight: 700; color: var(--ink); margin-bottom: 10px; font-size: var(--fs-base); } .sube-ara__kutu{ display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 18px; } .sube-ara__kutu:focus-within{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11,110,168,.14); } .sube-ara__kutu svg{ width: 20px; height: 20px; color: var(--muted); flex: none; } .sube-ara input{ flex: 1; min-height: 48px; border: 0; background: transparent; font: inherit; font-size: var(--fs-base); color: var(--ink); outline: none; } .sube-ara__sonuc{ margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); min-height: 1.4em; } /* arama sırasında eşleşme olan şehir paneli görünür kalsın */ .loc-panel.ara-aktif{ display: block !important; } .db-skala{ margin-top: 18px; } .db-cubuk{ display: flex; border-radius: var(--r-sm); overflow: hidden; height: 44px; } .db-dilim{ flex: 1; background: var(--brand); opacity: var(--o); position: relative; } .db-dilim::after{ content: attr(data-db) " dB"; position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); } .db-etiketler{ display: flex; margin-top: 7px; } .db-etiketler span{ flex: 1; text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--body); } @media (max-width: 640px) { .db-dilim::after{ font-size: var(--fs-2xs); } .db-etiketler span{ font-size: var(--fs-2xs); } } /* 390px'te çubuk 300px, altı dilime bölününce her biri 50px kalıyor. "26-40 dB" 12px puntoda 58px istiyor: beş dilimde metin kutusunu taşıyordu (ölçüldü). Dar ekranda birim eki düşüyor, yalnız aralık kalıyor — "26-40" 40px, rahat sığıyor. Birimi çubuğun altındaki satır söylüyor, üstteki paragraf da "kaç desibelden" diye başlıyor. */ /* Temel: birim satırı yalnız dar ekranda görünüyor, geniş ekranda dB zaten her dilimin içinde yazıyor. Kural medya sorgusundan ÖNCE gelmeli — sonra yazınca aynı özgüllükle onu eziyordu. */ .db-birim{ display: none; } @media (max-width: 560px){ .db-dilim::after{ content: attr(data-db); } .db-birim{ display: block; text-align: right; font-size: var(--fs-2xs); color: var(--muted); font-weight: 700; margin-top: 4px; } } /* ========================================================================= 360° PANORAMA — kütüphanesiz WebGL (assets/js/pano.js, ~5 KB). Görüntü YALNIZ kullanıcı "Turu başlat" deyince iner; sayfa açılışına yük yok. Panorama fotoğrafı equirectangular (2:1) olmalı. ========================================================================= */ /* ---- 360° tur kontrolleri -------------------------------------------- Hedef kitle 60+ olduğu için hepsi en az 44x44 px; hepsinde aria-label var. */ .pano__kontrol{ position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .pano__dugme{ min-width: 44px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.5); border-radius: var(--r-md); background: rgba(10,42,61,.78); color: #fff; cursor: pointer; font-size: var(--fs-sm); font-weight: 700; font-family: inherit; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .pano__dugme svg{ width: 22px; height: 22px; } .pano__dugme:hover{ background: rgba(10,42,61,.92); } .pano__dugme:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; } .pano__dugme--don.is-acik{ background: var(--brand); border-color: #fff; } .pano__dugme--kapat{ background: rgba(120,20,20,.82); } .pano__dugme--kapat:hover{ background: rgba(150,25,25,.95); } .pano__uyari{ color: #ffd9d9; font-size: var(--fs-base); margin-top: 10px; } @media (max-width: 560px) { .pano__kontrol{ left: 12px; justify-content: center; } } /* ---- Harita kapagi (facade) ------------------------------------------ Gercek iframe ancak "Haritada Ac" butonuna basilinca yuklenir. */ .harita-kapak{ position: relative; display: grid; place-items: center; gap: 14px; text-align: center; padding: 40px 24px; min-height: 240px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--wash); box-shadow: var(--sh-sm); } .harita-kapak__ad{ font-weight: 700; font-size: var(--fs-md); color: var(--ink); } .harita-kapak .btn{ min-height: 44px; } .harita--acik{ padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; } .pano{ position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--wash-2); aspect-ratio: 16 / 9; min-height: 260px; } .pano__tuval{ display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; } .pano__tuval.pano--tutuluyor{ cursor: grabbing; } .pano__tuval:focus-visible{ outline: 3px solid var(--brand); outline-offset: -3px; } .pano__kapak{ position: absolute; inset: 0; display: grid; place-items: center; gap: 14px; align-content: center; text-align: center; padding: 24px; /* Düz renk taban: degrade çizilemezse (ya da kontrast motoru degradeyi çözemezse) beyaz yazı açık zemin üzerinde okunmaz kalıyordu. */ background-color: var(--navy); background-image: linear-gradient(160deg, var(--navy), var(--navy-900)); color: #fff; } .pano__kapak p{ color: rgba(255,255,255,.86); max-width: 42ch; font-size: var(--fs-base); } /* strong küresel kuraldan koyu ink rengini alıyordu; lacivert kapak üzerinde kontrast 1.02:1'e düşüyor ve başlık okunmuyordu. */ .pano__kapak strong, .pano__kapak b{ color: #fff; } .pano__ipucu{ position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(6,32,47,.82); color: #fff; font-size: var(--fs-sm); font-weight: 600; padding: 8px 16px; border-radius: var(--r-pill); pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); } .pano--hazir .pano__ipucu{ opacity: 1; } .pano--hazir:hover .pano__ipucu, .pano--hazir:focus-within .pano__ipucu{ opacity: 0; } .pano__hata{ padding: 28px; text-align: center; color: var(--body); } @media (prefers-reduced-motion: reduce) { .pano__ipucu{ transition: none; } } /* ── Dokunma hedefi tabanı: WCAG 2.5.8 asgari 44×44. Kitle 60+ ve titreyen elle yanlış tıklama gerçek bir sorun. ── */ .card__link{ min-height: 44px; } /* Alt bilgideki bağlantılar 29 px yüksekliğindeydi; alt alta dizili oldukları için yanlış tıklama en çok burada oluyordu. Yazı boyutu değişmiyor, yalnızca dokunma alanı büyüyor. */ .footer__links a, .footer__contact a{ display: inline-flex; align-items: center; min-height: 44px; } .footer__links{ gap: 2px; } .footer__social a{ min-width: 44px; min-height: 44px; } /* Merkez kareleri — tools/galeri.py yerleştirir, dosya yoksa hiç basılmaz. */ .merkez-foto{ margin: 0 auto 40px; max-width: 1000px; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-md); } .merkez-foto img{ width: 100%; height: auto; display: block; } /* "En Yakın Şube" — Oticon/Signia'da olduğu gibi şube bulucu header'da sabit. 14 şubesi olan bir firmada bu, tek CTA'lı header'dan daha çok işe yarıyor. */ .btn--sube{ gap: 7px; } .btn--sube svg{ width: 17px; height: 17px; flex: none; } @media (max-width: 1180px) { .nav__cta .btn--sube{ display: none; } } /* ── Hizmetler açılır menüsü ────────────────────────────────────────────── Tıklamayla açılır, üzerine gelince değil: kitle 60+ ve fareyle üzerinde durmayı gerektiren menüler bu yaşta kayboluyor. */ .nav__alt{ position: relative; display: flex; } .nav__alt-dugme{ display: inline-flex; align-items: center; gap: 4px; padding: 12px 7px; min-height: 44px; font: inherit; font-weight: 600; font-size: var(--fs-base); color: var(--body); background: none; border: 0; border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; transition: color .2s; } .nav__alt-dugme:hover{ color: var(--ink); } .nav__alt-dugme.is-active{ color: var(--brand); } .nav__alt-dugme:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } .nav__ok{ width: 15px; height: 15px; flex: none; transition: transform .2s var(--ease); } .nav__alt-dugme[aria-expanded="true"] .nav__ok{ transform: rotate(180deg); } .nav__alt-menu{ position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 60; min-width: 232px; padding: 8px; display: flex; flex-direction: column; gap: 2px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-md); } .nav__alt-menu[hidden]{ display: none; } .nav__alt-menu a{ padding: 12px 14px; min-height: 44px; display: flex; align-items: center; border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-base); color: var(--body); white-space: nowrap; } .nav__alt-menu a:hover{ background: var(--wash); color: var(--ink); } .nav__alt-menu a:focus-visible{ outline: 2px solid var(--brand); outline-offset: -2px; } /* Mobil çekmecede girintili alt maddeler */ .dlink--alt{ padding-left: 34px; font-size: var(--fs-base); opacity: .92; } .dlink--alt::before{ content: "—"; margin-right: 8px; color: var(--brand); } @media (max-width: 1399px) { .nav__alt{ display: none; } } /* ── Site içi arama ─────────────────────────────────────────────────────── Dizin (assets/data/arama.json) yalnızca arama açılınca indiriliyor; sayfa yüklenirken hiçbir maliyeti yok. Dış kütüphane kullanılmadı. */ .topbar__ara{ background: none; border: 0; font: inherit; cursor: pointer; gap: 7px; } .topbar__ara svg{ width: 16px; height: 16px; } .dlink--ara{ display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; } .dlink--ara svg{ width: 19px; height: 19px; flex: none; color: var(--brand); } .arama{ position: fixed; inset: 0; z-index: 130; display: flex; justify-content: center; align-items: flex-start; padding: clamp(16px, 6vh, 90px) 16px 16px; background: rgba(10, 36, 48, .55); /* -webkit- öneki iOS Safari için gerekli; sitedeki diğer dört backdrop-filter'da var, burada unutulmuştu (27 Ağu 2026). */ -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .arama[hidden]{ display: none; } .arama__kutu{ width: min(660px, 100%); max-height: 82vh; display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-lg, 0 24px 60px -12px rgba(10,36,48,.4)); padding: 20px; } .arama__ust{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .arama__etiket{ font-weight: 800; font-size: var(--fs-md); color: var(--ink); } .arama__kapat{ margin-left: auto; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--body); font-size: var(--fs-md); cursor: pointer; } .arama__kapat:hover{ color: var(--ink); border-color: var(--brand); } .arama__giris{ width: 100%; min-height: 56px; padding: 14px 18px; font: inherit; font-size: var(--fs-md); border: 2px solid var(--line); border-radius: var(--r-md); background: var(--white); color: var(--ink); } .arama__giris:focus{ outline: none; border-color: var(--brand); } .arama__durum{ margin: 12px 2px 0; font-size: var(--fs-sm); color: var(--muted); min-height: 1.4em; } .arama__sonuc{ list-style: none; margin: 8px 0 0; padding: 0; overflow-y: auto; } .arama__sonuc li a{ display: block; padding: 14px 16px; border-radius: var(--r-sm); text-decoration: none !important; } .arama__sonuc a:hover, .arama__sonuc a:focus-visible{ background: var(--wash); outline: none; } .arama__sonuc a.is-secili{ background: var(--wash); box-shadow: inset 3px 0 0 var(--brand); } .arama__sonuc b{ display: block; color: var(--ink); font-size: var(--fs-base); } .arama__sonuc span{ display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-sm); } .arama__kapat:focus-visible, .arama__sonuc a:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; } @media (max-width: 640px) { .arama__kutu{ padding: 16px; max-height: 88vh; } } @media (prefers-reduced-motion: reduce) { .arama{ backdrop-filter: none; } } /* ── Duyuru bandı — yalnız ana sayfada, kapatılabilir ──────────────────── Sabit DEĞİL: sayfayla birlikte yukarı kayar. Böylece ekranı kalıcı olarak yemiyor ve Google'ın "araya giren katman" tanımına girmiyor. */ .duyuru{ background: linear-gradient(100deg, var(--navy), var(--brand)); color: #fff; } .duyuru[hidden]{ display: none; } /* 27 Ağu 2026 — duyuru artık HTML'de GÖRÜNÜR başlıyor. Önce `hidden` ile başlıyor ve main.js sonradan açıyordu. Ölçünce çıktı: yavaş telefonda bant 3,3 saniyede beliriyor ve `main`'i 91px aşağı itiyordu — ana sayfadaki kalan CLS'in tamamı (0,0903) buydu. Kapatma kararı artık head'deki satır içi betikte, ilk boyamadan ÖNCE okunuyor: kapatmış olan ziyaretçi bandı hiç görmüyor, kapatmamış olan onu ilk kareden itibaren görüyor. İki durumda da kayma yok. */ .duyuru-kapali .duyuru{ display: none; } /* Telefonda, ONAY KARARI BEKLERKEN duyuru bandı gizlenir — 29 Ağu 2026, reklam başlamadan önce ölçülerek eklendi. Ölçüm (ana sayfa, gclid'li adres, çerez bandı açık): 375x812 → hero düğmesinin 42 px'i çerez bandının altında kalıyordu 360x640 → 211 px'i, yani düğme neredeyse tamamen görünmezdi Sebep hero değil, üstündeki yığın: topbar 62 + header 75 + DUYURU 91 = 228 px. Duyuru bandı tek başına 91 px yiyor. Öncelik sıralaması açık: onay kararı ve birincil eylem düğmesi, bir tanıtım şeridinden önce gelir. Karar verilir verilmez band geri geliyor; o an kullanıcı girdisinden hemen sonra olduğu için CLS'e sayılmıyor (hadRecentInput). Masaüstünde örtüşme yok, orada dokunulmuyor. testler/20 bunu 360x640 ve 375x812 dahil beş ölçüde kilitliyor. */ @media (max-width: 700px){ body.cerez-acik .duyuru, html.cerez-bekliyor .duyuru{ display: none; } } /* `html.cerez-bekliyor` NEDEN VAR — 31 Ağu 2026, canlıda ölçüldü. Yukarıdaki `body.cerez-acik` sınıfını main.js koyuyor ve bu ~2 saniye sürüyor. O sırada duyuru bandı ÇİZİLİYOR, sonra kayboluyor: ana sayfada CLS 0,218 ölçüldü (iyi eşik 0,1). Tek kayma, 1980 ms'de, MAIN 91 px yukarı sıçrıyordu — tam duyuru bandının yüksekliği. Kararı artık 'deki satır içi betik ilk boyamadan ÖNCE veriyor: `doruk-cerez` kaydı yoksa band hiç çizilmiyor. Görünen sonuç aynı, sıçrama yok. Karar verilince main.js sınıfı kaldırıyor ve band geliyor; o an kullanıcı girdisinden hemen sonra olduğu için CLS'e sayılmıyor (hadRecentInput). */ /* Kısa ekranlarda (640-700 px yükseklik) duyuruyu gizlemek yetmiyordu: 360x640'ta hero düğmesinin hâlâ 120 px'i çerez bandının altındaydı. Onay beklerken hero'nun kendi dolgusu da kısılıyor. DÜRÜST SINIR: 640 px yüksekliğinde başlık + paragraf + düğme + 214 px'lik onay bandı fiziksel olarak sığmıyor. Bandı küçültmek bilgi ya da 44 px dokunma hedefi feda etmeyi gerektirirdi; ikisi de yapılmadı. Karar verilir verilmez düğme açığa çıkıyor ve alttaki eylem çubuğu geliyor — testler/20 "karardan sonra hero düğmesi her ölçüde erişilebilir" bunu zaten kilitliyor. Buradaki iş, karar ANINDAKİ zararı küçültmek. */ @media (max-width: 700px){ body.cerez-acik .hero__inner, html.cerez-bekliyor .hero__inner{ padding-block: 18px; } body.cerez-acik .hero__trust, html.cerez-bekliyor .hero__trust{ display: none; } } .duyuru__ic{ display: flex; align-items: center; gap: 14px; padding: 12px 20px; flex-wrap: wrap; } .duyuru__rozet{ flex: none; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(255,255,255,.18); } .duyuru__yazi{ margin: 0; font-size: var(--fs-base); line-height: 1.5; flex: 1 1 300px; color: rgba(255,255,255,.94); } .duyuru__yazi b{ color: #fff; } .duyuru__bag{ flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); background: #fff; color: var(--navy); font-weight: 700; font-size: var(--fs-base); text-decoration: none; } .duyuru__bag:hover{ background: rgba(255,255,255,.9); } .duyuru__kapat{ flex: none; min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: var(--fs-base); cursor: pointer; } .duyuru__kapat:hover{ background: rgba(255,255,255,.28); } .duyuru__bag:focus-visible, .duyuru__kapat:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; } @media (max-width: 700px) { .duyuru__yazi{ flex-basis: 100%; order: 3; } } /* ── Üst şerit dokunma hedefleri (denetim P4-4) ─────────────────────────── Ara 73x30, telefon 157x28, sosyal ikonlar 28x28 idi. Görsel boyut aynı kalıyor; yalnız tıklama alanı 44px'e çıkıyor. */ .topbar__item, .topbar__ara{ min-height: 44px; display: inline-flex; align-items: center; } .topbar__social a{ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ── SGK rozeti (denetim P4-1) ──────────────────────────────────────────── Sarmal 348x59 px yer kaplayıp altındaki içeriğin tıklanmasını engelliyordu — içindeki bağlantı gizliyken bile. Artık tıklamalar sarmalın içinden geçiyor; yalnız görünür bağlantı tıklanabilir. Mobilde tamamen kalkıyor: 375 px ekranda 348 px neredeyse tüm genişlik ve sağ altta zaten WhatsApp düğmesi var. Aynı bilgi üst şeritte ve her şube sayfasında rozet olarak veriliyor. */ .sgk-float-yuva{ pointer-events: none; } .sgk-float-yuva > *{ pointer-events: auto; } @media (max-width: 900px) { .sgk-float-yuva{ display: none; } } /* Bayraklar: cihazların menşei (Türkiye, Danimarka, Almanya). Görünür "Küresel standartlar" etiketi 13 Ağu 2026'da kaldırıldı — üst çubuğu sıkıştırıyordu ve somut bir iddia taşımıyordu (Doruk'un kararı). Dil seçici sanılma riski (denetim P4-3) için ekran okuyucu etiketi duruyor; tıklanabilir olmadıkları imleçten de belli olsun diye default imleç veriliyor. */ .topbar__flags{ cursor: default; } /* ── Çerez bilgilendirmesi (denetim P3-4) ───────────────────────────────── Alt köşede sabit, içeriği kapatmıyor. LCP'yi etkilememesi için sayfa yüklendikten sonra JS ile gösteriliyor. */ .cerez{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; /* Zemin --wash, düğmeler --white: band hafif tonlu bir yüzey, düğmeler onun üstünde duran kâğıt. Önceden ikisi de --white olduğu için düğmeler yalnız çerçeveleriyle ayrılıyordu. Üst çizgi 2px marka renginden 1px'e indi; 2px, ekranın altına çekilmiş kalın bir şerit gibi duruyordu. Ayrım zaten gölgeden geliyor. */ background: var(--wash, var(--white)); border-top: 1px solid var(--brand); box-shadow: 0 -8px 30px -10px rgba(10,36,48,.28); /* Panel açıkken band ekranı aşmasın: 320x568'de %118'e çıkıyordu ve açıklama metni ekranın üstünde kalıyordu. Bandın tamamı sınırlı, kısalan yer amaç listesinden düşülüyor (o kaydırılabilir). */ display: flex; flex-direction: column; max-height: 90vh; max-height: 90dvh; } /* sıra önemli: dvh bilmeyen 90vh'de kalır */ .cerez[hidden]{ display: none; } .cerez__ic{ max-width: 1100px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cerez__yazi{ margin: 0; flex: 1 1 380px; font-size: var(--fs-base); line-height: 1.55; color: var(--body); } /* --brand yerine --brand-700: axe ölçtü, 41 sayfada 4,27:1 ile AA altındaydı ve reklamdan gelen herkesin gördüğü ilk ekran burası. Beş temanın hepsinde geçiyor (varsayılan 5,92). */ .cerez__yazi a{ color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; } .cerez__dugmeler{ display: flex; gap: 10px; flex: none; align-items: center; } /* Düğmelere kâğıt zemin: band --wash olduğu için ikisi ayrışıyor. Önceden band da düğme de --white'tı, ayrım yalnız çerçeveden geliyordu. ÖLÇÜ DEĞİŞMEZ. 15,6px'lik btn--sm'i 17px'e çıkarmayı denedim (60+ okur için daha rahat); band 20px büyüdü ve 1280x800'de hero düğmesini örttü — testler/20 yakaladı. Bandın yükseklik bütçesi okunurluk isteğinden önce gelir; metin zaten 17px, düğmeler kısa ve kalın. */ .cerez__dugmeler .btn{ min-height: 44px; background: var(--white); border-radius: var(--r-sm); } .cerez__dugmeler .btn:hover{ border-color: var(--brand); background: var(--white); } /* ── Amaç bazında tercih paneli (29 Ağustos 2026) ────────────────────── Hukuk görüşü iki şey istedi ve ikisi de burada: 1. KABUL VE RET GÖRSEL OLARAK DENGELİ. Önceden "Kabul ediyorum" dolu mavi (btn--primary), "Kabul etmiyorum" ince çerçeveliydi. Bu, ret seçeneğini bilerek zayıflatan bir düzendir. İkisi de artık aynı btn--ghost; hiçbiri diğerinden baskın değil. 2. AMAÇLAR AYRI SEÇİLEBİLİR. Analitik, reklam ölçümü ve reklam kişiselleştirme üç ayrı anahtar. Panel bandın İÇİNDE açılıyor; ayrı bir katman/modal değil, çünkü band zaten sabit ve ekranın altını kaplıyor. Yükseklik değişince --cerez-h yeniden yazılıyor, alt şerit ve WhatsApp balonu ona göre yer değiştiriyor. */ .cerez__yonet{ background: none; border: 0; padding: 10px 6px; min-height: 44px; font: inherit; font-size: var(--fs-base); font-weight: 700; color: var(--brand-700); text-decoration: none; /* kontrast: bkz. .cerez__yazi a */ cursor: pointer; border-radius: var(--r-sm, 8px); } /* Altçizgi kalıcıydı; iki çerçeveli düğmenin yanında üçüncü bir görsel ağırlık yaratıyordu. Şimdi üzerine gelince/odakta çıkıyor — bağlantı olduğu belli, ama sırayı bozmuyor. */ .cerez__yonet:hover, .cerez__yonet:focus-visible{ color: var(--brand-700, var(--brand)); text-decoration: underline; text-underline-offset: 4px; } .cerez__panel{ border-top: 1px solid var(--line); background: var(--wash, #f4f7fa); display: flex; min-height: 0; } .cerez__panel[hidden]{ display: none; } .cerez__panel-ic{ max-width: 1100px; margin: 0 auto; padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 12px; /* Panel açıkken band 987px oluyordu — 844px'lik telefonda ekranın %117'si, yani "Seçimimi kaydet" hiç görünmüyordu. Amaç listesi kaydırılıyor, kaydet düğmesi altta SABİT kalıyor. */ min-height: 0; flex: 1; } .cerez__amaclar{ display: grid; gap: 12px; overflow-y: auto; min-height: 0; padding-right: 2px; } .cerez__amac{ background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md, 12px); padding: 12px 14px; } .cerez__amac--zorunlu{ background: transparent; border-style: dashed; } .cerez__amac-bas{ display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 30px; cursor: pointer; } .cerez__amac--zorunlu .cerez__amac-bas{ cursor: default; } .cerez__amac-ad{ font-weight: 800; font-size: var(--fs-base); color: var(--ink); } .cerez__hep-acik{ font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .cerez__amac-not{ margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--body); } .cerez__amac-not code{ background: rgba(11,110,168,.07); padding: 1px 5px; border-radius: 4px; font-size: .95em; color: #0a5e8f; } /* Anahtar: 44px dokunma hedefi korunuyor (kurallar.md §3). */ .cerez__anahtar{ appearance: none; -webkit-appearance: none; flex: none; width: 52px; height: 30px; border-radius: 999px; background: #b9c4ce; position: relative; cursor: pointer; transition: background .18s var(--ease, ease); margin: 7px 0; } .cerez__anahtar::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .18s var(--ease, ease); box-shadow: 0 1px 3px rgba(10,36,48,.35); } .cerez__anahtar:checked{ background: var(--brand); } .cerez__anahtar:checked::after{ transform: translateX(22px); } .cerez__anahtar:focus-visible{ outline: 3px solid var(--brand); outline-offset: 3px; } .cerez__panel-alt{ display: flex; justify-content: flex-end; } .cerez__panel-alt .btn{ min-height: 44px; } @media (max-width: 620px){ .cerez__panel-ic{ padding: 12px 16px 16px; gap: 10px; } .cerez__panel-alt .btn{ width: 100%; justify-content: center; } .cerez__yonet{ width: 100%; text-align: center; } } .cerez__panel-alt{ flex: none; } @media (max-width: 620px) { .cerez__ic{ padding: 14px 16px; gap: 10px; } .cerez__dugmeler{ width: 100%; flex-wrap: wrap; } /* İki karar düğmesi yan yana (eşit paylı), "Tercihleri yönet" altta tam satır. Üçü alt alta dizilince band 269px oluyordu ve ana sayfada hero'nun "Ücretsiz Randevu Al" düğmesini örtüyordu — 26 Ağustos'ta düzeltilen hatanın aynısı, farklı sebepten. */ .cerez__dugmeler .btn{ flex: 1 1 0; min-width: 0; justify-content: center; } .cerez__yonet{ flex: 1 0 100%; order: 3; padding: 8px 6px; min-height: 40px; } } /* Çok dar ekranda "Tümünü kabul et" iki satıra sarıyor ve band 267px'e çıkıyordu. Yazı biraz küçülüyor ama 44px dokunma hedefi korunuyor (kurallar.md §3: dokunma hedefi metin boyutundan bağımsız). */ @media (max-width: 380px){ .cerez__dugmeler .btn{ font-size: var(--fs-sm); padding-inline: 8px; letter-spacing: -.01em; } } /* Çerez bandı açıkken alttaki yüzen öğeler onun üstüne çıksın */ body.cerez-acik .wa-float{ bottom: calc(var(--cerez-h, 92px) + 22px); } /* ── Cihazlar menüsünde marka renkleri (13 Ağu 2026) ─────────────────────── Adlar markanın kendi renginde. Rexton'ın sarısı beyaz üstünde 1.28:1 — metin olarak okunmaz; Widex'in kimliği zaten siyah. Bu yüzden gerçek marka rengi soldaki şeritte duruyor, ad erişilebilir tonda yazılıyor. Sarı şeride ince koyu çerçeve veriliyor, aksi halde beyazda kayboluyor. */ .nav__alt-menu .marka{ display: flex; align-items: center; gap: 10px; font-weight: 700; } /* Logo görsel bir işaret; adı ekran okuyucu ve arama motoru için yazıyla bırakıyoruz. Logolar farklı oranlarda — hepsi AYNI ölçüde bir karoya oturtuluyor, böylece adlar aynı hizadan başlıyor ve logolar birbirine yakın ağırlıkta görünüyor. Rexton'ın kimliği siyah zemin üzerine sarı; açık menü zemininde sarı okunmuyordu, kendi zeminiyle basılıyor. */ .nav__alt-menu .marka img{ flex: 0 0 78px; width: 78px; height: 26px; object-fit: contain; object-position: center; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; } .nav__alt-menu .marka--rexton img{ background: #111; border-color: #111; } .nav__alt-menu .marka span{ color: var(--ink); } .nav__alt-menu .marka:hover span{ color: var(--brand); } /* "Tüm Cihazlar" markaların altında toplayıcı bağlantı */ .nav__alt-tumu{ margin-top: 4px; border-top: 1px solid var(--line); font-weight: 600; } /* ── Kayan fotoğraf galerisi (13 Ağu 2026) ──────────────────────────────── Şube sayfaları ve ana sayfa aynı bileşeni kullanır. Altyazı yok: kare zaten kendini anlatıyor, alt metinde de yazılı. Kaydırma CSS'in scroll-snap'iyle; JS yalnız otomatik ilerletiyor. Betik çalışmazsa galeri parmakla kaydırılabilir halde kalır. */ .galeri{ position: relative; margin: 0 0 36px; } .galeri__ray{ display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; } .galeri__ray::-webkit-scrollbar{ display: none; } .galeri__kare{ flex: 0 0 min(100%, 560px); scroll-snap-align: start; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--white); border-radius: var(--r-sm); overflow: hidden; cursor: zoom-in; transition: border-color .18s ease; } .galeri__kare img{ display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; } .galeri__kare:hover{ border-color: var(--brand); } .galeri__kare:focus-visible{ outline: 3px solid var(--brand); outline-offset: 2px; } /* Oklar — dokunma hedefi 44px */ .galeri__ok{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 1px solid var(--line); background: rgba(255,255,255,.94); color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(6,32,47,.16); } .galeri__ok svg{ width: 22px; height: 22px; } .galeri__ok:hover{ background: var(--white); border-color: var(--brand); color: var(--brand); } .galeri__ok:focus-visible{ outline: 3px solid var(--brand); outline-offset: 2px; } .galeri__ok--geri{ left: 8px; } .galeri__ok--ileri{ right: 8px; } .galeri__ok[disabled]{ opacity: .35; cursor: default; } /* Noktalar */ /* 24 Ağu 2026 denetimi: 11 nokta x 44px = 484px tek satırda kalıyordu ve belgeyi 320px'te 402px'e, 390px'te 437px'e genişletiyordu (WCAG 1.4.10). Ölçümle doğrulandı: noktaları gizleyince iki genişlikte de taşma tam sıfırlandı; kapalı drawer paneli (position:fixed) taşmaya katılmıyordu. Çözüm sarma — 44px hedef ve 11 doğrudan erişim aynen korunuyor. */ .galeri__noktalar{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 8px; max-width: 100%; } /* Düğmenin KENDİSİ 44x44; görünen nokta ::before ile ortalanıyor. Önceden nokta 10px'ti ve ::after inset:-17px ile hedef 44px'e çıkıyordu, ama aralık 8px olduğu için komşu hedefler 34px örtüşüyordu: kenara denk gelen dokunuş yanlış fotoğrafı açıyordu (16 Ağu 2026 denetimi). */ .galeri__nokta{ width: 44px; height: 44px; padding: 0; cursor: pointer; border: 0; background: transparent; position: relative; flex: none; /* flex satırında hiçbir koşulda 44px'in altına sıkışmasın */ } .galeri__nokta::before{ content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1px solid var(--muted); background: transparent; } .galeri__nokta[aria-current="true"]::before{ background: var(--brand); border-color: var(--brand); } .galeri__nokta:focus-visible{ outline: 3px solid var(--brand); outline-offset: -4px; border-radius: 50%; } @media (max-width: 700px) { .galeri__kare{ flex-basis: 88%; } .galeri__ok{ width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .galeri__ray{ scroll-behavior: auto; } } .cok-satan{ position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 9px 18px; border-radius: 999px; background: linear-gradient(100deg, #A9861A 0%, #C9A227 45%, #F0D573 60%, #C9A227 78%, #A9861A 100%); color: #1A1405; font-size: var(--fs-xs); font-weight: 900; letter-spacing: .07em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(201,162,39,.42); } .cok-satan svg{ width: 15px; height: 15px; flex: none; } @media (prefers-reduced-motion: no-preference) { /* ışıltı sağa doğru bir kez geçer, sonra arada bir tekrarlar */ .cok-satan::after{ content: ""; position: absolute; inset: 0 auto 0 -60%; width: 55%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); animation: rozetIsilti 4.5s ease-in-out infinite; } @keyframes rozetIsilti { 0%, 62%{ transform: translateX(0); } 82%, 100%{ transform: translateX(340%); } } } /* ── Marka sayfası hero'sunda gerçek logo (13 Ağu 2026) ─────────────────── Önce gradyan üstüne yazıyla marka adı yazılıyordu; markanın kendi işareti dururken taklidini yazmak gereksizdi. Zemin beyaza yakın: logolar kendi renkleriyle basılıyor, koyu zeminde ReSound'un bordosu ve Widex'in siyahı kayboluyordu. */ .brand-hero__plate{ background: #fff !important; border: 1px solid var(--line); } .brand-hero__plate::before{ display: none !important; } .brand-hero__logo{ width: min(62%, 300px); height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(6,32,47,.08)); } /* ── Şube sayfası: adres bağlantısı, SGK logosu, harita kapağı (13 Ağu) ── */ .adres-bag{ display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; border-bottom: 2px solid rgba(6,32,47,.18); padding-bottom: 1px; } .adres-bag svg{ width: 15px; height: 15px; flex: none; color: var(--brand); } .adres-bag:hover{ color: var(--brand); border-bottom-color: var(--brand); } .adres-bag:focus-visible{ outline: 3px solid var(--brand); outline-offset: 3px; } /* dokunma hedefi 44px — satır yüksekliği yetmiyorsa görünmez alanla tamamla */ .check-list li .adres-bag{ position: relative; } .check-list li .adres-bag::after{ content: ""; position: absolute; inset: -13px -4px; } /* ekran okuyucuya görünür, gözle görünmez */ .gizli-metin{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sgk-note__logo{ height: 22px; width: auto; flex: none; vertical-align: middle; } /* Harita artık düğmesiz açılıyor; kapak yalnız yüklenene kadar görünüyor */ .harita-kapak{ display: grid; place-items: center; min-height: 340px; gap: 10px; } .harita-kapak__ad{ font-weight: 700; color: var(--muted); } .harita--acik{ min-height: 0; display: block; } /* Açılır menü oku bağlantı genişliğini büyütüp hizayı bozuyordu (13 Ağu). Ok artık akıştan çıkarıldı: düğme diğer bağlantılarla aynı boşlukta duruyor, ok sağında sabit bir alanda. */ /* 4 Eyl 2026 — düğmenin yatay dolgusu bağlantılarla eşitlendi (10px); ok akıştan çıktığı için sağda 20px'lik alanı kendisi tutuyor. */ .nav__links .nav__alt-dugme{ position: relative; padding-left: 10px; padding-right: 26px; } .nav__links .nav__alt-dugme .nav__ok{ position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; } /* ── Adım kartları ortalandı (13 Ağu 2026) ──────────────────────────────── İçerik sola dayalıydı, numara dairesi de solda kalınca dört kart göze düzensiz geliyordu. Numara ortada, metin ortada, kartlar eşit yükseklikte. */ .grid .card.step{ text-align: center; display: flex; flex-direction: column; align-items: center; } .grid .card.step h3{ text-wrap: balance; } .grid .card.step p{ max-width: 30ch; margin-inline: auto; } /* Üçlü bilgi kartlarında da eşit yükseklik ve rahat satır genişliği */ .grid.grid--3 > .card{ display: flex; flex-direction: column; } /* ── SGK bandı (13 Ağu 2026) ────────────────────────────────────────────── Önce logo beyaz bir kutuya iliştirilmiş, telefon da düğme gibi görünüp düğme olmayan bir bağlantıydı. Şimdi logo solda metinle hizalı, telefon gerçek bir çağrı düğmesi (44px dokunma hedefi, tel: bağlantısı). */ .sgk-bant{ background: var(--navy); color: var(--on-dark); border-radius: var(--r-lg); padding: clamp(26px,4vw,40px); display: grid; gap: clamp(20px,3vw,32px); grid-template-columns: auto 1fr auto; align-items: center; } .sgk-bant__logo{ background: #fff; border-radius: 12px; padding: 12px 16px; display: grid; place-items: center; } .sgk-bant__logo img{ height: 40px; width: auto; display: block; } .sgk-bant__metin h2{ color: #fff; font-size: clamp(1.45rem,2.5vw,2rem); margin: 0 0 8px; } .sgk-bant__metin p{ color: #BFE7F5; margin: 0; max-width: 56ch; } .sgk-bant__ara{ display: inline-flex; align-items: center; gap: 12px; flex: none; min-height: 56px; padding: 12px 22px; border-radius: 999px; background: #fff; color: var(--navy); text-decoration: none; font-weight: 800; font-size: var(--fs-md); letter-spacing: -.01em; box-shadow: 0 4px 16px rgba(0,0,0,.18); } .sgk-bant__ara svg{ width: 22px; height: 22px; flex: none; } .sgk-bant__ara span{ display: flex; flex-direction: column; line-height: 1.15; } .sgk-bant__ara small{ font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #46708A; } .sgk-bant__ara:hover{ background: #EAF6FB; } .sgk-bant__ara:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; } @media (max-width: 900px) { .sgk-bant{ grid-template-columns: 1fr; justify-items: start; } .sgk-bant__ara{ width: 100%; justify-content: center; } }/* ── Ana sayfada SGK hesaplayıcı çağrısı (13 Ağu 2026) ──────────────────── Doruk'un en güçlü dönüşüm aracı; hero'nun hemen altında duruyor. Reklam açılış sayfası olarak da çalışması için tek başına anlaşılır. */ /* Şube aramasında tek sonuç bulunduğunda kartı belirginleştir (13 Ağu 2026) */ .loccard--vurgu{ outline: 3px solid var(--brand); outline-offset: 3px; box-shadow: 0 8px 26px rgba(6,32,47,.18); } @media (prefers-reduced-motion: no-preference) { .loccard--vurgu{ animation: vurguBelir .45s ease-out; } @keyframes vurguBelir { from{ outline-color: transparent; } to{ outline-color: var(--brand); } } } /* ── Hero arka planı: dönen kareler (13 Ağu 2026) ───────────────────────── Tek sabit fotoğraf yerine 6 kare çapraz geçişle dönüyor. Üstteki lacivert örtü (.hero__media::before) duruyor — her karede başlık kontrastı korunsun. İlk kare fetchpriority="high": LCP o kare, gecikmemeli. Hareket azaltma açıksa dönme yok, ilk kare sabit kalıyor. */ .hero__slayt{ position: absolute; inset: 0; z-index: -3; } .hero__kare{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } .hero__kare.is-etkin{ opacity: 1; } @media (prefers-reduced-motion: no-preference) { .hero__kare{ transition: opacity 1.1s ease-in-out; } } @media (prefers-reduced-motion: reduce) { .hero__kare{ transition: none; } } /* ── Kariyer bölümü (13 Ağu 2026) ───────────────────────────────────────── İki kutu farklı yükseklikteydi, ikonlar sönüktü, madde listeleri hizasızdı. Kartlar eşit yükseklikte, ikonlar markanın rengiyle dolgulu, listeler alta yapışık — böylece iki kart aynı ritimde okunuyor. */ .kariyer-kartlar{ display: grid; gap: clamp(18px,2.4vw,26px); grid-template-columns: 1fr 1fr; } .kariyer-kartlar > .card{ display: flex; flex-direction: column; } .kariyer-kartlar > .card > p{ flex: 1 0 auto; } .kariyer-kartlar .card__ic{ background: var(--brand); color: #fff; border-radius: 14px; width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 18px; } .kariyer-kartlar .card__ic svg{ width: 26px; height: 26px; } .kariyer-kartlar .check-list{ margin-top: auto; padding-top: 18px; } /* Açık pozisyon şeridi */ .acik-pozisyon{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; border: 2px solid var(--brand); border-radius: var(--r-md); padding: 20px 24px; margin-bottom: 26px; background: var(--white); } .acik-pozisyon__rozet{ display: inline-flex; align-items: center; gap: 8px; flex: none; background: #12603F; color: #fff; border-radius: 999px; padding: 7px 15px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .acik-pozisyon__rozet::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7BE8AF; } .acik-pozisyon__ad{ font-weight: 800; font-size: var(--fs-md); margin: 0; } .acik-pozisyon__yer{ color: var(--muted); margin: 3px 0 0; font-size: var(--fs-base); } @media (max-width: 760px) { .kariyer-kartlar{ grid-template-columns: 1fr; } .acik-pozisyon{ flex-direction: column; align-items: flex-start; } } /* ── Özellik rozetleri yeniden tasarlandı (13 Ağu 2026) ─────────────────── Gri hap + kırmızı nokta sönük duruyordu ve nokta hiçbir şey anlatmıyordu. Şimdi markanın açık turkuaz zemininde, onay işaretiyle. */ .tech-chips span{ background: #EAF6FB; border-color: #BFE0EE; color: #0B3A52; padding: 10px 16px 10px 13px; font-size: var(--fs-sm); } .tech-chips span::before{ content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } /* İşitme testi sayfasındaki anlatım görselleri (13 Ağu 2026) */ .test-foto{ margin: 18px 0 0; } .test-foto img{ display: block; width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--line); aspect-ratio: 3 / 2; object-fit: cover; } .test-foto figcaption{ margin-top: 9px; font-size: var(--fs-sm); color: var(--muted); text-align: center; } /* ── Hero post-it: SGK hesaplayıcısına kısayol (13 Ağu 2026) ────────────── Hero'nun sağ üstünde, camdan yapıştırılmış bir not gibi. Hafif saydam ama metin okunacak kadar dolu: zeminin koyu olduğu bölgede beyaz üstü %92 opaklıkta kalıyor, kontrast 15:1'in üzerinde. 1200px altında gizleniyor — hero başlığının alanını daraltmasın. */ .hero-postit{ position: absolute; top: clamp(90px, 12vh, 140px); right: clamp(24px, 4vw, 60px); z-index: 3; width: 250px; display: none; flex-direction: column; gap: 7px; padding: 18px 20px; border-radius: 4px; text-decoration: none; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 26px rgba(6, 32, 47, .28); transform: rotate(-2.4deg); border-top: 4px solid var(--brand); } .hero-postit__ust{ font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #14607F; } .hero-postit strong{ font-size: var(--fs-base); line-height: 1.25; color: #06202F; font-weight: 800; text-wrap: balance; } .hero-postit__alt{ font-size: var(--fs-sm); font-weight: 700; color: #14607F; } .hero-postit:hover{ background: #fff; } .hero-postit:focus-visible{ outline: 3px solid #fff; outline-offset: 4px; } @media (prefers-reduced-motion: no-preference) { .hero-postit{ transition: transform .2s ease, background .2s ease; } .hero-postit:hover{ transform: rotate(-1deg) translateY(-3px); } } @media (min-width: 1200px) { .hero-postit{ display: flex; } } /* Stok hapı tek satırda kalsın — "Stokta · Geniş çeşit" dar kartta ikiye bölünüp kötü duruyordu; ikiye ayrıldı, hap sarmıyor. */ .stock-chip{ white-space: nowrap; } /* "SGK Anlaşmalı" rozetinde küçük SGK logosu (13 Ağu 2026) */ .sgk-rozet{ display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .sgk-mini{ height: 15px; width: auto; flex: none; display: block; background: #fff; border-radius: 3px; padding: 1px 3px; } /* Galerinin son karesi sağa hizalansın — "start" ile son kare sona kadar kaydırılamıyor ve kenarda yarım kalıyordu. */ .galeri__kare:last-child{ scroll-snap-align: end; } .galeri__ray{ scroll-padding-inline: 0; } /* SGK sayfasındaki üçlü bilgi kartları: eşit yükseklik, dengeli satır kırımı. Dar sütunda metin tırtıklı kırılıyordu (13 Ağu 2026). */ .grid.grid--3 > .card > p{ text-wrap: pretty; } .grid.grid--3 > .card > h3{ text-wrap: balance; } .card.step p{ text-wrap: pretty; } /* ── SSS bloğu toparlandı (13 Ağu 2026) ─────────────────────────────────── Kartlar ayrı ayrı kutulardı, aralarındaki boşluk ve gölge sayfayı dağıtıyordu. Şimdi tek bir liste: kartlar bitişik, aralarında ince çizgi, dış çerçeve tek. Açık olan öğe hafif zeminle ayrışıyor. */ .faq{ background: var(--white); border: 1px solid var(--line); border-radius: 0; margin: 0; box-shadow: none; } .faq + .faq{ border-top: 0; } .faq:first-of-type{ border-radius: var(--r-md) var(--r-md) 0 0; } .faq:last-of-type{ border-radius: 0 0 var(--r-md) var(--r-md); } .faq__q{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; min-height: 44px; font-size: var(--fs-base); font-weight: 700; color: var(--ink); background: transparent; border: 0; cursor: pointer; text-align: left; } .faq__q svg{ width: 20px; height: 20px; flex: none; color: var(--brand); } .faq__q:hover{ background: #F4F8FA; } .faq__q:focus-visible{ outline: 3px solid var(--brand); outline-offset: -3px; } .faq__q[aria-expanded="true"]{ background: #F0F7FA; } @media (prefers-reduced-motion: no-preference) { .faq__q svg{ transition: transform .2s ease; } .faq__q[aria-expanded="true"] svg{ transform: rotate(45deg); } } /* .faq__a-inner kuralları kaldırıldı: o sarmalayıcı hiç kullanılmıyor. Gerçek dolgu yukarıda `.faq__a > *` ile veriliyor. */ /* ── Footer toparlandı ──────────────────────────────────────────────────── Hizmetler sütunu 12 satıra uzayıp diğerlerini üçte bir yükseklikte bırakıyordu. Sütunlar üstten hizalı, bağlantı aralığı sıkılaştırıldı, uzun sütun iki kolona bölünüyor. */ .footer__grid{ align-items: start; } /* ── Arama katmanı ──────────────────────────────────────────────────────── Öneri satırları düz metin yığınıydı; tıklanabilir olduğu belli olmuyordu. Şimdi her satır kendi kutusunda, ok işaretiyle. */ #arama-sonuc li a{ display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-sm); text-decoration: none; border: 1px solid transparent; } #arama-sonuc li a:hover, #arama-sonuc li a:focus-visible{ background: var(--white); border-color: var(--line); } #arama-sonuc li a::after{ content: "→"; margin-left: auto; color: var(--brand); font-weight: 800; flex: none; } #arama-sonuc li a b{ display: block; font-size: var(--fs-base); color: var(--ink); } #arama-sonuc li a span{ display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; } #arama-sonuc li a > *:not(:last-child){ min-width: 0; }/* ── Şube seçici hapları (13 Ağu 2026) ──────────────────────────────────── Haplar boş çerçeveli ve hepsi aynı ağırlıktaydı; şehir başlıkları da listeden ayrışmıyordu. Şehir etiketi büyük harf küçük punto, haplar dolgulu; merkez şube markanın renginde öne çıkıyor. */ /* ── Marka sayfası tanıtım bloğu yeniden dengelendi ─────────────────────── Paragraf 4 satır sürüyor, teknoloji adları açıklanmadan geçiyordu. Ölçü daraltıldı, rozetler metne yaklaştırıldı, düğme sola hizalandı. */ .brand-hero .section-lead{ max-width: 46ch; } .brand-hero .hero__actions{ justify-content: flex-start; margin-top: 24px; } /* ── Galeri ile sonraki bölüm arası boşluk (13 Ağu 2026) ────────────────── Ana sayfada galeri ile "SGK ne kadar karşılıyor?" arasında 201px vardı: galerinin kendi 36px alt boşluğu + bölümün 77px alt dolgusu üst üste biniyor, dalga ayracı daha başlamadan 113px ölü alan oluşuyordu. Galerinin alt boşluğu yalnız ardından içerik geldiğinde gerekli (şube sayfaları); son öğeyse sıfırlanıyor. Dalga ayracını izleyen bölümün üst dolgusu da kısaldı — ayracın kendisi zaten ayırma işini görüyor. */ .galeri:last-child{ margin-bottom: 0; } .section:has(> .container > .galeri:last-child){ padding-bottom: clamp(20px, 3vw, 34px); } .wave-sep{ padding: clamp(6px, 1vw, 10px) 0; } .wave-sep + .section, .wave-sep + section{ padding-top: clamp(20px, 3vw, 34px); } /* ── Sosyal medya bölümü (13 Ağu 2026, yeniden tasarlandı) ──────────────── Önce koyu bir tanıtım kutusu ve altında ayrı bir fotoğraf şeridi vardı; iki ayrı parça gibi duruyordu. Şimdi tek bir panel: üstte başlık ve hesap bağlantıları, altında reel kapakları aynı zeminin içinde. Kapakların altındaki yazılar kaldırıldı. Videonun başlığı zaten kapağın üzerinde yazılı; altına tekrar yazınca hem gürültü oluyor hem de üç kartın alt yazısı farklı satır sayısına düşüp hizayı bozuyordu. Başlık artık yalnız alt metinde ve aria-label'de — ekran okuyucu görüyor, göz görmüyor. Instagram'ın kapağa gömülü oynat düğmesi bulanık; üstüne kendi net düğmemiz basılıyor. */ .sosyal-blok{ background: linear-gradient(135deg, #06202F 0%, #0E3D57 58%, #14607F 100%); color: #fff; border-radius: var(--r-lg); padding: clamp(26px,3.6vw,44px); display: flex; flex-direction: column; gap: clamp(26px,3.4vw,38px); } .sosyal-blok__ust{ display: grid; gap: clamp(20px,3vw,36px); grid-template-columns: 1fr auto; align-items: center; } .sosyal-blok__eyebrow{ font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8FD8F0; } .sosyal-blok h2{ color: #fff; font-size: clamp(1.42rem,2.5vw,2rem); margin: 10px 0 10px; text-wrap: balance; } .sosyal-blok p{ color: #C4E7F5; margin: 0; max-width: 52ch; } /* Reel şeridi — panelin içinde */ .reel-serit{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px,1.6vw,18px); max-width: 660px; width: 100%; } .reel{ position: relative; display: block; overflow: hidden; border-radius: 14px; background: #06202F; box-shadow: 0 8px 22px rgba(0,0,0,.32); } .reel img{ display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 9 / 16; } .reel__oynat{ position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.94); color: #06202F; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.34); } .reel__oynat svg{ width: 26px; height: 26px; margin-left: 2px; } .reel:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { .reel__oynat{ transition: transform .18s ease, background .18s ease; } .reel:hover .reel__oynat{ transform: scale(1.09); background: #fff; } } @media (max-width: 900px) { .sosyal-blok__ust{ grid-template-columns: 1fr; } .reel-serit{ max-width: none; } } @media (max-width: 520px) { } /* ── Güven rozetlerine hareket (13 Ağu 2026) ────────────────────────────── "Yetkili Bayii" ve "SGK Anlaşmalı Merkez" hapları sabit duruyordu. Görünür alana girince yumuşak bir yükselme, üzerine gelince hafif kalkma. Hareket azaltma açıksa hiçbiri çalışmaz. */ @media (prefers-reduced-motion: no-preference) { @keyframes rozetBelir { from{ opacity: 0; transform: translateY(10px) scale(.97); } to{ opacity: 1; transform: none; } } /* marka logoları sırayla belirsin */ .awards__logos > *{ animation: rozetBelir .5s cubic-bezier(.2,.7,.3,1) both; } .awards__logos > *:nth-child(1){ animation-delay: .16s; } .awards__logos > *:nth-child(2){ animation-delay: .24s; } .awards__logos > *:nth-child(3){ animation-delay: .32s; } .awards__logos > *:nth-child(4){ animation-delay: .40s; } } /* Marka kartı metni tek satırda dursun, kart uzamasın */ .brandcard p{ text-wrap: balance; } .card__meta{ flex-wrap: wrap; gap: 8px; } .card__meta > span{ white-space: nowrap; } .reel:hover{ box-shadow: 0 10px 28px rgba(0,0,0,.42); } /* ── Marka sayfası özellik satırı (13 Ağu 2026, 16 Ağu'da düzeltildi) ───── Balon hâlindeydi, künye satırına çevrilmişti. Ama ayraç noktaları `span + span::before` ile basılıyordu ve satır sonunda öksüz kalıp bir sonraki satırın başına düşüyordu ("· ŞARJ EDİLEBİLİR"). Ayraç kaldırıldı; ayrım artık boşlukla, öksüz nokta kalmıyor. */ .brand-hero .tech-chips{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); } .brand-hero .tech-chips span{ background: none; border: 0; padding: 0; border-radius: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .brand-hero .tech-chips span::before{ display: none; } /* ── SGK adım yolu (14 Ağu 2026) ─────────────────────────────────────────── Dört kart yan yana duruyordu ama aralarında bir bağ görünmüyordu; süreç olduğu okunmuyordu. Numaralar artık dolu daire ve aralarında ince bir çizgi var — soldan sağa akan bir yol. Mobilde çizgi dikeye döner. */ /* Adımlar SOLA hizalı (22 Ağu 2026). Önce dört dar sütunda ortalıydı; iki-üç cümlelik adım metni ~180px sütunda altı satıra kırılıyor ve her satırın iki ucu da tırtıklı kalıyordu. Numara da sola alındı, bağlantı çizgisi numaraların merkezinden geçiyor. Dört sütun ancak 1024px'ten sonra; arada iki sütun. */ .adim-yol{ list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 28px 30px; /* Sütun sayısı GÖRÜNÜM genişliğine değil, kabın kendi genişliğine göre. İşitme testi sayfasında kap 714px; sabit dört sütun her adımı 156px'e düşürüyor, satır ~18 karaktere iniyordu. 240px alt sınır ölçüyü okunur tutuyor: 714px'te iki, geniş kapta dört sütun. */ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); position: relative; } .adim-yol__adim{ position: relative; text-align: left; padding: 0; } .adim-yol__n{ display: grid; place-items: center; width: 50px; height: 50px; margin: 0 0 16px; border-radius: 50%; background: var(--brand); color: #fff; font-size: var(--fs-base); font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 0 6px rgba(11,110,163,.10); position: relative; z-index: 1; /* çizgi numaranın arkasından geçsin */ } .adim-yol h3{ font-size: var(--fs-base); margin: 0 0 8px; text-wrap: balance; } .adim-yol p{ margin: 0; color: var(--muted); } /* Bağlantı çizgisi kaldırıldı: auto-fit ile adımlar satır atlayabiliyor, çizgi de boşlukta asılı kalıyordu. Sırayı 01-04 rozetleri taşıyor. */ @media (max-width: 820px) { .adim-yol{ grid-template-columns: 1fr; gap: 0; text-align: left; } .adim-yol__adim{ display: grid; grid-template-columns: 50px 1fr; column-gap: 18px; text-align: left; padding: 0 0 26px; } .adim-yol__adim::before{ top: 56px; bottom: 6px; left: 24px; right: auto; width: 2px; height: auto; background: var(--brand); } .adim-yol__adim:last-child::before{ display: none; } .adim-yol__adim:first-child::before{ display: block; } .adim-yol__n{ margin: 0; grid-row: span 2; } .adim-yol h3{ align-self: center; margin: 0 0 6px; } .adim-yol p{ grid-column: 2; max-width: none; } } /* ── Açılır bölüm (14 Ağu 2026) ──────────────────────────────────────────── Uzun tablo/liste gövdeyi şişiriyorsa

ile katlanır. Hesaplayıcı zaten cevabı verdiği için SGK tablosu varsayılan olarak kapalı. */ .acilir{ border: 1px solid var(--line); border-radius: 16px; background: var(--white); overflow: hidden; } .acilir > summary{ list-style: none; cursor: pointer; padding: 17px 22px; font-weight: 700; color: var(--brand); display: flex; align-items: center; gap: 10px; min-height: 44px; } .acilir > summary::-webkit-details-marker{ display: none; } .acilir > summary::after{ content: ""; width: 10px; height: 10px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); } .acilir[open] > summary::after{ transform: rotate(-135deg) translate(-2px, -2px); } .acilir > summary:hover{ background: rgba(11,110,163,.05); } .acilir__ic{ padding: 0 22px 22px; } @media (prefers-reduced-motion: no-preference) { .acilir > summary::after{ transition: transform .2s ease; } } /* ── Kural şeridi (14 Ağu 2026) ──────────────────────────────────────────── Üç ayrı kart hâlindeki SGK kuralları hem uzundu hem dağınıktı. Tek panelde, rakamı öne çıkaran dört sütun: göz önce sayıyı görüyor. */ .kural-serit{ margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 18px; background: var(--white); overflow: hidden; } .kural-serit > div{ padding: 24px 22px; border-left: 1px solid var(--line); } .kural-serit > div:first-child{ border-left: 0; } .kural-serit b{ display: block; font-size: var(--fs-lg); color: var(--brand); letter-spacing: -.01em; margin-bottom: 8px; } .kural-serit span{ display: block; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); } @media (max-width: 900px) { .kural-serit{ grid-template-columns: repeat(2, 1fr); } .kural-serit > div:nth-child(odd){ border-left: 0; } .kural-serit > div:nth-child(n+3){ border-top: 1px solid var(--line); } } @media (max-width: 540px) { .kural-serit{ grid-template-columns: 1fr; } .kural-serit > div{ border-left: 0; border-top: 1px solid var(--line); } .kural-serit > div:first-child{ border-top: 0; } } /* ── Şehir paneli (14 Ağu 2026) ──────────────────────────────────────────── İletişim sayfasındaki şube hapları serbest sarıyordu, hangi şehre ait olduğu ancak üstteki kalın yazıdan anlaşılıyordu. Artık iki sütun: şehir başlığı, şube sayısı ve pinli satırlar. */ .sehir-panel{ border: 1px solid var(--line); border-radius: 20px; background: var(--white); overflow: hidden; } .sehir-panel__ust{ padding: 26px 28px 22px; border-bottom: 1px solid var(--line); } .sehir-panel__ust h2{ font-size: var(--fs-lg); margin: 0 0 10px; } .sehir-panel__ust p{ margin: 0; color: var(--muted); } .sehir-panel__govde{ display: grid; grid-template-columns: 1fr 1fr; } .sehir-sutun{ padding: 22px 28px 26px; } .sehir-sutun + .sehir-sutun{ border-left: 1px solid var(--line); } .sehir-sutun h3{ display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; } .sehir-sutun h3 b{ font-size: var(--fs-xs); font-weight: 700; color: var(--brand); letter-spacing: .02em; text-transform: none; } /* 3 Eyl 2026 — satırlar tablo gibi hizalanıyor (Doruk istedi). Öncesinde her satır kendi içinde flex'ti: pin, ad ve "Merkez" rozeti satır uzunluğuna göre kayıyordu, göz dikey bir çizgi bulamıyordu. Şimdi üç sabit sütun — ikon / ad / rozet — ve satır arası ince çizgi; ad sütunu her satırda aynı yerden başlıyor, rozet hep aynı hizada bitiyor. Satır yüksekliği 48px: 60+ kitle için dokunma hedefi. */ .sehir-liste{ display: grid; gap: 0; } .sehir-liste a{ display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 48px; padding: 10px 12px; text-decoration: none; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); } .sehir-liste a:last-child{ border-bottom: 0; } .sehir-liste a svg{ width: 17px; height: 17px; color: var(--brand); opacity: .55; justify-self: center; } .sehir-liste a em{ font-style: normal; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); white-space: nowrap; } .sehir-liste a:hover{ background: rgba(11,110,163,.07); } .sehir-liste a:hover svg{ opacity: 1; } @media (max-width: 700px) { .sehir-panel__govde{ grid-template-columns: 1fr; } .sehir-sutun + .sehir-sutun{ border-left: 0; border-top: 1px solid var(--line); } } @media (prefers-reduced-motion: no-preference) { .sehir-liste a{ transition: background .15s ease; } } /* ── İlan eylem düğmeleri (14 Ağu 2026) ──────────────────────────────────── Doruk: her ilanda WhatsApp olsun. Odyolog'da Kariyer.net ilanı da var; ikisi yan yana durunca hangisi asıl yol belli olmuyordu — Kariyer.net çerçeveli, WhatsApp dolu yeşil. */ .acik-pozisyon__eylem{ display: flex; flex-wrap: wrap; gap: 10px; } .btn--wa{ background: #128C7E; color: #fff; border-color: #128C7E; display: inline-flex; align-items: center; gap: 9px; } .btn--wa svg{ width: 18px; height: 18px; flex: none; } .btn--wa:hover{ background: #0E7268; border-color: #0E7268; color: #fff; } @media (max-width: 640px) { .acik-pozisyon__eylem{ width: 100%; } .acik-pozisyon__eylem .btn{ flex: 1 1 auto; justify-content: center; } } /* ── Yoğunluk geçişi (14 Ağu 2026) ───────────────────────────────────────── Doruk: "hepsi çok uzun ve detaylı; dolu olsun ama dense olsun." İçerik kısaltılmadan sayfa boyu düşürüldü — bölüm boşlukları, başlık altı boşlukları ve kart iç dolgusu sıkıştırıldı. Gövde 17px kuralı ve 44px dokunma hedefi korundu; küçülen tek şey boşluk. */ .section{ padding-block: clamp(48px, 6vw, 88px); } .section--tight{ padding-block: clamp(34px, 4.5vw, 60px); } .section-title{ margin-top: 12px; margin-bottom: 14px; } .section-lead{ font-size: var(--fs-md); line-height: 1.65; } .card{ padding: 26px 24px; } .grid{ gap: 20px; } /* üst üste gelen bölümlerde çift boşluk oluşuyordu */ .section + .section{ padding-top: 0; } .section + .section.band, .section + .section[class*="--dark"]{ padding-top: clamp(48px, 6vw, 88px); } /* ── Kıyas paneli (14 Ağu 2026) ──────────────────────────────────────────── "Yaygın uygulama 1-2 hafta, bizde 3 gün" üç paragrafa yayılmıştı. Yan yana iki sütunda okunduğunda fark tek bakışta görülüyor. Rakip adı geçmiyor; karşılaştırma sektör pratiğiyle yapılıyor. */ .kiyas{ display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--white); } .kiyas__yan{ padding: 26px 26px 24px; } .kiyas__yan + .kiyas__yan{ border-left: 1px solid var(--line); } .kiyas__yan--biz{ background: rgba(11,110,163,.05); } .kiyas__etiket{ display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .kiyas__yan--biz .kiyas__etiket{ color: var(--brand-700); } /* %5 tonlu zeminde 4,32:1 idi */ .kiyas__yan p{ margin: 0 0 16px; color: var(--body); } .kiyas__yan b{ display: block; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; color: var(--muted); } .kiyas__yan--biz b{ color: var(--brand-700); } @media (max-width: 640px) { .kiyas{ grid-template-columns: 1fr; } .kiyas__yan + .kiyas__yan{ border-left: 0; border-top: 1px solid var(--line); } } /* ── Tip listesi (14 Ağu 2026) ───────────────────────────────────────────── Altı kalıp tipi altı ayrı karttı; her biri iki satır metin için bir kutu harcıyordu. Tanım listesi aynı bilgiyi yarı yükseklikte veriyor. */ .tip-liste{ margin: 32px 0 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--white); } .tip-liste > div{ padding: 20px 24px; border-top: 1px solid var(--line); } .tip-liste > div:nth-child(-n+2){ border-top: 0; } .tip-liste > div:nth-child(even){ border-left: 1px solid var(--line); } .tip-liste dt{ font-weight: 700; margin-bottom: 5px; } .tip-liste dd{ margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.5; } @media (max-width: 640px) { .tip-liste{ grid-template-columns: 1fr; } .tip-liste > div{ border-left: 0 !important; border-top: 1px solid var(--line) !important; } .tip-liste > div:first-child{ border-top: 0 !important; } } /* uzun başlıklar dar ekranda kutudan taşıyordu */ h1, h2, h3{ overflow-wrap: break-word; } /* ── Hizmet mozaiği (14 Ağu 2026) ────────────────────────────────────────── Doruk: "çok uzun, dolu dolu çapraz bir şey yap." Altı hizmet kartı fotoğraf + ikon + başlık + paragraf olarak üst üste yığılıyordu; sayfanın en uzun bölümü buydu. İkon kaldırıldı, fotoğraf kartın kendisi oldu ve orta sütun aşağı kaydırılarak çapraz bir ritim verildi. Metin fotoğrafın üzerinde değil altında — 60+ okur için kontrast riski almıyoruz. */ .hzm-mozaik{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; } .hzm{ display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); } /* flex:0 0 auto ŞART — .hzm bir flex kolonu; img esnek öğe olarak gerilince aspect-ratio geçersizleşiyor, kutu 4:3 yerine 0,61 oranına düşüyor ve fotoğraf 1,8 kat büyütülüp kırpılıyordu (16 Ağu 2026). */ /* height:auto ŞART — genel img sıfırlaması yalnız max-width veriyor, bu yüzden HTML'deki height="600" niteliği sunum ipucu olarak geçerli kalıyordu. İki boyut da kesinleşince aspect-ratio yok sayılıyor ve kutu 4:3 yerine 0,60 oranına düşüyordu (16 Ağu 2026 denetimi). */ .hzm > img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; flex: 0 0 auto; } .hzm__ic{ padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; } .hzm__ic h2{ font-size: var(--fs-md); margin: 0 0 9px; letter-spacing: -.01em; } .hzm__ic p{ margin: 0 0 16px; font-size: var(--fs-base); line-height: 1.55; color: var(--muted); } .hzm__ic a{ margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: var(--fs-sm); color: var(--brand-700); text-decoration: none; min-height: 44px; /* 27px'e düşüyordu; 44px dokunma hedefi kuralı */ } .hzm__ic a svg{ width: 16px; height: 16px; flex: none; } .hzm__ic a:hover{ text-decoration: underline; } /* Çapraz ritim KALDIRILDI (16 Ağu 2026): orta sütunu 40px aşağı kaydırmak ilk bakışta hoş duruyordu ama kartların içerik yükseklikleri farklı olduğu için altlar da tutmuyor ve düzen "yamuk" görünüyordu (Doruk bildirdi). Hepsi aynı hizada; ritmi kaydırmayla değil fotoğrafla veriyoruz. */ @media (prefers-reduced-motion: no-preference) { .hzm{ transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .hzm:hover{ border-color: var(--brand); box-shadow: 0 10px 30px rgba(6,32,47,.09); transform: translateY(-3px); } .hzm > img{ transition: transform .4s var(--ease); } .hzm:hover > img{ transform: scale(1.04); } } @media (max-width: 900px) { .hzm-mozaik{ grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (max-width: 560px) { .hzm-mozaik{ grid-template-columns: 1fr; } } /* ── Mini istatistik (14 Ağu 2026) ───────────────────────────────────────── Hakkımızda'da rakamlar ayrı bir tam genişlik bölümdeydi. Hikâye sütununun içine alındı: aynı bilgi, bir bölüm daha az kaydırma. */ .mini-stat{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .mini-stat > div{ padding: 18px 14px 16px; border-left: 1px solid var(--line); } .mini-stat > div:first-child{ border-left: 0; padding-left: 0; } .mini-stat b{ display: block; font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; color: var(--brand); margin-bottom: 4px; } .mini-stat span{ font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; } @media (max-width: 560px) { .mini-stat{ grid-template-columns: 1fr 1fr; } .mini-stat > div:nth-child(odd){ border-left: 0; padding-left: 0; } .mini-stat > div:nth-child(n+3){ border-top: 1px solid var(--line); } } /* altı adımlı yol iki satıra kırılır — dört sütun yerine üç */ /* Altı adımlı yol iki satıra kırılır — dört sütun yerine üç. min-width sınırı ŞART: bu kural dosyada mobil bloktan SONRA geldiği için sınırsız yazıldığında 375px'te de üç sütun dayatıyordu ve hakkimizda sayfası 611px'e taşıyordu (16 Ağu 2026 denetimi). */ @media (min-width: 821px) { .adim-yol--alti{ grid-template-columns: repeat(3, 1fr); row-gap: 40px; } .adim-yol--alti .adim-yol__adim:nth-child(4)::before{ display: none; } } /* ── Marka şeridi (14 Ağu 2026) ──────────────────────────────────────────── Dört marka dört ayrı kartta, her biri üç satır metinle duruyordu. Logo + tek satır ürün ailesi yeterli; ayrıntı marka sayfalarında zaten var. */ .marka-serit{ margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--white); } .marka-serit a{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 26px 18px; text-decoration: none; border-left: 1px solid var(--line); min-height: 44px; } .marka-serit a:first-child{ border-left: 0; } /* eşit kutu: logolar optik olarak aynı ağırlıkta dursun (Doruk'un isteği) */ .marka-serit img{ width: 116px; height: 34px; object-fit: contain; display: block; } .marka-serit span{ font-size: var(--fs-sm); color: var(--muted); text-align: center; line-height: 1.45; } .marka-serit a:hover{ background: rgba(11,110,163,.05); } @media (max-width: 720px) { .marka-serit{ grid-template-columns: 1fr 1fr; } .marka-serit a:nth-child(odd){ border-left: 0; } .marka-serit a:nth-child(n+3){ border-top: 1px solid var(--line); } } /* Rexton logosu sarı-siyah; beyaz zeminde kayboluyor (kendi kılavuzunda da siyah) */ /* Rexton logosu sarı-siyah; beyaz zeminde kayboluyor (kendi kılavuzunda da siyah). Kutu boyu değişmiyor, sadece arkasına siyah levha geliyor. */ .marka-serit a img[src*="rexton"]{ background: #111; border-radius: 7px; padding: 5px 9px; box-sizing: border-box; } /* ── Marka kümesi (14 Ağu 2026) ──────────────────────────────────────────── Doruk: "marka marka sırala — ReSound, Widex, Rexton, Signia." Vitrin sekiz kartı karışık sırayla tek ızgarada gösteriyordu. Artık her markanın kendi başlığı ve iki modeli var; sıra Doruk'un verdiği sıra. */ .marka-kume{ margin-top: 34px; } .marka-kume + .marka-kume{ margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--line); } .marka-kume__bas{ display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; } .marka-kume__bas img{ width: 116px; height: 34px; object-fit: contain; display: block; } .marka-kume__bas img[src*="rexton"]{ background: #111; border-radius: 7px; padding: 5px 9px; box-sizing: border-box; } .marka-kume__bas a{ margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: var(--fs-sm); color: var(--brand-700); text-decoration: none; min-height: 44px; } .marka-kume__bas a svg{ width: 16px; height: 16px; flex: none; } .marka-kume__bas a:hover{ text-decoration: underline; } @media (max-width: 560px) { .marka-kume__bas a{ margin-left: 0; } } @media (max-width: 1000px) { .cihaz-izgara{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .cihaz-izgara{ grid-template-columns: 1fr; } } /* ── Model şeridi (14 Ağu 2026) ──────────────────────────────────────────── "Hangi model kime uygun?" üç kartta fotoğraf + paragraf + iki maddelik liste taşıyordu; liste paragrafın tekrarıydı. Kime uygun olduğu artık tek rozet satırında. */ .model-serit{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; } /* Gölge, renk değil. Kart zemini (--white) sayfa zemininden yalnız 1,038 parlaklık oranı uzakta — ölçüldü. Rengi açmak metin kontrastlarını da oynatırdı; gölge kartı zeminden ayırıyor ve hiçbir metnin okunurluğuna dokunmuyor. */ .model-serit > article{ border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); padding: 20px 20px 22px; text-align: center; box-shadow: 0 10px 26px -18px rgba(10, 42, 61, .45); } /* 31 Ağu 2026 — Doruk: "cihaz fotoğrafları çok küçük durmuş, bir de burada arka plan rengi bu hizmetler yerinde biraz yavan." İkisi de ölçülebilir şeydi. Cihazlar 140px'e sığdırılmıştı ve arkalarında hiçbir zemin yoktu: şeffaf kutuda, kartın kendi kremi üstünde yüzüyorlardı. Kart zemini (--white #f0e9da) sayfa zemininden (--page #ece5d5) yalnız 0,03 parlaklık farkındaydı — göz kartın nerede başladığını seçemiyor, sayfa tek düze bir krem oluyordu. "Yavan" denen şey bu. Çözüm cihaz kartlarında zaten vardı ve kanıtlanmıştı (.tipk__foto, 1. geri bildirim turu): cihazın arkasına merkezden açılan bir zemin ve altına gölge. Cihaz zeminden kopuyor, kart da sayfadan. Yükseklik 150 -> 196px, görsel 140 -> 168px. */ .model-serit__gorsel{ height: 196px; margin: -2px 0 18px; padding: 14px; border-radius: var(--r-sm); background: radial-gradient(120% 96% at 50% 18%, #fff 0%, var(--gri-50) 58%, var(--wash) 100%); display: grid; place-items: center; } .model-serit__gorsel img{ max-height: 168px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(10, 42, 61, .20)); } .model-serit h3{ font-size: var(--fs-md); margin: 0 0 8px; } .model-serit__kime{ display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(11,110,163,.10); color: var(--brand-700); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .03em; } .model-serit p{ margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--muted); } @media (max-width: 800px) { .model-serit{ grid-template-columns: 1fr; } } /* ── Izgara dip şeridi (14 Ağu 2026) ─────────────────────────────────────── "Şubelerimizde mevcut" rozeti 52 kartın hepsinde, "Renk seçenekleri için arayın" notu 32'sinde birebir aynı metinle duruyordu — kart başına ~140px tekrar. İkisi de ızgaranın dibine tek sefer alındı; mesaj duruyor, yükseklik gitti. */ .izgara-dip{ margin-top: 26px; padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); } .izgara-dip span, .izgara-dip a{ display: inline-flex; align-items: center; gap: 9px; font-weight: 600; } .izgara-dip span{ color: var(--ink); } .izgara-dip span svg{ width: 18px; height: 18px; flex: none; color: #176038; } .izgara-dip a{ margin-left: auto; color: var(--brand); text-decoration: none; min-height: 44px; } .izgara-dip a svg{ width: 17px; height: 17px; flex: none; } .izgara-dip a:hover{ text-decoration: underline; } @media (max-width: 620px) { .izgara-dip a{ margin-left: 0; } } /* ── Cihaz tipi karoları (14 Ağu 2026) ───────────────────────────────────── Doruk: "çok çok uzun ve hepsi ayrık." Dört cihaz tipi dört ayrı tam genişlik bölümdeydi; her biri tek paragraf için bir ekran harcıyordu. Artık 2x2 karo: aynı bilgi, dörtte bir yükseklik. Artı/eksi ayrımı renkle değil, ikonla ve etiketle veriliyor — renk körlüğünde de okunsun. */ .tip-karo{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; } .tipk{ border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); padding: 24px 24px 20px; } .tipk header{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .tipk h2{ font-size: var(--fs-md); margin: 0; } .tipk header span{ font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; color: var(--brand-700); } .tipk__ne{ margin: 0 0 12px; color: var(--body); } .tipk__kime{ margin: 0 0 16px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; color: var(--brand-700); } .tipk dl{ margin: 0; display: grid; gap: 12px; } .tipk dt{ font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; } .tipk dd{ margin: 0; font-size: var(--fs-base); line-height: 1.5; color: var(--muted); } .tipk dt::before{ content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .tipk--arti dt{ color: #176038; } .tipk--arti dt::before{ -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .tipk--eksi dt{ color: #8A5A00; } .tipk--eksi dt::before{ -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); } @media (max-width: 780px) { .tip-karo{ grid-template-columns: 1fr; } } /* ── Kart yığını (14 Ağu 2026) ───────────────────────────────────────────── Rehber sayfalarında her kart kendi tam genişlik bölümündeydi; kartlar arasında bölüm dolgusu kadar (48-88px) boşluk oluşuyordu. Tek bölümde yığıldılar, aralık 20px'e indi. İçerik değişmedi. */ /* Izgara öğelerinin varsayılan min-width:auto değeri, içindeki en geniş öğenin daralmasına izin vermiyor. isitme-kaybi-belirtileri'nde bir kartta 365px'lik tablo var: tablo kendi overflow-x:auto kutusunda olmasına rağmen kart küçülemediği için tek sütunlu ızgara 320px kutuda 415px sütun üretiyordu ve sayfa 360px telefonda 435px genişliğe çıkıyordu. min-width:0 ile kart daralıyor, tablo kendi kutusunda yatay kayıyor. */ .kart-yigin{ display: grid; gap: 20px; } .kart-yigin > *{ min-width: 0; } /* ── Hareket azaltma (14 Ağu 2026) ───────────────────────────────────────── Denetimde çıktı: beş sonsuz animasyonun hiçbiri prefers-reduced-motion korumasında değildi; mevcut reduce bloğu yalnız scroll-behavior'ı kapatıyordu. Vestibüler rahatsızlığı olan kullanıcı için sürekli zıplayan ve kayan öğeler tam da bu ayarın engellemesi gereken şey. (Erişilebilirlik tarayıcısı da animasyon karesinde örneklediği için kontrast oranını her koşuda farklı ölçüyordu.) */ @media (prefers-reduced-motion: reduce) { .ticker__track, .pulse-btn, .awards__label, .cok-satan::after{ animation: none !important; } /* kayan şeritler durunca içerik kırpılmasın */ .ticker__track{ transform: none !important; flex-wrap: wrap; justify-content: center; } *, *::before, *::after{ transition-duration: .01ms !important; /* gecikme de sıfırlanmalı: SSS panelinin visibility'si 0,35 sn gecikmeli kapanıyor, hareket azaltmada bu bekleme anlamsız kalıyordu */ transition-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } @media (prefers-reduced-motion: no-preference) { } @media (max-width: 560px) { } /* ── Tip matrisi (16 Ağu 2026) ───────────────────────────────────────────── Asıl sorun buydu: 52 cihaz dört marka sayfasına dağılmıştı ve hastaneden "sana kulak arkası lazım" denen okur dördünü de taramak zorundaydı. Satır = tip, sütun = marka, hücre = o markadaki model sayısı ve doğrudan filtreli sayfaya bağlantı. Marka sayfası hash'i okuyup filtreyi uyguluyor. */ .tip-matris { margin-top: 30px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--white); } .tm__satir { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, 1.5fr); align-items: center; gap: 18px; padding: 16px 22px; border-top: 1px solid var(--line); } .tm__satir:first-child { border-top: 0; } /* Kısaltma (BTE, RIC…) tip adının yanında küçük bir rozet olarak duruyor; açıklama satırından çıkarıldı ki satır kısalsın (Doruk, 16 Ağu 2026). */ .tm__tip b { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: var(--fs-base); margin-bottom: 4px; } .tm__tip b em { font-style: normal; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; color: var(--brand-700); background: rgba(11,110,163,.10); padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; } .tm__tip span { font-size: var(--fs-base); color: var(--muted); line-height: 1.45; } .tm__huceler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .tm__huceler a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 8px 6px; border: 1.5px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--white); } .tm__huceler a b { font-size: var(--fs-md); font-weight: 800; color: var(--brand-700); line-height: 1.1; } .tm__huceler a span { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-top: 2px; } .tm__huceler a:hover { border-color: var(--brand-700); background: rgba(11,110,163,.06); } .tm__huceler a:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .tm__huceler a { transition: border-color .18s ease, background .18s ease; } } @media (max-width: 720px) { .tm__satir { grid-template-columns: 1fr; gap: 12px; } } /* ── Kaydırma kilidi (16 Ağu 2026) ───────────────────────────────────────── Çekmece, fotoğraf katmanı ve arama katmanı body.style.overflow'u doğrudan yazıyordu; ikisi aynı anda açıkken biri kapanınca kilit tamamen düşüyor, arkadaki sayfa kayıyordu. Artık her katman kendi sınıfını bırakıyor; biri bile duruyorsa kilit sürüyor. */ html[class*="kilit-"] , html[class*="kilit-"] body { overflow: hidden; } /* Ana sayfa başlığındaki nowrap 375px ekrana sığmıyordu (16 Ağu 2026) */ @media (max-width: 560px) { .baslik-nowrap { white-space: normal !important; } } /* ── Hero sosyal kartı (16 Ağu 2026) ─────────────────────────────────────── Doruk üst çubuktan Instagram/Facebook ikonlarını kaldırtmıştı (sıkışıktı); hero'daki SGK post-it'inin altına, aynı görsel aileden küçük bir kart. */ .hero-sosyal{ position: absolute; top: clamp(238px, 30vh, 306px); right: clamp(24px, 4vw, 60px); z-index: 3; width: 250px; display: none; flex-direction: column; gap: 10px; padding: 14px 18px 16px; border-radius: 4px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 26px rgba(6,32,47,.28); transform: rotate(1.6deg); border-top: 4px solid #C13584; } .hero-sosyal__ust{ font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #14607F; } .hero-sosyal__baglar{ display: flex; gap: 8px; } .hero-sosyal__baglar a{ flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 10px; border-radius: 8px; background: var(--wash); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 700; } .hero-sosyal__baglar svg{ width: 18px; height: 18px; flex: none; } .hero-sosyal__baglar a:hover{ background: var(--brand-700); color: #fff; } .hero-sosyal__baglar a:focus-visible{ outline: 3px solid var(--brand-700); outline-offset: 2px; } @media (min-width: 1100px){ .hero-sosyal{ display: flex; } } @media (prefers-reduced-motion: no-preference){ .hero-sosyal__baglar a{ transition: background .18s ease, color .18s ease; } } /* ── Marka şeridi yeniden (16 Ağu 2026) ──────────────────────────────────── Doruk: "yan taraflar müsait boş." Şerit ortalanmış üç öğeydi, iki yanı bomboştu ve marka adları gerçek logo değil renkli düz yazıydı. Artık üç bölge: sol künye, ortada gerçek logolar, sağda SGK. */ .awards__inner{ display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 40px); } .awards__yan{ display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .awards__yan--sol{ flex-direction: column; align-items: flex-start; gap: 2px; } .awards__yan--sag{ min-height: 44px; } .awards__yan--sag img{ width: 52px; height: auto; flex: none; } .awards__yan--sag span{ display: flex; flex-direction: column; gap: 2px; } .awards__ust{ font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .awards__alt{ font-size: var(--fs-base); font-weight: 800; color: var(--ink); letter-spacing: -.01em; } .awards__yan--sag:hover .awards__alt{ color: var(--brand-700); } .awards__logos{ display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap; justify-content: center; } .awards__logo{ display: flex; align-items: center; min-height: 44px; } .awards__logo img{ width: 116px; height: 30px; object-fit: contain; display: block; } .awards__logo img[src*="rexton"]{ background: #111; border-radius: 6px; padding: 4px 8px; box-sizing: border-box; height: 30px; } @media (prefers-reduced-motion: no-preference){ .awards__logo{ transition: opacity .2s ease; } } .awards__logo:hover{ opacity: .72; } @media (max-width: 980px){ .awards__inner{ flex-direction: column; gap: 16px; } .awards__yan--sol{ align-items: center; } } /* ── Sosyal "fermuar" (16 Ağu 2026) ──────────────────────────────────────── Doruk: "sol insta sağ facebook, soldan sağa kaydırınca zip açılıyormuş gibi geçsin." İki panel üst üste; kol sürüklendikçe Instagram'ın payı büyüyüp Facebook'unki küçülüyor. Instagram kendi gradyanıyla. Erişilebilirlik: iki bağlantı da her zaman DOM'da ve Tab ile ulaşılabilir; kol bir slider, ok tuşlarıyla da sürülüyor. Kolu hiç kullanmayan biri ikisini de görüyor çünkü varsayılan yarı yarıya. */ .sosyal-zip{ position: relative; display: flex; overflow: hidden; border-radius: 16px; min-height: 104px; isolation: isolate; --zip: 50%; } .sosyal-zip__yan{ position: absolute; inset: 0; display: flex; align-items: center; text-decoration: none; color: #fff; padding: 18px 22px; } .sosyal-zip__yan--ig{ background: linear-gradient(115deg, #F9CE34 0%, #EE2A7B 48%, #6228D7 100%); clip-path: inset(0 calc(100% - var(--zip)) 0 0); justify-content: flex-start; } .sosyal-zip__yan--fb{ background: linear-gradient(115deg, #1877F2 0%, #0B5FCC 100%); clip-path: inset(0 0 0 var(--zip)); justify-content: flex-end; } .sosyal-zip__ic{ display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; } .sosyal-zip__ic svg{ width: 30px; height: 30px; flex: none; } .sosyal-zip__ic > span{ display: flex; flex-direction: column; font-weight: 800; font-size: var(--fs-base); } .sosyal-zip__ic small{ font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; } /* sürüklenen kol */ .sosyal-zip__kol{ position: absolute; top: 0; bottom: 0; left: var(--zip); z-index: 2; width: 44px; margin-left: -22px; cursor: col-resize; display: grid; place-items: center; background: transparent; border: 0; } .sosyal-zip__kol::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: rgba(255,255,255,.9); } .sosyal-zip__tut{ width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(6,32,47,.3); position: relative; z-index: 1; } .sosyal-zip__tut::before, .sosyal-zip__tut::after{ content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); } .sosyal-zip__tut::before{ left: 11px; transform: translateY(-50%) rotate(-135deg); } .sosyal-zip__tut::after{ right: 11px; transform: translateY(-50%) rotate(45deg); } .sosyal-zip__kol:focus-visible{ outline: 3px solid #fff; outline-offset: -6px; border-radius: 8px; } @media (max-width: 620px){ .sosyal-zip{ min-height: 96px; } .sosyal-zip__ic > span{ font-size: var(--fs-sm); } .sosyal-zip__ic svg{ width: 26px; height: 26px; } } /* ── Kural şeridi yeniden (16 Ağu 2026) ──────────────────────────────────── Doruk: "ortalayarak yaz güzel design et". Eski hâli sola dayalıydı, dört sütun düz bir tabloya benziyordu ve sayı yeterince öne çıkmıyordu. Şimdi her hücre ortalı, rakam büyüdü, üstüne kısa bir marka çizgisi kondu. Bölücü çizgiler kenarlara değmiyor (::before ile içeriden), böylece panel tablo değil, dört ayrı bilgi gibi okunuyor. */ .kural-serit{ margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 20px; background: var(--white); overflow: hidden; text-align: center; } .kural-serit > div{ position: relative; padding: 30px 20px 28px; border-left: 0; display: flex; flex-direction: column; align-items: center; } /* Bölücü: tam yükseklik değil, üstten ve alttan 22px içeride */ .kural-serit > div + div::before{ content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: var(--line); } /* Rakamın üstündeki kısa marka çizgisi — gözü sayıya çeken tek süs */ .kural-serit > div::after{ content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--brand); opacity: .55; order: -1; margin-bottom: 14px; } .kural-serit b{ display: block; font-size: clamp(1.3rem, 1.9vw, 1.5rem); font-weight: 700; color: var(--brand); letter-spacing: -.02em; line-height: 1.25; margin-bottom: 10px; } .kural-serit span{ display: block; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); max-width: 25ch; margin-inline: auto; } @media (max-width: 900px){ .kural-serit{ grid-template-columns: repeat(2, 1fr); } .kural-serit > div + div::before{ content: none; } .kural-serit > div:nth-child(even)::before{ content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: var(--line); } .kural-serit > div:nth-child(n+3){ border-top: 1px solid var(--line); } } @media (max-width: 540px){ .kural-serit{ grid-template-columns: 1fr; } .kural-serit > div{ border-top: 1px solid var(--line); padding: 26px 22px; } .kural-serit > div:first-child{ border-top: 0; } .kural-serit > div::before, .kural-serit > div:nth-child(even)::before{ content: none; } } /* ── Rakam şeridi vurgusu (16 Ağu 2026) ──────────────────────────────────── Doruk: "bu vurgulanması gereken en önemli şey çok sonuk kalmış". 2010, 14 şube, 100.000+ hasta ve 4 bayilik sayfanın en güçlü kanıtı ama iki ince çizgi arasında küçük duruyordu. Panel hâline geldi, rakam iki katına yakın büyüdü, etiket rengi soluk griden mürekkebe çekildi. */ .mini-stat{ /* minmax(0,1fr) ŞART: düz 1fr içeriğe göre büyüyebiliyor ve "100.000+" kutusu diğerlerinin iki katı genişliyordu — 106/106/217/106. (24 Ağu 2026) NOT: bu dosyada .mini-stat İKİ kez tanımlı; yukarıdaki eski tanım tamamen bu blok tarafından eziliyor. Temizlenmeli ama şimdi dokunulmadı, 560px kırılımı ayrı davranıyor. */ /* 30 Ağu 2026 — DÖRT SÜTUN 2x2 OLDU. Doruk bildirdi: "100000 hasta yazısında hata var". Ölçtüm: "100.000+" 208 px yer istiyor, hücresi 102 px — yani her ekran genişliğinde komşu hücrenin üstüne taşıyor ve ekranda "100.0004" gibi okunuyordu. 24 Ağustos'taki minmax(0,1fr) düzeltmesi hücrenin BÜYÜMESİNİ engellemişti ama metnin taşmasını engellemedi; sorunu görünmez kılmak yerine kırptı. Asıl kısıt viewport değil KAPSAYICI: bu blok iki sütunlu bir yerleşimin sağ kolonunda ve 1920 px'te bile yalnız 536 px geniş. Dört sütunda 44 px'lik bir sayı oraya sığmıyor; 2x2'de hücre 268 px ve rahatça sığıyor. Bu blok sitede TEK YERDE kullanılıyor (hakkimizda.html), o yüzden varsayılanı değiştirmek güvenli. */ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 30px; border: 1px solid var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 18px; background: var(--white); overflow: hidden; text-align: center; } .mini-stat > div{ position: relative; padding: 26px 16px 24px; border-left: 0; } .mini-stat > div:first-child{ padding-left: 16px; } .mini-stat > div:nth-child(even)::before{ content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: var(--line); } .mini-stat > div:nth-child(n+3){ border-top: 1px solid var(--line); } .mini-stat b{ display: block; font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; color: var(--brand); margin-bottom: 8px; font-variant-numeric: tabular-nums; } .mini-stat span{ display: block; font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); font-weight: 700; line-height: 1.35; } @media (max-width: 720px){ .mini-stat{ grid-template-columns: repeat(2, 1fr); } .mini-stat > div + div::before{ content: none; } .mini-stat > div:nth-child(even)::before{ content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: var(--line); } .mini-stat > div:nth-child(n+3){ border-top: 1px solid var(--line); } .mini-stat > div:nth-child(odd){ padding-left: 16px; } } /* ── SSS cevap metni (16 Ağu 2026) ───────────────────────────────────────── Doruk: "cevapların yazısı biraz sonuk pek okunmuyor gibi". Cevap gövdesi --body (#51626b) ile yazılıyordu; --white zemininde oran 5.30:1, AA'yı geçiyor ama soru başlığı mürekkep siyahıyken cevap gri kalınca yazı geri çekilmiş gibi duruyordu. Cevap da mürekkebe çekildi. */ /* Bu üç kural da `.faq__a-inner`i hedefliyordu — o sarmalayıcı HTML'de yok, yani hiç uygulanmıyordu. Gerçek işaretlemeye çevrildi. `--ink` özgün niyetti ve 60+ okur için daha koyu, daha okunur. */ .faq__a > *{ color: var(--ink); } .faq__a p, .faq__a li{ color: var(--ink); } .faq__a a{ color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; } /* ── Açık pozisyon satırı (16 Ağu 2026) ──────────────────────────────────── Doruk: üç ilan da 2. ve 3. karttaki gibi tek satır olsun. Odyolog kartında iki düğme olduğu için satır taşıyor ve düğmeler alt sıraya düşüyordu; şimdi üçünde de iki düğme var, dolayısıyla eski hâlde üçü birden bozulurdu. Çözüm: bilgi bloğu esneyip yer adını kendi içinde alta sarıyor, düğme grubu sabit kalıyor. Ara boşluk elemanına artık gerek yok. */ .acik-pozisyon__bilgi{ flex: 1 1 240px; min-width: 0; } .acik-pozisyon__eylem{ flex: none; flex-wrap: nowrap; } @media (max-width: 900px){ .acik-pozisyon__eylem{ flex-wrap: wrap; } } /* Rakam şeridi — seçici çakışması (16 Ağu 2026) "2010" gibi rakamlar 2010 diye yazılıyor. `.mini-stat span` etiket kuralı bu iç sayaç span'ini de yakalıyordu: rakam 44px yerine 14px, büyük harfe çevrilmiş ve gri basılıyordu. Doruk'un "çok sönük kalmış" dediği şeyin sebebi buydu; büyütmek tek başına yetmez, kuralın yalnız etikete inmesi gerekiyor. */ .mini-stat > div > span{ display: block; font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); font-weight: 700; line-height: 1.35; } .mini-stat b span{ font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; display: inline; } /* ── Kontrast düzeltmeleri, ikinci denetim (16 Ağu 2026) ─────────────────── Denetim token değerlerinden 27 eşleşme hesaplamış. Ben aynı hesabı canlı sayfada, alfa katmanlarını birleştirerek ve gradyanlı zeminleri hariç tutarak tekrarladım — teorik ihlalin çoğu sitede hiç oluşmuyordu. Geriye üç GERÇEK ihlal kaldı, üçü de burada kapatıldı. 1) WhatsApp düğmesi. #128C7E üstünde beyaz metin 4.14 — 4.5'in altında. Tuhaf olan şu: hover rengi (#0E7268, 5.79) duran hâlden daha okunaklıydı. #118376 markanın yeşiline en yakın geçen ton (4.63). */ .btn--wa{ background: #118376; border-color: #118376; } .btn--wa:hover{ background: #0C6155; border-color: #0C6155; } /* 2) Cihaz fotoğrafındaki tip rozeti markanın aksan rengini alıyor. Dördün üçü geçiyor (ReSound 7.26, Rexton 18.88, Widex 7.01) ama Signia'nın kırmızısı beyaz metinle 3.99. Yalnız Signia koyulaştırıldı; marka kimliği kırmızı kalıyor, okunurluk 5.02'ye çıkıyor. */ .brand-signia .device-photo__tag, .brand-signia .brand-plate::after{ --brand-accent: #E00300; } /* 3) Form alanlarının kenarlığı --line (#bcc6d5) idi; #edf1f7 zemininde 1.52. WCAG 1.4.11 arayüz sınırları için 3.0 istiyor — yani az gören biri kutunun nerede bittiğini göremiyordu. --line dekoratif ayraçlarda kalıyor, form kenarlığı ayrı bir tokene alındı. Sitede aslında tek bir metin kutusu var: site araması. (.field input kuralı duruyor ama iletişim WhatsApp'a düştüğü için sayfada hiç metin alanı basılmıyor — denetimin "form input" maddesi orada boşa çıkıyor, gerçek ihlal aramada.) Aynı düzeltme şube arama kutusunu da kapsıyor. */ :root{ --line-alan: #76879f; } .arama__giris{ border-color: var(--line-alan); } .sube-ara__kutu{ border-color: var(--line-alan); } .field input, .field select, .field textarea{ border-color: var(--line-alan); } /* ── Stok rozeti (16 Ağu 2026) ───────────────────────────────────────────── Doruk: marka kartlarındaki slogan ve "Stokta + özellik" hap satırı gitsin, stok bilgisi "en çok tercih edilen" rozetindeki gibi verilsin. Aynı geometri (hap, ikon + büyük harf, kartın en üstünde) ama altın değil yeşil, ve ışıltı animasyonu YOK: altın rozet sayfanın en vurgulu öğesi olarak kalmalı, stok bilgisi onunla yarışmamalı. Gradyanın en açık durağı bile beyaz metinle 4.64 veriyor (#12855A); altın rozetteki gibi açık bir vurgu durağı kullanılamazdı, beyaz metin orada 2.15'e düşerdi. */ .stok-rozet{ display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 8px 16px; border-radius: 999px; background: linear-gradient(100deg, #0B6B45 0%, #0F7A52 45%, #12855A 60%, #0F7A52 78%, #0B6B45 100%); color: #fff; font-size: var(--fs-xs); font-weight: 900; letter-spacing: .07em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(11,107,69,.28); } .stok-rozet svg{ width: 14px; height: 14px; flex: none; } /* Hap satırı kalkınca "İncele" bağlantısını alta iten şey kalmadı; dört kartın bağlantısı aynı hizada dursun diye boşluğu bağlantı üstlendi. */ .brandcard .card__link{ margin-top: auto; padding-top: 16px; } /* ── Marka logoları kayan şerit (16 Ağu 2026) ────────────────────────────── Doruk referans olarak sürekli dönen bir logo şeridi verdi. Üst çubuktaki ticker aynı deseni zaten kullanıyor (iki özdeş grup + -%50 kaydırma), o desen buraya uyarlandı. Dört logo pencereden dar kaldığı için grup içinde üç kez tekrarlanıyor; yoksa -%50'de boşluk görünürdü. Tekrarların ve ikinci grubun tamamı aria-hidden ve — ekran okuyucu markaları 6 kez okumasın, klavye kullanıcısı aynı bağlantıya 6 kez takılmasın diye. Gerçek bağlantı 4 tane. Kenarlarda maske var: logo pencereye girip çıkarken kesilmiş görünmesin. Üzerine gelince duruyor — 60+ kullanıcı logoya tıklamak isteyebilir. */ .awards__logos{ /* flex-basis 0 ŞART: `auto` olduğunda taban içerikten geliyor ve pencere şeridin tamamı kadar (24 logo) genişleyip kırpmayı tamamen kaybediyor. 0 tabanla pencere daima kapsayıcının artan genişliği kadar olur. */ flex: 1 1 0; min-width: 0; max-width: 100%; overflow: hidden; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .awards__ray{ display: flex; width: max-content; will-change: transform; animation: awardsKay 38s linear infinite; } .awards__grup{ display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 4vw, 56px); } @keyframes awardsKay{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } } .awards__logos:hover .awards__ray, .awards__logos:focus-within .awards__ray{ animation-play-state: paused; } .awards__logo{ flex: none; } /* Tek tek beliren giriş animasyonu artık şeritle çakışıyor: kayan bir rayda nth-child gecikmesi logoları düzensiz gösteriyordu. Şeritte kapatıldı. */ .awards__logos .awards__logo{ animation: none; } /* Hareket azaltma: şerit tamamen durur ve ilk dört logo ortalanmış olarak sabit kalır — kullanıcı hiçbir markayı kaçırmasın. */ @media (prefers-reduced-motion: reduce){ .awards__ray{ animation: none; transform: none; } .awards__logos{ -webkit-mask-image: none; mask-image: none; } .awards__grup:nth-child(2){ display: none; } .awards__ray{ justify-content: center; width: 100%; } .awards__grup{ flex-wrap: wrap; justify-content: center; } } /* Şerit kendi satırına düşerse pencere içerik genişliğine büyür ve kırpma kaybolur; masaüstünde sarma kapatıldı (mobil ayrı kuralda sütuna geçiyor). */ .awards__inner{ flex-wrap: nowrap; } @media (max-width: 760px){ .awards__inner{ flex-wrap: wrap; } } /* Geniş tablolar dar ekranda kendi içinde kayar — sayfanın kendisi yatay kaymamalı. Klavye kullanıcısı da kaydırabilsin diye odaklanabilir. */ .tablo-kaydir{ overflow-x: auto; -webkit-overflow-scrolling: touch; } .tablo-kaydir:focus-visible{ outline: 3px solid var(--brand); outline-offset: 2px; } .tablo-kaydir .sgk-tablo{ min-width: 520px; } /* Dar ekranda rozet kart genişliğini aşmasın */ @media (max-width: 520px){ .devicecard--one > .cok-satan{ max-width: calc(100% - 24px); font-size: var(--fs-2xs); padding: 7px 12px; } } /* ── Marka bandı (17 Ağu 2026, ÖNCE ReSound'da deneniyor) ────────────────── Doruk: "resound sayfasına geldiğimizde resound renklerini mi kullansak, logonun altından itibaren". Üç yaklaşım tasarlatıldı, seçilen bu: renk sayfanın TAMAMINA değil, yalnız logonun hemen altındaki başlık bandına yayılıyor. Gerekçesi ölçümde: · Beyaz metin marka zemininde — ReSound 7.26, Widex 7.01, Rexton 18.88: üçü de AAA. Signia 3.99: başlık geçer (büyük metin 3.0), gövde metni KALIR. O yüzden yalnız Signia koyultuluyor (#E00300 → 5.02); depoda zaten emsali var, cihaz rozeti aynı sebeple koyultulmuştu. · Sayfanın gerisi (cihaz kartları, tablolar) doğrulanmış nötr zeminde kalıyor. Okumanın olduğu yer değişmiyor, kimlik anını bant veriyor. · --brand, --brand-700 ve --cyan hiç ellenmiyor: sitedeki ~25 adet :focus-visible kuralı ölçülmüş kontrastıyla duruyor. Diğer üç markaya açmak için tek iş: o sayfanın
etiketine pagehead--marka eklemek. Token'ları burada hazır. */ .brand-resound{ --marka-bant: #AA1835; } .brand-widex { --marka-bant: #58595B; } .brand-rexton { --marka-bant: #111111; } .brand-signia { --marka-bant: #E00300; } /* ham #FF0400 gövde metninde kalıyor */ .pagehead--marka{ background: var(--marka-bant, var(--navy)); border-bottom: 0; } .pagehead--marka h1, .pagehead--marka p, .pagehead--marka .eyebrow, .pagehead--marka .breadcrumb, .pagehead--marka .breadcrumb span{ color: #fff; } .pagehead--marka .eyebrow::before{ background: rgba(255,255,255,.55); } .pagehead--marka .breadcrumb a{ color: rgba(255,255,255,.86); } .pagehead--marka .breadcrumb a:hover{ color: #fff; } .pagehead--marka .breadcrumb svg{ color: rgba(255,255,255,.55); } /* Signia istisnası: #E00300 dört zeminin en parlağı. .86 saydam beyaz ekmek kırıntısı burada 3.91'e düşüyor (AA 4.5 ister; tarayıcıyla ölçüldü), koyu ReSound/Widex/Rexton bantlarında ise geçiyor. Tam beyaz 5.02 veriyor — rozetteki #E00300 seçiminin gerekçesiyle aynı hesap. Özgüllük (0,3,1), üstteki (0,2,1) kuralı yener. */ main.brand-signia .pagehead--marka .breadcrumb a{ color: #fff; } /* Odak halkası koyu zeminde de görünsün — sitenin cyan'ı burada kaybolur */ .pagehead--marka a:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; } /* ── Marka rengi aşağı yayılıyor (17 Ağu 2026) ───────────────────────────── Doruk bandı beğendi, "alt taraflara da yapmayalım mı" dedi. Renk sayfayı baştan sona kaplamıyor; iki uçta duruyor ve arada bölüm etiketlerinde tekrarlıyor. Böylece kimlik sayfa boyunca hissediliyor ama cihaz kartları ve tablolar doğrulanmış nötr zeminde okunmaya devam ediyor. Üç yer: 1) Bölüm etiketleri (eyebrow) — markanın metin-güvenli tonunda 2) Kapanış CTA'sı — dolu marka zemini, üstteki bandın eşi (kitap kapağı) 3) Bölüm başlığı altındaki ince çizgi Metin tonu bantla aynı değil: bant dolgu, bu metin. Signia'nın ham kırmızısı sayfa zemininde 2.91 veriyor, #B00200 ise 5.38. Rexton ve Widex ham hâlleriyle geçiyor (13.81 / 5.13). */ .brand-resound{ --marka-metin: #AA1835; } .brand-widex { --marka-metin: #58595B; } .brand-rexton { --marka-metin: #111111; } .brand-signia { --marka-metin: #B00200; } main.brand-resound .eyebrow, main.brand-widex .eyebrow, main.brand-rexton .eyebrow, main.brand-signia .eyebrow{ color: var(--marka-metin); } main.brand-resound .eyebrow::before, main.brand-widex .eyebrow::before, main.brand-rexton .eyebrow::before, main.brand-signia .eyebrow::before{ background: var(--marka-metin); } /* Bandın içindeki eyebrow beyaz kalmalı. ÖZGÜLLÜK ŞART: yukarıdaki `main.brand-* .eyebrow` kuralı (0,2,1) sıradan `.pagehead--marka .eyebrow` kuralını (0,2,0) yeniyor — sonra yazılmış olması yetmiyor. Ölçtüğümde banttaki etiket kırmızı zeminde kırmızı çıkıyordu, kontrast 1.0, yani görünmez. Marka adı da main'e eklenerek (0,3,1) yapıldı. */ main.brand-resound .pagehead--marka .eyebrow, main.brand-widex .pagehead--marka .eyebrow, main.brand-signia .pagehead--marka .eyebrow{ color: #fff; } main.brand-resound .pagehead--marka .eyebrow::before, main.brand-widex .pagehead--marka .eyebrow::before, main.brand-signia .pagehead--marka .eyebrow::before{ background: rgba(255,255,255,.55); } /* Rexton bandın içinde beyaz DEĞİL, kendi sarısı (31 Ağu 2026). Rexton'ın kimliği sarı-siyah; bandı zaten #111111 ve orada beyaz etiket markayı hiç göstermiyordu. Ölçüldü: #F8E600 / #111111 = 14,67:1 — beyazın verdiği 18,1:1'den düşük ama AA'nın çok üstünde, ve marka doğru görünüyor. Diğer üç bandın zemini renkli olduğu için onlarda beyaz kalıyor. */ main.brand-rexton .pagehead--marka .eyebrow{ color: #F8E600; } main.brand-rexton .pagehead--marka .eyebrow::before{ background: #F8E600; } /* Kapanış CTA'sı: üstteki bandın eşi. Lacivert yerine marka dolgusu, mavi/cyan ışımalar da markanın tonuna çevrildi yoksa kırmızı zeminde mavi leke kalıyordu. */ main.brand-resound .cta, main.brand-widex .cta, main.brand-rexton .cta, main.brand-signia .cta{ background: var(--marka-bant); } main.brand-resound .cta::before, main.brand-widex .cta::before, main.brand-rexton .cta::before, main.brand-signia .cta::before{ background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); } main.brand-resound .cta::after, main.brand-widex .cta::after, main.brand-rexton .cta::after, main.brand-signia .cta::after{ background: radial-gradient(circle, rgba(0,0,0,.18), transparent 70%); } /* CTA gövde metni --on-dark ile yazılıyor; Signia dolgusunda 3.80'e düşüyor, orada beyaza çekiliyor. Diğer üçünde 5.30+ olduğu için dokunulmuyor. */ main.brand-signia .cta p{ color: #fff; } /* ── Cihaz bantları: büyük fotoğraf, az yazı (17 Ağu 2026) ───────────────── Doruk'un ikinci taslağı (v2). Üç deneme boyunca çözemediğim kısıt buydu: 37 modelin yalnız 10'unda kesin fotoğraf var. Bu yapı kısıtı sorun olmaktan çıkarıyor — iyi fotoğrafı olan dördü büyük bantta, kalanı fotoğrafsız düz listede yaşıyor. Taslaktan alınmayan: "Yeni nesil / Önceki nesil" gruplaması yok (Doruk'un kuralı), listedeki "Giriş serisi" gibi konumlandırma etiketleri de nötr biçim bilgisine çevrildi — Key en çok satan model, aşağı çekilmemeli. */ .cihaz-bant{ padding-block: clamp(30px, 5vw, 58px); } .cihaz-bant + .cihaz-bant{ border-top: 1px solid var(--line); } .cihaz-bant__ic{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 64px); } .cihaz-bant__foto{ background: #fff; border-radius: var(--r-lg, 20px); aspect-ratio: 4 / 3; border: 1px solid var(--line); overflow: hidden; position: relative; } /* Dönüşümlü düzen: tek bantlarda fotoğraf solda, çiftlerde sağda. (Bir düzenlemede bu kural yanlışlıkla kutu kurallarının seçicisiyle birleşmiş ve kutu yalnız çift bantlara uygulanır olmuştu; tek bantların fotoğraf kutusu 0 yükseklikte kalıyor, görsel görünüm alanı kadar büyüyordu. Ekranda ölçülünce çıktı.) */ .cihaz-bant--ters .cihaz-bant__foto{ order: 2; } .cihaz-bant__foto img{ /* Mutlak konumlu bir için width:auto DOĞAL boyutu kullanır, inset kutusunu değil — spec böyle, ölçtüm: 558×536 basıldı. Bu yüzden 100% açıkça veriliyor; kutudan çıkma ihtimali kalmıyor. Ped border-box ile içeride, object-fit:contain görseli o alana oturtuyor (küçükse büyütüyor, büyükse küçültüyor). Mutlak konum ayrıca yükseklik döngüsünü kırıyor: kutunun boyu artık aspect-ratio'dan geliyor, görselden değil. */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: clamp(18px, 2.6vw, 38px); box-sizing: border-box; object-fit: contain; object-position: center; } .cihaz-bant__yazi .cok-satan{ margin-bottom: 14px; } .cihaz-bant__yazi .cihaz-marka{ margin: 0 0 4px; } .cihaz-bant h3{ font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 6px; letter-spacing: -.015em; } .cihaz-bant__tip{ font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; } .cihaz-bant__cumle{ font-size: var(--fs-md); line-height: 1.6; max-width: 44ch; margin: 0; } /* İki büyük rakam — taslağın en iyi fikri, bakışta cevap veriyor */ .cihaz-olcumler{ display: flex; gap: clamp(24px, 4vw, 48px); margin-top: 24px; flex-wrap: wrap; } .olcum__v{ font-family: var(--font-display, inherit); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; color: var(--marka-metin, var(--brand)); line-height: 1; letter-spacing: -.03em; } .olcum__v span{ font-size: var(--fs-base); font-weight: 600; } .olcum__k{ font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-top: 6px; } .cihaz-bant .renkler{ margin-top: 20px; } /* Kalan modeller: fotoğrafsız, tek sütun liste */ /* "Diğer modeller" listesi — 21 Ağu 2026'da karta çevrildi. Önce ince çizgilerle ayrılmış düz satırlardı ve Doruk haklı olarak "yazı çok basit duruyor" dedi: tasarlanmış değil, ham metin gibi görünüyordu. Artık her model kendi kartında; solunda marka renginde bir şerit var, o da hangi markanın sayfasında olduğunu hatırlatıyor. Izgara kendiliğinden sarıyor: üç model tek satır, daha fazlası alta. */ .cihaz-liste{ list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; } .cihaz-liste li{ display: flex; } .cihaz-liste a, .cihaz-liste .cihaz-liste__duz{ display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; padding: 16px 18px; min-height: 44px; text-decoration: none; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--marka-metin, var(--brand)); border-radius: var(--r-sm); } .cihaz-liste a:hover b{ color: var(--marka-metin, var(--brand)); } .cihaz-liste b{ font-size: var(--fs-md); font-weight: 700; } .cihaz-liste em{ font-style: normal; color: var(--muted); font-size: var(--fs-sm); } /* Bağlantısız satır: bandı olmayan model. a ile aynı iskelet, ok yok. */ .cihaz-liste svg{ width: 18px; height: 18px; align-self: flex-end; margin-top: -22px; color: var(--marka-metin, var(--brand)); flex: none; } @media (max-width: 860px){ .cihaz-bant__ic{ grid-template-columns: 1fr; gap: 22px; } .cihaz-bant--ters .cihaz-bant__foto{ order: 0; } .cihaz-bant__foto{ aspect-ratio: 16 / 10; } .cihaz-liste em{ display: block; } .cihaz-liste a{ flex-wrap: wrap; } } /* .cihaz-marka tanımı kart düzeniyle birlikte silinmişti; bant düzeninde de gerekiyor. Blok olmazsa "En çok tercih edilen" rozetiyle aynı satıra biniyor (ekranda öyle görüldü). */ .cihaz-marka{ display: block; margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--marka-metin, var(--brand)); } .cihaz-bant__yazi .cok-satan{ display: inline-flex; } /* ───────────────────────────────────────────────────────────────────────── FİYAT BAŞLANGIÇ ŞERİDİ — isitme-cihazi-fiyatlari Doruk'un 18 Ağustos 2026 talimatı (kurallar.md §3.6): sitede yayımlanabilir tek rakam "12.500 ₺'den başlıyor", ve SGK vurgusu "bol bol" olacak. Bu yüzden şerit iki yarım: solda tek rakam, sağda SGK. Sağ yarı görsel olarak daha ağır (lacivert zemin) çünkü asıl satan şey rakam değil, devletin bir bölümünü karşılıyor olması. ───────────────────────────────────────────────────────────────────────── */ .fiyat-serit{ display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: clamp(18px, 2.4vw, 26px); background: #fff; } .fiyat-serit__sol{ padding: clamp(22px, 3.2vw, 34px); text-align: center; display: flex; flex-direction: column; justify-content: center; } .fiyat-serit__etiket{ font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* Rakamın kendisi. .mini-stat'te öğrendiğimiz tuzak: sayaç iç içe geçiyor, etiket seçicisi onu da yakalıyor. Burada doğrudan sınıf verildi. */ .fiyat-serit__tutar{ font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: var(--navy); letter-spacing: -.03em; margin: 10px 0 8px; } /* "'den başlıyor" rakamla aynı satırda ama onun boyunda değil — 61px'te iki satıra kırılıp rakamı bastırıyordu. Sayı taşıyıcı, ek açıklayıcı. */ .fiyat-serit__tutar span{ display: block; font-family: var(--font); font-weight: 600; font-size: var(--fs-md); letter-spacing: 0; color: var(--muted); margin-top: 6px; } .fiyat-serit__not{ font-size: var(--fs-base); color: var(--muted); line-height: 1.5; } .fiyat-serit__sag{ background: var(--navy); color: #fff; padding: clamp(22px, 3.2vw, 34px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } /* SGK logosu koyu zeminde: kurumun logosu tek renk değil, beyaz bir yastık üstünde duruyor ki kurumsal kimliği bozulmasın. */ .fiyat-serit__sag img{ height: 46px; width: auto; background: #fff; border-radius: 10px; padding: 7px 12px; margin-bottom: 14px; } .fiyat-serit__sag b{ display: block; font-size: var(--fs-lg); font-weight: 700; line-height: 1.35; color: #fff; } .fiyat-serit__sag p{ font-size: var(--fs-base); color: rgba(255,255,255,.88); margin-top: 8px; line-height: 1.55; } .fiyat-serit__sag a{ color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } @media (max-width: 640px){ .fiyat-serit{ grid-template-columns: 1fr; } } /* 27 Ağu 2026 — `--dolu` KALDIRILDI. Doruk: "Rexton modeller sayfasında fotoğraflar baya kötü duruyor." Sebebi görselin kalitesi değildi, oturuşuydu. Kural 17 Ağustos'ta "kendi siyah stüdyo zemini olan çekimler kutuyu kenarlıksız kaplasın" diye konmuştu ve o gün doğruydu. Sonra o dosyalar şeffaf kesme (RGBA) olarak yeniden üretildi — yani kaplayacak bir zeminleri kalmadı. Kural kaldı, gerekçesi gitti: `object-fit: cover` artık ürünün KENDİSİNİ kırpıyordu. Rexton Reach iX'in cihazları kartın solundan ve altından taşıyordu. Ölçtüm: sınıfı taşıyan altı görselin altısı da şeffaf kesme. Yani kuralın geçerli tek bir kullanıcısı bile kalmamıştı. Artık hepsi ana kuraldaki `contain` + ped ile tam ve eşit boşlukla duruyor. Gerçekten kendi zemini olan bir fotoğraf gelirse bu kural tek satırla geri gelir; şu an sahibi olmayan bir kural olarak durmasın. */ /* ───────────────────────────────────────────────────────────────────────── MOBİL DÜZELTMELERİ — 20 Ağustos 2026 375x812'de ölçüldü: içerik başlamadan 322px (ekranın %40'ı) tepe çubuğu, başlık ve duyuru bandına gidiyordu. Duyuru tek başına 184px'ti. ───────────────────────────────────────────────────────────────────────── */ /* Arama düğmesi 286x31 ölçülmüştü. Çekmecedeki tek buton biçimli öğe. */ .dlink--ara{ min-height: 44px; } @media (max-width: 560px){ /* Duyuru bandı: ayrıntı cümlesi mobilde dört satıra çıkıyor ve bandı 184px yapıyordu. Kalın iddia + "Nasıl çalışıyor?" bağlantısı mesajı zaten taşıyor; ayrıntı hedef sayfada aynen duruyor. */ .duyuru__detay{ display: none; } .duyuru__ic{ padding: 10px 16px; gap: 10px; } .duyuru__yazi{ line-height: 1.4; } /* Eyebrow'un süs çizgisi: .eyebrow inline-flex + align-items:center olduğu için, metin üç satıra sarınca 28px'lik tire üç satırın ortasında tek başına asılı kalıyordu. Ekran görüntüsünde sol boşlukta yüzen "—" buydu. */ .eyebrow::before{ display: none; } .eyebrow{ gap: 0; } /* Hero üst başlığı 375px'te üç satır büyük harf oluyordu ve hemen altındaki dört satırlık H1 ile yarışıyordu. 14px + dar aralık iki satıra indiriyor; metne dokunulmadı, arama motoru aynı cümleyi görmeye devam ediyor. */ .eyebrow--hero{ font-size: var(--fs-xs); letter-spacing: .03em; line-height: 1.45; } } /* ───────────────────────────────────────────────────────────────────────── DOKUNMATİKTE TAKILI HOVER — 20 Ağustos 2026 Sitede 25 hover kuralı var ve hiçbiri fare olup olmadığını sormuyordu. Telefonda bir karta dokununca öğe havalanıp öyle kalıyor, kullanıcı başka bir yere dokunana kadar inmiyordu. Renk değişimi göze batmıyor, ama HAREKET bozukmuş gibi duruyor. Kuralları taşımak yerine burada etkisizleştiriliyor: taşıma denendi ve dosyayı bozdu (CSSOM 1400 yerine 343 kural gördü), geri alındı. Ekleme yapmak yapıyı hiç ellemediği için güvenli. Yalnız transform / box-shadow / filter sıfırlanıyor — hareket ve gölge. Renk ve kenarlık dokunulmadan bırakıldı: dokunma anında kısa bir renk geri bildirimi işe yarıyor, takılı kalsa da rahatsız etmiyor. ───────────────────────────────────────────────────────────────────────── */ @media (hover: none){ .brand:hover{ box-shadow: none; } .card:hover{ transform: none; box-shadow: none; } .card:hover .card__link::after{ transform: none; } .loccard:hover{ transform: none; box-shadow: none; } .footer__social a:hover{ transform: none; } .wa-float:hover{ transform: none; } .info-tile:hover{ box-shadow: none; } .btn--primary:hover, .btn--accent:hover{ transform: none; box-shadow: none; } .card:hover .card__ic{ transform: none; } .card:hover{ transform: none; } .footer-brands__row a:hover{ transform: none; box-shadow: none; } .showcase-card:hover{ transform: none; } .topbar__social a:hover{ transform: none; } .footer__social a[aria-label]:hover{ transform: none; } .citycard:hover .citycard__plate--photo{ filter: none; } .sgk-float:hover{ box-shadow: none; } .loccard--foto:hover{ box-shadow: none; } #dv-serit a.btn:hover{ filter: none; } .sube-linkler a:hover{ transform: none; } .reel:hover .reel__oynat{ transform: none; } .reel:hover{ box-shadow: none; } .hzm:hover{ transform: none; box-shadow: none; } .hzm:hover > img{ transform: none; } } /* ───────────────────────────────────────────────────────────────────────── DAR EKRAN — 400px ve altı · 20 Ağustos 2026 Kırılma noktaları 480'de bitiyordu, oysa en yaygın telefonlar 360-390px. body{overflow-x:hidden} taşmayı önlemiyor, KIRPIYOR — yani sorun vardı ama görünmüyordu. Kuralı geçici kapatıp 360px'te ölçtüm, iki gerçek taşma çıktı: "Tüm cihazları ve modelleri" düğmesi → 11px taşıyor Çerez kutusundaki iki düğme yan yana → 4px taşıyor Sebep .btn'deki white-space: nowrap. Uzun etiket sarılamayınca kutusunu zorluyor. Dar ekranda sarmaya izin veriliyor ve yatay dolgu azaltılıyor. (Çekmece düğmelerinin taşması sayılmadı — kapalı menü ekran dışında duruyor, tasarım gereği.) ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 400px){ .btn{ white-space: normal; padding-inline: 20px; } /* Esnek kutuda taban genişliği içeriğe kilitlenmesin */ .cerez__dugmeler .btn{ min-width: 0; } .cerez__dugmeler{ flex-wrap: wrap; } /* Desibel skalasının altı etiketi: flex:1 verilmiş ama esnek öğelerin varsayılan min-width:auto değeri "Orta-ileri" ve "Çok ileri"nin küçülmesini engelliyordu. Altısı birden 365px istiyor, kartı 415px'e zorluyor ve sayfa 360px'te 435px genişliğe çıkıyordu. min-width:0 ile etiketler iki satıra sarılıyor. */ .db-etiketler span{ min-width: 0; hyphens: auto; } } /* ───────────────────────────────────────────────────────────────────────── TELEFON SADELEŞTİRMESİ — 20 Ağustos 2026 Doruk: "telefon design pek güzel değil, daha sade yap." 390x844'te ölçüldü. Üç şey sayfayı yoruyordu: bölüm başlığı kutusu 313px (ekranın %37'si, içeriğe gelmeden) .section-title 32px BÜYÜK HARF, üç satıra kırılıyor .section-lead 19px, dört satır Büyük harf masaüstünde "Widex tarzı" katmanın imzası ve orada güçlü duruyor. Telefonda ise 32px büyük harf Türkçe metin kelime siluetini yok ediyor; 60 yaş üstü okuyucu için bu gerçek bir maliyet. Hero başlığı marka anı olduğu için büyük harf KALIYOR, bölüm başlıkları normal yazıma dönüyor. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 560px){ .section-title, .band h2, .pagehead h1{ text-transform: none; font-size: 1.65rem; line-height: 1.22; letter-spacing: -.01em; margin-top: 10px; margin-bottom: 12px; } /* Üst etiket her bölümde tekrar ediyor; küçültülüp geri çekildi. */ .eyebrow{ font-size: var(--fs-xs); letter-spacing: .06em; } .section-lead{ font-size: var(--fs-base); line-height: 1.6; } /* Bölümler arası nefes payı masaüstü ölçüsündeydi. */ .section{ padding-block: 34px; } /* ── Marka kartları: dikey kutudan yatay satıra ────────────────────── Telefonda her kart 340px yer kaplıyordu: dev yeşil "Stokta" hapı, altında 118px logo plakası, altında tek cümle, altında bağlantı — hepsi ortalanmış. Dördü 1360px ediyor ve sayfanın en gürültülü öğesi markanın kendisi değil stok rozeti oluyordu. DİKKAT: şehir kartları da .brandcard sınıfını taşıyor (aynı kart iskeletini paylaşıyorlar). :not(.citycard) olmadan bu ızgara onları da yakalıyor ve "Ankara" plakasını 88px'e sıkıştırıyordu. */ .brandcard:not(.citycard){ display: grid; grid-template-columns: 88px 1fr; grid-template-areas: "logo rozet" "logo metin" "logo bag"; align-items: center; gap: 2px 14px; padding: 14px 16px; text-align: left; } .brandcard:not(.citycard) .brand-plate{ grid-area: logo; width: 88px; height: 62px; margin: 0; align-self: center; } .brandcard:not(.citycard) .brand-plate .brand-logo{ height: 34px; max-height: 34px; max-width: 86%; } /* Rozet boyut olarak zaten küçüktü (12px), ama dolu koyu yeşil hap görsel ağırlıkta marka logosunu yeniyordu — kartın en yüksek sesli öğesi stok bilgisi olmamalı. Dolgu kalktı, onay işareti ve yazı kaldı; #0a5f2c kart zemininde 6.53:1. */ .brandcard:not(.citycard) .stok-rozet{ grid-area: rozet; justify-self: start; margin: 0 0 2px; padding: 0; background: none; box-shadow: none; color: #0a5f2c; font-size: var(--fs-2xs); gap: 5px; } .brandcard:not(.citycard) .stok-rozet svg{ width: 12px; height: 12px; } .brandcard:not(.citycard) > p{ grid-area: metin; margin: 0; text-align: left; max-width: none; } .brandcard:not(.citycard) .card__link{ grid-area: bag; margin: 4px 0 0; align-self: start; justify-self: start; /* Ok .card__link::after ile geliyor. Bağlantı inline-flex olduğu için ok AYRI bir esnek öğe: metin iki satıra kırılınca sarılan metin bloğunun sağ kenarında, dikey ortada tek başına asılı kalıyordu ("Tüm Resound modelleri" kartında görüldü). display:inline ile ok son kelimenin hemen ardından akıyor. */ display: inline; } .brandcard:not(.citycard) .card__link::after{ content: " \2192"; } /* ── Şehir kartları ────────────────────────────────────────────────── Fotoğraf üstte tam genişlikte kalıyor (şehri o gösteriyor), yalnız dolgu ve boşluklar telefona çekildi. İki çip yan yana sığıyor. */ .citycard{ padding: 14px; } .citycard .citycard__plate{ height: 150px; margin-bottom: 14px; } .citycard p{ margin-block: 10px; } .citycard .card__meta{ gap: 8px; flex-wrap: wrap; justify-content: flex-start; } .citycard{ text-align: left; } /* WhatsApp balonu sabit konumlu, 58px ve 22px içeride. Kart bağlantısının son kelimesini kapatıyordu ("Tüm Widex modelleri" üstünde ölçüldü). 52px'e inip köşeye çekildi: dokunma hedefi hâlâ 44px'in üstünde, bağlantıya 14px daha açıklık kalıyor. */ .wa-float{ width: 52px; height: 52px; right: 14px; bottom: 14px; } .wa-float svg{ width: 26px; height: 26px; } } /* ───────────────────────────────────────────────────────────────────────── CİHAZ DİZİNİ — 20 Ağustos 2026 Marka sayfaları telefonda 15 ekran: ReSound'da 10, Signia'da 14 cihaz var. Uzunluk şişkinlik değil, içerik — bantları sıkıştırmak ürün fotoğrafını küçültürdü (ürün fotoğrafın %83'ünü dolduruyor, ölçüldü). Doğru çözüm sıkıştırma değil GEZİNME: belirli bir modeli arayan kişi altı ekran kaydırmak yerine adına dokunup oraya atlıyor. "Modeller" başlığı zaten 235px yer kaplıyordu ve içi boştu; dizin oraya kondu. Marka adı her satırda tekrar etmesin diye kısaltıldı: "ReSound Key" -> "Key". Başlık zaten hangi markada olduğunu söylüyor. ───────────────────────────────────────────────────────────────────────── */ .cihaz-dizin{ margin-top: 22px; } .cihaz-dizin ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .cihaz-dizin__bag{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--line); color: var(--brand-700); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; text-decoration: none; } /* NOT: haplara sınıf verilmesinin sebebi biçim değil, kural çakışması. 431. satırdaki "li > a:not([class])" kuralı metin içi bağlantılara alt çizgi veriyor (WCAG 1.4.1: rengi tek başına ayırt edici saymıyoruz) ve özgüllüğü (0,1,2) benim (0,1,1) kuralımı yeniyordu. Hapların kenarlığı ve zemini zaten ayırt edici; sınıf vererek :not([class]) dışına çıkarıldılar. Kuralı zayıflatmak yerine kapsamı dışına çıkmak doğrusu. */ @media (hover: hover) and (pointer: fine){ .cihaz-dizin__bag:hover{ border-color: var(--brand); background: var(--wash); } } .cihaz-dizin__bag:focus-visible{ outline: 3px solid var(--brand-700); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(23, 180, 214, .55); } /* Bant başlığına atlarken sabit başlığın altında kalmasın */ .cihaz-bant{ scroll-margin-top: 90px; } @media (max-width: 560px){ /* Telefonda sola dayalı: ortalanmış etiket satırları göz için daha zor. */ .cihaz-dizin ul{ justify-content: flex-start; gap: 7px; } .cihaz-dizin__bag{ padding: 0 13px; font-size: var(--fs-xs); } } /* ───────────────────────────────────────────────────────────────────────── CİHAZ SAYFASI TABLOLARI VE ŞERİT KARTLARI — 21 Ağustos 2026 ───────────────────────────────────────────────────────────────────────── */ /* Karşılaştırma tablolarında hücreler ortalanıyor. Yalnız marka sayfalarında: .sgk-tablo sgk.html ve isitme-cihazi-cesitleri'nde de kullanılıyor, oradaki tablolar uzun cümleler taşıyor ve sola dayalı kalmalı. main.brand-* ile kapsam marka sayfalarına daraltıldı. */ main[class*="brand-"] .sgk-tablo th, main[class*="brand-"] .sgk-tablo td{ text-align: center; } /* Şerit kartları (.range-banner) ızgarada eşit yüksekliğe geriliyor. Rexton'da renk şeridi görseli 1600x410 olduğu için yalnız 96px yer kaplıyor; kart 451px olunca altında 219px boşluk kalıyordu. İçerik dikeyde ortalanınca boşluk üste ve alta eşit dağılıyor, kart dengeli duruyor. */ .range-banner{ display: flex; flex-direction: column; justify-content: center; gap: 14px; } .range-banner img{ margin: 0 auto; } .range-banner figcaption{ margin-top: 0; } /* ── Bakım sayfası: kartlar tek sütun ────────────────────────────────── 22 Ağu 2026'da sayfa uzun görünmesin diye iki sütuna çıkarılmıştı. 3 Eyl 2026 — geri alındı. Kartların bir kısmı tam genişlik (tablo taşıyanlar), bir kısmı yarım genişlikti; yükseklikleri de tutmadığı için her kart farklı hizada başlıyor ve sayfa dağınık görünüyordu (Doruk ekran görüntüsüyle bildirdi). Tek sütunda hepsi aynı sol kenardan başlıyor ve okuma sırası göz için tek yönlü oluyor. Sayfa uzuyor ama dağınıklık okumayı daha çok zorluyordu. */ .kart-yigin--bakim{ grid-template-columns: minmax(0, 1fr); } /* Kart içi metin + fotoğraf bölmesi. Izgarada çocuklar DOM sırasına göre yerleşiyor; figure en sonda olduğu için metin öğelerini açıkça 1. sütuna sabitlemek ŞART — yoksa ikinci paragraf figure'ün yerine geçip çakışıyor. */ @media (min-width: 900px){ /* Bölme YALNIZ tam genişlikteki kartta. Yarım kartta (482px) fotoğrafa 290px gidince metne 160px kalıyor ve kart 1347px'e uzuyordu. */ .kart--genis.kart--foto{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 290px); column-gap: 26px; align-items: start; } .kart--genis.kart--foto > *{ grid-column: 1; } .kart--genis.kart--foto > h2{ grid-column: 1 / -1; } .kart--genis.kart--foto > .kart__foto{ grid-column: 2; grid-row: 2 / 99; margin: 0; align-self: start; } } .kart__foto{ margin: 18px 0 0; } .kart__foto img{ width: 100%; height: auto; display: block; border-radius: var(--r-sm); background: var(--gri-50); } .kart__foto figcaption{ margin-top: 8px; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); } /* ── İkili fotoğraf bandı ───────────────────────────────────────────── Metin ağırlıklı sayfalara nefes aldırmak için. 640px altında tek sütuna iniyor; iki 300px kare yan yana durunca altyazı 13px'e düşüyordu. (22 Ağu 2026) */ .foto-ikili{ display: grid; gap: 20px; margin-top: 22px; } .foto-ikili > figure{ margin: 0; } .foto-ikili img{ width: 100%; height: auto; display: block; border-radius: var(--r-sm); background: var(--gri-50); } .foto-ikili figcaption{ margin-top: 9px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); } @media (min-width: 640px){ .foto-ikili{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Sayfa kapanış bandı ────────────────────────────────────────────── Sayfa sonundaki iki çıplak düğme boşlukta duruyordu. Bant, son söylenecek cümleyi ve eylemi bir arada tutuyor. Zemin açık kalıyor: SGK rozeti ve marka logoları koyu zeminde okunmuyor. */ .kapanis{ display: grid; gap: 22px; padding: clamp(24px, 4vw, 38px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--gri-50); } .kapanis__eyebrow{ display: block; margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); } .kapanis__metin h2{ font-size: var(--fs-lg); margin: 0 0 10px; letter-spacing: -.01em; } .kapanis__metin p{ margin: 0; color: var(--muted); line-height: 1.6; } .kapanis__eylem{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .kapanis__bag{ display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: var(--fs-sm); color: var(--brand-700); text-decoration: none; } .kapanis__bag:hover{ text-decoration: underline; } @media (min-width: 860px){ .kapanis{ grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 34px; } .kapanis__eylem{ flex-direction: column; align-items: stretch; } .kapanis__eylem .btn{ justify-content: center; } .kapanis__bag{ justify-content: center; } } /* ── Evde hizmet bandı (ana sayfa) ──────────────────────────────────── Doruk bu hizmetin SGK kadar görünür olmasını istedi. Görsel bir ÇİZİM; fotoğraf gibi durmaması bilinçli — evde çekilmiş gerçek bir karemiz yok. Zemin açık: bandın hemen altındaki SGK logosu koyu zeminde okunmuyor. */ .evde{ display: grid; gap: 24px; align-items: center; padding: clamp(22px, 3.5vw, 34px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--wash); } .evde__gorsel img{ width: 100%; height: auto; display: block; border-radius: var(--r-sm); background: var(--white); } .evde__eyebrow{ display: block; margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); } .evde__metin h2{ font-size: var(--fs-lg); margin: 0 0 12px; letter-spacing: -.01em; } .evde__metin p{ margin: 0 0 20px; color: var(--muted); line-height: 1.6; } .evde__eylem{ display: flex; flex-wrap: wrap; gap: 12px; } @media (min-width: 820px){ .evde{ grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 34px; } } /* ── Özellik tablosu (ReSound seri karşılaştırması) ─────────────────── Tablolar doğru kurulmuştu ama çıplak hesap tablosu gibi duruyordu: ne çerçeve, ne zebra, "Var/Yok" düz kelime. Yapı değişmedi — başlık kapsamları, caption ve kaydırma bölgesi yerinde; yalnız görsel ağırlık eklendi. (22 Ağu 2026) */ .ozellik-tablo{ border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--white); } .ozellik-tablo thead th{ background: var(--wash); color: var(--brand-700); font-weight: 800; padding-block: 14px; border-bottom: 1px solid var(--line); } /* Seri adı sütunu: satırın çapası, göz önce oraya düşsün */ .ozellik-tablo tbody th[scope="row"]{ font-size: var(--fs-base); font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--gri-50); border-right: 1px solid var(--line-soft); } .ozellik-tablo tbody tr:nth-child(even) td{ background: rgba(11,110,163,.035); } .ozellik-tablo tbody tr:last-child th, .ozellik-tablo tbody tr:last-child td{ border-bottom: none; } /* Var / Yok rozeti — kelime kalıyor, yanına okumayı hızlandıran işaret */ .ozet{ display: inline-flex; align-items: center; gap: 7px; font-weight: 700; } .ozet svg{ width: 15px; height: 15px; flex: none; } /* 27 Ağu 2026 — kontrast düzeltmesi. Ölçülen 4,01:1, gereken 4,50:1. Renk beyaz zeminde geçiyordu (4,78) ama karşılaştırma tablosunun zebra satırı rgba(11,110,163,.035) ile #E6EBF2 üstüne biniyor ve birleşik zemin (222,231,239) oluyor — orada kalıyordu. #146237 aynı zeminde 5,8:1; yeşil kimliği bozulmuyor. */ .ozet--var{ color: var(--basari, #146237); } .ozet--yok{ color: var(--muted); font-weight: 600; } .ozet--bos{ color: var(--line); font-weight: 700; } /* ── Test sonucu seçenekleri ────────────────────────────────────────── Üç olası sonuç önce tik listesindeydi; tik işareti "işitme kaybı var" maddesinin yanında yanlış okunuyordu — bunlar başarı maddeleri değil, birbirini dışlayan üç sonuç. Artık üç ayrı kutu, her biri kendi etiketiyle. (22 Ağu 2026) */ .sonuc-liste{ display: grid; gap: 16px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .sonuc{ padding: 18px 18px 20px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); } .sonuc__etiket{ display: inline-block; margin-bottom: 10px; padding: 4px 11px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .sonuc__etiket--normal{ background: rgba(26,127,75,.12); color: #14653b; } .sonuc__etiket--hekim{ background: rgba(180,110,0,.13); color: #8a5300; } .sonuc__etiket--kayip{ background: rgba(11,110,163,.12); color: var(--brand-700); } .sonuc h3{ font-size: var(--fs-base); margin: 0 0 7px; letter-spacing: -.005em; } .sonuc p{ margin: 0; color: var(--muted); line-height: 1.55; } /* ── Rakam şeridi ───────────────────────────────────────────────────── Çocuklar sayfasında üç rakam düz cümlenin içine gömülüydü, sayfa "çok sade" duruyordu. Rakamlar öne çıktı, cümle etikete indi. Sayı 2.4rem: 17px kuralı gövde metni için, bu bir rakam. (22 Ağu 2026) */ .rakam-serit{ list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .rakam-serit li{ display: grid; gap: 6px; align-content: start; } .rakam-serit li + li{ padding-top: 22px; border-top: 1px solid var(--line-soft); } .rakam-serit__sayi{ font-size: clamp(2rem, 4.2vw, 2.6rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--brand-700); } .rakam-serit__alt{ font-size: var(--fs-base); line-height: 1.5; color: var(--muted); } @media (min-width: 700px){ /* Yan yana dizilince üstteki çizgi yanlış yere düşüyor; sola alınıyor. */ .rakam-serit li + li{ padding-top: 0; padding-left: 22px; border-top: none; border-left: 1px solid var(--line-soft); } } /* 26 Ağu 2026: --fs-sm (15,64px) idi; gövde alt sınırı 17px (kurallar.md §3). */ .evde__not{ margin: -8px 0 20px !important; font-size: var(--fs-base); color: var(--muted); } /* ── Cihaz tipi kartında ürün görseli ───────────────────────────────── "Cihaz çeşitleri" sayfasında dört tip yalnız yazıyla anlatılıyordu; okuyucu tipleri görmek istiyor. Görseller saydam ürün kareleri olduğu için altlarına açık bir zemin konuyor. (23 Ağu 2026) */ /* Kutu ESNEK, ızgara değil. Izgarada satır auto kalıyor, içindeki height:100% döngüsel referansa düşüyor ve görsel 150px kutuda 441px olarak duruyordu. Esnek kutunun yüksekliği kesin olduğu için max-height:100% doğru çözülüyor. */ /* 30 Ağu 2026 — cihaz görselleri büyütüldü ve zemine oturtuldu. Doruk: "bu cihaz fotoğrafları küçük küçük duruyor, biraz daha belirgin doygun yap". İki sebep vardı: (1) --gri-50 tanımsız olduğu için kutunun zemini hiç görünmüyordu, (2) kutu 150px ve `sizes` 130px'ti — kart ~510px genişken görsel 130px kalıyordu. Kutu 200px'e çıktı, `sizes` de 200px yapıldı (450w varyantı seçilsin, büyütünce bulanmasın). Ürün görselleri şeffaf zeminli PNG; altlarına yumuşak bir gölge eklendi — cihazın KENDİ rengine dokunmadan derinlik veriyor. Renk filtresi uygulanmadı: ürün rengi gerçeğe sadık kalmalı. */ .tipk__foto{ height: 200px; margin: -4px 0 18px; padding: 16px; border-radius: var(--r-sm); background: radial-gradient(120% 96% at 50% 18%, #fff 0%, var(--gri-50) 58%, var(--wash) 100%); display: flex; align-items: center; justify-content: center; } .tipk__foto img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(10, 42, 61, .20)); } /* Metin bloklarının arasına giren tam genişlikte görsel */ .foto-genis{ margin: 22px 0 0; } .foto-genis img{ width: 100%; height: auto; display: block; border-radius: var(--r-md); background: var(--gri-50); } /* Şerit varyantı — 31 Ağu 2026. 4:3 bir kareyi 940px kaba tam boy koymak 682px yükseklik demek; hakkımızda sayfasının laboratuvar bölümünde görsel bölümü eziyordu ve konusu (ince bir tarayıcı) karenin küçük bir kısmını kaplıyordu, gerisi boş masa. 16:7'ye kırpınca hem bölüm dengeleniyor hem konu büyüyor. */ .foto-genis--serit img{ aspect-ratio: 16 / 7; object-fit: cover; object-position: center 58%; } /* Radyo görsel olarak gizli ama odaklanabilir kalıyor: klavye ve ekran okuyucu için display:none olmamalı. */ :root{ --danger-metin: #a52a1f; } /* Eksik grubu renkten başka bir işaretle de göster */ /* ── Hareket anahtarı ───────────────────────────────────────────────── 24 Ağu 2026 denetimi (WCAG 2.2.2): kayan yazı, hero slaytı ve galeri kendiliğinden hareket ediyor, 5 saniyeden uzun sürüyor ve başka içerikle birlikte duruyordu; görünür durdurma yoktu. Fareyle üstüne gelince duruyordu ama bu klavye ve dokunmatik kullanıcıya çözüm değil. Tek anahtar tüm hareketi yönetiyor (raporun önerdiği data-motion modeli): kök öğedeki data-hareket="durdu" hem CSS animasyonlarını duraklatıyor hem JS sayaçlarını durduruyor. Tercih localStorage'da saklanıyor; prefers-reduced-motion açıksa zaten durgun başlıyor. */ /* ── 27 Ağu 2026: düğme artık GÖRÜNMÜYOR, ama duruyor ───────────────── Doruk: "Durdur düğmesine hiç gerek yok." Şeritte sürekli duran bir hap gibi görünüyordu ve dikkati bölüyordu. Düğmeyi tamamen SİLMEDİM, çünkü silmek bir erişilebilirlik ihlali üretir: WCAG 2.2.2 (Duraklat, Durdur, Gizle), kendiliğinden başlayan ve beş saniyeden uzun süren hareket için bir durdurma yolu şart koşuyor — sitede kayan şerit ve otomatik geçen hero bu tanıma giriyor. Yerine üç katmanlı çözüm: 1. Sistemi "hareketi azalt"a almış ziyaretçide hareket ZATEN başlamıyor (aşağıdaki kural düğmeyi de gizliyor) — kullanıcıların büyük kısmı bu yolla korunuyor, hiçbir şeye tıklaması gerekmiyor. 2. Düğme klavyeyle sekmelendiğinde ortaya çıkıyor; ekran okuyucu onu her zaman görüyor ve okuyor. 3. Fare kullanıcısı için görsel gürültü sıfır. `clip-path` yerine `clip` + 1px kutu: eski Safari'de hâlâ en güvenli görsel-gizleme kalıbı ve odaklanınca geri açılıyor. */ .hareket-anahtar{ position: absolute; width: 1px; height: 1px; min-height: 0; min-width: 0; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); border: 0; } .hareket-anahtar:focus-visible{ position: static; width: auto; height: auto; overflow: visible; clip: auto; margin: 0 0 0 4px; white-space: normal; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-pill); background: rgba(255,255,255,.10); color: #fff; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; line-height: 1; } .hareket-anahtar:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; } .hareket-anahtar svg{ width: 15px; height: 15px; flex: none; } .hareket-anahtar__oynat{ display: none; } /* Durum kökten okunuyor, düğmedeki aria-pressed'den değil: erişilebilir ad zaten değişiyor, ikisi birlikte ekran okuyucuda çelişik duyuru üretiyordu. */ html[data-hareket="durdu"] .hareket-anahtar__dur{ display: none; } html[data-hareket="durdu"] .hareket-anahtar__oynat{ display: block; } @media (max-width: 640px) { .hareket-anahtar__metin{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* Durdurulduğunda süresiz dönen her animasyon duraklar */ /* Dosyada süresiz dönen tam dört animasyon var: .ticker__track (749), .pulse-btn (800), .cok-satan::after (1654) ve .awards__ray (2821). Dördü de burada sayılmalı; biri unutulursa "Durdur" yalan söyler. */ html[data-hareket="durdu"] .ticker.in-view .ticker__track, html[data-hareket="durdu"] .ticker__track, html[data-hareket="durdu"] .awards__ray, html[data-hareket="durdu"] .cok-satan::after, html[data-hareket="durdu"] .pulse-btn{ animation-play-state: paused; } /* Düzeltme 5: "hareketi azalt" acikken 2436. satir zaten butun sonsuz animasyonlari kapatiyor ve hero/galeri sayaclari hic kurulmuyor — yani kontrol edecek hareket yok. Olu bir dugme gostermek yerine gizle. */ @media (prefers-reduced-motion: reduce) { .hareket-anahtar{ display: none; } } /* ── Cihaz Yardım Merkezi ───────────────────────────────────────────── 25 Ağu 2026. Kullanıcı markasını ve modelini seçiyor, cihazının doğrulanmış bilgilerini görüyor. Veri assets/data/yardim.json'da ve tek kaynak orası — sayfaya cihaz bilgisi gömülmüyor. Seçenek düğmeleri anketlerdeki .anket-secenek deseniyle aynı dili konuşuyor: 44px'in üstünde hedef, renk dışında da belli olan seçili hâl, 3px odak halkası. */ .yardim{ max-width: 900px; margin: 0 auto; } .yardim__adim{ margin-bottom: 34px; } .yardim__baslik{ font-size: var(--fs-lg); font-weight: 700; color: var(--ink); margin: 0 0 6px; } .yardim__ipucu{ font-size: var(--fs-sm); color: var(--muted); margin: 0 0 14px; max-width: 60ch; } .yardim__secenekler{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; } .yardim__secenekler--model{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .yardim__sec{ display: flex; flex-direction: column; gap: 3px; min-height: 56px; padding: 15px 18px; text-align: left; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--body); cursor: pointer; font-family: inherit; font-size: var(--fs-base); font-weight: 600; line-height: 1.35; transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); } .yardim__sec:hover{ border-color: var(--brand); } .yardim__sec[aria-pressed="true"]{ border-color: var(--brand); background: var(--secim); color: var(--brand-700); font-weight: 700; } .yardim__sec[aria-pressed="true"]::after{ content: "Seçili"; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); } .yardim__sec:focus-visible{ outline: 3px solid var(--brand-700); outline-offset: 3px; } .yardim__sec small{ font-size: var(--fs-sm); font-weight: 600; color: var(--muted); } .yardim__sec[aria-pressed="true"] small{ color: var(--brand-700); } /* Sonuç */ .yardim__sonuc{ margin: 8px 0 34px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--wash); } .yardim__sonuc h3{ margin: 0 0 4px; font-size: var(--fs-lg); color: var(--ink); } .yardim__eylem{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } /* Yardım yolları */ .yardim__yollar{ margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); } .yardim__kartlar{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 16px; } .yardim__kart{ display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); text-decoration: none; min-height: 44px; transition: border-color .18s var(--ease), transform .18s var(--ease); } .yardim__kart:hover{ border-color: var(--brand); transform: translateY(-2px); } .yardim__kart:focus-visible{ outline: 3px solid var(--brand-700); outline-offset: 3px; } .yardim__kart-baslik{ font-weight: 700; color: var(--ink); font-size: var(--fs-base); } .yardim__kart-metin{ font-size: var(--fs-sm); color: var(--body); line-height: 1.5; } .yardim__kaynak-not{ max-width: 72ch; margin: 40px auto 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; } @media (prefers-reduced-motion: reduce) { .yardim__kart:hover{ transform: none; } } @media (max-width: 560px) { .yardim__secenekler, .yardim__secenekler--model{ grid-template-columns: 1fr; } .yardim__sonuc{ padding: 20px 17px; } } /* Şube sayfalarındaki iletişim listesi — 26 Ağu 2026. Telefon bağlantısı 22px yüksekliğindeydi. Sitede dönüşüm telefonla oluyor ve hedef kitle 60+; bu bağlantı 44px'lik dokunma hedefi olmalı (kurallar.md §3). Negatif kenar boşluğu yerleşimi aynı bırakıyor: görsel olarak hiçbir şey büyümüyor, yalnız basılacak alan büyüyor. */ .check-list a[href^="tel:"], .check-list a[href*="wa.me"]{ display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; } /* .adres-bag BİLEREK dışarıda: onun dokunma alanı 13 Ağu 2026'da zaten çözülmüş — yukarıdaki `.check-list li .adres-bag::after` kuralı görünmez bir alanla hedefi 44px'in üstüne çıkarıyor. Buraya da eklemek gereksiz tekrar olurdu. (Ölçtüm: 61px kutu, ::after ile 87px.) */ /* ========================================================================= MOBİL YOĞUNLUK — 26 Ağustos 2026 Doruk'un geri bildirimi: "hayvan gibi büyük ve uzun sayfalar." Ölçtüm, haklıydı: ana sayfa 10,2 ekran, hizmetler 12,1 ekran. Sebep dolgu değil YOĞUNLUKTU: 640px altında BÜTÜN ızgaralar tek sütuna düşüyordu (`.grid--2,--3,--4{ grid-template-columns: 1fr }`), kartlar 34px iç dolguyla tam genişlik yığılıyordu ve her hizmet kartı 4:3 fotoğrafla ~484px yer kaplıyordu — altı kart 2905px, yani 3,5 ekran. Burada içerik KISALTILMADI. Değişen tek şey mobildeki yerleşim: kompakt kartlar iki sütuna alındı, fotoğraflı kartlar yatay liste biçimine geçti, boşluklar sıkıldı. Korunanlar: gövde 17px, dokunma hedefi 44px, kontrast. ========================================================================= */ @media (max-width: 640px) { /* ── Kart ızgaraları: tek sütun, ama YATAY SATIR ───────────────────── Önce iki sütun denedim; 390px'te sütun başına 168px kalıyor ve marka kartlarının metni kırpılıyordu ("Gürültüde / net / konuşma." üç satır, ikinci kart tamamen kesik). Ekran görüntüsünde görüp geri aldım. Doğru desen tam genişlik YATAY SATIR: logo solda sabit genişlikte, metin sağda tek satırda. Hem okunur hem kısa — poster kart 228px'ken satır 84px. Dikey kaydırma da bozulmuyor; 60+ kitlede yatay kaydırmalı şerit keşfedilmeme riski taşır, o yüzden ona girmedim. */ .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; gap: 12px; } /* NOT: marka kartının yatay düzeni ZATEN VAR — `.brandcard:not(.citycard)` kuralı (bu dosyada yukarıda) logo solda 88px, metin sağda bir ızgara kuruyor. Buraya ikinci bir kural yazmak yalnız çakışma üretiyordu; yazdım, çakıştığını görüp sildim. */ /* ── Kart iç dolgusu ───────────────────────────────────────────────── Masaüstünde 26/24px. Mobilde ekranın %12'sini yalnız kenar boşluğuna harcıyordu. */ .card{ padding: 20px 18px; } .grid{ gap: 14px; } /* ── Bölüm ritmi ───────────────────────────────────────────────────── Art arda gelen her bölüm aynı yükseklikte nefes alıyordu; sayfa bir "boşluk merdiveni" gibi uzuyordu. */ .section{ padding-block: 34px; } .section--tight{ padding-block: 26px; } .section + .section.band, .section + .section[class*="--dark"]{ padding-block: 34px; } .section-title{ margin-top: 8px; margin-bottom: 10px; } .section-head{ margin-bottom: 4px; } /* ── Fotoğraflı hizmet kartları: yatay liste ───────────────────────── Tek sütunda her kart 4:3 fotoğrafla ~484px'ti; altısı 2905px yapıyordu. Yatay biçimde fotoğraf solda 104px, metin sağda: kart ~150px'e iniyor. İyi mobil sitelerin standart liste deseni. */ .hzm-mozaik{ gap: 12px; } .hzm{ flex-direction: row; align-items: stretch; } .hzm > img{ width: 104px; flex: 0 0 104px; aspect-ratio: 1 / 1; align-self: stretch; height: auto; } .hzm__ic{ padding: 14px 14px 14px 12px; display: flex; flex-direction: column; gap: 4px; } .hzm__ic h3{ font-size: var(--fs-md); margin: 0; } .hzm__ic p{ margin: 0; font-size: var(--fs-base); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Uzun paragraflar sola dayalı ──────────────────────────────────── Ortalanmış uzun metin mobilde her satırın başlangıcını kaydırır; 60+ okuyucu için satır bulmayı zorlaştırıyor (WCAG okunabilirlik tavsiyesi de sola dayalı). Başlıklar ortada kalıyor. */ .section-head--center .section-lead, .section-head--center > p{ text-align: left; } } /* ========================================================================= MOBİLDE İLK EKRAN — 26 Ağustos 2026 Ölçtüm: 844px'lik ekranın 238px'i üst çubuklar (üst şerit 65 + başlık 75 + duyuru 98), 172px'i çerez bandı. İçeriğe kalan 434px, yani %51. Üstelik hero'nun "Ücretsiz Randevu Al" düğmesi 693px'te bitiyordu, çerez bandı 672px'te başlıyordu: ana eylem ÖRTÜLÜYORDU. Aşağıda yalnız BOŞLUKLAR sıkıldı. Yazı boyutu 17px'in altına inmiyor, dokunma hedefleri 44px kalıyor, çerez metnine dokunulmuyor (o hukuki metin, kısaltmak bana düşmez). ========================================================================= */ @media (max-width: 640px) { /* Üst şerit: 9px dolgu → 6px. Yazı 17px kalıyor. */ .topbar__inner{ padding-block: 5px; } .ticker__group{ padding-block: 5px; } /* Duyuru şeridi. `flex-wrap: nowrap` denedim: metni sıkıştırıp dört satıra böldü ve bandı 96px'ten 108px'e ÇIKARDI — ekran görüntüsünde görüp geri aldım. Sarma açık kalıyor, yalnız dolgu sıkıştı. (Ayrıntı cümlesi zaten 560px altında gizli — yukarıdaki blok.) */ .duyuru__ic{ padding: 8px 12px; gap: 8px 10px; } .duyuru__yazi{ line-height: 1.35; } .duyuru__rozet{ padding: 4px 9px; } /* ── Kayan şerit mobilde DURUYOR ───────────────────────────────────── İki sebep: (1) hareketli metni okumak zor, hedef kitle 60+; (2) sayfa açıldığında şerit çoktan kaymış oluyor ve ziyaretçinin gördüğü ilk şey ortadan kesilmiş bir kelime ("...si 08:30 – 18:00"). Mobilde tek ve tam bir mesaj duruyor: çalışma saatleri. Diğer mesajların hepsi zaten sayfanın içinde de geçiyor. Duraklat düğmesi (.hareket-anahtar) KALIYOR: o yalnız şeridi değil, sayfadaki bütün hareketi (reveal, galeri otomatik geçişi) kontrol eden erişilebilirlik anahtarı. */ .ticker__track{ animation: none; transform: none; width: auto; display: block; } .ticker{ -webkit-mask-image: none; mask-image: none; overflow: visible; } .ticker__group ~ .ticker__group{ display: none; } .ticker__group .tk ~ .tk{ display: none; } .ticker__group .tk::after{ content: none; } /* Şerit 310px, mesaj 17px'te ona sığmıyordu ve "...18:0" diye kesiliyordu. Kesmek yerine sarmasına izin veriliyor: mesaj tam okunuyor, şerit 54px yerine ~56px oluyor. Yazıyı küçültmek kural gereği seçenek değil. */ .ticker__group{ display: block; white-space: normal; padding-block: 4px; } .tk{ display: block; white-space: normal; line-height: 1.3; } /* NOT: duyuruda `order` ile mesajı öne almayı denedim — üç satıra çıkıp bandı 91px'ten 131px'e ÇIKARDI (rozet / metin / düğmeler ayrı satırlara düştü). Ölçüp geri aldım; doğal sıra iki satırda kalıyor. */ /* Çerez bandı: yalnız dolgu ve boşluk. Metin aynen duruyor. */ .cerez__ic{ padding: 12px 14px; gap: 10px; } .cerez__yazi{ line-height: 1.45; } /* Hero: başlık ve alt metin arasındaki nefes mobilde fazlaydı. */ .hero__lead{ margin-block: 12px; } } /* ========================================================================= MOBİLDE BÜYÜK BLOKLAR — 26 Ağustos 2026 Ana sayfanın %32'si dört blokta toplanmıştı: hero 715px, .evde 861px, .cta 612px, .sosyal-blok 573px. İçerik kısaltılmadı; yalnız mobilde nefes payları sıkıldı ve hero ekranı tek başına kaplamaktan çıkarıldı. ========================================================================= */ @media (max-width: 640px) { /* Hero 74vh (844px ekranda 625px) istiyordu. Üstünde 228px çubuk varken bu, ilk ekranda hero'dan başka hiçbir şeyin görünmemesi demekti. Mesaj ve düğme rahat sığıyor; alt bölümün ucu da görünüyor ki ziyaretçi aşağıda devamı olduğunu anlasın. */ .hero__media{ min-height: 62vh; } .cta{ padding: 24px 20px; } .cta p{ margin-top: 12px; } .cta__actions{ margin-top: 20px; gap: 10px; } .sosyal-blok{ padding: 22px 18px; gap: 20px; } .sosyal-blok__ust{ gap: 16px; } .evde{ padding: 18px; gap: 16px; } } /* ========================================================================= MOBİL EYLEM ÇUBUĞU — 26 Ağustos 2026 Gerekçesi assets/js/main.js sonundaki `eylemCubugu` bloğunda yazılı: ekranın altında üç ayrı yüzen öğe yarışıyordu ve WhatsApp balonu 45 sayfanın yalnız 15'inde vardı. ========================================================================= */ .eylem-cubuk{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(6,32,47,.10); transform: translateY(110%); transition: transform .28s var(--ease); padding-bottom: env(safe-area-inset-bottom, 0px); } .eylem-cubuk.acik{ transform: translateY(0); } .eylem-cubuk__dugme{ display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; padding: 10px 12px; font-size: var(--fs-base); font-weight: 700; letter-spacing: -.01em; text-decoration: none; } .eylem-cubuk__dugme svg{ width: 21px; height: 21px; flex: none; } .eylem-cubuk__dugme--ara{ background: var(--brand); color: #fff; } .eylem-cubuk__dugme--wa{ background: #25d366; color: #06351a; } .eylem-cubuk__dugme:focus-visible{ outline: 3px solid var(--ink); outline-offset: -3px; } /* İçerik çubuğun altında kalmasın. */ body.eylem-cubuk-var{ padding-bottom: calc(var(--eylem-h, 58px) + env(safe-area-inset-bottom, 0px)); } /* Çubuk varken eski yüzen öğeler gereksiz — ikisi de aynı işi yapıyordu ve balon hero düğmesinin üstüne biniyordu. */ body.eylem-cubuk-var .wa-float{ display: none; } body.eylem-cubuk-var .sgk-float-yuva{ bottom: calc(var(--eylem-h, 58px) + 12px); } /* Çerez bandı açıkken çubuk GÖSTERİLMEZ. Önce bandı çubuğun üstüne almıştım; band 59px yukarı çıkınca hero'nun "Ücretsiz Randevu Al" düğmesini yeniden örttü (ölçtüm: düğme 671'de bitiyor, band 625'te başlıyordu). Çerez kararı ilk ziyarette bir kez verilen bir iş; aynı anda iki sabit şerit göstermek zaten kalabalık. Karar verilince çubuk kendiliğinden görünür hâle geliyor. */ /* 29 Ağustos 2026 — YUKARIDAKİ KARAR TERSİNE ÇEVRİLDİ. Ölçüm: onay bandı açıkken 360x640, 375x667 ve 375x812'nin ÜÇÜNDE DE ilk ekranda TEK BİR arama yolu yoktu — ne tel: bağlantısı, ne WhatsApp. Görünen tek eylem "Randevu Al"dı ve o da başka bir sayfaya gidiyor. Telefonla dönüşen bir işte, 60+ kitlede, reklam parası harcanırken bu 58 px'lik çubuktan pahalı. Eski denemenin başarısız olma sebebi de giderildi: o zaman duyuru bandı (91 px) ve hero'nun tam dolgusu yerindeydi. İkisi de onay beklerken artık kısılıyor, yani çubuğa yer var. testler/20 bu kararı ölçerek kilitliyor: çubuk görünür, bandın ÜSTÜNDE duruyor ve hero düğmesini örtmüyor. */ body.cerez-acik .eylem-cubuk{ bottom: var(--cerez-h, 92px); } /* WCAG 2.2 SC 2.4.11 (Focus Not Obscured) — 29 Ağu 2026. Ölçüm: her sayfada 140 Tab basılıp odaklanan öğenin dikdörtgeni bandın dikdörtgeniyle karşılaştırıldı; band açıkken odak öğelerinin bir kısmı %100 örtülüyordu, dönüşüm düğmeleri dahil. Klavyeyle gezen biri odağın nerede olduğunu göremiyordu. Çözüm: band açıkken gövdeye ve kaydırma çıpasına band yüksekliği kadar alt boşluk. */ html:has(body.cerez-acik){ scroll-padding-bottom: calc(var(--cerez-h, 92px) + 24px); } body.cerez-acik{ padding-bottom: calc(var(--cerez-h, 92px) + 24px); } body.cerez-acik.eylem-cubuk-var{ padding-bottom: 0; } /* Alt davet şeridi çubuğun üstüne otursun — ikisi birlikte görünebilir. */ body.eylem-cubuk-var #dv-serit{ bottom: calc(var(--eylem-h, 58px) + env(safe-area-inset-bottom, 0px)); } @media (min-width: 641px){ .eylem-cubuk{ display: none; } } /* ========================================================================= MOBİLDE BÖLÜM KATLAMA — 27 Ağustos 2026 Gerekçesi assets/js/main.js sonundaki `bolumKatla` bloğunda yazılı. ========================================================================= */ .katli__dugme{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 14px; padding: 12px 18px; font: inherit; font-size: var(--fs-base); font-weight: 700; color: var(--brand-700); background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-pill); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); } .katli__dugme:hover{ border-color: var(--brand); } .katli__dugme:focus-visible{ outline: 3px solid var(--brand); outline-offset: 3px; } .katli__dugme svg{ width: 19px; height: 19px; flex: none; transition: transform .22s var(--ease); } .katli--acik > .container > .katli__dugme svg, .katli--acik .katli__dugme svg{ transform: rotate(180deg); } .katli__ic{ margin-top: 16px; } @media (prefers-reduced-motion: reduce){ .katli__dugme svg{ transition: none; } } /* ── Çocuk sayfası maskot kadrosu ───────────────────────────────────── 27 Ağustos 2026. Doruk: "çocuk sayfasına çizgi film karakterleri istiyorum." İstediği örnekler (Marsupilami, Şirinler) telifli karakterler; onların benzerini üretmek hukuki bir tercih değil, doğrudan kopya olurdu. Yerine Doruk'a AİT özgün bir kadro çizildi: fil, tavşan, tilki ve baykuş — dördü de keskin işitmesiyle tanınan hayvanlar, yani fikir markanın işiyle örtüşüyor ve kimseye benzemiyor. Bu, `uretilen/BENIOKU.txt` 2. kuralının ("düz çizim kullanılmıyor, hepsi fotogerçekçi") bilinçli ve TEK istisnası: kural 23 Ağustos'ta yetişkin sayfaları için konmuştu, çizimi çocuk sayfasına Doruk 27 Ağustos'ta kendisi istedi. Başka sayfaya taşınmaz. */ .kadro-serit{ margin: 0 0 6px; } .kadro-serit__foto{ display: block; width: 100%; height: auto; border-radius: var(--r-lg); background: #faf6ee; } .kadro-serit figcaption{ margin-top: 10px; text-align: center; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; } /* Kartın içindeki maskot. Görsel krem zeminli (şeffaf değil), o yüzden daire içine alınıyor — kare bir yama gibi durmasın diye. alt="" ve bilinçli: karakter bilgi taşımıyor, başlığın yanındaki süs. Ekran okuyucu "0–12 ay" başlığını iki kez duymamalı. */ .kart-maskot{ display: block; width: 76px; height: 76px; margin-bottom: 10px; border-radius: 50%; background: #faf6ee; object-fit: cover; } .kart-maskot--orta{ margin-inline: auto; } @media (max-width: 640px){ .kart-maskot{ width: 64px; height: 64px; } } /* ── Deneme sayfası: altı durum listesi ─────────────────────────────── 27 Ağu 2026. Sayfa 141 kelimeydi ve altı deneme durumu tek bir cümle yığınının içine sıkışmıştı — kimse okumuyordu. Aynı altı durum yeni bilgi uydurulmadan taranabilir hale getirildi. Numaralar `
    `'den geliyor ama listeyi işaretsiz kılıp numarayı ::before ile yeniden çiziyoruz: sayfada sıra bir ÖNCELİK değil, altı ayrı durum. Yine de
      , çünkü ekran okuyucuya "6 öğe" demesi ve sayması burada işe yarıyor. */ .deneme-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: dn; } .deneme-liste li{ counter-increment: dn; display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2, #f4f7fa); } .deneme-liste li::before{ content: counter(dn); grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; font-size: var(--fs-sm); } .deneme-liste b{ font-weight: 700; } .deneme-liste span{ color: var(--muted); line-height: 1.55; } @media (max-width: 640px){ .deneme-liste li{ padding: 12px 14px; gap: 4px 10px; grid-template-columns: 30px 1fr; } .deneme-liste li::before{ width: 30px; height: 30px; } } /* Kart görselini ortalamak için (hakkımızda "Değerlerimiz" başlığı) */ .kart__foto--orta{ max-width: 900px; margin-inline: auto; } /* Telif şeridindeki hukuki bağlantılar. Ortada duruyorlar; ne kadar kalabalık olurlarsa olsun bir sütunu şişirmiyorlar. */ .footer__yasal{ display: inline-flex; gap: 20px; flex-wrap: wrap; } /* 44 px dokunma hedefi — 30 Ağu 2026. Ölçüldü (393 px): üçü de 27 px yükseklikteydi ve alt bilgi 45 sayfanın hepsinde. Bunlar KVKK ve çerez tercihi gibi hukuki erişim noktaları, hedef kitle 60+. `gap: 20px` bilerek korundu: komşu hedefler arasını daraltmak büyüyen hedeflerin kazancını geri alırdı. KAPSAM YALNIZ ALT BİLGİ. Aynı metinlerin çerez bandındaki ikizleri (.cerez__yazi a) 22 px ve öyle KALMALI: onlar cümle içi satır içi bağlantı (WCAG 2.5.8 muafiyeti) ve bandı büyütmek hero düğmesini örtüyor — bir kez denendi, testler/20 yakaladı. */ .footer__yasal a{ display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 3px; } .footer__yasal a:hover{ color: var(--cyan); } /* Beş sütun 1100px'in altında sıkışıyor; ara adımda 3'e düşüyor (marka bloğu tam satır, dört bağlantı sütunu ikişerli). */ @media (min-width: 981px) and (max-width: 1160px){ .footer__grid{ grid-template-columns: 1fr 1fr 1fr; gap: 30px 26px; } .footer__grid > :first-child{ grid-column: 1 / -1; } } /* ── Masaüstü düzeni: video paneli ve evde hizmet kartı ─────────────── 27 Ağustos 2026. Doruk masaüstü ekran görüntüsüyle iki yer gösterdi. 1) VİDEO PANELİ. `.reel-serit` 660px'e sabitlenmiş ve sola yaslanmıştı; 1440px'lik bir ekranda panelin sağ yarısı bomboş kalıyordu — üç video kocaman koyu bir alanın köşesine sıkışmış gibi duruyordu. Mobilde sorun yok (zaten tek sütun), sorun yalnız masaüstünde. Çözüm: panel geniş ekranda iki sütuna ayrılıyor — solda başlık ve sosyal blok, sağda video şeridi. Video boyutu büyümüyor (9:16 dikey kareler tam genişlikte devasa olurdu); boşluk kapanıyor. 2) EVDE HİZMET KARTI. Görsel 340px'e sabitti, metin kalan ~700px'i tek satırda dolduruyordu: satır uzunluğu 90 karakteri geçiyordu ve okuma yoruyordu. Görsel büyüdü, metin 58 karakterle sınırlandı. */ @media (min-width: 1024px){ .sosyal-blok{ display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); column-gap: clamp(30px, 3.4vw, 52px); row-gap: 0; } .sosyal-blok__ust{ grid-template-columns: 1fr; row-gap: 26px; } .sosyal-blok__metin{ max-width: 34ch; } .reel-serit{ max-width: none; } } @media (min-width: 820px){ .evde{ grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: clamp(30px, 3vw, 44px); } .evde__metin{ max-width: 58ch; } } /* ── 3D kalıp: "kötü oturan kalıp ne yapar?" kartları ───────────────── 27 Ağu 2026. Doruk: "3D sayfasında fotolar güzel ama design geliştir." Bu bölüm beş düz metin kutusuydu, hepsi aynı ağırlıkta, aralarında hiçbir görsel ayrım yoktu — sayfanın en yorucu yeri orasıydı. İki şey değişti: 1. Başlıklar h2'den h3'e indi. Bölümün kendi h2 başlığı zaten vardı; beş alt başlığın da h2 olması ekran okuyucuda yanlış ana hat üretiyordu (beş kardeş bölüm gibi okunuyordu). 2. Her kartın soluna bir uyarı çubuğu ve başlığın önüne bir işaret geldi: bunlar "sorun" kartları, "özellik" kartları değil. Renk tek başına anlam taşımıyor — işaret + başlık metni de aynı şeyi söylüyor (WCAG 1.4.1). */ .kart-yigin--bakim .card{ position: relative; padding-left: clamp(18px, 2.4vw, 26px); border-left: 3px solid var(--amber); background: linear-gradient(90deg, var(--amber-bg) 0%, transparent 42%), var(--white); } .sorun-kart__baslik{ display: flex; align-items: center; gap: 9px; font-size: 1.15rem; margin: 0 0 10px; line-height: 1.3; } .sorun-kart__baslik::before{ content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); -webkit-mask: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2 1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2V8h2v5z'/%3E%3C/svg%3E"); mask: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2 1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2V8h2v5z'/%3E%3C/svg%3E"); } /* Katlı bölümün dışına taşınan eylem çağrısı: düğmeyle arasında nefes olsun, kapalıyken yalnız kalmış gibi durmasın. */ .katli__eylem{ margin-top: 12px; } /* Kariyer ızgarası iki sütuna sabitti ama içinde tek kart var: sağ yarısı boş kalıyordu. `auto-fit` + `minmax` ile kart sayısı kadar sütun oluşuyor; ikinci kart eklenirse düzen kendiliğinden ikiye dönüyor, kod değişmeden. */ .kariyer-kartlar{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } /* ── Marka sayfaları mobilde: cihaz bandı → sıkı satır ──────────────── 27 Ağustos 2026. Doruk'un "hayvan gibi büyük ve uzun" şikâyetinin asıl kaynağı burasıydı ve ölçene kadar görülmüyordu: signia 16,2 ekran 14 cihaz bandı = 8307px, sayfanın %61'i rexton 15,4 ekran resound 13,6 ekran widex 13,5 ekran Bölüm katlaması bu sayfalara hiç dokunmuyor, çünkü bantların `section-head`'i yok — başlık bandın içinde. Katlamak da doğru cevap değildi: burası bir ürün listesi, modeli görmek için tıklatmak ziyaretçiyi yorar. Onun yerine aynı içerik yatay ve sıkı diziliyor — hiçbir şey gizlenmiyor, hepsi ekranda. `.hzm` mozaiğinde 26 Ağustos'ta aynı yol izlenmişti. Fotoğraf küçülmüyor kadar da küçülmüyor: 150px, ürün kesmesi `contain` ile tam oturuyor. İki büyük rakam altta tam satırda kalıyor — taslağın en iyi fikri onlardı, ezilmemeliler. */ @media (max-width: 700px){ .cihaz-bant{ padding-block: 20px; } /* Izgara ile iki deneme yapıldı ve ikisi de tutmadı; ölçüm ve ekran görüntüsü ikisini de eledi: 1. Her şey 150px fotoğrafın yanındaki dar sütuna girdi → tek cümlelik tanıtım BEŞ satıra sardı, kazanç sıfır (587→587px). 2. Uzun alanlar tam satıra alındı → 438px'e indi, ama fotoğraf ızgarada yalnız BİR satır kaplıyor; rozeti olmayan bantlarda model adı fotoğrafın altına kayıyordu, düzen tırtıklıydı. (Çocuk sayısı bantlar arasında değişiyor: kimi "En çok tercih edilen" rozetli, kimi değil — ızgara satırları hizalanmıyor.) Doğru araç float. Metin fotoğrafın yanından başlayıp altında kendiliğinden tam genişliğe akıyor; kaç öğe olduğu önemli değil, hizalama sorunu ortadan kalkıyor. Klasik dergi düzeni. `flow-root`: float kapsayıcıdan taşmasın diye. */ .cihaz-bant__ic{ display: flow-root; } .cihaz-bant__foto{ float: left; width: 160px; aspect-ratio: 1 / 1; margin: 0 14px 10px 0; } .cihaz-bant--ters .cihaz-bant__foto{ order: 0; } .cihaz-bant__yazi{ display: block; } /* Rozet 176px'lik boşluğa sığmayınca satır kutusu fotoğrafın altına düşüyor ve yanındaki alan boş kalıyordu. Mobilde küçültülüyor. */ .cihaz-bant__yazi .cok-satan{ margin-bottom: 6px; font-size: var(--fs-xs); padding-inline: 9px; gap: 5px; letter-spacing: .02em; } .cihaz-bant__yazi .cok-satan svg{ width: 13px; height: 13px; } .cihaz-bant .cihaz-marka{ margin-bottom: 2px; } .cihaz-bant h3{ font-size: 1.16rem; margin-bottom: 4px; line-height: 1.25; } .cihaz-bant__tip{ margin-bottom: 8px; font-size: var(--fs-xs); } .cihaz-bant__cumle{ font-size: var(--fs-base); line-height: 1.5; max-width: none; } /* Flex kutusu float'tan kaçınır, dar sütunda ezilirdi: alta indiriliyor. */ .cihaz-olcumler{ clear: left; margin-top: 12px; gap: 26px; } .olcum__v{ font-size: 1.45rem; } .olcum__k{ font-size: var(--fs-xs); margin-top: 3px; } .cihaz-bant .renkler{ clear: left; margin-top: 10px; } } /* ── Hukuk sayfalarında alt başlık ve çerez tablosu (27 Ağu 2026) ────── Aydınlatma metnindeki çerez bölümü alt başlıklara ve bir tabloya ayrıldı: hangi çerez, ne işe yarıyor, ne kadar duruyor. Ziyaretçinin düz paragraf içinde arayacağı bilgi değil bu. */ .hukuk__h3{ font-size: var(--fs-md); font-weight: 800; color: var(--ink); margin: 0 0 6px; letter-spacing: -.01em; } /* Tabloya min-width VERİLMİYOR ve bunu deneyerek öğrendim: kart bir grid, tablonun sarmalayıcısı ise grid hücresinin TORUNU. Sarmalayıcıya `min-width: 0` vermek yetmiyor, çünkü şişen hücrenin kendisi. Sonuç 390px'te 14px yatay taşmaydı — üstelik taşan öğe olarak çekmece görünüyordu, çünkü o da genişleyen gövdenin %100'ü. Doğal sarmaya bırakıldı; üç sütun 306px'te de okunuyor. */ .hukuk-tablo-kutu{ min-width: 0; margin-top: 10px; } .hukuk-tablo{ width: 100%; border-collapse: collapse; font-size: var(--fs-base); table-layout: fixed; } .hukuk-tablo code{ overflow-wrap: anywhere; } /* overflow-wrap: 320px'te /gizlilik 19px yatay kayıyordu (WCAG 1.4.10). */ .hukuk-tablo th, .hukuk-tablo td{ overflow-wrap: anywhere; text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } .hukuk-tablo th{ font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; } .hukuk-tablo code{ font-size: var(--fs-base); background: rgba(11,110,168,.07); padding: 2px 6px; border-radius: 5px; /* --brand (#0b6ea8) burada 4,20:1 kalıyordu (gereken 4,50): kendi %7'lik mavi zemini kartın üstüne binince birleşik zemin rgb(215,226,237) oluyor. #0a5e8f aynı zeminde 5,31:1. */ color: #0a5e8f; } /* Hukuk metninde "tamamlanma aşamasında" uyarısı (29 Ağu 2026). Hukuk görüşü bekleyen bölümler sessizce eksik bırakılmıyor; ziyaretçi neyin tamamlanmadığını görüyor. Görüş gelince bu paragraflar silinecek. */ .hukuk__bekleyen{ background: #fff8ec; border-left: 3px solid #a97400; padding: 10px 13px; border-radius: 0 8px 8px 0; font-size: var(--fs-sm); line-height: 1.55; color: #4a3a12; } /* ── "Alırken nelere dikkat" maddeleri — 30 Ağustos 2026 ────────────────── Doruk: "her bir maddeye kendine özel onu anlatan görsel üret. Maddeleri kitap gibi uzun uzun yazma, derli toplu, sanki PowerPoint sunumunda bullet point verir gibi anlat. Renkler kullanabilirsin." Sekiz madde artık düz kart yığını değil: her maddenin kendi görseli var, yön dönüşümlü (tek maddede solda, çift maddede sağda) ki sayfa aşağı inerken ritim kazansın. Metin bir giriş cümlesi + iki madde işareti; önceki hâli iki uzun paragraftı. Hiçbir iddia değişmedi, yalnız kısaldı. */ .dm{ display: grid; grid-template-columns: 420px 1fr; gap: clamp(20px, 3vw, 38px); align-items: center; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); margin-bottom: 18px; } .dm--ters{ grid-template-columns: 1fr 420px; } .dm--ters .dm__foto{ order: 2; } .dm__foto{ border-radius: var(--r-sm); overflow: hidden; background: var(--gri-50); } .dm__foto img{ width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; } .dm__no{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: var(--fs-md); margin-bottom: 12px; font-variant-numeric: tabular-nums; } .dm h2{ font-size: clamp(1.15rem, 2vw, 1.45rem); margin: 0 0 10px; color: var(--ink); } .dm__giris{ margin: 0 0 14px; font-size: var(--fs-base); font-weight: 700; color: var(--brand-700); line-height: 1.5; } .dm__liste{ margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .dm__liste li{ position: relative; padding-left: 26px; color: var(--ink); font-size: var(--fs-base); line-height: 1.6; } .dm__liste li::before{ content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); } .dm__liste a{ color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 760px){ .dm, .dm--ters{ grid-template-columns: 1fr; gap: 16px; } .dm--ters .dm__foto{ order: 0; } .dm__no{ width: 38px; height: 38px; margin-bottom: 10px; } } /* Evde hizmet metni — 30 Ağu 2026. Doruk: "yazı çok uzun ve karışık, hiç attractive değil". İki paragraf, bir giriş cümlesi + üç maddeye indi. Hiçbir olgu düşmedi: 14 şube, ilçe sınırı yok, ücretin işleme göre değişmesi ve randevuda söylenmesi — hepsi duruyor, yalnız taranabilir. */ .evde__giris{ margin: 0 0 14px; font-size: var(--fs-md); font-weight: 700; line-height: 1.45; color: var(--ink); } .evde__liste{ margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 11px; } .evde__liste li{ position: relative; padding-left: 27px; color: var(--body); font-size: var(--fs-base); line-height: 1.55; } .evde__liste li::before{ content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); } .evde__liste b{ color: var(--ink); } /* Süreç adımlarına görsel — 30 Ağu 2026. Doruk: "güzel yapamayacaksan sil geç; güzel yaparsın ama görsel içerisinde yazı yaz mesela." Yazı görselin İÇİNE yazılmadı: yapay görsel üreticileri Türkçe metni bozuk çıkarıyor (ı, ş, ğ, İ) ve okunmaz oluyor. Bunun yerine görsel üretildi, yazı HTML olarak üstünde duruyor — hem net hem ekran okuyucuya görünür hem de değiştirmesi kolay. */ .adim-yol__foto{ border-radius: var(--r-sm); overflow: hidden; background: var(--gri-50); margin-bottom: 14px; } .adim-yol__foto img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; } /* Fotoğraflı süreç adımları — mobil düzeltmesi (30 Ağu 2026). 820px altında `.adim-yol__adim` `50px 1fr` gridine dönüyor (numara | metin). Görsel ilk sütuna düşüp 50 px'e eziliyordu; testler/16 yakaladı ("260px iniyor, gerçek 50px"). Görsel iki sütunu birden kaplıyor. Dikey bağlantı çizgisi bu varyantta kapatıldı: görselin üstünden geçiyordu ve numaralar sırayı zaten anlatıyor. */ @media (max-width: 820px){ .adim-yol--fotolu .adim-yol__foto{ grid-column: 1 / -1; margin-bottom: 14px; } .adim-yol--fotolu .adim-yol__adim::before{ display: none; } .adim-yol--fotolu .adim-yol__adim{ padding-bottom: 30px; } } /* DÖRT ADIMLIK YOL — 31 Ağu 2026 `.adim-yol` sütun sayısını `auto-fit minmax(240px,1fr)` ile kabın genişliğinden çıkarıyor. Bu üç ve beş adımda doğru çalışıyor, DÖRTTE çalışmıyor: bakım sayfasındaki kartın içi 930px, oraya üç sütun sığıyor ve dördüncü adım tek başına alt satıra düşüyor. Ekran görüntüsünde sağ yarı bomboş kalıyordu — Doruk'un bu sayfa için "karmakarışık" dediği şeyin ta kendisi. Dört adımlık yol dört sütun ister; süreç ancak öyle tek bakışta okunuyor. Ölçüldü: 1100px görünümde her adım 210px, 4:3 görsel ve iki kelimelik başlık için yeterli. Arada iki sütun, 820px altında yukarıdaki kural devralıyor. */ @media (min-width: 1100px){ .adim-yol--dort{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 821px) and (max-width: 1099px){ .adim-yol--dort{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── İLETİŞİM: ÜÇ KANAL + GELMEDEN ÖNCE ──────────────────────────────── 31 Ağu 2026. Doruk iki şey söyledi: "iletişim için bu fotoğrafları koyma, koyacaksak seçelim beraber" ve "bu iletişim sayfası çok sade ve basit, beğenmedim." Fotoğraflar kaldırıldı. Sayfanın sadeliği ise fotoğraf eksikliğinden değildi: ziyaretçi karar anında "hangisinden ulaşayım, ne zaman açıklar, gitmeden ne bilmem gerekir" sorularının cevabını bulamıyordu. Sayfada telefon ve WhatsApp düğmeleri vardı ama ikisinin ne zaman kullanılacağı yazmıyordu. (Randevu formu yok; 29 Ağustos'ta Doruk'un isteğiyle kaldırıldı ve geri konmadı.) Kartlar bağlantı (a) — kutunun tamamı tıklanabilir, 60+ kitle için önemli. Yükseklik zaten 44px'in çok üstünde. */ .kanal{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 40px; } .kanal__kart{ display: grid; gap: 6px; align-content: start; padding: 24px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .kanal__kart:hover{ border-color: var(--brand); box-shadow: var(--sh-sm); transform: translateY(-2px); } .kanal__ic{ width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--wash); display: grid; place-items: center; margin-bottom: 8px; color: var(--brand-700); } .kanal__ic svg{ width: 22px; height: 22px; } .kanal__kart b{ font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .kanal__deger{ font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; color: var(--ink); line-height: 1.25; } .kanal__not{ font-size: var(--fs-base); color: var(--muted); line-height: 1.55; } .gelmeden{ margin-top: 30px; padding: 26px 26px 24px; background: var(--wash); border: 1px solid var(--line-soft); border-radius: var(--r-md); } .gelmeden__bas{ font-size: 1.15rem; margin: 0 0 16px; } .gelmeden__liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .gelmeden__liste li{ display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: var(--fs-base); line-height: 1.55; color: var(--muted); } .gelmeden__liste b{ color: var(--ink); } .gelmeden__liste .ci{ width: 24px; height: 24px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; color: #fff; margin-top: 1px; } .gelmeden__liste .ci svg{ width: 14px; height: 14px; } /* Bağlantı yalnız renkle ayrılmasın (WCAG 1.4.1). Ölçüldü: ilk yazımda "SGK desteği" gövde metniyle aynı görünüyordu, bağlantı olduğu anlaşılmıyordu. */ .gelmeden__liste a{ color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 900px){ .kanal{ grid-template-columns: 1fr; gap: 14px; } } /* ── YARDIM MERKEZİ: "ARADIĞINIZ BURADA YOKSA" ───────────────────────── 31 Ağu 2026. Doruk: "en alttaki 'aradığınız burada yoksa' sayfasının modellemesini ve design kısmını geliştir, fotoğraf ekle." İki sorun ölçüldü. Birincisi düzen: `auto-fit minmax(230px,1fr)` 1240px kapta üç sütun veriyordu, dördüncü kart tek başına alt satıra düşüyor ve yanında iki kart boyu boşluk kalıyordu. Dört kart dört sütun ister. İkincisi: kartlar düz metindi, hiçbirinde görsel yoktu ve bağlantı oldukları da belli olmuyordu — ok işareti eklendi. Görseller yeni üretilmedi; dördü de sitede zaten duran, gittikleri sayfayı temsil eden kareler. */ .yardim__kartlar--fotolu{ grid-template-columns: repeat(4, minmax(0,1fr)); } .yardim__kartlar--fotolu .yardim__kart{ padding: 0 0 18px; overflow: hidden; gap: 0; } .yardim__kart-foto{ display: block; background: var(--gri-50); } .yardim__kart-foto img{ width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .yardim__kartlar--fotolu .yardim__kart-baslik{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 0; } .yardim__kartlar--fotolu .yardim__kart-metin{ padding: 6px 18px 0; } .yardim__kart-ok{ width: 18px; height: 18px; flex: none; color: var(--brand); transition: transform .18s var(--ease); } .yardim__kart:hover .yardim__kart-ok{ transform: translateX(3px); } @media (prefers-reduced-motion: reduce){ .yardim__kart:hover .yardim__kart-ok{ transform: none; } } @media (max-width: 1020px){ .yardim__kartlar--fotolu{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 620px){ .yardim__kartlar--fotolu{ grid-template-columns: 1fr; } } /* ── ÇOCUK SAYFASI: İŞARETLENEBİLİR KONTROL LİSTESİ ──────────────────── 31 Ağu 2026. Görsel olarak eski `.check-list`e çok yakın duruyor (aynı yuvarlak tik, aynı hizalama) — kasıtlı: ebeveyn sayfayı daha önce gördüyse yeni bir şey öğrenmek zorunda kalmasın, sadece artık dokunulabildiğini fark etsin. Onay kutusu GERÇEK bir input; görsel olarak gizli ama odaklanabilir ve ekran okuyucuya görünür. Tik dairesi kutunun durumunu yansıtıyor. Dokunma hedefi satırın tamamı (label), 44px'in üstünde. */ .kontrol-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .isaret{ display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 9px 8px 9px 6px; margin-left: -6px; border-radius: var(--r-sm); cursor: pointer; min-height: 44px; align-content: center; transition: background-color .15s var(--ease); } .isaret:hover{ background: var(--gri-50); } .isaret__kutu{ position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .isaret__ic{ width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: transparent; color: transparent; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); margin-top: 1px; } .isaret__ic svg{ width: 13px; height: 13px; } .isaret__yazi{ font-size: var(--fs-base); line-height: 1.5; color: var(--ink); font-weight: 600; } .isaret__kutu:checked + .isaret__ic{ background: var(--brand); border-color: var(--brand); color: #fff; } /* Odak halkası label'da: kutu görsel olarak gizli, klavye kullanıcısı nerede olduğunu görmeli. */ .isaret__kutu:focus-visible + .isaret__ic{ outline: 3px solid var(--brand-700); outline-offset: 3px; } .kontrol-ozet{ margin-top: 30px; padding: 22px 24px; background: var(--wash); border: 1px solid var(--line-soft); border-radius: var(--r-md); } .kontrol-ozet__sayi{ margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--ink); line-height: 1.45; } .kontrol-ozet__sayi.is-var{ color: var(--brand-700); } .kontrol-ozet__not{ margin: 10px 0 0; font-size: var(--fs-base); color: var(--muted); line-height: 1.55; } @media (prefers-reduced-motion: reduce){ .isaret, .isaret__ic{ transition: none; } } /* ── KURUMSAL: MARKA PLAKASI ─────────────────────────────────────────── 31 Ağu 2026. Doruk kurumsal sayfası için "görsel koyma, sadece bizim eski ve yeni logoyu koy" dedi; üretilen stajyer masası karesi kaldırıldı, yerine markanın kendisi kondu. Logo beyaz bir plaka üstünde duruyor çünkü SVG'nin kendi rengi (#094253 lacivert + #13a7e0 camgöbeği) sayfanın gri-mavi zemininde erimeye başlıyordu; plaka onu bir marka işareti gibi sunuyor. Eski logo geldiğinde ikinci kare olarak yanına girer ve ızgara iki sütuna döner — o yüzden `auto-fit` değil, sabit ölçüde bir plaka artı esneyen metin. */ .marka-plaka{ display: grid; grid-template-columns: 220px minmax(0,1fr); gap: clamp(22px,3vw,40px); align-items: center; padding: clamp(22px,3vw,34px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); } .marka-plaka__logo{ display: grid; place-items: center; padding: 26px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-sm); } .marka-plaka__logo img{ width: 100%; max-width: 140px; height: auto; display: block; } /* ── Dünden bugüne: iki logo yan yana (1 Eyl 2026) ── Eski logo geniş (oran 2,93), bugünkü kare (1,01). Genişliğe göre hizalanırlarsa eski logo cüce kalıyor. Bu yüzden ikisi de YÜKSEKLİĞE göre oturuyor: aynı görsel ağırlık, farklı en. */ .marka-plaka--ikili{ grid-template-columns: minmax(0, 520px) minmax(0,1fr); } .marka-plaka__kareler{ display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: center; gap: clamp(10px,1.6vw,18px); } .marka-plaka--ikili .marka-plaka__logo{ margin: 0; padding: clamp(14px,2vw,20px); display: flex; flex-direction: column; align-items: center; gap: 10px; } .marka-plaka--ikili .marka-plaka__logo img{ width: auto; max-width: 100%; /* 62 px denendi ve eski logonun yazısı okunmuyordu: oranı 2,93 olduğu için yükseklikten sınırlanınca ancak 142 px enine ulaşıyor. 84 px'te 249 px eninde çıkıyor ve "Doruk İşitme Merkezi" rahat okunuyor. Bugünkü logo kare (1,01) olduğu için aynı yükseklikte 84 px kalıyor; ikisi de aynı görsel ağırlıkta duruyor. 3 Eyl 2026 — `height:auto; max-height:84px` idi. Altındaki figcaption kaldırılınca sütun tek çocuklu kaldı ve SVG olan bugünkü logo masaüstünde 0 px yüksekliğe düştü (testte 84/0 olarak yakalandı): `width:auto` + `height:auto` bir SVG'de kesin ölçü bulamayınca çöküyor. Yükseklik artık kesin veriliyor, oran genişliği belirliyor. */ height: 84px; } .marka-plaka__logo figcaption{ font-size: var(--fs-sm); font-weight: 700; color: var(--muted); text-align: center; line-height: 1.3; } .marka-plaka__ok{ display: grid; place-items: center; color: var(--brand); opacity: .55; } .marka-plaka__ok svg{ width: 22px; height: 22px; } @media (max-width: 860px){ .marka-plaka--ikili{ grid-template-columns: 1fr; text-align: center; } .marka-plaka__kareler{ max-width: 520px; margin-inline: auto; } } /* Dar telefonda yan yana sığmıyor: ok aşağıyı gösterecek şekilde döndürülüp kareler alt alta diziliyor. */ @media (max-width: 460px){ .marka-plaka__kareler{ grid-template-columns: 1fr; } .marka-plaka__ok svg{ transform: rotate(90deg); } } .marka-plaka__yazi p{ margin: 10px 0 0; font-size: var(--fs-base); line-height: 1.65; color: var(--body); } @media (max-width: 700px){ .marka-plaka{ grid-template-columns: 1fr; text-align: center; } .marka-plaka__logo{ max-width: 200px; margin-inline: auto; } .marka-plaka__yazi .eyebrow{ justify-content: center; } } /* ── Gerçek fotoğraflara marka damgası ──────────────────────────────── Doruk 30 Ağu 2026: "her fotoğrafa bizim logomuzu koymaya devam et unutma onu. Olmayan varsa şu an onlara da ekle." Üretilen görsellere logo PİKSELE basılıyor (§15.1, tools/logo_bas.py), çünkü üreticiye çizdirilemiyor. Gerçek şube fotoğraflarında logo yoktu. Neden piksele değil KUTUYA basılıyor: 31 Ağu 2026'da 45 sayfa üç ekran genişliğinde ölçüldü. Aynı fotoğraf farklı en-boy oranlarındaki kutularda kullanılıyor ve `object-fit: cover` ortadan kırpıyor — ölçülen en uç örnek bir kutuda alttan %25, sağdan %29 kesiyordu. Piksele gömülü bir damga bu kırpmaların hepsinde birden köşede duramaz: ya kesilir ya fotoğrafın ortasında kalır. Yardım sayfasındaki iki kartta bu tam olarak görüldü — logo ortadan ikiye bölünmüştü, ki yarım logo logosuz olmaktan kötüdür. Kutuya basılınca damga her zaman kutunun köşesinde, hiç kırpılmıyor, her ölçekte keskin (SVG) ve 273 dosyayı yeniden kodlamak gerekmiyor. `.loccard--foto` bilerek dışarıda: orada fotoğraf %30 opaklıkta arka plan olarak duruyor, üstünde beyaz perde var; damga oraya oturmaz. */ .galeri__kare, .svc-photo, [data-damga]{ position: relative; } /* `data-damga`: karışık kutular için elle işaret. Bir kapsayıcıda hem üretilmiş (damgası piksele basılı) hem gerçek fotoğraf varsa sınıfla ayırt edilemiyor; o zaman damga gereken tek tek işaretleniyor. ÜRETİCİ ÜRÜN GÖRSELLERİNE BASILMAZ. Rexton'un pil fotoğrafı gibi üreticiden gelen kareler Doruk'un malı değil; başkasının görseline kendi logosunu basmak sahiplik iddiasıdır. */ .galeri__kare::after, .svc-photo::after, [data-damga]::after{ content: ""; position: absolute; right: 10px; bottom: 10px; width: clamp(40px, 11%, 62px); aspect-ratio: 1; background: url("../img/logolar/doruk-logo.svg") no-repeat center / contain; /* Lacivert daire açık fotoğrafta okunur; koyu fotoğrafta kaybolmasın diye ince bir açık halka ve gölge veriliyor. */ filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 2px 5px rgba(0,0,0,.40)); pointer-events: none; opacity: .96; } /* Büyütme katmanında fotoğraf tam hâliyle görünüyor; damga orada da kutunun köşesinde durmalı, karenin değil. */ .foto-kat .galeri__kare::after{ display: none; } @media (max-width: 560px){ .galeri__kare::after, .svc-photo::after, [data-damga]::after{ right: 8px; bottom: 8px; } } /* ── Gömülü damganın kırpılmaması ──────────────────────────────────── 31 Ağu 2026. Üretilen görsellerde logo piksele basılı ve sağ altta duruyor (§15.1). `object-fit: cover` ortadan kırpınca alt şerit gidiyor ve logo İKİYE BÖLÜNÜYOR — yardım sayfasındaki iki kartta ölçüldü: 1200x905 kaynak, kutuda alttan %12,7 kesiliyordu, logonun yalnız üst yarısı görünüyordu. Çözüm kırpma yönü: `bottom` deyince tarayıcı fazlalığı ÜSTTEN alıyor, alt kenar olduğu gibi kalıyor ve damga tam görünüyor. Bu kutulardaki fotoğraflarda asıl konu zaten alt-orta bölgede, üst şerit tavan ve boşluk; kırpmanın oradan gitmesi kadrajı bozmuyor (ekrandan doğrulandı). */ .yardim__kart-foto img{ object-position: bottom; } .foto-genis--serit img{ object-position: bottom; } /* Verisi henüz derlenmemiş model — tek dürüst cümle (1 Eyl 2026). Model ağacı 202'ye çıkınca çoğunun yalnız adı var. Beş kez "Üretici verisinde yazmıyor" yazmak yerine ne olduğunu söylüyoruz. */ .yardim__sonuc-not{ margin: 14px 0 0; padding: 14px 16px; background: var(--gri-50); border-left: 3px solid var(--brand); border-radius: var(--r-sm); font-size: var(--fs-base); line-height: 1.6; color: var(--body); } /* ── Yardım merkezi sonuç kartı — yeniden tasarım (3 Eyl 2026, Doruk) ── Eski: düz kutu, alanlar tek sütun, boş alanda "Üretici verisinde yazmıyor". Yeni: başlık bandı markalı, alanlar geniş ekranda iki sütun ve hücreli, boş alan telefon bağlantılı bir çağrı. */ .yardim__sonuc{ padding: 0; overflow: hidden; background: var(--white); } .yardim__sonuc > h3{ margin: 0; padding: 18px 26px 16px; font-size: var(--fs-lg); background: var(--wash); border-bottom: 1px solid var(--line); } /* 4 Eyl 2026 — kartın tek gövdesi bu paragraf: ölçüm ızgarası kalktı. Izgara giderken altındaki 40 px'lik boşluk ortada kalmıştı; düğme satırı paragrafa yaslandı, araya ince bir ayraç kondu. */ .yardim__sonuc-not{ padding: 20px 26px 18px; margin: 0; background: transparent; border-left: 0; border-radius: 0; } .yardim__sonuc-not strong{ color: var(--ink); } .yardim__sonuc .btn{ margin: 0; } .yardim__sonuc > .yardim__eylem{ margin-top: 0; padding: 16px 26px 20px; border-top: 1px solid var(--line-soft); } .yardim__sonuc > p:last-child{ padding: 18px 26px 22px; } /* ── Kurumsal: eski/yeni logo plakası (3 Eyl 2026, Doruk: "tuhaf duruyor") ── İki kutu farklı boyutta ve çerçeveli olunca "iki ayrı kart" gibi okunuyordu. Şimdi tek zemin: iki logo aynı sabit ölçüde, çerçevesiz, ortalı; ok ince ve soluk. */ .marka-plaka--ikili{ background: var(--wash); } .marka-plaka--ikili .marka-plaka__kareler{ gap: clamp(14px,2vw,26px); } .marka-plaka--ikili .marka-plaka__logo{ width: 200px; height: 130px; padding: 14px; border: 0; background: #fff; border-radius: var(--r-sm); box-shadow: 0 1px 2px rgba(6,32,47,.06); display: grid; place-items: center; } .marka-plaka--ikili .marka-plaka__logo img{ height: 78px; width: auto; max-width: 172px; object-fit: contain; } .marka-plaka__ok{ opacity: .35; } .marka-plaka__ok svg{ width: 26px; height: 26px; stroke-width: 1.8; } @media (max-width: 460px){ .marka-plaka--ikili .marka-plaka__logo{ width: min(100%, 240px); } } /* ── Kurumsal: "16 yıldır" başlık bloğu (3 Eyl 2026) ── Dev başlık + uzun paragraf + çip satırı üst üste tuhaf duruyordu. Başlık küçüldü, çipler yerine hakkımızdadaki rakam paneli. */ .kurumsal-giris .section-title{ font-size: clamp(1.6rem, 3.2vw, 2.3rem); text-transform: none; letter-spacing: 0; } .kurumsal-giris .section-lead{ max-width: 62ch; margin-inline: auto; } .kurumsal-giris .mini-stat{ margin: 26px auto 0; max-width: 820px; } /* ── Pil sayfası: dört paket yan yana (3 Eyl 2026, Doruk) ── Tek bileşik görselde 675 küçük kalıyordu; artık her boyut kendi kartında, aynı ölçüde. Kart = paket fotoğrafı + numara + renk + hangi cihazda. */ .pil-paketler{ list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; } .pil-paket{ display: grid; justify-items: center; text-align: center; gap: 4px; padding: 14px 10px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); } .pil-paket img{ width: 100%; max-width: 190px; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #fff; } .pil-paket__no{ font-size: var(--fs-xl); font-weight: 800; color: var(--brand); line-height: 1.1; margin-top: 6px; } .pil-paket__renk{ font-size: var(--fs-sm); font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; } .pil-paket__cihaz{ font-size: var(--fs-sm); line-height: 1.45; color: var(--body); } @media (max-width: 700px){ .pil-paketler{ grid-template-columns: 1fr 1fr; } } /* Boş model notu: numara vurgulu ve tıklanabilir. */ .yardim__sonuc-not{ color: var(--body); } .yardim__sonuc-not a{ color: var(--brand); font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }