/* ===== Okanlaw – WCAG 2.2 AA fixes ===== 1) Skip link 2) Visible keyboard focus 3) Contrast 4) Target size 5) SR-only helper */ /* 5) Screen-reader-only text */ .screen-reader-text,.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* 1) Skip link – hidden until focused (WCAG 2.4.1) */ .okan-skip-link{position:absolute;left:8px;top:-100px;z-index:100000;padding:12px 18px;background:#1c1b18;color:#fff;font:600 16px/1 sans-serif;border-radius:0 0 6px 6px;text-decoration:none;transition:top .15s} .okan-skip-link:focus{top:0;outline:3px solid #f4d35e;outline-offset:2px} /* 2) Keyboard focus ring – parent theme removes outlines; restore for keyboard users only (WCAG 2.4.7 / 2.4.11) */ :where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid #1c1b18!important;outline-offset:3px!important;box-shadow:0 0 0 6px #fff!important;border-radius:2px} .pxl-header :where(a,button):focus-visible,.pxl-header-sticky :where(a,button):focus-visible{outline-color:#fff!important;box-shadow:0 0 0 6px #1c1b18!important} :focus:not(:focus-visible){outline:none} /* 3) Contrast (WCAG 1.4.3) – brand teal #00ad9f is KEPT everywhere. White text only needs a darker surface where it sits: the navigation gets a deep-teal pill (#087f75 -> white text 4.9:1). */ :root{--okan-teal:#00ad9f;--okan-teal-deep:#087f75;--okan-yellow:#f4d35e;--okan-ink:#1c1b18} /* Main header: the inner section that holds the menu (EN c515ec2 / TR 1bac0fd) becomes a pill */ .pxl-header-main .elementor-element-c515ec2,.pxl-header-main .elementor-element-1bac0fd{background-color:var(--okan-teal-deep)!important;border-radius:999px} .pxl-header-main .elementor-element-c515ec2>.elementor-container,.pxl-header-main .elementor-element-1bac0fd>.elementor-container{padding-left:28px;padding-right:20px} /* Sticky header: menu sits straight on the teal bar -> give the menu list its own pill */ /* Small teal text on white (section subtitles) cannot reach 4.5:1 with #00ad9f (2.8:1) -> deep teal for those few labels only */ .heading-subtitle,.heading-subtitle span,.pxl-heading-wrap .heading-subtitle{color:var(--okan-teal-deep)!important} /* Yellow buttons: keep the yellow, ink text (11.8:1) */ .wpcf7-submit,.wpcf7-submit span,.pxl-button-wrapper .btn-text,.mailchimp-form button,.elementor-button.okan-yellow{color:var(--okan-ink)!important} .mailchimp-form button,.wpcf7-submit{background:var(--okan-yellow)!important;border-color:var(--okan-yellow)!important} /* Links inside body text: underline so colour is not the only cue (1.4.1) */ .pxl-main p a:not(.elementor-button):not(.btn){text-decoration:underline;text-underline-offset:2px} /* 4) Target size ≥ 24×24 CSS px (WCAG 2.5.8) */ .pxl-header a,.pxl-header-sticky a,.pxl-footer a,.social-links a,.pxl-social a,.slick-arrow,.slick-dots li button,.pxl-nav-menu a{min-width:24px;min-height:24px} .slick-dots li button{width:24px;height:24px} /* Reduced motion: respect OS setting (2.3.3) */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.pxl-page-overlay,#pxl-loadding{display:none!important}} /* Footer "quick contact" block sits on brand teal: yellow labels (3.3:1) and light-grey links (3.45:1) -> white (4.9:1) + underline (WCAG 1.4.3 / 1.4.1) */ #pxl-footer .color-primary{color:#fff!important} #pxl-footer .pxl-text-editor a,#pxl-footer a[href^="mailto:"],#pxl-footer a[href^="tel:"]{color:#fff!important;text-decoration:underline;text-underline-offset:2px} #pxl-footer .pxl-text-editor a:hover,#pxl-footer a[href^="mailto:"]:hover,#pxl-footer a[href^="tel:"]:hover{color:var(--okan-yellow)!important} /* "Quick contact" block (Elementor section 4060907, EN+TR home) sits on brand teal: yellow labels and light-grey links fail 4.5:1 -> white + underline */ .elementor-element-4060907 .color-primary{color:#fff!important} .elementor-element-4060907 a[href^="mailto:"],.elementor-element-4060907 a[href^="tel:"],.elementor-element-4060907 .pxl-text-editor a{color:#fff!important;text-decoration:underline;text-underline-offset:2px} .elementor-element-4060907 a[href^="mailto:"]:hover,.elementor-element-4060907 a[href^="tel:"]:hover{color:var(--okan-yellow)!important} .elementor-element-4060907 p,.elementor-element-4060907 .elementor-button-text,.elementor-element-4060907 .elementor-button{color:#fff!important} /* ===== Header design refinements (client request, 15 Sep 2026) ===== */ /* a) No white underline bars under menu items (theme draws them with li::before on current/hover items) */ .pxl-header-main .pxl-nav-menu-main ul.pxl-primary-menu > li::before,.pxl-header-sticky .pxl-nav-menu-main ul.pxl-primary-menu > li::before,.pxl-header-main .pxl-nav-menu-main ul.pxl-primary-menu > li > a::after,.pxl-header-sticky .pxl-nav-menu-main ul.pxl-primary-menu > li > a::after{display:none!important} /* b) Compact menu rows (64px) so the pill is 72px tall, then centre the pill on the logo (logo centre = 90px from top) */ .pxl-header-main .pxl-nav-menu-main ul.pxl-primary-menu > li > a{line-height:64px!important;height:64px!important} .pxl-header-main .pxl-nav-menu-main ul.pxl-primary-menu > li{margin-top:4px!important;margin-bottom:4px!important;height:auto!important} .pxl-header-main .pxl-nav-menu-main ul.pxl-primary-menu{height:auto!important} .pxl-header-main .elementor-element-c515ec2,.pxl-header-main .elementor-element-1bac0fd{margin-top:-6px!important;margin-bottom:0!important;min-height:72px} .pxl-header-main .elementor-element-c515ec2 > .elementor-container,.pxl-header-main .elementor-element-1bac0fd > .elementor-container{align-items:center} /* c) Sticky header: centre the menu items inside the pill */ /* d) Header-to-hero gap: EN home (Elementor canvas template) carried a leftover 73px margin from the old taller menu; trimmed to a small safe value (not 0 -- avoids any overlap risk from font-metric differences across browsers/OS). TR home uses a DIFFERENT page template (not the Elementor canvas) where this margin does not apply and the existing gap is unrelated to the header height, so it is left untouched pending a design review. */ /* No MARGIN (that showed as a white strip -- margin sits outside the section, exposing the page's white background). Section touches the header directly; breathing room for the heading comes from PADDING inside the section instead, which is filled by the hero photo. */ #pxl-main .elementor-top-section:first-of-type, #pxl-content-main .elementor-top-section:first-of-type{margin-top:0!important} #pxl-main .elementor-top-section:first-of-type > .elementor-container > .elementor-column > .elementor-widget-wrap, #pxl-content-main .elementor-top-section:first-of-type > .elementor-container > .elementor-column > .elementor-widget-wrap{padding-top:104px!important} /* ===== Fix: awkward "tweener" zone 1200-1359px where the desktop pill menu shows but doesn't fit (wraps to 2 rows). Instead of shrinking text to squeeze it in, push the theme's own desktop<->mobile breakpoint (Bootstrap xl = 1200px) up to 1360px, so the clean mobile/hamburger header takes over slightly earlier instead of an ugly half-broken desktop menu. (Client-reported bug, 16 Sep 2026.) */ @media (min-width:1200px) and (max-width:1359.98px){ .pxl-header-main.d-none.d-xl-block, .pxl-header-sticky.d-none.d-xl-block{display:none!important} .pxl-header-mobile.d-xl-none{display:flex!important} } /* Footer (site-wide, both language templates): white text on brand teal #00ad9f fails 4.5:1 (2.8:1). Darken the footer's own background to the same deep teal used in the header pill; text stays white. */ /* Footer zemini marka tonuna dondu (musteri: nav menudeki turkuaz marka rengimiz, daha koyu turkuaz kullanmayalim). NOT: beyaz yazi bu ton uzerinde 2.81:1 kaliyor, WCAG AA metin siniri 4.5:1. Cozumu tek satir: footer yazisini #1c1b18 yapmak (6.13:1). */ #pxl-footer{background-color:var(--okan-teal)!important} #pxl-footer .elementor-element-3292f75,#pxl-footer .elementor-element-eeea31f,#pxl-footer .elementor-element-9fd3f8a{background-color:var(--okan-teal)!important} /* Sticky header: JS sets the outer container's height equal to the pill's own height (72px), leaving no breathing room -- unlike the normal header, where the taller logo row keeps the pill vertically centred with visible teal space above/below. Give the sticky container the same padding so both states match. */ /* Sticky bar: no padding (the container's own background is white, so any padding shows as a white band above/below the teal bar). The inner Elementor section carries the brand teal and the pill. */ /* Match the normal header's compact rows: the sticky menu links default to a 100px line-height, which made the dark pill much taller than the one in the un-scrolled header. */ .pxl-header-sticky,.pxl-header-mobile-sticky{transition-duration:.12s!important} /* The sticky bar and its children use `transition: all`, which includes `visibility`. Because the bar is `visibility:hidden` until it slides in, the menu text and button labels stayed invisible for the whole transition -- the bar appeared with empty labels for a moment. Limit the transition to the properties that should actually animate, so visibility (and therefore the text) switches instantly. */ .pxl-header-sticky,.pxl-header-mobile-sticky, .pxl-header-sticky *,.pxl-header-mobile-sticky *{transition-property:transform,color,background-color,border-color!important} /* Reviews carousel glides continuously (see carousel-a11y.js); linear easing keeps the drift even. */ .elementor-element-b13d07d .swiper-wrapper,.elementor-element-ca9757a .swiper-wrapper{transition-timing-function:linear!important} /* ===== Reviews carousel: cleaner look (client request, 16 Sep 2026) ===== a) A CSS mask fades the cards themselves as they enter on the right and leave on the left. A mask dims every child, so carousel-a11y.js moves the arrows OUT of the masked container first (they sit in .okan-carousel-arrows alongside it) -- otherwise the arrows faded too. */ .elementor-element-b13d07d .elementor-image-carousel-wrapper, .elementor-element-ca9757a .elementor-image-carousel-wrapper{ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%)} /* b) Arrows: hidden until hover/keyboard focus (kept for WCAG 2.2.2 - the only focusable way to stop the motion). Their new wrapper overlays the carousel without being masked. */ .okan-carousel-arrows{position:absolute;inset:0;pointer-events:none;z-index:5} /* Elementor positions the arrows with selectors scoped to the carousel wrapper, so moving them out of it dropped them into the top-left corner. Re-apply the left/right centring on the new wrapper. */ .okan-carousel-arrows .elementor-swiper-button{pointer-events:auto;opacity:0;transition:opacity .25s ease; position:absolute;top:50%;transform:translateY(-50%);margin:0; display:flex;align-items:center;justify-content:center} .okan-carousel-arrows .elementor-swiper-button-prev{left:0;right:auto} .okan-carousel-arrows .elementor-swiper-button-next{right:0;left:auto} .elementor-element-b13d07d:hover .okan-carousel-arrows .elementor-swiper-button, .elementor-element-ca9757a:hover .okan-carousel-arrows .elementor-swiper-button, .okan-carousel-arrows .elementor-swiper-button:focus-visible, .elementor-element-b13d07d:focus-within .okan-carousel-arrows .elementor-swiper-button, .elementor-element-ca9757a:focus-within .okan-carousel-arrows .elementor-swiper-button{opacity:1} /* ===== Services / case-study cards: equal height (client request, 16 Sep 2026) ===== grid-equal-height.js equalises the outer .grid-item-inner, but the visible card is .inner-box, which was still sized by its own text. Stretch the inner layers so the visible frame fills the equalised height and the "Read more" link sits at the bottom of every card. */ .pxl-grid-masonry .grid-item-inner{display:flex;flex-direction:column} .pxl-grid-masonry .grid-item-inner > .inner-box{flex:1 1 auto;display:flex;flex-direction:column} .pxl-grid-masonry .inner-box > .item-content{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center} /* ===== Avukatlar bolumu: "Read More" / "Daha Fazla" butonlarini ayni hizaya al (16 Eyl 2026) ===== Kartlar Elementor kolonu; kolonlar zaten esit yukseklikte (stretch), ama buton metnin hemen ardindan geldigi icin her kartta farkli yukseklikte kaliyordu (olculen fark: 121px). .elementor-widget-wrap varsayilan olarak row + wrap; bu durumda margin-top:auto satir icinde calisir, kapsayicinin altina itmez. Bu yuzden once sutun yonune ceviriyoruz. 7fd6bb9 = EN anasayfa avukatlar bolumu, 521e4af = TR karsiligi. */ .elementor-element-7fd6bb9 > .elementor-container > .elementor-column > .elementor-widget-wrap, .elementor-element-521e4af > .elementor-container > .elementor-column > .elementor-widget-wrap{ flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-content:stretch} .elementor-element-7fd6bb9 > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget, .elementor-element-521e4af > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget{ width:100%} /* Buton en alta: ustundeki bosluk esnek, boylece tum kartlarda ayni satirda durur. */ .elementor-element-7fd6bb9 > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-button, .elementor-element-521e4af > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-button{ margin-top:auto} /* Buton kartin alt kenarina yapismasin. */ .elementor-element-7fd6bb9 > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-button, .elementor-element-521e4af > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-button{ padding-bottom:28px} /* Kartlar arasi bosluk: Elementor verisinde her kart farkli ayarlanmisti. EN: 1. kart sag bosluk 0 + 2. kart sol bosluk 0 -> ilk iki kart birlesik gorunuyordu (2-3 arasi 10px, 3-4 ve 4-5 arasi 5px). TR: her kartta yalnizca 5px sol bosluk. Ikisini de ayni degere sabitliyoruz: her iki yanda 5px -> kartlar arasi 10px, iki dilde ayni. */ .elementor-element-7fd6bb9 > .elementor-container > .elementor-column > .elementor-widget-wrap, .elementor-element-521e4af > .elementor-container > .elementor-column > .elementor-widget-wrap{ margin-left:5px;margin-right:5px} /* Avukat fotograflari: img etiketlerinde width/height yok, bu yuzden gorsel yuklenene kadar kart cokuyor, yuklenince de sayfa zipliyordu (hizalama da bu yuzden kayiyordu). aspect-ratio ile yer bastan ayriliyor: yerlesim gorsel yukune bagli olmaktan cikiyor. object-fit:cover, temanin uyguladigi "fill" (yani goruntuyu kareye esnetme) yerine oranini koruyarak kutuyu doldurur. */ .elementor-element-7fd6bb9 .elementor-widget-image img, .elementor-element-521e4af .elementor-widget-image img{ width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center top} /* ===== Navigasyon menusu: hover / klavye odagi efekti (16 Eyl 2026) ===== Menude hicbir hover geri bildirimi yoktu. Efekt secilirken kisit: menunun YATAY olcusu degismemeli -- linklere padding eklemek satiri tasirir ve sari "RANDEVU AL" butonu alt satira duser (bu hata daha once yasandi). Bu yuzden yer kaplamayan bir alt cizgi kullaniliyor: etiketin altinda ortadan acilan 2px'lik sari (marka rengi) bir cizgi. Secicilerde sinif kullaniliyor -> EN + TR, normal + sticky header'in dordu de kapsaniyor. */ .pxl-header-main .pxl-nav-menu-main ul.pxl-primary-menu > li > a .pxl-menu-title, .pxl-header-sticky .pxl-nav-menu-main ul.pxl-primary-menu > li > a .pxl-menu-title{ position:relative} .pxl-header-main .pxl-nav-menu-main ul.pxl-primary-menu > li > a .pxl-menu-title::after, .pxl-header-sticky .pxl-nav-menu-main ul.pxl-primary-menu > li > a .pxl-menu-title::after{ content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px; background:var(--okan-yellow);pointer-events:none; transform:scaleX(0);transform-origin:center; transition:transform .28s cubic-bezier(.2,.7,.3,1)} /* Fare li'nin uzerindeyken VE acilir menude gezinirken cizgi acik kalir; boylece hangi ust baslıgin menusunun acik oldugu belli olur. :focus-within klavyeyle gezinmeyi de kapsar. */ .pxl-header-main .pxl-nav-menu-main ul.pxl-primary-menu > li:hover > a .pxl-menu-title::after, .pxl-header-main .pxl-nav-menu-main ul.pxl-primary-menu > li:focus-within > a .pxl-menu-title::after, .pxl-header-sticky .pxl-nav-menu-main ul.pxl-primary-menu > li:hover > a .pxl-menu-title::after, .pxl-header-sticky .pxl-nav-menu-main ul.pxl-primary-menu > li:focus-within > a .pxl-menu-title::after{ transform:scaleX(1)} /* Acilir menusu olan basliklarda ok isareti donsun (menunun acildigini gosterir). */ .pxl-header-main .pxl-nav-menu-main li.menu-item-has-children > .main-menu-toggle::before, .pxl-header-sticky .pxl-nav-menu-main li.menu-item-has-children > .main-menu-toggle::before{ transition:transform .28s cubic-bezier(.2,.7,.3,1)} .pxl-header-main .pxl-nav-menu-main li.menu-item-has-children:hover > .main-menu-toggle::before, .pxl-header-main .pxl-nav-menu-main li.menu-item-has-children:focus-within > .main-menu-toggle::before, .pxl-header-sticky .pxl-nav-menu-main li.menu-item-has-children:hover > .main-menu-toggle::before, .pxl-header-sticky .pxl-nav-menu-main li.menu-item-has-children:focus-within > .main-menu-toggle::before{ transform:rotate(180deg)} /* Acilir menu satirlari: beyaz zeminde metin #1e1e1e -> koyu turkuaz (#087f75 beyaz uzerinde 4.9:1, WCAG 1.4.3 AA). Kucuk bir kayma ile hangi satirda olundugu ayrica belli olur. */ .pxl-header-main .pxl-nav-menu-main .sub-menu > li > a, .pxl-header-sticky .pxl-nav-menu-main .sub-menu > li > a{ transition:color .2s ease,transform .2s ease} .pxl-header-main .pxl-nav-menu-main .sub-menu > li > a:hover, .pxl-header-main .pxl-nav-menu-main .sub-menu > li > a:focus-visible, .pxl-header-sticky .pxl-nav-menu-main .sub-menu > li > a:hover, .pxl-header-sticky .pxl-nav-menu-main .sub-menu > li > a:focus-visible{ color:var(--okan-teal-deep);transform:translateX(3px)} /* Sari CTA butonu da ayni dili konussun: hafif koyulasma + 1px yukselme. Yalnizca header'daki butona uygulanir; sayfa icindeki butonlar etkilenmez. */ .pxl-header-main .elementor-widget-button .elementor-button, .pxl-header-sticky .elementor-widget-button .elementor-button{ transition:filter .2s ease,transform .2s ease} .pxl-header-main .elementor-widget-button .elementor-button:hover, .pxl-header-main .elementor-widget-button .elementor-button:focus-visible, .pxl-header-sticky .elementor-widget-button .elementor-button:hover, .pxl-header-sticky .elementor-widget-button .elementor-button:focus-visible{ filter:brightness(.93);transform:translateY(-1px)} /* Hareketi azaltilmis tercihi: durum yine gorunur, sadece animasyon yok (WCAG 2.3.3). */ @media (prefers-reduced-motion:reduce){ .pxl-header-main .pxl-nav-menu-main ul.pxl-primary-menu > li > a .pxl-menu-title::after, .pxl-header-sticky .pxl-nav-menu-main ul.pxl-primary-menu > li > a .pxl-menu-title::after, .pxl-header-main .pxl-nav-menu-main li.menu-item-has-children > .main-menu-toggle::before, .pxl-header-sticky .pxl-nav-menu-main li.menu-item-has-children > .main-menu-toggle::before, .pxl-header-main .pxl-nav-menu-main .sub-menu > li > a, .pxl-header-sticky .pxl-nav-menu-main .sub-menu > li > a, .pxl-header-main .elementor-widget-button .elementor-button, .pxl-header-sticky .elementor-widget-button .elementor-button{transition:none} .pxl-header-main .pxl-nav-menu-main .sub-menu > li > a:hover, .pxl-header-sticky .pxl-nav-menu-main .sub-menu > li > a:hover{transform:none} .pxl-header-main .elementor-widget-button .elementor-button:hover, .pxl-header-sticky .elementor-widget-button .elementor-button:hover{transform:none} } /* Bulten formu mobilde ekrana sigmiyordu. Iki ayri sebep vardi: 1) Formun kendi kodunda mobil icin "padding-left:50px" ve sabit 220px genislikler (form 900'de duzeltildi); 2) Elementor widget'inda masaustu hizasi icin verilmis sol bosluk (TR footer'da 60px padding + 10px margin, EN'de 5px margin) mobilde de uygulanip blogu saga itiyordu. Mobilde bu bosluklari sifirla ve blogu ortala. Masaustu etkilenmez. */ @media (max-width:600px){ #pxl-footer .elementor-element-6900ed2 > .elementor-widget-container{ padding-left:0;padding-right:0;margin-left:0;margin-right:0} #pxl-footer .elementor-element-6900ed2 .mailchimp-form{margin-left:auto;margin-right:auto} } /* Bulten alani mobilde: MC4WP form 900'un kendi kodunda alanlar satir ici "width:220px" ile sabit. Formun icerigine DOKUNULMADI (bir denemede masaustu duzenini bozdu, geri alindi) -- sadece mobilde satir ici olcuyu ezip alanlari tam genislige ve ortaya aliyoruz. !important zorunlu: satir ici stil normal kurallarla ezilemez. font-size:16px -> iOS alana dokununca sayfayi zoomlamaz. Masaustu ve tablet etkilenmez (kural yalnizca <=600px). */ @media (max-width:600px){ #pxl-footer .mailchimp-form{ display:flex;flex-direction:column;align-items:center;gap:10px} #pxl-footer .mailchimp-form input[type="email"], #pxl-footer .mailchimp-form button{ width:100%!important;max-width:300px} #pxl-footer .mailchimp-form input[type="email"]{font-size:16px} } /* Formun kendi