/* ========================================================================== Konya İmplant Merkezi — paylaşılan başlık Ana sayfa ve tüm iç sayfalarda aynı başlık render edilir. Kaynak: web/anasayfa.html tasarım sistemi (Claude Design mockup'ı). Tasarım jetonları burada tanımlı — ana sayfa CSS'i de bunlara dayanıyor. ========================================================================== */ :root { --teal: #0B5E57; --teal-bright: #11A398; --teal-deep: #0F4A3F; --ink: #102A27; --ink-soft: #5A716C; --ink-mid: #4A615C; --ink-faint: #8AA09C; --ink-label: #5E7873; --teal-label: #0C8078; --line: #E6EFED; --wa: #25D366; --wa-hover: #1EBE5A; --sand: #FBFAF7; } /* Başlık ana sayfada .kim sarmalayıcısının DIŞINDA duruyor; kendi kutu modeli ve tipografisi gerekiyor. .kim-shell'e overflow verilmiyor — verilirse mobil menünün açılır listesi kırpılır. */ .kim-shell { font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.65; color: #16302D; -webkit-font-smoothing: antialiased; } .kim-shell *, .kim-shell *::before, .kim-shell *::after { box-sizing: border-box; } .kim-shell img { max-width: 100%; } .kim-wrap { max-width: 1180px; margin: 0 auto; padding-left: 22px; padding-right: 22px; } /* --- WhatsApp butonu (sayfa gövdesinde de kullanılıyor) ------------------- */ .kim-wa { display: inline-flex; align-items: center; gap: 11px; background: var(--wa); font-weight: 700; border-radius: 999px; text-decoration: none; transition: background .2s, transform .2s; } .kim-wa:hover { background: var(--wa-hover); } /* Renk `a.kim-wa` ile yazılıyor: bu dosya 'de, sayfanın kendi CSS'i gövdede. Düz `.kim-wa` (0,1,0), sayfadaki `.kim :where(a)` ile eşit özgüllükte kalır ve belge sırası yüzünden KAYBEDER — yazı koyu yeşil zeminde koyu yeşil çıkar. */ a.kim-wa, a.kim-wa:hover, a.kim-wa:focus { color: #fff; } .kim-wa-dot { border-radius: 50%; background: #fff; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .kim-wa-dot i { display: block; border-radius: 50% 50% 50% 0; background: var(--wa); transform: rotate(-45deg); } /* --- Başlık --------------------------------------------------------------- */ .kim-hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.93); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .kim-hdr-in { display: flex; align-items: center; gap: 20px; padding-top: 16px; padding-bottom: 16px; position: relative; } .kim-hdr-logo { flex-shrink: 0; display: block; } .kim-hdr-logo img { height: 76px; width: auto; display: block; } .kim-nav { display: flex; gap: 22px; flex: 1; justify-content: center; } .kim-nav a { font-size: 15.5px; font-weight: 800; color: #3D544F; text-decoration: none; } .kim-nav a:hover, .kim-nav a[aria-current="page"] { color: var(--teal-bright); } .kim-hdr-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .kim-hdr-phone { text-align: right; line-height: 1.2; } .kim-hdr-phone span { font-size: 11px; color: var(--ink-label); font-weight: 600; display: block; } .kim-hdr-phone a { font-size: 15px; font-weight: 800; color: var(--teal); font-family: Sora, sans-serif; text-decoration: none; display: block; } /* JS'siz mobil menü: gizli onay kutusu + label; nav kardeş seçiciyle açılır */ .kim-menu-cb { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .kim-burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; } .kim-burger i { position: relative; display: block; width: 20px; height: 2px; background: var(--teal); border-radius: 2px; } .kim-burger i::before, .kim-burger i::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--teal); border-radius: 2px; transition: transform .2s, opacity .2s; } .kim-burger i::before { top: -6px; } .kim-burger i::after { top: 6px; } .kim-menu-cb:focus-visible ~ .kim-hdr-right .kim-burger { outline: 2px solid var(--teal-bright); outline-offset: 2px; } .kim-hdr .kim-wa { font-size: 14px; padding: 11px 18px; box-shadow: 0 8px 18px rgba(37,211,102,.32); gap: 8px; } .kim-hdr .kim-wa-dot { width: 18px; height: 18px; } .kim-hdr .kim-wa-dot i { width: 8px; height: 8px; } /* --- Duyarlı -------------------------------------------------------------- */ @media (max-width: 1060px) { .kim-burger { display: inline-flex; } .kim-nav { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; flex-direction: column; justify-content: flex-start; gap: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 34px -22px rgba(11,94,87,.45); padding: 6px 0; } .kim-nav a { padding: 14px 22px; font-size: 17px; border-top: 1px solid #F1F6F5; } .kim-nav a:first-child { border-top: none; } .kim-menu-cb:checked ~ .kim-nav { display: flex; } .kim-menu-cb:checked ~ .kim-hdr-right .kim-burger i { background: transparent; } .kim-menu-cb:checked ~ .kim-hdr-right .kim-burger i::before { transform: translateY(6px) rotate(45deg); } .kim-menu-cb:checked ~ .kim-hdr-right .kim-burger i::after { transform: translateY(-6px) rotate(-45deg); } } @media (max-width: 900px) { .kim-hdr-phone { display: none; } } @media (max-width: 820px) { .kim-hdr-logo img { height: 54px; } } @media (max-width: 560px) { /* 390px'te 22+161+20+44+14+133+22 = 416px gerekiyordu, satır taşıyordu */ .kim-hdr-in { gap: 12px; padding-left: 16px; padding-right: 16px; } .kim-hdr-logo img { height: 44px; } .kim-hdr-right { gap: 10px; } .kim-hdr .kim-wa { font-size: 13px; padding: 10px 14px; } .kim-burger { width: 42px; height: 42px; } } @media (max-width: 380px) { /* 320px'te logo + menü + etiketli WA butonu satıra sığmıyor. Başlıktaki buton simgeye iniyor; etiketli sürüm sayfa gövdesinde duruyor. */ .kim-wa-hdr .kim-wa-label { display: none; } .kim-wa-hdr { padding: 11px; gap: 0; border-radius: 50%; } .kim-hdr-logo img { height: 40px; } } @media (prefers-reduced-motion: reduce) { .kim-shell *, .kim-shell *::before, .kim-shell *::after { transition: none !important; } }