/* ========================================================================== Novar Saç Ekimi — tema stilleri Açık, klinik, ferah: açık mavi degrade/dalga zeminler, ince açık mavi çerçeveli beyaz yuvarlak kartlar, lacivert kalın büyük harf başlıklar (ikinci kelime açık mavi), logodan pembe + turkuaz vurgular. Çerçeve yok (framework yok), jQuery yok. ========================================================================== */ /* ---------- Tokenlar ---------- */ :root { --ink: #0b2a6b; --ink-2: #12307c; --ink-3: #081d4d; --mavi: #2563d6; --mavi-2: #3f86f0; --acik-mavi: #4f8fe8; --turkuaz: #5bc3ef; --turkuaz-k: #127fb0; --pembe: #e0457b; --buz: #f3f8ff; --buz-2: #e8f1fd; --buz-3: #dcebfc; --cizgi: #d4e3f6; --metin: #34405f; --soluk: #56638a; --beyaz: #fff; --wa: #128c4a; --wa-2: #0f7a40; --r: 22px; --r-k: 14px; --r-b: 32px; --golge: 0 22px 48px -26px rgba(11, 42, 107, .38); --golge-k: 0 8px 22px -12px rgba(11, 42, 107, .3); --kap: 1240px; --gut: clamp(16px, 4vw, 28px); --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --baslik-y: 80px; --odak: 0 0 0 3px #fff, 0 0 0 6px var(--turkuaz-k); } /* ---------- Temel ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.75; color: var(--metin); background: var(--beyaz); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; text-rendering: optimizeLegibility; } img, video, svg, iframe { max-width: 100%; } img, video { height: auto; display: block; } a { color: var(--mavi); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { color: var(--ink); } :focus-visible { outline: 3px solid var(--turkuaz-k); outline-offset: 3px; border-radius: 4px; } /* Odak halkası yalnız klavye kullanıcılarına: dokunma/fare ile gelen odakta (iOS) kutu görünmesin. data-giris main.js'te. */ html:not([data-giris="klavye"]) :focus-visible:not(input):not(textarea):not(select) { outline: none !important; } button { font: inherit; } h1, h2, h3, h4, h5, h6 { color: var(--ink); font-family: var(--font); line-height: 1.25; margin: 0 0 .6em; letter-spacing: -.01em; } h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.05rem); font-weight: 800; } h3 { font-size: clamp(1.18rem, 1.02rem + .6vw, 1.45rem); font-weight: 800; } h4 { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 700; } h5 { font-size: 1.05rem; font-weight: 700; } p { margin: 0 0 1.1em; } strong, b { color: var(--ink); font-weight: 700; } [id] { scroll-margin-top: calc(var(--baslik-y) + 16px); } .nvr-ana { display: block; outline: none; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .nvr-atla { position: absolute; left: 12px; top: -60px; z-index: 10000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; transition: top .2s; } .nvr-atla:focus { top: 12px; color: #fff; } .nvr-kap { width: 100%; max-width: calc(var(--kap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); } /* ---------- Ortak parçalar ---------- */ .nvr-ust-baslik { display: inline-flex; align-items: center; gap: .7em; margin: 0 0 .9em; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--turkuaz-k); } .nvr-ust-baslik::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pembe), var(--turkuaz)); } .nvr-halka { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, #e6f1ff); border: 1.5px solid #bcd6f8; color: var(--mavi); font-size: 26px; box-shadow: inset 0 0 0 5px #fff, 0 10px 20px -12px rgba(37, 99, 214, .55); } /* Butonlar */ .nvr-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .8em 1.45em; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } .nvr-btn .nvr-i { font-size: 1.15em; } .nvr-btn:hover { transform: translateY(-2px); } .nvr-btn--ana { background: linear-gradient(135deg, var(--mavi), var(--ink)); color: #fff; box-shadow: 0 14px 28px -14px rgba(37, 99, 214, .85); } .nvr-btn--ana:hover, .nvr-btn--ana:focus-visible { color: #fff; box-shadow: 0 18px 32px -14px rgba(37, 99, 214, .95); } .nvr-btn--wa { background: var(--wa); color: #fff; box-shadow: 0 14px 28px -14px rgba(18, 140, 74, .8); } .nvr-btn--wa:hover, .nvr-btn--wa:focus-visible { background: var(--wa-2); color: #fff; } .nvr-btn--cizgi { background: #fff; color: var(--ink); border-color: var(--cizgi); } .nvr-btn--cizgi:hover { border-color: var(--mavi); color: var(--mavi); } .nvr-btn--acik { background: #fff; color: var(--ink); box-shadow: var(--golge-k); } .nvr-btn--acik:hover { color: var(--mavi); } /* ---------- Başlık (koyu lacivert; ortada logo + bölünmüş menü; kaydırınca yalnız logo) ---------- */ @property --nvr-aci { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes nvr-kenar { to { --nvr-aci: 360deg; } } html { scrollbar-gutter: stable; background: #081d4d; } .nvr-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .nvr-logo img { width: auto; height: 54px; max-width: 200px; } .custom-logo-link img { max-height: 54px; width: auto; } .nvr-baslik { --hz: #071a45; --e4: cubic-bezier(.83, 0, .17, 1); --e2: cubic-bezier(.33, 1, .68, 1); position: sticky; top: 0; z-index: 900; height: var(--baslik-y); color: #fff; } .nvr-baslik::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(7, 26, 69, .97); border-bottom: 1px solid rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .3s ease; } .home .nvr-baslik::before, .front-page .nvr-baslik::before { background: rgba(11, 42, 107, .97); } .admin-bar .nvr-baslik { top: 32px; } .nvr-baslik__ic { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 100%; max-width: 1920px; margin-inline: auto; padding-inline: var(--gut); } .nvr-baslik__sol, .nvr-baslik__sag { flex: 1 1 0; min-width: 0; display: flex; align-items: center; } .nvr-baslik__sag { justify-content: flex-end; gap: 8px; } .nvr-baslik__sol, .nvr-baslik__sag, .nvr-bnav { transition: opacity .3s var(--e2), transform .3s var(--e2), visibility .3s; } .nvr-baslik__orta { display: flex; align-items: center; justify-content: center; gap: 2.4rem; flex: none; transition: opacity 1s ease; } /* Menü düğmesi (aç/kapat ikonları üst üste) */ .nvr-menu-dugme { position: relative; display: inline-grid; place-items: center; width: 52px; height: 44px; padding: 0; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: #fff; cursor: pointer; transition: border-color .3s ease, background-color .3s ease; } .nvr-menu-dugme:hover { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .05); } .nvr-menu-dugme > span[aria-hidden] { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .5s var(--e2), transform .5s var(--e2); } .nvr-menu-dugme svg { width: 20px; height: 20px; } .nvr-menu-dugme__ac { transition-delay: .5s !important; } .nvr-menu-dugme__kapat { opacity: 0; transform: translate(5px, 10px) rotate(5deg); transition-delay: .25s !important; } .nvr-menu-dugme[aria-expanded="true"] .nvr-menu-dugme__ac { opacity: 0; transform: translate(-5px, -10px) rotate(-5deg); transition-delay: .25s !important; } .nvr-menu-dugme[aria-expanded="true"] .nvr-menu-dugme__kapat { opacity: 1; transform: none; transition-delay: .5s !important; } .nvr-menu-dugme:focus-visible, .nvr-baslik a:focus-visible, .nvr-bnav__dugme:focus-visible, .nvr-ucan a:focus-visible { outline-color: var(--turkuaz); } .nvr-baslik a, .nvr-baslik button, .nvr-ucan a { -webkit-tap-highlight-color: transparent; } .nvr-ucan__liste a:focus-visible, .nvr-ucan__bilgi a:focus-visible, .nvr-ucan__sosyal a:focus-visible { outline: none !important; } html[data-giris="klavye"] .nvr-ucan__bilgi a:focus-visible { text-decoration: underline; text-decoration-color: var(--turkuaz); text-underline-offset: 4px; } /* Logo */ .nvr-baslik__logo { display: block; flex: none; padding: 5px 12px; border-radius: 999px; line-height: 0; transition: transform .5s var(--e2), background-color .3s ease, box-shadow .3s ease; } .nvr-baslik__logo img { width: auto; height: 42px; } /* Bölünmüş menü (≥1280) */ .nvr-bnav { display: none; list-style: none; margin: 0; padding: 0; align-items: center; gap: 1.7rem; } .nvr-bnav__bag { position: relative; display: inline-flex; align-items: center; gap: .45em; padding: 8px 0; border: 0; background: none; color: #fff; font: inherit; font-size: .76rem; font-weight: 600; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; } .nvr-bnav__bag::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.6, 0, .4, 1); } .nvr-bnav__bag:hover { color: #fff; } .nvr-bnav__bag:hover::after, .nvr-bnav__bag[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .nvr-bnav__bag[aria-current="page"] { color: var(--turkuaz); } .nvr-bnav__ok { width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; } .nvr-bnav__acilir { position: relative; } .nvr-bnav__acilir::before { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 18px; } .nvr-bnav__alt { position: absolute; left: 50%; top: calc(100% + 14px); min-width: 250px; list-style: none; margin: 0; padding: 8px; background: #0b2556; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .nvr-bnav__acilir:hover .nvr-bnav__alt, .nvr-bnav__acilir:focus-within .nvr-bnav__alt, .nvr-bnav__dugme[aria-expanded="true"] + .nvr-bnav__alt { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .nvr-bnav__acilir:hover .nvr-bnav__ok, .nvr-bnav__dugme[aria-expanded="true"] .nvr-bnav__ok { transform: translateY(2px) rotate(225deg); } @media (pointer: coarse) { .nvr-bnav > li > .nvr-bnav__bag::before { content: ""; position: absolute; inset: -7px -6px; } } /* dokunmatik tablet yatay: üst menü dokunma alanı (görünüm/alt çizgi yeri değişmez) */ .nvr-bnav__alt .nvr-bnav__bag { display: flex; padding: 10px 12px; border-radius: 10px; font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; } .nvr-bnav__alt .nvr-bnav__bag::after { display: none; } .nvr-bnav__alt .nvr-bnav__bag:hover { background: rgba(255, 255, 255, .08); } /* Saç Ekimi altında yöntemler (FUE / DHI / Hybrid) — açılır listede tek satır çip (13.10.2026) */ .nvr-bnav__yontem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 12px 8px; } .nvr-bnav__yontem > span { width: 100%; margin: 0 0 2px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .nvr-bnav__alt .nvr-bnav__cip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; } .nvr-bnav__alt .nvr-bnav__cip:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); } .nvr-bnav__alt .nvr-bnav__cip[aria-current="page"] { background: var(--turkuaz); border-color: var(--turkuaz); color: var(--ink); } /* Sağ: telefon, WhatsApp, CTA (dönen kenarlık) */ .nvr-baslik__ikon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; color: #fff; font-size: 20px; text-decoration: none; transition: background-color .25s ease; } .nvr-baslik__ikon:hover { color: #fff; background: rgba(255, 255, 255, .1); } .nvr-baslik__wa { color: #2bd366; border: 1px solid rgba(43, 211, 102, .35); background: rgba(43, 211, 102, .1); } .nvr-baslik__wa:hover { color: #2bd366; background: rgba(43, 211, 102, .22); } .nvr-baslik__cta { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: .55rem 1.2rem; border-radius: 14px; border: 1px solid transparent; color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; background: linear-gradient(#0a1f4f, #0a1f4f) padding-box, conic-gradient(from var(--nvr-aci), rgba(255, 255, 255, .16) 78%, var(--turkuaz) 85%, var(--pembe) 93%, var(--turkuaz)) border-box; animation: nvr-kenar 3s linear infinite; transition: transform .25s ease; } .nvr-baslik__cta:hover { color: #fff; transform: translateY(-2px); } /* "Novar adacığı" — tam başlık ⇄ yüzen cam kapsül (Dynamic Island benzeri morf). Yalnız transform / opacity / clip-path; başlık yüksekliği sabit (yerleşim kayması yok). JS konumları ölçer: --sol-x, --sag-x (düğme ve CTA'yı kapsül kenarına taşır), --logo-x (logoyu tam ortalar). */ .nvr-baslik { --ada-kapali: 210px; --ada-acik: 480px; --ada-y: 64px; --ada-w: var(--ada-kapali); --ada-pay: 10px; --ada-ust: calc((var(--baslik-y) - var(--ada-y)) / 2); --yay: cubic-bezier(.2, .9, .25, 1.12); --yay-t: .48s; } .nvr-baslik::before { content: none; } .nvr-baslik__ic { position: relative; z-index: 1; } .nvr-ada { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: rgba(7, 26, 69, .97); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); clip-path: inset(0px 0px 0px 0px round 0px); transition: clip-path var(--yay-t) var(--yay), background-color .3s ease, box-shadow .3s ease, opacity .3s ease; } .home .nvr-ada { background-color: rgba(11, 42, 107, .97); } .nvr-ada__kenar, .nvr-baslik::after { position: absolute; left: 50%; top: calc(var(--ada-ust) - var(--ada-y) * (var(--ada-k) - 1) / 2); width: calc(var(--ada-w) * var(--ada-k)); height: calc(var(--ada-y) * var(--ada-k)); border-radius: 999px; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .2s ease, width var(--yay-t) var(--yay); } .nvr-ada__kenar { border: 1px solid rgba(11, 42, 107, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); } .nvr-baslik::after { content: ""; z-index: -1; box-shadow: 0 14px 36px -16px rgba(8, 29, 77, .4); } .nvr-ada__ilerleme { position: absolute; left: 50%; bottom: var(--ada-ust); width: calc(var(--ada-w) - 48px); height: 2px; border-radius: 2px; overflow: hidden; transform: translateX(-50%) scaleX(0); transition: transform .3s ease, width var(--yay-t) var(--yay); } .nvr-ada__ilerleme::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #e0457b, #5bc3ef); transform-origin: left center; transform: scaleX(var(--nvr-ilerleme, 0)); } .nvr-baslik__logo { position: relative; transition: transform var(--yay-t) var(--yay); } .nvr-baslik__logo img { transition: opacity .3s ease; } .nvr-baslik__logo .nvr-baslik__logo-renkli { position: absolute; left: 12px; top: 5px; opacity: 0; } .nvr-menu-dugme { transition: border-color .3s ease, background-color .3s ease, color .3s ease, transform var(--yay-t) var(--yay); } /* Kenar öğeleri: geçişler ve kademeler (açılış: merkezden dışa) */ .nvr-baslik__sol, .nvr-baslik__sag, .nvr-bnav > li { transition: opacity .28s ease var(--gd, 0s), transform var(--yay-t) var(--yay) var(--gd, 0s), filter .28s ease var(--gd, 0s), visibility 0s linear 0s; } .nvr-bnav { transition: none; } .nvr-bnav--sol > li:nth-last-child(1), .nvr-bnav--sag > li:nth-child(1) { --gd: .03s; } .nvr-bnav--sol > li:nth-last-child(2), .nvr-bnav--sag > li:nth-child(2) { --gd: .065s; } .nvr-bnav--sol > li:nth-last-child(3), .nvr-bnav--sag > li:nth-child(3) { --gd: .1s; } .nvr-bnav--sol > li:nth-last-child(n+4), .nvr-bnav--sag > li:nth-child(n+4) { --gd: .135s; } .nvr-baslik__sol, .nvr-baslik__sag { --gd: .02s; } .nvr-baslik__tel, .nvr-baslik__wa, .nvr-baslik__cta { transition: opacity .25s ease, transform var(--yay-t) var(--yay), background-color .25s ease, color .3s ease, border-color .3s ease; } /* ---- Kompakt (kapsül) ---- */ .nvr-baslik.is-kompakt { pointer-events: none; } .nvr-baslik.is-kompakt .nvr-ada { pointer-events: auto; box-shadow: none; background-color: rgba(255, 255, 255, .72); --ada-dy: calc(var(--ada-ust) - var(--ada-y) * (var(--ada-k) - 1) / 2); clip-path: inset(var(--ada-dy) calc(50% - var(--ada-w) * var(--ada-k) / 2) var(--ada-dy) calc(50% - var(--ada-w) * var(--ada-k) / 2) round calc(var(--ada-y) * var(--ada-k) / 2)); } .nvr-baslik.is-kompakt .nvr-ada__kenar, .nvr-baslik.is-kompakt::after { opacity: 1; transition-delay: .22s, 0s; } .nvr-baslik.is-kompakt .nvr-ada__ilerleme { transform: translateX(-50%) scaleX(1); transition: transform .45s cubic-bezier(.22, 1, .36, 1) .36s, width var(--yay-t) var(--yay); } .nvr-baslik.is-kompakt .nvr-baslik__logo { pointer-events: auto; transform: translateX(var(--logo-x, 0px)) scale(.82); } .nvr-baslik.is-kompakt .nvr-baslik__logo img { opacity: 0; } .nvr-baslik.is-kompakt .nvr-baslik__logo .nvr-baslik__logo-renkli { opacity: 1; } /* kapanış: dıştan içe kademeli, merkeze kayar + bulanıklaşır */ .nvr-baslik.is-kompakt .nvr-bnav > li { opacity: 0; visibility: hidden; filter: blur(3px); transition: opacity .24s ease var(--gk, 0s), transform var(--yay-t) var(--yay) var(--gk, 0s), filter .24s ease var(--gk, 0s), visibility 0s linear .4s; } .nvr-baslik.is-kompakt .nvr-bnav--sol > li { transform: translateX(34px); } .nvr-baslik.is-kompakt .nvr-bnav--sag > li { transform: translateX(-34px); } .nvr-baslik.is-kompakt .nvr-bnav--sol > li:nth-child(1), .nvr-baslik.is-kompakt .nvr-bnav--sag > li:nth-last-child(1) { --gk: .03s; } .nvr-baslik.is-kompakt .nvr-bnav--sol > li:nth-child(2), .nvr-baslik.is-kompakt .nvr-bnav--sag > li:nth-last-child(2) { --gk: .065s; } .nvr-baslik.is-kompakt .nvr-bnav--sol > li:nth-child(3), .nvr-baslik.is-kompakt .nvr-bnav--sag > li:nth-last-child(3) { --gk: .1s; } .nvr-baslik.is-kompakt .nvr-baslik__sol, .nvr-baslik.is-kompakt .nvr-baslik__sag { opacity: 0; visibility: hidden; filter: blur(4px); transition: opacity .24s ease, transform var(--yay-t) var(--yay), filter .24s ease, visibility 0s linear .4s; } .nvr-baslik.is-kompakt .nvr-baslik__sol { transform: translateX(calc(var(--sol-x, 0px) + 56px)) scale(.9); } .nvr-baslik.is-kompakt .nvr-baslik__sag { transform: translateX(calc(var(--sag-x, 0px) - 56px)) scale(.9); } .nvr-baslik.is-kompakt .nvr-baslik__tel, .nvr-baslik.is-kompakt .nvr-baslik__wa { opacity: 0; visibility: hidden; } .nvr-baslik.is-kompakt .nvr-baslik__cta { transform: scale(.92); transform-origin: right center; } .nvr-baslik.is-kompakt .nvr-menu-dugme { transform: scale(.92); border-color: rgba(11, 42, 107, .18); color: var(--ink); } /* kapsül genişler (yukarı kaydırma / üzerine gelme / odak): öğeler merkezden dışa */ .nvr-baslik.is-kompakt.is-ada-acik { --ada-w: var(--ada-acik); } .nvr-baslik.is-kompakt.is-ada-acik .nvr-baslik__sol, .nvr-baslik.is-kompakt.is-ada-acik .nvr-baslik__sag { opacity: 1; visibility: visible; filter: none; pointer-events: auto; transition: opacity .3s ease .1s, transform var(--yay-t) var(--yay) .04s, filter .3s ease .1s, visibility 0s linear 0s; } .nvr-baslik.is-kompakt.is-ada-acik .nvr-baslik__sol { transform: translateX(var(--sol-x, 0px)); } .nvr-baslik.is-kompakt.is-ada-acik .nvr-baslik__sag { transform: translateX(var(--sag-x, 0px)); } /* Kenar kutuları geniş (flex: 1) ve saydam; kapsüle taşınınca menü düğmesinin / logonun üstüne biniyorlardı. Kompakt hâlde dokunuşu/tıklamayı yalnız içlerindeki düğmeler alır (gizli olanlar visibility ile zaten devre dışı). */ .nvr-baslik.is-kompakt .nvr-baslik__sol, .nvr-baslik.is-kompakt .nvr-baslik__sag { pointer-events: none !important; } .nvr-baslik.is-kompakt .nvr-baslik__sol > *, .nvr-baslik.is-kompakt .nvr-baslik__sag > * { pointer-events: auto; } /* koyu zemin üstünde: koyu cam + beyaz logo (çapraz geçiş) */ .nvr-baslik.is-kompakt.is-ada-koyu .nvr-ada { background-color: rgba(8, 29, 77, .55); } .nvr-baslik.is-ada-koyu .nvr-ada__kenar { border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .nvr-baslik.is-ada-koyu::after { box-shadow: 0 14px 36px -16px rgba(0, 0, 0, .6); } .nvr-baslik.is-kompakt.is-ada-koyu .nvr-baslik__logo img { opacity: 1; } .nvr-baslik.is-kompakt.is-ada-koyu .nvr-baslik__logo .nvr-baslik__logo-renkli { opacity: 0; } .nvr-baslik.is-kompakt.is-ada-koyu .nvr-menu-dugme { border-color: rgba(255, 255, 255, .22); color: #fff; } .nvr-baslik.is-gecis .nvr-ada { will-change: clip-path; } .nvr-baslik.is-gecis .nvr-baslik__sol, .nvr-baslik.is-gecis .nvr-baslik__sag, .nvr-baslik.is-gecis .nvr-baslik__logo, .nvr-baslik.is-gecis .nvr-bnav > li { will-change: transform, opacity; } body.nvr-menu-acik .nvr-ada, body.nvr-menu-acik .nvr-baslik::after { opacity: 0; } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .nvr-baslik.is-kompakt .nvr-ada { background-color: rgba(255, 255, 255, .97); } .nvr-baslik.is-kompakt.is-ada-koyu .nvr-ada { background-color: rgba(8, 29, 77, .95); } } @media (max-width: 767px), (hover: none) and (pointer: coarse) { /* simetrik mobil kapsül: [menü] [ortada logo] [telefon]; iki yan düğme aynı boyda, kapsül ortalı. Dokunmatik tablette / yatay telefonda da aynı: üzerine gelme olmadığından düğmeler kapsülde hep görünür. */ .nvr-baslik { --ada-y: 52px; --ada-kapali: 200px; --ada-acik: 200px; --ada-pay: 6px; } .nvr-baslik.is-kompakt .nvr-baslik__sol, .nvr-baslik.is-kompakt .nvr-baslik__sag { opacity: 1; visibility: visible; filter: none; pointer-events: auto; transition: opacity .3s ease .12s, transform var(--yay-t) var(--yay) .04s, filter .3s ease .12s, visibility 0s; } .nvr-baslik.is-kompakt .nvr-baslik__sol { transform: translateX(var(--sol-x, 0px)); } .nvr-baslik.is-kompakt .nvr-baslik__sag { transform: translateX(var(--sag-x, 0px)); } .nvr-baslik.is-kompakt .nvr-baslik__wa, .nvr-baslik.is-kompakt .nvr-baslik__cta { opacity: 0; visibility: hidden; pointer-events: none; } .nvr-baslik.is-kompakt .nvr-menu-dugme, .nvr-baslik.is-kompakt .nvr-baslik__tel { width: 42px; height: 42px; border-radius: 999px; transform: scale(.88); } .nvr-baslik.is-kompakt .nvr-baslik__tel { opacity: 1; visibility: visible; border: 1px solid rgba(11, 42, 107, .18); color: var(--ink); background: transparent; } .nvr-baslik.is-kompakt:not(.is-ada-koyu) .nvr-baslik__tel:hover { color: var(--ink); background: rgba(11, 42, 107, .06); } .nvr-baslik.is-kompakt.is-ada-koyu .nvr-baslik__tel { border-color: rgba(255, 255, 255, .22); color: #fff; } .nvr-baslik.is-kompakt .nvr-baslik__logo { transform: translateX(var(--logo-x, 0px)) scale(.9); } .nvr-ada__ilerleme { width: calc(var(--ada-w) - 40px); } } @media (max-width: 640px) { .nvr-baslik__logo .nvr-baslik__logo-renkli { left: 8px; top: 4px; } } @media (max-width: 360px) { .nvr-baslik__logo .nvr-baslik__logo-renkli { left: 4px; } } @media (prefers-reduced-motion: reduce) { .nvr-baslik *, .nvr-baslik::after, .nvr-ada, .nvr-ada * { transition-delay: 0s !important; transition-duration: .01ms !important; } } /* Uçan menü açıkken başlık */ /* Kaydırma kilidi html.nvr-kilit ile; body taşması gizlenirse body kaydırma kabı olur ve yapışkan başlık kayar. */ body.nvr-menu-acik .nvr-yapiskan, body.nvr-menu-acik .nvr-sticky { display: none !important; } /* dokunmatik cihazda form alanına yazarken (klavye açık) alt çubuk çekilir */ body.nvr-yaziyor .nvr-yapiskan, body.nvr-yaziyor .nvr-sticky { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(24px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; } body.nvr-menu-acik .nvr-baslik::before { opacity: 0; } body.nvr-menu-acik .nvr-baslik__orta, body.nvr-menu-acik .nvr-baslik__sag { opacity: 0; pointer-events: none; } body.nvr-menu-acik .nvr-baslik__orta, body.nvr-menu-acik .nvr-baslik__sag { visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s; } /* ---------- Tam ekran uçan menü ---------- */ .nvr-ucan { --e4: cubic-bezier(.83, 0, .17, 1); position: fixed; inset: 0; z-index: 899; overflow: hidden; color: #fff; clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); transition: clip-path 1.25s var(--e4); } .nvr-ucan::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(110% 80% at 85% 0%, #163f99 0%, #0a2259 45%, #050f2c 100%); } .nvr-ucan[hidden] { display: none; } .nvr-ucan.is-acik { clip-path: polygon(0% 0%, 100% 0%, 100% 175%, 0% 100%); } .admin-bar .nvr-ucan { top: 32px; } .nvr-ucan__icerik { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; padding: calc(var(--baslik-y) + clamp(8px, 2vh, 24px)) var(--gut) calc(clamp(16px, 3vh, 36px) + env(safe-area-inset-bottom, 0px)); transform-origin: left bottom; transform: translate(-100px, -100px) scale(1.5) rotate(-15deg); opacity: .25; transition: transform 1.25s var(--e4), opacity 1.25s var(--e4); } .nvr-ucan.is-acik .nvr-ucan__icerik { transform: none; opacity: 1; } .nvr-ucan__duzen { --ucan-max: calc(100vh - var(--baslik-y) - clamp(8px, 2vh, 24px) - clamp(16px, 3vh, 36px)); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch; gap: clamp(28px, 5vw, 88px); width: 100%; max-width: 1320px; margin-inline: auto; max-height: 100%; } @supports (height: 100svh) { .nvr-ucan__duzen { --ucan-max: calc(100svh - var(--baslik-y) - clamp(8px, 2vh, 24px) - clamp(16px, 3vh, 36px)); } } .nvr-ucan__gorsel-sutun { position: relative; min-height: 0; } .nvr-ucan__gorsel-sutun::before, .nvr-ucan__gorsel-sutun::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; aspect-ratio: 1; } .nvr-ucan__gorsel-sutun::before { width: 78%; left: -16%; top: -9%; border: 1px solid rgba(91, 195, 239, .28); box-shadow: 0 0 0 26px rgba(91, 195, 239, .05), 0 0 0 27px rgba(91, 195, 239, .14); background: radial-gradient(circle, rgba(91, 195, 239, .14), transparent 65%); } .nvr-ucan__gorsel-sutun::after { width: 34%; right: -9%; bottom: -7%; border: 1px solid rgba(224, 69, 123, .4); background: radial-gradient(circle at 50% 60%, rgba(224, 69, 123, .35), rgba(224, 69, 123, .05) 55%, transparent 70%); } .nvr-ucan__onizleme { position: relative; z-index: 1; height: 100%; min-height: 0; overflow: hidden; border-radius: 24px; background: rgba(255, 255, 255, .05); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); } .nvr-ucan__onizleme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity; } .nvr-ucan__sutun { min-width: 0; min-height: 0; max-height: var(--ucan-max); display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.6vh, 30px); } .nvr-ucan__liste { counter-reset: nvr-m; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .nvr-ucan__liste::-webkit-scrollbar { display: none; } .nvr-ucan__liste > li { counter-increment: nvr-m; display: flex; align-items: baseline; gap: .9rem; padding-bottom: .22em; clip-path: inset(0 -20px 0 -4px); } .nvr-ucan__liste > li::before { content: counter(nvr-m, decimal-leading-zero); flex: none; min-width: 1.6em; font: 500 .72rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; color: var(--turkuaz); opacity: 0; transition: opacity .6s ease 1s; } .nvr-ucan.is-yazi .nvr-ucan__liste > li::before { opacity: .9; } .nvr-ucan__liste a { position: relative; display: inline-block; color: #fff; text-decoration: none; font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.15rem, min(4.1vh, 3.4vw), 2.9rem); line-height: 1.08; transform: translateY(120%); opacity: .25; will-change: transform; transition: transform 1s cubic-bezier(.215, .61, .355, 1), opacity 1s ease, color .4s; transition-delay: calc(.7s + var(--i, 0) * .06s), calc(.7s + var(--i, 0) * .06s), 0s; } /* Alt öğeler (Saç Ekimi → FUE / DHI / Hybrid): ana satırın altında, numara hizasında çip satırı */ .nvr-ucan__liste > li.menu-item-has-children { flex-wrap: wrap; } .nvr-ucan__liste .sub-menu { list-style: none; flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: .3em 0 .15em; padding: 0 0 0 calc(1.152rem + .9rem); } .nvr-ucan__liste .sub-menu li { margin: 0; } .nvr-ucan__liste .sub-menu a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; line-height: 1; text-transform: none; color: #dfe8ff; } .nvr-ucan__liste .sub-menu a::after { display: none; } .nvr-ucan__liste .sub-menu a:hover, .nvr-ucan__liste .sub-menu a:focus-visible { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); color: #fff; } .nvr-ucan__liste .sub-menu a[aria-current="page"] { background: var(--turkuaz); border-color: var(--turkuaz); color: var(--ink); } .nvr-ucan__liste a::after { content: ""; position: absolute; left: 0; top: 104%; width: 100%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #e0457b, #5bc3ef); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.6, 0, .4, 1); } .nvr-ucan__sosyal a::after { content: ""; position: absolute; left: 0; top: 102%; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.6, 0, .4, 1); } .nvr-ucan__liste a:hover, .nvr-ucan__liste a:focus-visible { color: #fff; } /* alt çizgi: fareyle üzerine gelince ya da yalnız klavye odağında; geçerli sayfa yalnızca hafif turkuaz renkle */ .nvr-ucan__liste a:hover::after, html[data-giris="klavye"] .nvr-ucan__liste a:focus-visible::after, .nvr-ucan__sosyal a:hover::after, html[data-giris="klavye"] .nvr-ucan__sosyal a:focus-visible::after { transform: scaleX(1); transform-origin: left; } .nvr-ucan__liste a[aria-current="page"] { color: var(--turkuaz); } .nvr-ucan__bilgi, .nvr-ucan__sosyal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .nvr-ucan__bilgi { gap: .35rem 1.2rem; font-size: .84rem; line-height: 1.4; color: rgba(255, 255, 255, .78); padding-top: clamp(10px, 1.8vh, 20px); border-top: 1px solid rgba(255, 255, 255, .1); } .nvr-ucan__bilgi li { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; } .nvr-ucan__bilgi .nvr-i { color: var(--turkuaz); } .nvr-ucan__bilgi a { display: inline-flex; align-items: center; gap: .45em; color: #fff; font-weight: 700; text-decoration: none; } .nvr-ucan__bilgi a:hover { color: var(--turkuaz); } .nvr-ucan__eylem { display: flex; flex-wrap: wrap; gap: 10px; } .nvr-ucan__eylem .nvr-btn { min-height: 44px; padding-block: .6em; } .nvr-ucan__sosyal { gap: .4rem 1.3rem; font-size: .86rem; } .nvr-ucan__sosyal a { position: relative; color: rgba(255, 255, 255, .72); font-weight: 500; text-decoration: none; } .nvr-ucan__sosyal a:hover { color: #fff; } .nvr-ucan__bilgi, .nvr-ucan__eylem, .nvr-ucan__sosyal { flex: none; opacity: 0; transform: translateY(16px); transition: opacity .8s ease 1.1s, transform .8s cubic-bezier(.215, .61, .355, 1) 1.1s; } .nvr-ucan.is-yazi .nvr-ucan__liste a { transform: none; opacity: 1; } .nvr-ucan.is-yazi .nvr-ucan__bilgi, .nvr-ucan.is-yazi .nvr-ucan__eylem, .nvr-ucan.is-yazi .nvr-ucan__sosyal { opacity: 1; transform: none; } .nvr-ucan:not(.is-yazi) .nvr-ucan__liste a, .nvr-ucan:not(.is-yazi) .nvr-ucan__bilgi, .nvr-ucan:not(.is-yazi) .nvr-ucan__eylem, .nvr-ucan:not(.is-yazi) .nvr-ucan__sosyal, .nvr-ucan:not(.is-yazi) .nvr-ucan__liste > li::before { transition: none; } html.nvr-kilit { overflow: hidden; } /* Menü kapsülden büyür / kapsüle küçülür (sayfa kaydırılmışken) */ .nvr-ucan.is-adadan { clip-path: inset(var(--a-t, 8px) var(--a-r, 40%) var(--a-b, 90%) var(--a-l, 40%) round var(--a-rad, 32px)); transition: clip-path .54s cubic-bezier(.2, .9, .25, 1.04) .08s; } .nvr-ucan.is-adadan.is-acik { clip-path: inset(0px 0px 0px 0px round 0px); transition-delay: 0s; } .nvr-ucan.is-adadan .nvr-ucan__icerik { transform: scale(.94); opacity: 0; transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .22s ease; } .nvr-ucan.is-adadan.is-acik .nvr-ucan__icerik { transform: none; opacity: 1; transition: transform .6s cubic-bezier(.22, 1, .36, 1) .1s, opacity .4s ease .1s; } .nvr-ucan.is-adadan .nvr-ucan__liste a { transition-delay: calc(.2s + var(--i, 0) * .035s), calc(.2s + var(--i, 0) * .035s), 0s; } .nvr-ucan.is-adadan .nvr-ucan__bilgi, .nvr-ucan.is-adadan .nvr-ucan__eylem, .nvr-ucan.is-adadan .nvr-ucan__sosyal { transition-delay: .45s; } .nvr-ucan.is-adadan .nvr-ucan__liste > li::before { transition-delay: .4s; } .nvr-baslik.is-emiyor .nvr-ada, .nvr-baslik.is-emiyor::after { opacity: 0 !important; transition: none !important; } /* Kapsül ⇄ menü renk devri: katman kapsül camının görünümünden lacivert zemine (ve geri) çapraz geçer */ .nvr-ucan.is-adadan { background-color: var(--cam, rgba(255, 255, 255, .72)); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); } .nvr-ucan.is-adadan::before { transition: opacity .22s ease 0s; } .nvr-ucan.is-adadan.is-cam::before { opacity: 0; transition-delay: .1s; } .nvr-baslik.is-beyaz-logo .nvr-baslik__logo img { opacity: 1 !important; } .nvr-baslik.is-beyaz-logo .nvr-baslik__logo .nvr-baslik__logo-renkli { opacity: 0 !important; } .nvr-baslik.is-beyaz-logo .nvr-menu-dugme { color: #fff !important; } .nvr-baslik.is-devir .nvr-ada, .nvr-baslik.is-devir .nvr-ada *, .nvr-baslik.is-devir::after { transition: none !important; } body.nvr-menu-acik .nvr-ada { transition: none; } @property --ada-k { syntax: ""; inherits: false; initial-value: 1; } @keyframes nvr-otur { 0% { --ada-k: 1.04; } 60% { --ada-k: .995; } 100% { --ada-k: 1; } } .nvr-baslik.is-oturt .nvr-ada, .nvr-baslik.is-oturt .nvr-ada__kenar, .nvr-baslik.is-oturt::after { animation: nvr-otur .42s cubic-bezier(.2, .9, .25, 1.1); } .nvr-baslik.is-oturt .nvr-ada__kenar, .nvr-baslik.is-oturt::after { transition-property: opacity; } @media (prefers-reduced-motion: reduce) { .nvr-baslik.is-oturt .nvr-ada, .nvr-baslik.is-oturt .nvr-ada__kenar, .nvr-baslik.is-oturt::after { animation: none; } .nvr-ucan.is-adadan, .nvr-ucan.is-adadan.is-acik { clip-path: none; } } @media (max-width: 899px) { .nvr-ucan__duzen { grid-template-columns: minmax(0, 1fr); } .nvr-ucan__gorsel-sutun { display: none; } .nvr-ucan__icerik { align-items: flex-start; } .nvr-ucan__sutun { justify-content: flex-start; } .nvr-ucan__liste a { font-size: clamp(1rem, min(3.5vh, 6.4vw), 2.6rem); } .nvr-ucan__liste > li { gap: .7rem; } .nvr-ucan__liste .sub-menu { padding-left: calc(1.152rem + .7rem); } /* uzun telefonlar: menü ekranı doldurur — liste üstte, iletişim + düğmeler başparmak bölgesinde (altta) */ .nvr-ucan__duzen { align-self: stretch; } .nvr-ucan__bilgi { margin-top: auto; } } @supports (height: 100svh) { @media (max-width: 899px) { .nvr-ucan__liste a { font-size: clamp(1rem, min(3.5svh, 6.4vw), 2.6rem); } .nvr-ucan__liste > li { padding-bottom: clamp(3px, calc(1.4svh - 6px), 10px); } } } .nvr-ucan__eylem .nvr-btn { white-space: nowrap; } /* yatay telefon / kısa pencere: liste solda, iletişim + düğmeler sağda — kaydırmadan sığar */ @media (orientation: landscape) and (max-height: 640px) { .nvr-ucan__duzen { grid-template-columns: minmax(0, 1fr); } .nvr-ucan__gorsel-sutun { display: none; } .nvr-ucan__icerik { align-items: center; } .nvr-ucan__sutun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(24px, 5vw, 64px); row-gap: 12px; } .nvr-ucan__liste { grid-column: 1; grid-row: 1 / -1; align-self: center; overflow: visible; } .nvr-ucan__bilgi { grid-column: 2; grid-row: 2; margin-top: 0; } .nvr-ucan__eylem { grid-column: 2; grid-row: 3; } .nvr-ucan__sosyal { grid-column: 2; grid-row: 4; } .nvr-ucan__liste a { font-size: clamp(.85rem, 4.4vh, 1.25rem); } .nvr-ucan__liste > li { padding-bottom: 3px; } } @supports (height: 100svh) { @media (orientation: landscape) and (max-height: 640px) { .nvr-ucan__liste a { font-size: clamp(.85rem, 4.4svh, 1.25rem); } } } /* kısa dikey telefonlar (≤680px yükseklik, ör. 320×568, 360×640): 10 madde + iletişim kaydırmadan sığsın — sosyal bağlantılar altbilgide zaten var */ @media (orientation: portrait) and (max-height: 680px) and (max-width: 899px) { .nvr-ucan__sosyal { display: none; } .nvr-ucan__sutun { gap: 10px; } .nvr-ucan__liste a { font-size: clamp(.95rem, 3.2vh, 1.25rem); } .nvr-ucan__liste > li { padding-bottom: 3px; } } @supports (height: 100svh) { @media (orientation: portrait) and (max-height: 680px) and (max-width: 899px) { .nvr-ucan__liste a { font-size: clamp(.95rem, 3.2svh, 1.25rem); } } } /* kısa masaüstü pencereleri (641–820px yükseklik; ör. 1280×720, 1366×657): 11 madde + yöntem çipleri kaydırmadan sığsın */ @media (min-width: 900px) and (min-height: 641px) and (max-height: 820px) { .nvr-ucan__liste a { font-size: clamp(1rem, min(3.45vh, 3.2vw), 2.4rem); } .nvr-ucan__sutun { gap: clamp(10px, 2vh, 20px); } } /* çok kısa dikey ekran (≤600px, ör. 320×568): adres ve saat satırı çekilir (iletişim sayfasında var), yazı biraz küçülür */ @media (orientation: portrait) and (max-height: 600px) and (max-width: 899px) { .nvr-ucan__liste a { font-size: clamp(.9rem, 2.9vh, 1.1rem); } .nvr-ucan__bilgi li:first-child, .nvr-ucan__bilgi li:last-child { display: none; } } @supports (height: 100svh) { @media (orientation: portrait) and (max-height: 600px) and (max-width: 899px) { .nvr-ucan__liste a { font-size: clamp(.9rem, 2.9svh, 1.1rem); } } } /* Sayfa sağ üstten dönerek uçar */ body.nvr-ucus .nvr-ana, body.nvr-ucus .nvr-footer { transition: transform 1.25s cubic-bezier(.83, 0, .17, 1); will-change: transform; } body.nvr-ucus.nvr-menu-acik .nvr-ana, body.nvr-ucus.nvr-menu-acik .nvr-footer { transform: translate(300px, 450px) rotate(10deg) scale(1.5); } @media (min-width: 1280px) { .nvr-bnav { display: flex; gap: 1.3rem; } .nvr-baslik__ic { padding-inline: 2rem; } .nvr-baslik__orta { gap: 1.8rem; } .nvr-baslik__cta { padding-inline: 1rem; } } @media (min-width: 1280px) and (max-width: 1439px) { .nvr-baslik__wa { display: none; } } @media (min-width: 1440px) { .nvr-baslik__ic { padding-inline: 3rem; } } @media (min-width: 1600px) { .nvr-baslik__orta { gap: 3rem; } .nvr-bnav { gap: 2rem; } .nvr-bnav__bag { letter-spacing: .07em; } } @media (max-width: 1023px) { .nvr-baslik__logo img { height: 38px; } } /* 641–767: ortadaki logo sağdaki telefon/WhatsApp/CTA grubuyla çakışıyordu → CTA yalnız ≥768 */ @media (max-width: 767px) { .nvr-baslik__cta { display: none; } } @media (max-width: 640px) { .nvr-baslik__logo { padding: 4px 8px; } .nvr-baslik__logo img { height: 34px; } .nvr-menu-dugme { width: 42px; height: 42px; border-radius: 12px; } .nvr-baslik__ikon { width: 42px; height: 42px; font-size: 19px; } .nvr-ucan__eylem .nvr-btn { flex: 1 1 0; padding-inline: .8em; } } @media (max-width: 360px) { .nvr-baslik__ic { gap: 6px; padding-inline: 12px; } .nvr-baslik__sag { gap: 6px; } .nvr-baslik__logo { padding: 4px 4px; } .nvr-baslik__logo img { height: 30px; } } @media (max-width: 782px) { .admin-bar .nvr-baslik { top: 0; } .admin-bar .nvr-ucan { top: 0; } } @media (prefers-reduced-motion: reduce) { .nvr-ucan, .nvr-ucan.is-acik { clip-path: none; } .nvr-ucan__icerik, .nvr-ucan__liste a, .nvr-ucan__liste > li::before, .nvr-ucan__bilgi, .nvr-ucan__eylem, .nvr-ucan__sosyal { transform: none !important; opacity: 1 !important; } .nvr-baslik__cta { animation: none; } .nvr-menu-dugme[aria-expanded] > span[aria-hidden] { transition-delay: 0s !important; } } /* ---------- Kahraman alanı ---------- */ .nvr-kahraman { position: relative; isolation: isolate; padding: clamp(28px, 4vw, 56px) 0 clamp(36px, 5vw, 64px); overflow: hidden; } .nvr-kahraman__zemin { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 92% 8%, rgba(91, 195, 239, .22), transparent 60%), radial-gradient(40% 50% at 4% 96%, rgba(224, 69, 123, .07), transparent 60%), url("../img/zemin-dalga.webp") center / cover no-repeat, linear-gradient(180deg, #eef6ff 0%, #f7fbff 70%, #fff 100%); } .nvr-kahraman__zemin::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40c240 30 480 30 720 10s480-30 720 0v20H0z' fill='%23ffffff'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; } .nvr-kahraman__izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; } .nvr-kahraman--medyali .nvr-kahraman__izgara, .nvr-kahraman--hizmet .nvr-kahraman__izgara, .nvr-kahraman--bilgi .nvr-kahraman__izgara, .nvr-kahraman--iletisim .nvr-kahraman__izgara { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } .nvr-kahraman__metin { min-width: 0; } .nvr-kahraman__baslik { font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); margin: 0 0 .4em; overflow-wrap: break-word; hyphens: auto; } .nvr-kahraman__baslik span { font-weight: 500; color: var(--acik-mavi); } .nvr-kahraman__baslik::after { content: ""; display: block; width: 92px; height: 4px; margin-top: .38em; border-radius: 4px; background: linear-gradient(90deg, var(--mavi), var(--turkuaz)); } .nvr-kahraman--yazi .nvr-kahraman__baslik, .nvr-kahraman--arsiv .nvr-kahraman__baslik, .nvr-kahraman--sade .nvr-kahraman__baslik { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.8rem); text-transform: none; letter-spacing: -.015em; } .nvr-kahraman--yazi .nvr-kahraman__baslik span, .nvr-kahraman--arsiv .nvr-kahraman__baslik span, .nvr-kahraman--sade .nvr-kahraman__baslik span { font-weight: 800; color: var(--ink); } .nvr-kahraman__slogan { font-size: clamp(1rem, .95rem + .35vw, 1.2rem); font-weight: 600; color: var(--ink-2); letter-spacing: .01em; margin: 0 0 1.2em; } .nvr-kahraman__slogan span { color: var(--turkuaz); margin: 0 .35em; } .nvr-kahraman__eylem { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0 0; } .nvr-kahraman__aciklama { max-width: 46em; color: var(--soluk); } .nvr-kahraman__arama { max-width: 520px; margin-top: 1.2em; } .nvr-kahraman__medya { position: relative; justify-self: center; width: 100%; max-width: 520px; } .nvr-medya--dikey { max-width: 360px; } .nvr-medya { position: relative; overflow: hidden; border-radius: var(--r-b); background: #e3effd; border: 6px solid #fff; box-shadow: var(--golge), 0 0 0 1px var(--cizgi); } .nvr-medya--dikey .nvr-medya { aspect-ratio: 9 / 16; max-height: 560px; } .nvr-medya--yatay .nvr-medya { aspect-ratio: 16 / 10; } .nvr-medya--kare .nvr-medya { aspect-ratio: 1; } .nvr-medya video, .nvr-medya img { width: 100%; height: 100%; object-fit: cover; } .nvr-kahraman__halka { position: absolute; inset: 8% -10% -6% 8%; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(91, 195, 239, .28), rgba(91, 195, 239, 0) 68%); } .nvr-cip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .94); border: 1px solid #fff; box-shadow: var(--golge-k); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .76rem; line-height: 1.3; color: var(--soluk); font-weight: 500; } .nvr-cip b { display: block; color: var(--ink); font-weight: 800; font-size: .82rem; } .nvr-cip .nvr-i { font-size: 24px; color: var(--mavi); } .nvr-cip--a { left: -26px; bottom: 16%; } .nvr-cip--b { right: -22px; top: 10%; } .nvr-kahraman__suslu { justify-self: center; position: relative; width: min(300px, 100%); aspect-ratio: 1; } .nvr-kahraman__suslu::before, .nvr-kahraman__suslu::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px dashed rgba(37, 99, 214, .22); } .nvr-kahraman__suslu::before { inset: 0; } .nvr-kahraman__suslu::after { inset: 14%; border-style: solid; border-color: rgba(91, 195, 239, .35); background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(232, 241, 253, .6)); } .nvr-halka--buyuk { position: absolute; inset: 31%; width: auto; height: auto; z-index: 1; font-size: clamp(40px, 6vw, 64px); } /* Avantaj şeridi */ .nvr-avantaj { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 18px 12px; background: rgba(255, 255, 255, .92); border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge-k); } .nvr-avantaj li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 8px; text-align: center; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); line-height: 1.35; } .nvr-avantaj li + li::before { content: ""; position: absolute; left: 0; top: 12px; width: 1px; height: 40px; background: var(--cizgi); } /* Kırıntı */ .nvr-kirinti { margin: 0 0 1.1em; font-size: .8rem; } .nvr-kirinti ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; } .nvr-kirinti li { display: inline-flex; align-items: center; gap: 4px; color: var(--soluk); } .nvr-kirinti li + li::before { content: "›"; color: var(--turkuaz-k); font-weight: 700; margin-right: 2px; } .nvr-kirinti a { color: var(--ink-2); text-decoration: none; font-weight: 600; } .nvr-kirinti a:hover { color: var(--mavi); text-decoration: underline; } /* ---------- İçerik bantları ---------- */ .nvr-bant { padding-block: clamp(36px, 5vw, 72px); } .nvr-bant + .nvr-bant--akis, .nvr-bant--akis + .nvr-bant--akis { padding-top: 0; } .nvr-bant--giris { padding-bottom: 0; } .nvr-bant--giris .nvr-bant__bas { margin-bottom: 0; } .nvr-bant--sss + .nvr-bant--akis, .nvr-bant--kartlar + .nvr-bant--akis, .nvr-bant--sayaclar + .nvr-bant--akis, .nvr-bant--cta + .nvr-bant--akis, .nvr-bant--randevu + .nvr-bant--akis { padding-top: clamp(36px, 5vw, 72px); } .nvr-bant__bas { max-width: 820px; margin: 0 auto clamp(20px, 3vw, 34px); text-align: center; } .nvr-bant__bas > :last-child { margin-bottom: 0; } .nvr-bant__bas h2, .nvr-bant__bas h3, .nvr-bant__bas h4, .nvr-bant__baslik { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.1rem); font-weight: 800; color: var(--ink); line-height: 1.2; margin: 0 0 .3em; } .nvr-bant__baslik span { font-weight: 500; color: var(--acik-mavi); } .nvr-bant__bas h2::after, .nvr-bant__bas h3::after, .nvr-bant__bas h4::after { content: ""; display: block; width: 64px; height: 3px; margin: .5em auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--mavi), var(--turkuaz)); } .nvr-bant__bas--yan { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; max-width: none; text-align: left; } /* Metin akışı (okunabilir sütun) */ .nvr-metin { max-width: 840px; margin-inline: auto; overflow-wrap: break-word; display: flow-root; } .nvr-metin > :first-child { margin-top: 0; } .nvr-metin p, .nvr-metin li { font-size: 1.02rem; } .nvr-metin h2 { margin-top: 1.6em; } .nvr-metin h3 { margin-top: 1.5em; } .nvr-metin h4, .nvr-metin h5 { margin-top: 1.5em; } .nvr-metin h4 { font-size: clamp(1.12rem, 1.02rem + .45vw, 1.32rem); font-weight: 800; } .nvr-metin h2:first-child, .nvr-metin h3:first-child, .nvr-metin h4:first-child { margin-top: 0; } .nvr-metin h3, .nvr-metin h4 { position: relative; } .nvr-metin a { font-weight: 600; } .nvr-metin ul, .nvr-metin ol { margin: 0 0 1.3em; padding-left: 0; list-style: none; } .nvr-metin ul > li, .nvr-metin ol > li { position: relative; padding-left: 1.7em; margin-bottom: .55em; } .nvr-metin ul > li::before { content: ""; position: absolute; left: .25em; top: .62em; width: .55em; height: .55em; border-radius: 50%; background: var(--turkuaz); box-shadow: 0 0 0 4px rgba(91, 195, 239, .18); } .nvr-metin ol { counter-reset: nvr; } .nvr-metin ol > li { counter-increment: nvr; } .nvr-metin ol > li::before { content: counter(nvr) "."; position: absolute; left: 0; font-weight: 800; color: var(--mavi); } .nvr-ara-baslik { margin-top: 1.7em; font-size: 1.12rem; line-height: 1.4; } .nvr-ara-baslik strong, .nvr-ara-baslik b { color: var(--ink); font-weight: 800; } .nvr-ara-baslik::before { content: ""; display: block; width: 36px; height: 3px; margin-bottom: .6em; border-radius: 3px; background: linear-gradient(90deg, var(--pembe), var(--turkuaz)); } .nvr-metin > .nvr-ara-baslik:first-child { margin-top: 0; } .nvr-tik { position: relative; padding-left: 1.9em; margin-bottom: .55em; } .nvr-tik::before { content: ""; position: absolute; left: 0; top: .28em; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--buz-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563d6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat; } .nvr-metin blockquote { margin: 1.5em 0; padding: 1em 1.4em; border-left: 4px solid var(--turkuaz); background: var(--buz); border-radius: 0 var(--r-k) var(--r-k) 0; } .nvr-metin table { width: 100%; border-collapse: collapse; font-size: .95rem; } .nvr-metin th, .nvr-metin td { border: 1px solid var(--cizgi); padding: .6em .8em; text-align: left; } .nvr-metin th { background: var(--buz); color: var(--ink); } .nvr-tablo { overflow-x: auto; margin: 0 0 1.4em; } /* Görseller */ .nvr-sekil, .nvr-metin figure, .wp-block-image { margin: 1.6em 0; } .nvr-sekil img, .nvr-metin figure img { width: 100%; border-radius: var(--r); border: 1px solid var(--cizgi); box-shadow: var(--golge-k); background: var(--buz); } .nvr-sekil a { display: block; border-radius: var(--r); } .nvr-bant--sekil .nvr-sekil { max-width: 760px; margin: 0 auto; } .aligncenter { margin-inline: auto; } .alignleft { float: left; margin: .4em 1.6em 1em 0; } .alignright { float: right; margin: .4em 0 1em 1.6em; } .wp-caption-text, figcaption { font-size: .85rem; color: var(--soluk); text-align: center; margin-top: .6em; } @media (min-width: 760px) { .nvr-sekil--yan { float: right; width: min(44%, 400px); margin: .3em 0 1.2em 2rem; } } /* Video önizleme */ .nvr-video { margin: 1.6em 0; } .nvr-yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: linear-gradient(135deg, var(--ink), var(--mavi)); box-shadow: var(--golge-k); } .nvr-yt__bag { position: absolute; inset: 0; display: block; } .nvr-yt__kapak { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .nvr-yt__bag:hover .nvr-yt__kapak { transform: scale(1.04); } .nvr-yt__oynat { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); transition: transform .2s ease; } .nvr-yt__oynat::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--pembe); } .nvr-yt__bag:hover .nvr-yt__oynat, .nvr-yt__bag:focus-visible .nvr-yt__oynat { transform: scale(1.08); } .nvr-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .nvr-videolar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(16px, 2.5vw, 28px); } .nvr-videolar .nvr-video { margin: 0; } /* Harita */ .nvr-harita { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r); overflow: hidden; border: 1px solid var(--cizgi); box-shadow: var(--golge-k); margin: 0 0 1.4em; background: var(--buz); } .nvr-harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .nvr-harita__yer { position: absolute; inset: 0; display: grid; place-items: center; color: var(--soluk); font-size: .9rem; } /* Buton grubu */ .nvr-butonlar { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0; } /* İkonlu liste ve sosyal */ .nvr-metin ul.nvr-ikon-liste > li, .nvr-ikon-liste > li { display: flex; align-items: center; gap: 12px; padding-left: 0; margin-bottom: .7em; } .nvr-metin ul.nvr-ikon-liste > li::before { display: none; } .nvr-ikon-liste .nvr-i { width: 40px; height: 40px; flex: none; color: var(--mavi); border-radius: 50%; background-color: transparent; position: relative; } .nvr-ikon-liste li > .nvr-i { -webkit-mask: none; mask: none; background: var(--buz-2) ; } .nvr-ikon-liste li > .nvr-i::after { content: ""; position: absolute; inset: 10px; background: var(--mavi); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .nvr-ikon-liste a { font-weight: 700; color: var(--ink); text-decoration: none; } .nvr-ikon-liste a:hover { color: var(--mavi); } .nvr-metin ul.nvr-sosyal, .nvr-sosyal { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 1em 0; } .nvr-metin ul.nvr-sosyal > li { padding: 0; margin: 0; } .nvr-metin ul.nvr-sosyal > li::before { display: none; } .nvr-sosyal a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cizgi); background: #fff; color: var(--ink); font-size: 20px; transition: .2s; box-shadow: var(--golge-k); } .nvr-sosyal a:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); } /* SSS */ .nvr-bant--sss { background: linear-gradient(180deg, var(--buz) 0%, #fff 100%); } .nvr-sss { display: grid; gap: 12px; max-width: 900px; margin: 0 auto; } .nvr-sss__oge { background: #fff; border: 1px solid var(--cizgi); border-radius: 18px; box-shadow: 0 6px 18px -16px rgba(11, 42, 107, .5); transition: border-color .2s, box-shadow .2s; } .nvr-sss__oge[open] { border-color: #b9d3f5; box-shadow: var(--golge-k); } .nvr-sss__soru { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; border-radius: 18px; } .nvr-sss__soru::-webkit-details-marker { display: none; } .nvr-sss__soru > * { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.45; color: var(--ink); } .nvr-sss__soru::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--buz-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563d6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .25s ease, background-color .2s; } .nvr-sss__oge[open] > .nvr-sss__soru::after { transform: rotate(45deg); background-color: var(--buz-3); } .nvr-sss__soru:hover > * { color: var(--mavi); } .nvr-sss__cevap { padding: 0 20px 18px; border-top: 1px solid var(--buz-2); padding-top: 14px; } .nvr-sss__cevap > :last-child { margin-bottom: 0; } .nvr-sss__cevap ul { margin: 0 0 1em; padding: 0; list-style: none; } .nvr-sss__cevap ul > li { position: relative; padding-left: 1.5em; margin-bottom: .45em; } .nvr-sss__cevap ul > li::before { content: ""; position: absolute; left: .2em; top: .65em; width: .5em; height: .5em; border-radius: 50%; background: var(--turkuaz); } /* İkili (yan sütunlu) */ .nvr-ikili { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .nvr-ikili__yan { margin: 0; max-width: none; } .nvr-ikili__yan .nvr-sekil, .nvr-ikili__yan .nvr-sekil--yan { float: none; width: auto; margin: 0; } .nvr-ikili__ana .nvr-bant__bas { text-align: left; margin-left: 0; } .nvr-ikili__ana .nvr-bant__bas h3::after, .nvr-ikili__ana .nvr-bant__bas h4::after { margin-left: 0; } .nvr-ikili__ana .nvr-sss { margin: 0; } @media (min-width: 920px) { .nvr-ikili { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } } /* Kartlar */ .nvr-bant--kartlar { background: linear-gradient(180deg, #fff, var(--buz) 60%, #fff); } .nvr-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(16px, 2vw, 24px); } /* tam 3 kart 2 sütuna düştüğünde (≈560–819px) sonuncu tam genişlik */ @media (min-width: 560px) and (max-width: 819px) { .nvr-kartlar--3:has(> :nth-child(3):last-child) > :last-child { grid-column: 1 / -1; } } /* tam 4 kart: ~1000px'te 3+1 kalmasın → 2+2, geniş ekranda 4'lü */ @media (min-width: 560px) and (max-width: 1139px) { .nvr-kartlar--4:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1140px) { .nvr-kartlar--4:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .nvr-kart { position: relative; display: flex; flex-direction: column; padding: 24px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge-k); transition: transform .25s ease, box-shadow .25s ease, border-color .25s; } .nvr-kart::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--mavi), var(--turkuaz)); opacity: .9; } .nvr-kart:hover { transform: translateY(-4px); box-shadow: var(--golge); border-color: #b9d3f5; } .nvr-kart__gorsel { margin: -8px -8px 18px; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--buz); } .nvr-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; } .nvr-kart__gorsel--ikon { width: 64px; height: 64px; aspect-ratio: 1; margin: 0 0 14px; border-radius: 50%; padding: 12px; background: var(--buz-2); } .nvr-kart__gorsel--ikon img { object-fit: contain; } .nvr-kart__baslik { font-size: 1.12rem; margin: 0 0 .5em; } .nvr-kart p { font-size: .95rem; margin-bottom: .8em; } .nvr-kart__eylem { margin: auto 0 0; padding-top: 8px; } .nvr-kart__eylem .nvr-btn { min-height: 42px; padding: .6em 1.2em; font-size: .88rem; } .nvr-kartlar--kisa .nvr-kart { text-align: center; align-items: center; padding: 30px 20px; } .nvr-kartlar--kisa .nvr-kart__baslik { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); text-transform: uppercase; letter-spacing: .02em; background: linear-gradient(90deg, var(--ink), var(--mavi)); -webkit-background-clip: text; background-clip: text; color: transparent; } .nvr-kartlar--kisa .nvr-kart p { margin: 0; font-weight: 600; color: var(--soluk); letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; } /* Sayaçlar */ .nvr-bant--sayaclar { background: linear-gradient(120deg, var(--ink-3), var(--ink) 45%, #1d4fb3); color: #fff; position: relative; overflow: hidden; } .nvr-bant--sayaclar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 80% at 90% 10%, rgba(91, 195, 239, .3), transparent 60%), radial-gradient(30% 60% at 0% 100%, rgba(224, 69, 123, .2), transparent 60%); } .nvr-sayaclar { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; } @media (min-width: 480px) { .nvr-sayaclar:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } } .nvr-sayac { text-align: center; padding: 22px 16px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); } .nvr-sayac__deger { margin: 0; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 800; line-height: 1.1; color: #fff; letter-spacing: -.02em; } .nvr-sayac__etiket { margin: .3em 0 0; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #bfe8fa; } /* Beceri çubukları */ .nvr-cubuklar { display: grid; gap: 18px; list-style: none; margin: 0; padding: 26px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge-k); } .nvr-cubuk { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; } .nvr-cubuk__ad { font-weight: 700; color: var(--ink); font-size: .95rem; } .nvr-cubuk__deger { font-weight: 800; color: var(--mavi); font-size: .9rem; } .nvr-cubuk__iz { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: var(--buz-2); overflow: hidden; } .nvr-cubuk__iz > span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--mavi), var(--turkuaz)); } /* Galeri, karolar, kaydırıcı */ .nvr-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(10px, 1.6vw, 18px); } .nvr-galeri--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .nvr-galeri__oge { margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--buz-2) url("../img/novar-sacekimi-logo.png") center / 34% no-repeat; border: 1px solid var(--cizgi); } .nvr-galeri__oge img, .nvr-galeri__bag { width: 100%; height: 100%; } .nvr-galeri__oge img { object-fit: cover; transition: transform .45s ease; } .nvr-galeri__bag { display: block; } .nvr-galeri__oge:hover img { transform: scale(1.05); } .nvr-karolar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 2vw, 24px); } .nvr-karo { display: block; border-radius: var(--r); overflow: hidden; background: var(--buz-2); border: 1px solid var(--cizgi); box-shadow: var(--golge-k); transition: transform .25s ease, box-shadow .25s ease; aspect-ratio: 527 / 329; } .nvr-karo img { width: 100%; height: 100%; object-fit: cover; } a.nvr-karo:hover { transform: translateY(-4px); box-shadow: var(--golge); } .nvr-bant--karolar + .nvr-bant--karolar { padding-top: 0; } .nvr-kaydirici { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78%, 1fr); gap: 16px; list-style: none; margin: 0; padding: 4px 2px 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--turkuaz) var(--buz-2); } .nvr-kaydirici__oge { scroll-snap-align: start; aspect-ratio: 2 / 1; border-radius: var(--r); overflow: hidden; background: var(--buz-2) url("../img/novar-sacekimi-logo.png") center / 20% no-repeat; border: 1px solid var(--cizgi); } .nvr-kaydirici__oge img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 760px) { .nvr-kaydirici { grid-auto-columns: calc(50% - 8px); } } @media (min-width: 1100px) { .nvr-kaydirici { grid-auto-columns: calc(33.333% - 11px); } } /* Çağrı bandı (içerikteki telefon başlığı) */ .nvr-bant--cta { background: linear-gradient(120deg, var(--ink-3), var(--ink) 50%, #1d4fb3); text-align: center; } .nvr-cta__baslik { margin: 0; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); } .nvr-cta__baslik a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .6em; } .nvr-cta__baslik a::before { content: ""; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--pembe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / 50% no-repeat; } .nvr-cta__baslik a:hover { color: #bfe8fa; } /* Sayfa sonu çağrı bandı */ .nvr-bant--cagri { padding-block: clamp(28px, 4vw, 48px); } .nvr-cagri { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-b); color: #fff; position: relative; overflow: hidden; background: linear-gradient(120deg, var(--ink-3), var(--ink) 50%, #1d4fb3); box-shadow: var(--golge); } .nvr-cagri::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 120% at 100% 0%, rgba(91, 195, 239, .32), transparent 60%), radial-gradient(30% 80% at 0% 100%, rgba(224, 69, 123, .22), transparent 60%); } .nvr-cagri > * { position: relative; } .nvr-cagri .nvr-ust-baslik { color: #9fdcf6; } .nvr-cagri__baslik { margin: 0; font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem); font-weight: 800; line-height: 1.2; color: #fff; text-transform: uppercase; letter-spacing: -.01em; } .nvr-cagri__baslik span { font-weight: 500; color: #9fdcf6; } .nvr-cagri__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; } .nvr-cagri__tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; text-decoration: none; padding: 8px 6px; } .nvr-cagri__tel:hover { color: #bfe8fa; } /* Randevu bandı */ .nvr-bant--randevu { position: relative; overflow: hidden; background: linear-gradient(125deg, var(--ink-3) 0%, var(--ink) 48%, #1f56c2 100%); color: #dfe8fb; } .nvr-bant--randevu::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../img/zemin-dalga.webp") center / cover no-repeat; opacity: .08; } .nvr-bant--randevu::after { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 195, 239, .35), transparent 65%); pointer-events: none; } .nvr-randevu { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } @media (min-width: 900px) { .nvr-randevu { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } } .nvr-randevu__bilgi h2, .nvr-randevu__bilgi h3, .nvr-randevu__bilgi h4 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); text-transform: uppercase; letter-spacing: -.01em; } .nvr-randevu__bilgi p { color: #dfe8fb; } .nvr-randevu__bilgi strong, .nvr-randevu__bilgi b { color: #fff; } .nvr-randevu__bilgi a { color: #9fdcf6; } .nvr-randevu__bilgi .nvr-ust-baslik { color: #9fdcf6; } .nvr-randevu__baslik { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; color: #fff; line-height: 1.2; text-transform: uppercase; } .nvr-hizli { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 1.4em 0 0; padding: 0; } .nvr-hizli li { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: #dfe8fb; } .nvr-hizli a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff !important; text-decoration: none; font-weight: 700; } .nvr-hizli a:hover { background: rgba(255, 255, 255, .2); } .nvr-hizli a.nvr-hizli__wa { background: var(--wa); border-color: var(--wa); } .nvr-hizli li:last-child { flex-basis: 100%; padding-left: 4px; } .nvr-form-kart { background: #fff; color: var(--metin); border-radius: var(--r-b); padding: clamp(20px, 3vw, 34px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .6); } /* İletişim düzeni */ .nvr-iletisim { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; } @media (min-width: 900px) { .nvr-iletisim { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .nvr-iletisim--form-once { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .nvr-iletisim__form { position: sticky; top: calc(var(--baslik-y) + 24px); } } .nvr-iletisim__bilgi { max-width: none; margin: 0; } .nvr-iletisim__bilgi h3 { font-size: 1.15rem; } .nvr-iletisim .nvr-form-kart { border: 1px solid var(--cizgi); box-shadow: var(--golge); background: linear-gradient(180deg, #fff, var(--buz)); } /* Bilgi kartları (sayfa içi widget) */ .nvr-bilgi-kartlari { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; } .nvr-bilgi-kart { padding: 24px; border-radius: var(--r); background: var(--buz); border: 1px solid var(--cizgi); } .nvr-bilgi-kart h3 { font-size: 1.1rem; } .nvr-bilgi-kart p:last-child { margin: 0; } .nvr-saatler { margin: 0; } .nvr-saatler div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--cizgi); } .nvr-saatler div:last-child { border: 0; } .nvr-saatler dt { font-weight: 700; color: var(--ink); } .nvr-saatler dd { margin: 0; } /* ---------- Formlar (yedek form + Contact Form 7) ---------- */ .nvr-form, .wpcf7-form { display: grid; gap: 12px; } .nvr-form p, .wpcf7-form p { margin: 0; } .nvr-form input[type="text"], .nvr-form input[type="tel"], .nvr-form input[type="email"], .nvr-form textarea, .wpcf7-form input[type="text"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="email"], .wpcf7-form textarea, .wpcf7-form select { width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--cizgi); background: #fff; color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color .2s, box-shadow .2s; } .nvr-form textarea, .wpcf7-form textarea { min-height: 120px; resize: vertical; } .nvr-form input::placeholder, .nvr-form textarea::placeholder, .wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: #6b7799; opacity: 1; } .nvr-form input:focus, .nvr-form textarea:focus, .wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--mavi); box-shadow: 0 0 0 4px rgba(37, 99, 214, .15); } .nvr-form button[type="submit"], .wpcf7-form input[type="submit"], .wpcf7-submit { width: 100%; min-height: 54px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 800; font-size: 1rem; color: #fff; background: linear-gradient(135deg, var(--pembe), #c2306a); box-shadow: 0 14px 28px -14px rgba(224, 69, 123, .85); transition: transform .2s; } .nvr-form button[type="submit"]:hover, .wpcf7-submit:hover { transform: translateY(-2px); } .nvr-form__bal { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .nvr-form__durum { padding: 12px 14px; border-radius: 12px; font-weight: 600; font-size: .92rem; } .nvr-form__durum--tamam { background: #e7f7ee; color: #0e5e33; } .nvr-form__durum--hata { background: #fdecef; color: #9b1c3c; } .nvr-form [aria-invalid="true"] { border-color: #c62850; } .wpcf7-not-valid-tip { font-size: .82rem; color: #b3123a; margin-top: 4px; } .wpcf7 form .wpcf7-response-output { margin: 4px 0 0; padding: 10px 14px; border-radius: 12px; font-size: .9rem; } .wpcf7-spinner { margin: 8px auto 0; display: block; } /* ---------- Blog ---------- */ .nvr-liste-duzen { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: start; } @media (min-width: 1024px) { .nvr-liste-duzen { grid-template-columns: minmax(0, 1fr) 320px; } } .nvr-yazilar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 24px); } .nvr-yazi-kart { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; box-shadow: var(--golge-k); transition: transform .25s ease, box-shadow .25s ease; } .nvr-yazi-kart:hover { transform: translateY(-4px); box-shadow: var(--golge); } .nvr-yazi-kart__gorsel { display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--buz-2), #fff); overflow: hidden; } .nvr-yazi-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; } .nvr-kapak-yok { display: grid; place-items: center; width: 100%; height: 100%; color: var(--turkuaz); font-size: 54px; background: url("../img/zemin-dalga.webp") center / cover; } .nvr-yazi-kart__gorsel .nvr-kapak-yok img, .nvr-kapak-yok img { width: 56%; max-width: 220px; height: auto; object-fit: contain; aspect-ratio: auto; opacity: .9; } .nvr-yazi-kart__govde { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; } .nvr-yazi-kart__baslik { font-size: 1.1rem; font-weight: 800; line-height: 1.35; margin: .3em 0 .5em; color: var(--ink); } .nvr-yazi-kart__baslik a { color: inherit; text-decoration: none; } .nvr-yazi-kart__baslik a:hover { color: var(--mavi); } .nvr-yazi-kart__ozet { font-size: .92rem; color: var(--soluk); margin-bottom: 1em; } .nvr-yazi-kart__devam { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; text-decoration: none; } .nvr-yazi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: .8rem; color: var(--soluk); } .nvr-yazi-meta > * { display: inline-flex; align-items: center; gap: 6px; } .nvr-yazi-meta .nvr-i { color: var(--turkuaz-k); } .nvr-yazi-meta a { color: var(--ink-2); font-weight: 600; text-decoration: none; } .nvr-yazi-meta a:hover { color: var(--mavi); text-decoration: underline; } .nvr-kahraman--yazi .nvr-yazi-meta { font-size: .88rem; margin-top: .4em; } .nvr-yazilar--kucuk { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } .nvr-yazilar--kucuk .nvr-yazi-kart__ozet { display: none; } .nvr-bant--son-yazilar { background: linear-gradient(180deg, #fff, var(--buz)); } /* Blog kartları (.nvr-yazilar--blog) düzenini blog.css belirler (≥1024: 3'lü, 600–1023: 2'li + tek kalan yatay); buradaki eski kurallar onlara uygulanmaz — ikisi birlikte çalışınca ana sayfada kartlar 3 sütunun 2'sini kaplayıp alt alta diziliyordu. */ @media (min-width: 900px) { .nvr-bant--son-yazilar .nvr-yazilar:not(.nvr-yazilar--blog) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Tablet (2 sütun) + tek sayıda yazı: ilk yazı tam genişlikte yatay kart — ızgarada boş hücre kalmaz */ @media (min-width: 600px) and (max-width: 899px) { .nvr-bant--son-yazilar .nvr-yazilar:not(.nvr-yazilar--blog) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nvr-bant--son-yazilar .nvr-yazilar:not(.nvr-yazilar--blog) > .nvr-yazi-kart:first-child:nth-last-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .nvr-bant--son-yazilar .nvr-yazilar:not(.nvr-yazilar--blog) > .nvr-yazi-kart:first-child:nth-last-child(odd) .nvr-yazi-kart__gorsel { position: relative; aspect-ratio: auto; min-height: 240px; height: 100%; } .nvr-bant--son-yazilar .nvr-yazilar:not(.nvr-yazilar--blog) > .nvr-yazi-kart:first-child:nth-last-child(odd) .nvr-yazi-kart__gorsel img { position: absolute; inset: 0; } .nvr-bant--son-yazilar .nvr-yazilar:not(.nvr-yazilar--blog) > .nvr-yazi-kart:first-child:nth-last-child(odd) .nvr-yazi-kart__govde { justify-content: center; padding: 26px 28px; } } .nvr-yazi { min-width: 0; } .nvr-metin--yazi { max-width: none; } .nvr-metin--yazi .wp-block-heading { margin-top: 1.5em; } .nvr-etiketler { margin: 2em 0 0; padding-top: 1.4em; border-top: 1px solid var(--cizgi); } .nvr-etiketler__baslik { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); margin: 0 0 .7em; } .nvr-etiketler ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .nvr-etiketler a { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--buz); border: 1px solid var(--cizgi); color: var(--ink-2); font-size: .82rem; font-weight: 600; text-decoration: none; } .nvr-etiketler a:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .nvr-yazi-nav { margin: 2em 0 0; } .nvr-yazi-nav .nav-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; } .nvr-yazi-nav a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--cizgi); background: #fff; text-decoration: none; transition: border-color .2s, box-shadow .2s; } .nvr-yazi-nav a:hover { border-color: var(--mavi); box-shadow: var(--golge-k); } .nvr-yazi-nav .nav-next a { text-align: right; align-items: flex-end; } .nvr-yazi-nav__yon { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--turkuaz-k); } .nvr-yazi-nav__baslik { font-weight: 700; color: var(--ink); line-height: 1.35; } .nvr-ilgili { margin-top: 2.4em; } .nvr-ilgili__baslik { font-size: 1.3rem; } /* Kenar çubuğu */ .nvr-yan { display: grid; gap: 20px; min-width: 0; } @media (min-width: 1024px) { .nvr-yan { position: sticky; top: calc(var(--baslik-y) + 20px); } } .nvr-yan__kutu { padding: 22px; border-radius: var(--r); border: 1px solid var(--cizgi); background: #fff; box-shadow: var(--golge-k); } .nvr-yan__kutu p { font-size: .92rem; } .nvr-yan__kutu > :last-child { margin-bottom: 0; } .nvr-yan__kutu--randevu { background: linear-gradient(140deg, var(--ink), #1f56c2); color: #dfe8fb; border: 0; } .nvr-yan__kutu--randevu .nvr-ust-baslik { color: #9fdcf6; } .nvr-yan__vurgu { font-weight: 700; color: #fff; font-size: 1.05rem !important; line-height: 1.4; } .nvr-yan__eylem { display: grid; gap: 10px; margin: 0; } .nvr-yan__baslik { font-size: 1.02rem; margin: 0 0 .8em; padding-bottom: .6em; border-bottom: 2px solid var(--buz-2); } .nvr-yan__son, .nvr-yan__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .nvr-yan__son li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px dashed var(--cizgi); } .nvr-yan__son li:last-child { border: 0; } .nvr-yan__son a { font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.4; font-size: .93rem; } .nvr-yan__son a:hover { color: var(--mavi); } .nvr-yan__son time { font-size: .76rem; color: var(--soluk); } .nvr-yan__menu a { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 12px; color: var(--ink); font-weight: 600; text-decoration: none; font-size: .93rem; } .nvr-yan__menu a::after { content: "›"; color: var(--turkuaz-k); font-weight: 800; } .nvr-yan__menu a:hover { background: var(--buz); color: var(--mavi); } /* Sayfalama */ .pagination { margin-top: 2.2em; } .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .page-numbers { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--cizgi); background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; } .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); } a.page-numbers:hover { border-color: var(--mavi); color: var(--mavi); } /* Arama, 404, boş */ .nvr-ara { display: flex; gap: 8px; } .nvr-ara input { flex: 1; min-width: 0; min-height: 50px; padding: 12px 16px; border-radius: 999px; border: 1.5px solid var(--cizgi); font: inherit; background: #fff; } .nvr-ara input:focus { outline: none; border-color: var(--mavi); box-shadow: 0 0 0 4px rgba(37, 99, 214, .15); } .nvr-ara button { width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; } .nvr-arama-sonuc { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 840px; } .nvr-arama-sonuc li { padding: 18px 20px; border: 1px solid var(--cizgi); border-radius: 18px; } .nvr-arama-sonuc a { font-weight: 800; font-size: 1.1rem; text-decoration: none; color: var(--ink); } .nvr-arama-sonuc p { margin: .4em 0 0; font-size: .92rem; color: var(--soluk); } .nvr-404-menu { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .nvr-404-menu a { display: inline-block; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--cizgi); color: var(--ink); font-weight: 700; text-decoration: none; } .nvr-404-menu a:hover { border-color: var(--mavi); color: var(--mavi); } .nvr-bos { padding: 24px; border-radius: var(--r); background: var(--buz); } /* ---------- Footer ---------- */ .nvr-footer { position: relative; margin-top: clamp(24px, 4vw, 48px); background: linear-gradient(180deg, #0a2463 0%, var(--ink-3) 100%); color: #c5d3f1; font-size: .92rem; } .nvr-footer__dalga { position: absolute; left: 0; right: 0; top: -38px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C240 2 480-6 720 10s480 26 720 6v24z' fill='%230a2463'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .nvr-footer__ic { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: clamp(40px, 5vw, 64px); padding-bottom: 36px; } @media (min-width: 700px) { .nvr-footer__ic { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1060px) { .nvr-footer__ic { grid-template-columns: 1.25fr .8fr 1.1fr 1fr; gap: 40px; } } .nvr-footer p { margin: 0 0 1em; line-height: 1.7; } .nvr-footer a { color: #fff; text-decoration: none; } .nvr-footer a:hover { color: var(--turkuaz); } .nvr-footer .nvr-logo { margin-bottom: 16px; padding: 10px 14px; border-radius: 16px; background: #fff; } .nvr-footer .nvr-logo img { height: 46px; } .nvr-footer__baslik { color: #fff; font-size: .9rem; font-weight: 800; letter-spacing: .14em; margin: 4px 0 1.1em; } .nvr-footer__baslik::after { content: ""; display: block; width: 32px; height: 2px; margin-top: .7em; background: linear-gradient(90deg, var(--pembe), var(--turkuaz)); border-radius: 2px; } .nvr-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .nvr-footer__menu a { display: inline-flex; align-items: center; gap: 8px; padding: 3px 0; color: #dfe8fb; } .nvr-footer__menu a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--turkuaz); } .nvr-footer__iletisim span { display: inline-flex; align-items: flex-start; gap: 10px; } .nvr-footer__iletisim .nvr-i { margin-top: .25em; color: var(--turkuaz); } .nvr-footer__sosyal { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .nvr-footer__sosyal a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: 18px; transition: .2s; } .nvr-footer__sosyal a:hover { background: var(--pembe); border-color: var(--pembe); color: #fff; } .nvr-footer__alt { border-top: 1px solid rgba(255, 255, 255, .1); padding: 16px 0; font-size: .78rem; letter-spacing: .03em; } .nvr-footer__alt p { margin: 0; text-align: center; color: #9fb0d6; } .nvr-footer__alt a { margin-left: .5em; color: #fff; font-weight: 700; } /* Alt şerit: solda telif (yılı her yıl kendiliğinden), sağda Softcraft Creative imzası (13.10.2026) */ .nvr-footer__alt .nvr-kap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; } .nvr-footer__alt .nvr-kap > p { flex: 1 1 320px; text-align: left; } .nvr-footer__alt a.nvr-footer__imza { display: inline-flex; align-items: center; margin: 0; padding: 6px 0; opacity: .78; transition: opacity .2s ease; } .nvr-footer__alt a.nvr-footer__imza:hover, .nvr-footer__alt a.nvr-footer__imza:focus-visible { opacity: 1; } .nvr-footer__imza img { display: block; width: auto; height: 28px; } @media (max-width: 767px) { .nvr-footer__alt .nvr-kap { flex-direction: column; justify-content: center; } .nvr-footer__alt .nvr-kap > p { flex: 0 1 auto; text-align: center; } } /* Mobil hızlı iletişim çubuğu */ .nvr-yapiskan { display: none; } /* Alt iletişim çubuğu: telefonda (kit sayfalarıyla aynı kırılım ≤720). Yatay telefonda (kısa ekran) ekranın beşte birini kapatmasın diye yok. */ @media (max-width: 720px) and (min-height: 501px) { .nvr-yapiskan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 950; padding: 6px; border-radius: 20px; background: rgba(8, 29, 77, .97); box-shadow: 0 12px 32px -6px rgba(8, 29, 77, .38), 0 3px 10px rgba(8, 29, 77, .22), inset 0 1px 0 rgba(255, 255, 255, .07); /* backdrop-filter yok: Safari'de gölgeyle birlikte kenarda çizgi bırakıyordu */ } .nvr-yapiskan a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 14px; color: #fff; text-decoration: none; font-size: .72rem; font-weight: 700; min-height: 48px; justify-content: center; } .nvr-yapiskan a .nvr-i { font-size: 20px; } .nvr-yapiskan a.nvr-yapiskan__wa { background: var(--wa); } .nvr-yapiskan a:focus-visible { outline-color: var(--turkuaz); } .nvr-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } /* Işık kutusu */ .nvr-isik { padding: 0; border: 0; background: transparent; max-width: min(1100px, 94vw); max-height: 92vh; overflow: visible; } .nvr-isik::backdrop { background: rgba(8, 29, 77, .86); } .nvr-isik img { max-width: 100%; max-height: 86vh; border-radius: 18px; margin: 0 auto; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); background: #fff; } .nvr-isik__kapat { position: absolute; right: -6px; top: -54px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 22px; cursor: pointer; display: grid; place-items: center; } /* ---------- Duyarlı ---------- */ @media (max-width: 1060px) { .nvr-avantaj { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; } .nvr-avantaj li:nth-child(4)::before { display: none; } } @media (min-width: 768px) and (max-width: 1060px) { .nvr-avantaj { grid-template-columns: repeat(6, minmax(0, 1fr)); } .nvr-avantaj li { grid-column: span 2; } .nvr-avantaj li:nth-child(4) { grid-column: 2 / span 2; } .nvr-avantaj li:nth-child(5) { grid-column: 4 / span 2; } } @media (max-width: 899px) { .nvr-kahraman--medyali .nvr-kahraman__izgara, .nvr-kahraman--hizmet .nvr-kahraman__izgara, .nvr-kahraman--bilgi .nvr-kahraman__izgara, .nvr-kahraman--iletisim .nvr-kahraman__izgara { grid-template-columns: minmax(0, 1fr); } .nvr-kahraman__suslu { display: none; } .nvr-kahraman__medya { max-width: 440px; } .nvr-medya--dikey { max-width: 300px; } .nvr-medya--dikey .nvr-medya { max-height: 460px; } .nvr-cip--a { left: -8px; } .nvr-cip--b { right: -8px; } } @media (max-width: 767px) { :root { --baslik-y: 64px; } .nvr-logo img { height: 46px; } .nvr-logo__alt { font-size: .62rem; letter-spacing: .18em; } .nvr-avantaj { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 8px; } .nvr-avantaj li::before { display: none !important; } .nvr-avantaj li:last-child { grid-column: 1 / -1; } .nvr-avantaj .nvr-halka { width: 46px; height: 46px; font-size: 21px; } .nvr-kahraman__eylem .nvr-btn { flex: 1 1 auto; } .nvr-cip { display: none; } .nvr-bant__bas--yan { align-items: flex-start; } } @media (max-width: 420px) { .nvr-logo__alt { display: none; } .nvr-kahraman__baslik { font-size: clamp(1.6rem, 7.4vw, 2rem); } .nvr-btn { padding-inline: 1.1em; } } /* ---------- Hareket azaltma ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .nvr-btn:hover, .nvr-kart:hover, .nvr-yazi-kart:hover, a.nvr-karo:hover { transform: none; } .nvr-galeri__oge:hover img, .nvr-yt__bag:hover .nvr-yt__kapak { transform: none; } } /* Yazdırma */ @media print { .nvr-ucan, .nvr-baslik, .nvr-yapiskan, .nvr-footer, .nvr-bant--randevu, .nvr-bant--cagri, .nvr-yan, .nvr-kahraman__medya { display: none !important; } body { padding: 0; color: #000; } } /* ========================================================================== Ana sayfa hizmet vitrini (novarpoliklinik.com girişindeki dikey hizmet kartları) ========================================================================== */ .nvr-vitrin { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: clamp(36px, 5vw, 72px) 0 clamp(84px, 9vw, 120px); background: radial-gradient(120% 90% at 85% 0%, #1d4fb8 0%, var(--ink) 45%, var(--ink-3) 100%); } .nvr-vitrin__zemin { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .nvr-vitrin__zemin::before, .nvr-vitrin__zemin::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; } .nvr-vitrin__zemin::before { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; right: -12vw; top: -18vw; background: radial-gradient(circle, rgba(91, 195, 239, .55), transparent 70%); } .nvr-vitrin__zemin::after { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; left: -10vw; bottom: -16vw; background: radial-gradient(circle, rgba(224, 69, 123, .4), transparent 70%); } .nvr-vitrin__ust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: clamp(24px, 3.4vw, 40px); } .nvr-vitrin__metin { flex: 1 1 520px; min-width: 0; } .nvr-ust-baslik--koyu { color: #9fdcf6; } .nvr-vitrin__baslik { margin: 0; font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.6rem); line-height: 1.06; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; color: #fff; text-wrap: balance; } .nvr-vitrin__baslik span { font-weight: 500; color: var(--turkuaz); } .nvr-vitrin__slogan { margin: .8em 0 0; font-size: clamp(.98rem, .9rem + .3vw, 1.12rem); font-weight: 600; color: rgba(255, 255, 255, .86); } .nvr-vitrin__slogan span { white-space: nowrap; } .nvr-vitrin__slogan i { font-style: normal; color: var(--turkuaz); margin: 0 .35em; } .nvr-vitrin__eylem { display: flex; flex-wrap: wrap; gap: 12px; } .nvr-btn--pembe { background: linear-gradient(135deg, #f0628f, var(--pembe)); color: #fff; box-shadow: 0 14px 28px -14px rgba(224, 69, 123, .9); } .nvr-btn--pembe:hover, .nvr-btn--pembe:focus-visible { color: #fff; box-shadow: 0 18px 32px -14px rgba(224, 69, 123, 1); } .nvr-vitrin :focus-visible { outline-color: #9fdcf6; } .nvr-vitrin__liste { --kart-g: clamp(212px, 23vw, 286px); display: grid; grid-auto-flow: column; grid-auto-columns: var(--kart-g); gap: clamp(12px, 1.6vw, 20px); list-style: none; margin: 0 calc(-1 * var(--gut)); padding: 6px var(--gut) 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nvr-vitrin__liste::-webkit-scrollbar { display: none; } .nvr-vitrin__liste:focus-visible { outline: 2px solid #9fdcf6; outline-offset: 2px; border-radius: var(--r); } .nvr-vitrin__oge { scroll-snap-align: start; } .nvr-vitrin__kart { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--r); overflow: hidden; isolation: isolate; background: #12307c; color: #fff; text-decoration: none; box-shadow: 0 26px 40px -24px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .35s ease, box-shadow .35s ease; } .nvr-vitrin__kart picture, .nvr-vitrin__kart img { position: absolute; inset: 0; width: 100%; height: 100%; } .nvr-vitrin__kart img { object-fit: cover; transition: transform .6s ease; } .nvr-vitrin__kart::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 29, 77, 0) 42%, rgba(8, 29, 77, .55) 66%, rgba(8, 29, 77, .92) 100%); } .nvr-vitrin__yazi { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 20px 64px 20px 20px; } .nvr-vitrin__ad { font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); font-weight: 700; line-height: 1.25; } .nvr-vitrin__marka { font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .nvr-vitrin__ok { position: absolute; right: 16px; bottom: 20px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); font-size: 18px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .3s ease, transform .3s ease; } .nvr-vitrin__kart:hover, .nvr-vitrin__kart:focus-visible { color: #fff; transform: translateY(-6px); box-shadow: 0 34px 48px -24px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(159, 220, 246, .45); } .nvr-vitrin__kart:hover img, .nvr-vitrin__kart:focus-visible img { transform: scale(1.05); } .nvr-vitrin__kart:hover .nvr-vitrin__ok, .nvr-vitrin__kart:focus-visible .nvr-vitrin__ok { background: var(--pembe); border-color: var(--pembe); transform: translateX(2px); } .nvr-vitrin__kontrol { display: flex; align-items: center; gap: 10px; margin-top: clamp(18px, 2.4vw, 28px); } .nvr-vitrin__dugme { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; background: var(--turkuaz); border: 0; color: var(--ink-3); font-size: 20px; box-shadow: 0 10px 20px -10px rgba(91, 195, 239, .9); transition: transform .2s ease, opacity .2s ease, background-color .2s ease; } .nvr-vitrin__dugme:hover { transform: scale(1.06); background: #7fd2f4; } .nvr-vitrin__dugme[disabled] { opacity: .35; cursor: default; transform: none; } .nvr-vitrin__ilerleme { flex: 1 1 auto; height: 3px; margin-left: 8px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; } .nvr-vitrin__ilerleme span { display: block; width: 30%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pembe), var(--turkuaz)); transform-origin: left; transition: width .2s ease, margin-left .2s ease; } .nvr-vitrin__avantaj { position: relative; z-index: 2; margin-top: clamp(-64px, -6vw, -44px); } .nvr-vitrin__avantaj .nvr-avantaj { margin-top: 0; background: #fff; box-shadow: 0 24px 44px -26px rgba(8, 29, 77, .55); } @media (max-width: 759px) { .nvr-vitrin { padding-top: 28px; padding-bottom: 76px; } .nvr-vitrin__ust { margin-bottom: 20px; } .nvr-vitrin__eylem { display: none; } /* mobilde alttaki sabit Ara / WhatsApp / Randevu çubuğu var */ .nvr-vitrin__liste { --kart-g: 62vw; } .nvr-vitrin__kart { aspect-ratio: 3 / 4; } .nvr-vitrin__yazi { padding: 16px 56px 16px 16px; } .nvr-vitrin__ok { right: 12px; bottom: 16px; width: 34px; height: 34px; font-size: 16px; } .nvr-vitrin__slogan i { display: none; } .nvr-vitrin__slogan span { display: block; } } @media (prefers-reduced-motion: reduce) { .nvr-vitrin__kart, .nvr-vitrin__kart img, .nvr-vitrin__ok { transition: none; } .nvr-vitrin__kart:hover, .nvr-vitrin__kart:hover img { transform: none; } } /* Açılır menü: tüm maddeler büyük harf (tr: i→İ doğru dönüşür; html lang="tr") */ .nvr-ucan__liste a { text-transform: uppercase; letter-spacing: .015em; } /* reCAPTCHA v3 rozeti (canlıda CF7): mobil alt çubuğun yanına taşmasın; Google koşulu gereği formlarda yazılı bildirim var (.nvr-qf__recaptcha) */ /* reCAPTCHA rozeti: görünmez (Google koşulu: formlarda yazılı bildirim var) VE ekranın içinde — Google onu right:-186px ile ekran dışına koyar; iOS Safari sabit (fixed) öğeleri sayfa genişliğine katıp sayfayı uzaklaştırabiliyor. */ .grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important; transition: none !important; pointer-events: none !important; } .nvr-qf__recaptcha { font-size: 12px !important; line-height: 1.5 !important; color: #6b7799 !important; margin: 10px 0 0 !important; } .nvr-qf__recaptcha a { color: inherit !important; text-decoration: underline !important; } /* iOS Safari: body'deki overflow-x görünüm alanına aktarılınca yatay taşmayı durdurmuyor; html'e de clip verilince body kendi taşmasını kırpar (clip kaydırma kabı oluşturmaz → yapışkan başlık bozulmaz). */ @supports (overflow: clip) { html { overflow-x: clip; } } /* Yapışkan başlığın çocukları (kapsüle taşınan düğmeler) geçiş sırasında bile sayfayı yatay genişletmesin (yan çevirince iOS uzaklaşması) */ @supports (overflow: clip) { .nvr-baslik { overflow-x: clip; } } /* Şeffaf çerçeveli renk geçişli düğmelerde sol/üst kenarda koyu şerit (degrade çerçeve altında tekrarlıyordu) */ .nvr-btn, .nvr-rf .nvr-btn, .nvr-yb-cta .nvr-btn { background-origin: border-box; }